SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot Para's Avatar
    Join Date
    Mar 2005
    Location
    London UK
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the process? PSD to XHTML / CSS Design

    Hi i want to start coding my PSD webdesigns instead of outsourcing, but from what im aware of photoshop only exports as tables and not div's, i maybe wrong here.

    Anyhow i know how to slice my template PSD, but i need to no what the next steps are to make the design a full xhtml / css design, is it a matter of creating the css manually? this is where i become confused.

    If anyone can point me in the right direction id much apprciate it, this will save me so much money and help my whole work process in many differnt ways.

    Sorry if this has been posted before.

    Thanks

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML and CSS are separate languages, yet inter-twined in an odd (yet symbiotic) relationshilp with one another. If you know how to code HTML, then CSS will be a snap.

    Newer versions of Photoshop will allow you to export your designs using CSS, but the resulting code is very messy, and uses a lot of un-needed DIVs.

    Ironically, the best solution is to learn how to code with these two languages. I suggest (for how) HTML, XHTML and CSS Visual Quickstart Guide, Sixth Edition by Elizabeth Castro and (for why) Designing with Web Standards, 2nd Edition by Jeffery Zeldman.

    Both books are written in plain, conversational language and cater to the average person, rather than the "tech head" or "geek" - Castro's book even uses images to show how the code should look as well as what the end result will be when viewed in a browser. Zeldman's book deals more with why we should code to Web standards, using lean and mean code.

    As deathshadow (one of the forum members here) is fond of saying, people tend to "over-think" their solutions. These two books will help prevent (or cure) that problem. And like HTML and CSS, these two books work very well together, and have a rather (this time it's not odd) symbiotic relationship with each other as far as the quality of the product.

    Try checking them out at your public library.

    I'd like to tell you how to use CS2 to export your design with CSS, but sadly, I don't have it (I have Photoshop 7). I'm hoping to get my hands on it though, because it will finally give me a valid excuse to buy Corrie Haffly's book The Photoshop Anthology.

  3. #3
    SitePoint Zealot Para's Avatar
    Join Date
    Mar 2005
    Location
    London UK
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dan, i have CS2 so ill look into that how it handles exporting CSS.

    Also im certainly going to grab a copy of them books, i understand how to code CSS designs, but not intricatly like i wish, and some designs i have are complicated and i just wouldnt no how to a seemless look.

    Do you code websites from PDS's? and if so what is your process in simple terms ie:

    PSD >> SLICE >> EXPORT AS ? >> RE-CREATE DIVS?

    My process at the moment is

    PSD >> SLICE >> ?

    Thanks again for your input, im going to get my head around this

    EDIT: i just looked in CS2, i dont see any export CSS? im going to do some googling on this

  4. #4
    SitePoint Zealot Para's Avatar
    Join Date
    Mar 2005
    Location
    London UK
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just see your post here http://www.sitepoint.com/forums/show...54&postcount=6

    This explains alot for me.

    2 questions

    Do you overlap DIV's?

    How do you determine DIV position with CSS?

    Thanks again for your time

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Location
    Rubyvale, Queensland
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to butt in Dan but another possible suggestion.

    Mysuggestion, which I have used is to set your ruler guides for the slicing in Photoshop, then have the image open in Image Ready.

    You can then slice the images with the slice tool (the knife 2nd down on the left of the toolbar.

    Click on file>output settings and click on generate CSS. You can then change the option of whether the CSS is inline, ID, or CLASS.

    Click on file>save optimise as and follow the prompts from there.

    Save as html and images files. This will give you an html file with the slices in div's and the CSS code.

    It will at least give you a good starting ppoint and you can always just move the CSS to an external file if required later.

    Hope this helps a bit.

  6. #6
    SitePoint Zealot Para's Avatar
    Join Date
    Mar 2005
    Location
    London UK
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Oblongpeg, im going to try this now.

    EDIT: Brilliant it works, i can edit it into an external CSS after, thanks for your help

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Location
    Rubyvale, Queensland
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Para
    I just see your post here http://www.sitepoint.com/forums/show...54&postcount=6

    This explains alot for me.

    2 questions

    Do you overlap DIV's?

    How do you determine DIV position with CSS?

    Thanks again for your time
    You won't believe this, but I hardly ever use DIVs. Not like most people do anyway. I use the element that best suits the job, and then I position it using a combination of margins and floats. If you want some examples, just perform a search here on Sitepoint for CSS layout and make sure you search for only those posts written by me for an idea of what I do.

    You won't believe what you see (just a note: some posts don't have details on how the CSS was coded - in some cases it was intentional, in others the conversation moved to private messaging, and others, well I admit, I'm a busy person, and can forget something now and then; which is why I ask people to PM me - so I don't forget).

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Oblongpeg
    Sorry to butt in Dan but another possible suggestion.
    Hey, if it works, go for it. No need to butt in. I've seen enough threads go unanswered to gag a maggot.

    Which reminds me... I need to make my monthly "unanswered posts" rounds soon.


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
  •