Creating CSS with Photoshop CS3

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.

Ahmet

May 23, 2007 – 3:52 pm | By Ahmet | Posted in Photoshop, Web Design | Comments (11)

11 Comments

  • myFeedz - Articles on "css" wrote:
    May 23, 2007 at 7:51 pm

    [...] Creating CSS with Photoshop CS3 details » http://www.metah.ch Posted 4 hours ago by Metah Flash Blog feed details » [...]

  • Jules Nugteren wrote:
    May 24, 2007 at 9:59 pm

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

  • n-kawai Weblog wrote:
    May 25, 2007 at 6:01 am

    [...] おふらいん・で〜た・しんく MXNAからピックアップです。Creating CSS with Photoshop CS3、Spry Autosuggest with JSON Dataset、Offline Data Sync、Flex Custom Events – part1、black and white blur transition、Bubble-Mind、LiveCycle Enterprise Suite preview release、svnAuth.cfc、View States Doc、New Free Flash Template、Adobe Magazine、Apollo Camp Japan、Linux Fueled。 TipsCreating CSS with Photoshop CS3 Spry Autosuggest with JSON Dataset Offline Data Sync Flex Custom Events – part1 black and white blur transition ToolsBubble-Mind LiveCycle Enterprise Suite preview release svnAuth.cfc ResourcesView States Doc New Free Flash Template Adobe Magazine Apollo Camp Japan Linux Fueled Posted at 09:42 午後   getCategoryName(“C1940446103″);   [...]

  • CS Bloggers » Creating CSS with Photoshop CS3 wrote:
    May 30, 2007 at 12:21 pm

    [...] Creating CSS with Photoshop CS3 May 23rd, 2007 Goto Files – Save for web and devices or press Alt+Shift+Ctrl+S. Click on save button and select the “other…” settings, it will pop-up a new window. Check the XHTML box, so it will format a clean XHTML files … Read entire article Original Source: Metah | [...]

  • Home wrote:
    Jun 6, 2007 at 8:30 am

    [...] Creating CSS with Photoshop CS3     Discuss 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 you [...]

  • Creating CSS with Photoshop CS3 wrote:
    Jun 27, 2007 at 3:08 pm

    [...] Creating CSS with Photoshop CS3 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: [...]

  • Jacob wrote:
    Jul 12, 2007 at 10:09 pm

    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?

  • Metah wrote:
    Jul 12, 2007 at 10:47 pm

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

  • Dimus wrote:
    Sep 13, 2007 at 7:12 pm

    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 :(

  • sandeep upadhyay wrote:
    Oct 18, 2007 at 2:07 pm

    thank buddy

    it’s so help full for me

  • Ahmet wrote:
    Oct 30, 2007 at 5:05 pm

    Dimus:
    I don’t know for Fireworks, I don’t use it anymore…

Post a Comment

Your email is never shared. Required fields are marked *