SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Photoshop Web Design

    I've been looking into using photoshop to start designing entire sites, like the ones at templatemonster.com. I can come up with a good comp, but I am confused as to how to turn it into a liquid design that flows with different resolutions. I understand slicing, but I think it's the tables that are geting me. And also, should I be using HTML slices for my text? Thanks for your help!
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  2. #2
    Fully Qualified Fool :) luke-innovative's Avatar
    Join Date
    Jun 2002
    Location
    Kent, UK
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I recently started to what you just explained. The way I do is to create the image, then use slices for the gaps, and then when I put it into html delete the blank images and enter my text. Wether this is the right way or not, I don't know, but that's how I did My Site

    Hope that helps
    Luke
    Luke-Martin.com (work in progress) :: Independent Web Designer's Portal
    Freelance Forums :: Sign Up Here
    "What happens if you get scared half to death twice?"

  3. #3
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    And also, should I be using HTML slices for my text
    Almost always NO!!

    The only occasions where you might want to do this is where you want a specific "look" for a header or title - and if you do ensure that you provide "alt" text so non-graphical browsers have a clue what is going on.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  4. #4
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow...I was under the impression that "real" text would be better due to load times/search engines etc. Luke- I like your site's design, it's very simple and easy to work with.
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  5. #5
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Back-up, back-up. By "html-slices" I thought you meant sliced images placed with HTML. You should try and use "html" (actually xhtml) for text whenever you can - always if possible. Occassionally to maintain a corporate image you may need to use an image (ie logo), and in those cases you should ensure accessibility is considered.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  6. #6
    Fully Qualified Fool :) luke-innovative's Avatar
    Join Date
    Jun 2002
    Location
    Kent, UK
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jim.

    H, is the way I said ok to do?!?
    Luke
    Luke-Martin.com (work in progress) :: Independent Web Designer's Portal
    Freelance Forums :: Sign Up Here
    "What happens if you get scared half to death twice?"

  7. #7
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Honestly, I'm not sure what you mean by "gaps".
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  8. #8
    SitePoint Addict
    Join Date
    May 2002
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If all you care about is creating "quick and easy" sites, Photoshop's ImageReady component is all you need ... just slice the image up like you want to and export (save as) html and slices.

    I use this feature regularly for quick site mockups for clients.

  9. #9
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick and easy sites are not exactly what I'm looking for. I'm just looking for an easy way to develop layouts and interfaces and have them function correctly in a web page. I know a lot of templates I've seen make use of a spacer image and table background images...I just find it hard to know how to perfectly slice the image and what to do with each part. There has to some kind of proven method out there. Thanks.
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  10. #10
    SitePoint Addict
    Join Date
    May 2002
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can still use ImageReady to do what you're looking for ... the only thing is if you worry about code validation and stuff you'll have to do some extra work ... however, if not, there's no reason why ImageReady won't do the job ... that's what it's made for.

    I usually develop with GoLive, ImageReady/Photoshop where I'll do my slicing in ImageReady, pop the page into GoLive, get rid of the ImageReady code tags (I've found them problematic in GoLive sometimes), get rid of my text area only "images" that came in as slices and you're more or less ready to go with a working template page.

  11. #11
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by luke-innovative
    Thanks Jim.

    H, is the way I said ok to do?!?
    Luke, it's not bad - the site looks great - but it's not "optimal" or coded to standards. Many people don't care, but there are issues with not doing so. A few things you could do (and this isn't a site review - more a "best practice" rundown).

    1: Start using lowercase for all tags <HTML> was deprecated a long time ago now.

    2: Put all attributes in quotes <p class="myclass"> rather than <P CLASS=myclass>

    3: Close all tags - no exceptions. To close tags that don't ordinarily have a closing tag (<br> <hr> <input> <meta> etc), use this format <br /> <hr /> etc. Basically a space and a forward slash before closing the tag.

    4: Ensure that all your images have "alt" text. Lack of it causes accessibility issues.

    5: Lose the <font> tags. They are really clogging up your code. For what you're doing .css can comfortably be used, and remain compatible even with NS4* browsers. It looks like you're comfortable with it as you're using it elsewhere, but if you need any refreshers, as always, www.w3schools.com/css/ is a top resource.

    6: You are relying of JavaScript for navigation. Not only that but it isn't cross browser compatible. I'm using Mozilla (which is what the AOL engine will be based on remember), and while I thought the site looked lovely, I presumed it was unfinished until I looked at the code and then cracked open IE. Try to find yourself a more cross-browser solution and/or have an alternative way of navigating.

    7: Now getting to the coding and slicing.....

    Often you will get a much cleaner design coding yourself. Allowing Adobe or MM products to approximate from images will result in bulky code. That's not to say you have to crack open notepad. Take a look at your finished design, then draw (on paper), how you envisage the various elements can be "held" by a table. You can then create that table in (for example) DreamWeaver, and whack into it only the elements/graphics that are absolutely neccesary (sliced from the main image). You will find you can clean your code (and overhead) up immensly...

    Sorry, there is a bit of a "reviewy" element there, I know that isn't entirely what was asked for, but am in a thorough mood

    [edit]
    Looking at it again, it's evident that your software is producing the dodgy code (<td COLSPAN=2 valign="top" background="images/Innovative_03.gif"> <br>
    ) - there is a mix of good (I presume yours) and iffy stuff in there...
    Last edited by TheOriginalH; Sep 17, 2002 at 01:59.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  12. #12
    Fully Qualified Fool :) luke-innovative's Avatar
    Join Date
    Jun 2002
    Location
    Kent, UK
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, there is a bit of a "reviewy" element there, I know that isn't entirely what was asked for, but am in a thorough mood
    nah man, thats exactly what i wanted

    I did actually tried to make it XHTML compliant when I first made it, but because of the way DW did all of the code, it seemed to be too much hassle (lowercase tags, alt etc. etc.) so I didn't bother.

    I might take your advice and just use the necessary images and code it myself though. I'll change that navigation aswell . I think if I just put all of the links in the one nav bar, it would clutter it up and look messy though, if anyone has any suggestions, i'd be really grateful.


    Thanks again
    Luke
    Luke-Martin.com (work in progress) :: Independent Web Designer's Portal
    Freelance Forums :: Sign Up Here
    "What happens if you get scared half to death twice?"

  13. #13
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have seen some good scripts that work cross-browser and give the sub-menu on hover. If you employed them, then made the clicking of the "main" link open sub-menu in your content area you'd get round the problem with minimum change to design...
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  14. #14
    Fully Qualified Fool :) luke-innovative's Avatar
    Join Date
    Jun 2002
    Location
    Kent, UK
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k cheers, I'll have a look around
    Luke
    Luke-Martin.com (work in progress) :: Independent Web Designer's Portal
    Freelance Forums :: Sign Up Here
    "What happens if you get scared half to death twice?"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •