Creating CSS with Photoshop CS3

By | May 23, 2007

It’s easy as long as you know where to click!
Compare to Photoshop CS2 it’s the same but not at the same place…
First create all your slices [press K in Photoshop]. Then:

Save for web and devices
Goto Files – Save for web and devices or press Alt+Shift+Ctrl+S
Click on save and select other...
Click on save button and select the “other…” settings, it will pop-up a new window
Check the XHTML box
Check the XHTML box, so it will format a clean XHTML files
Save for web and devices
Check the Generate CSS radio Button and Save, your Html file will be generated with a CSS scripts (you can notice that it’s still tagged as “ImageReady”, someone forgot to do the update…)

I my point of view it’s a good way to do quick CSS design without getting crazy with rulers.


0 Kudos

11 thoughts on “Creating CSS with Photoshop CS3

  1. Pingback: myFeedz - Articles on "css"

  2. Jules Nugteren

    Thank you so much for this info… I just upgraded to CS3 and the frustration of no ImageReady was killing me!

  3. Pingback: n-kawai Weblog

  4. Pingback: CS Bloggers » Creating CSS with Photoshop CS3

  5. Pingback: Home

  6. Pingback: Creating CSS with Photoshop CS3

  7. Jacob

    When saving for web, are only image slices available? or can you get CS3 to also translate the text area’s into text and related css?

  8. Metah

    Related CSS yes, related text no as far as I know…
    Anyway you get all your DIV ready to be fill 😉

  9. Dimus

    Thank’s for this usefull post!
    Can I use this method in Adobe Fireworks CS3?
    Now, when I exporting my file to HTML, all data save in Table-style html 🙁