Quick CSS Mockups with Photoshop

39 Reader Comments

1. “Some slices (a content area, for example) may be of a single color and thus should be set using a CSS style without any images.”

   Why not change the slice type to “No Image” and then set the background colour too, then imageready will generate the that css for you.

   The same works for areas of text, though in both cases if you wish to have a meaningful name you have to rename it before changing the type as selecting “no image” removes the name box.

2. This isn’t self-promotion, just something I put together that has made my life a little easier.

   http://marylandmedia.com/projects/conceptpreview/

   ConceptPreview is a simple CSS based navigation tool. It was created primarily for web designers to quickly, effortlessly and subtly integrate a utility to present multiple design concepts. Often times web design concepts are required to be presented within HTML to help give accurate visual representation of the intended design.

3. bq. The problem I ran into was that I could only export HTML code using tables, when what I really wanted was relatively positioned div elements.

   I was disappointed to read your Background paragraph and discover that Fireworks was pretty much useless at producing xhtml code. Rather than giving up hope I found the following Adobe tutorial:

   “Modifying HTML Output with HTML Styles in Fireworks”:http://www.adobe.com/devnet/fireworks/articles/fw_html_styles_print.html

   You can argue that this technique (Simple CSS-Based HTML Style) requires some work, but certainly far less than fixing the perceived problems with Fireworks.

4. Adobe has pretty much said that ImageReady is being set out to pasture — in favor of Fireworks CS3. So although this article is great at uncovering ImageReady’s often overlooked powers, come this spring, many Adobe users may start seriously looking at Fireworks as their new web graphics design tool.

   When I look at Fireworks now, I realize it has considered itself as a pure web graphics design tool for much of its product life, from content creation to optimization. Where as ImageReady always felt like a Web graphics post-processing tool for Photoshop. And less than stellar one at that. You usually have to flatten your Photoshop files to make them usable in ImageReady. It was just dog slow if you didn’t, which made ImageReady less than useful. Not to mention ImageReady always struggled to keep feature parity with Photoshop (try Smart Objects in ImageReady).

   Let’s just hope Adobe brings Fireworks up-to-date allowing you to save out more workable web standards-based code.

5. Chris; yes, you could define the slice as non-image before exporting, though I always just export and define the CSS style for that div afterwards. I may for example end up creating a background image for a particular slice, and the source file for that background image could be a separate PSD or Fireworks file.

   Darroch; thanks for the Adobe link. I’m not giving up on FW … I just don’t use it for certain things right now. It’s great for creating web graphics, but less so for full layouts. I also like the Adobe styles and image control better, though ImageReady’s far from perfect in its handling of smart objects. The Adobe Fireworks technique does require too much work IMO, esp. for a mockup.

   George; I too look forward to a better Fireworks this spring. It would be a welcome change. I’ve tended to use ImageReady for the overall layout and Fireworks for occasional graphics. I’ve also been frustrated by IR’s limitations, esp. having to jump back to PS to make certain changes.

6. That’s a great resource; who knew you could modify the HTML output? While I am posting the page to “my del.icio.us (Check out my favorite bookmarks and links on del.icio.us)”:http://del.icio.us/303zachary ,the code is very scary!

   It was good to be reminded that the process for creating a website doesn’t need to be a grueling, do-every-single-thing-by-hand experience. I think back fondly to the days of slicing up a mock and just having it work (then I force myself to remember: tables bad! standards good!)

   Thanks for the article; it reminds me that it’s good to “let go and let Adobe” sometimes…especially when it’s easy!

7. A few years ago I stopped using Fireworks because the designers I worked with always provided very complex, layered PSDs (Photoshop CS2). Fireworks would open these files, although something important (fonts, gradients, etc.) would often be lost and I’ll just mention how badly Illustrator files would look. I’m not sure about Fireworks v.8… I’m very interested in Fireworks CS3, and whether it integrates as well as ImageReady with all Adobe products.

   For now, I prefer using Photoshop CS2, slicing complex layered elements and using my own output settings to keep things tidy. I don’t have much need for quick XHTML/CSS mock-ups, although this article was very thought-provoking. Thanks!

8. We used ImageReady and Photoshop to make it quick and easy.

   The design was a little to hard to make because IE don’t support PNG 🙁 We thought this should be a simple way to do use gif format to make it work and then built up the css grid with ImageReady and the make the rest by hand. It took a lot of work to make it work. Finally the result, happy clients 🙂 http://www.arken-regnbagen.se/

   A kinder garden in Stockholm, Sweden.
   Year: Spring 2006

9. It seemed very topical.

   Chris

10. … when Photoshop CS2 and CS3 can export XHTML from slices? Is the XHTML output better? I just design in PS and Save For Web with slices making sure

    instead of

    is selected and all’s well. Good article.

11. As an alternative to using Photoshop or Image Ready slices, you might also want to try using SiteGrinder. That Photoshop plug-in exports both the graphics and the CSS, which you can then tweak as desired.

    Although I have frequently used slices (as recently as an hour ago, while updating some graphics for a Web services site I’m working on), SiteGrinder opens up a whole new world.

    I’m not affiliated with Media Lab, the SiteGrinder publishers, I’m just a happy customer who has used this innovative product while designing various Web sites.

    Hope that helps. …pt

12. Thanks for this. I actually hand off my photoshop files to a developer friend to make all my xhtml/css simply because of the tedious task. I never thought to delve into the inner workings of ImageReady (though I use it somewhat regularly). For me, this will not only save time but money. Thank you very much.

13. This would be a real time saver in some situations, but I would not want any client to see this. It’s hard enough explaining that having a static PSD file does not mean that the work is almost done…showing them a working html page is going to make it even worse!

    They won’t understand why you need to rebuild it again without some serious explaining.

14. i’ve been using this technique for many years now! it works great and gives me a head start on coding. i must confess, i got the idea from mr. zeldman, who back in the old days, used to have time to email everybody personally. back then we were slicing images into tables. then, one day i accidentally learned how to make imageready spit out css instead of html. the rest is history!

    thanks for the validation!

15. I never knew you could change the output to css for image ready. Thats really neat and a step in the right direction in some respect. However, personally I think it’s easier to just save the images yourself and hand code it. With the amount of time that you spend tweaking that code its almost equivalent to just saving the images manually sliced and then throwing them in necessary divs. With my experience with design, I find its easier to start something off fresh with code rather than tweaking it. Especially with css. Even it is for a quick fix to display for a client. And once a layout starts to get complicated, wont that lead to more tweaking headaches? Anyways thats just my opinion on that topic.

16. well, yes … I don’t keep on using the ImageReady HTML/CSS through production, of course. I only use it to start me off, and then use an existing fluid layout or create a new one. Often I name the ImageReady slices/divs so that they match my own standard naming convention, so they plug right into a premade stylesheet with only minor modifications. This technique is useful for those who haven’t upgraded to Photoshop CS2 or CS3, and those who plan on keeping ImageReady installed. Otherwise there’ll be an all-new Fireworks CS3 coming out, which will replace ImageReady. Then, hopefully, all our lives will be made easier!

17. What is wrong with using Position Absolute?

18. Hello,
    Nice article.
    I had already made the same tutorial with a lot of illustrations, you can find it here: http://www.duclaux.net/blog/how-to-convert-your-photoshop-document-to-a-css-in-less-than-30-seconds-a-precise-tutorial-with-illustrations/2006/02/08/

19. I didn’t realize that ImageReady could output CSS + XHTML. Thanks for a very useful article.

20. Erin,

    Thanks for including the original in your quotation.

    Yours,

    Chris

21. I find that I normally want to create css with the images as background images and not as tags, so I wrote a little script to parse the code and move the images to the background.

    It uses PHP5’s simpleXML extension, so if you don’t have php5 I recomend WAMP5.

    First, the php script:
    Copy the code below and save it as css_convertor.php
    It seams that I can’t easily add indenting so the code looks a bit messy. Sorry!

    tags.

    // expects the filename in the url // eg. css_convert.php?file=yourfile.html

    $xml = simplexml_load_file($_GET[‘file’]);

    // extract the css code and store the css as a tree of objects

    $styles = new cssmod($xml->head->style);

    // itterate over the divs

    $cnt = count($xml->body->div->div); for($i = 0; $i<$cnt; $i++) { $selector = '#'.(string)$xml->body->div->div[$i][‘id’]; $imgsrc = (string) $xml->body->div->div[$i]->img[‘src’];

    // insert img src into css model $styles->setPropValue($selector, ‘background’, ‘url(‘.$imgsrc.’) no-repeat’);

    // remove img from model unset($xml->body->div->div[$i]->img); } // rewrite new styles to xml model $xml->head->style = $styles->out();

    // rewrite xml model to output. echo $xml->asXML();

    // class for converting css to a tree of arrays so it can be manipulated easily class cssmod {

    public $data = array();

    function cssmod($str) { // split into rule sets $rulesets = explode(‘}’, $str); foreach ( $rulesets as $set) {

    if (trim($set) ==”) continue; // avoid empty string at the end

    // separate selector from rules $parts = explode(‘{‘, $set); $selector = trim($parts[0]); $this->data[$selector] = array();

    // divide rules $temp_rules = explode(‘;’, $parts[1]); foreach ( $temp_rules as $tr ) {

    // avoid empty string at the end if (trim($tr) ==”) continue;

    $ruleparts = explode( ‘:’ , $tr); $prop = trim($ruleparts[0]); $value = trim($ruleparts[1]); $this->data[$selector][$prop] = $value; } } }

    function getProperties($selector) {

    if (isset($this->data[$selector])) return $this->data[$selector];

    else return false; }

    function getPropValue($selector, $property) { if(isset($this->data[$selector][$property])) return $this->data[$selector][$property]; else return false;

    }

    function setPropValue($selector, $property, $value) { $this->data[$selector][$property] = $value; }

    function out() { $out =”;

    foreach ($this->data as $selector => $ruleset) { $out .= “n”.$selector.” {n”; foreach ( $ruleset as $property => $value ) { $out .= ‘ ‘.$property.’: ‘.$value.”;n”; } $out .= “}nn”; }

    return $out; }

    } ?>

    The only problems I have found are :

    Imageready outputs different XHTML than photoshop, so once you have set up your HTML output options in Image ready be sure to return to photoshop and select “file > save for web” to export the xhtml.

    also

    SimpleXML does not understand comments so you have to manually delete the around the css.

    Once you have your correctly formed xhtml file put it (and the images folder) in the same folder on your server as the php script.

    Visit http://server/folder/css_converter.php?file=filename.html

    obviously you need to change ‘server’, ‘folder’ and ‘filename.html’ to match your system. If like me you saved your photoshop output as test.html and put everything in WAMP’s root directory then it’s http://localhost/css_converter.php?file=test.html

    To get the new code smpley “veiw > source” in your browser.

22. Sorry everone, the code came out horribly messy.

    There are loads of line breaks missing.

    Does anyone know how can I clean up the code in my post ?

23. why bother
    if showing a page to a client a photoshop graphic is good for starters. this code aint much different

    it is easier building the css and html and then working out graphics to fit into the correct places at correct sizes

    navigation should be and unordered list and css styled without graphics for text. header images are easily made and places using background element in css. the layout of the actual page and div tags order are going to change to achieve proper css layout. why not start with a html basic template and then add/remove elements needed.

    web design needs a knowledge of a range of techniques you can put to use whenever a layout is needed.

    I find this article surprising that alistapart is publishing, imageready isnt really a good web design tool.

    also why suggest using javasript rollovers, that is just wrong man.

24. I think this a great article and I can’t wait to try it out. Believe it or not, some people don’t enjoy starting at lines of code all day or hand-coding every single line.

    For a lot of us, web design is about business, business is about money, time = money, and you should have seen how happy my boss was when I told him I found a way to increase productivity and save him money!

    The more articles like this the better!

    ps- and to answer a previous poster, there is nothing wrong with absolute positioning IMO!

25. This is a good article and experience .

26. I don’t know, this is really too close to the old way of doing things. Using divs as tables seems like a pointless effort.

    I used to do this about when it was first considered “cool” to avoid tables, but I abandoned it completely once I could get css to dance for me.

    Bottom line, I have yet to run into a client that cannot envision my designs via simple graphics. Time IS money as a previous poster said, and nothing is faster than generating a jpg.

    Also, by now most of us can crank out a proper css design in no time flat based on something we’ve previously done.

27. I was using ‘almost’ the same imageready tricks as in the article, but would suggest trying sitegrinder over these techniques for its ability to output multiple pages sharing a very efficient common css file.

    The only danger with sitegrinder (or other css automation) is forgetting how to do it yourself, so when I have time I tweak sitegrinder’s output to stay hands-on.

28. Wow that seems to be a dirty hack to do create quick CSS design.

29. I agree that CSS Developers often utilize what they’ve done before, however, when working with a client whose CSS might conflict somehow you’ll need to start with what they’ve produced and build on that. Thank g-d for Firebug! So what you’ve done before may not necessarily work within their guidelines/templates, especially if they’re using some CMS. Learning to override is key, while making sure that your stuff doesn’t conflict either way.

    Slightly off-topic. I really appreciate this article and always look for a quicker way to produce mock-ups. Unfortunately, it’s rarely so easy to finish a project that begins so quickly. A client may be initially impressed, and then frustrated that you’re not done with the project proportionately as quickly later. Thanks!

30. I had been struggling with this and didn’t know I could use Photoshop to do this. I am converted

31. Thanks for the post.
    I was not aware that ImageReady could output CSS + XHTML. Someone also suggested SiteGrinder a photoshop plugin. If more detail can be provided, I will be very thankful.

32. I was unaware of the possibility to save slices to absolutely positioned divs… I do many mockups for clients, and this will save me endless hours of hand coding css layouts.

    btw, is it me or does fireworks optimize images better and to a smaller file size than Image ready?

    Thanks 4 the great article.

33. Great Article,

    I use Sitegrinder2 instead of ImageReady. It’s a plugin for photoshop that turns your layers into pages using hints. Its worth a look. Just google sitegrinder.

    I say use any tool that gives you the results you seek.

    Thx,
    Monty

34. I just wanted to say thank you for a great article. I could’ve used this a few weeks ago when I did an overnight project using the tables export. Gasp! I know, I’m seeking help and it won’t happen again. This article and the comments will ensure it…

35. All –

    This is a really cool article that helps keep your same workflow in Fireworks yet export clean and production ready CSS. Contact John Wylie if you want to see the script improved.

    http://www.adobe.com/devnet/fireworks/articles/smart_css.html

36. I have wrote a simple script which will exports content and parameters of all Text Layers to a .css file (and to .html preview file). Just by naming the layers, you decide if it will be ID, Class or tag. I hope this will be helpfull for webdesigners or their CSS coders – because right in Photoshop can webdesigner set what type of css will be used – that gives nice overview of final xhtml document structure.
    Just watch this sample video: http://www.youtube.com/watch?v=407TmGl4sXE
    Or download it, it is Freeware: http://www.raist.cz/psd2css/
    And now im working on extended version of this script, which will exports most of webdesign image to structured xhtml and css 🙂

37. Mockups being a critical part of the design cycle, I have found it important for designers to have a firm understanding of what is capable in tableless CSS, but to also understand cross browser compatibility issues. Creating a design in Photoshop which avoids, what are well documented pitfalls of IE6, saves debugging time and headaches.

38. I notice that there is some push-back from designers here on ALA regarding “non-traditional” tools, such as SiteGrinder and Rapidweaver.

    As an accomplished print designer, photographer, writer, and fine artist, I think I’m a fairly bright guy. But I’m not a code geek (and I use that term lovingly, with all due respect).

    I’ve really made a valiant attempt at learning HTML — and its descendants and variations — over the years and it still eludes me.

    Fact is, I’m a visual kinda guy; I learn visually, I think visually, and I work visually. Which brings me to my long, drawn-out point: Long ago, I made the transition from the tail end of the era in which graphic art production was all done mechanically — on boards, shot on film, and laid out on illustration board. It was a long, tedious process made suddenly easy, comparatively, by the advent of desktop publishing.

    We could create and move things around on the computer screen and have a dozen variations on a design in the time it took to create one the “old-fashioned way.”

    The old-fashioned way had been using very specialized and expensive computers, crude by today’s standards, to create galleys of text which were laid out mechanically. Typesetters were the code geeks of the time and, to a person, they all hated DTP and the type it created. Ugly! they declared it, among other epithets.

    Where are the typesetters now? Nowhere to be found. Those who do survive, doing high-end typographic work, use the tools that replaced them: Quark, InDesign, and others that have come and gone over the years. They work visually now, with hardly a code in sight.

    When the Web was young, the only way to create websites was by writing and manipulating code. (I’m sure you know by now where I’m going with this.) Over a relatively short span, we’ve advanced to more sophisticated code-writing-and-manipulating tools. But code tools, nevertheless.

    The articles and comments I read here on ALA seem to be mostly along the lines of “real web designers hand-code their projects” and “only noobs and fools use toy tools like SiteGrinder, Rapidweaver, iWeb, or any of those others.” Pfffft!

    So, I declare you all to be typesetters and say, those toy tools are just the leading edge of a wave of applications that will make hand-coding a quaint artifact of the Internet’s not-so-ancient past.

    Those new tools will have the same effect on code geeks that DTP had on typesetters. That tsunami has been building for a long time and, like that giant wave, will rise up suddenly and wash away everything in its path.

    SiteGrinder and Rapidweaver are not the perfect examples of where we’ll be when the typesetters are washed away. . . but they’re getting there.

    A word of advice to typesetters: head for high ground.

39. to amny it si not taht hard to code a whoel thing using notepad only. Yet yoru ideas and solutions are really nice and very helpgul for making fast sketches to give your customer an idea on what’s going on! Thanks – useful article!