Quick CSS Mockups with Photoshop
Issue № 231

Quick CSS Mockups with Photoshop

You need to make a set of web design mockups for your client. You’d like to find an easy way to show these mockups in clean XHTML and CSS code, because plain JPGs don’t convey the full sense of the design, and sliced tables are evil. In fact, let’s forget table slices ever existed.

Article Continues Below

Caveat: This article is for people who need to produce valid, standards-compliant mockups quickly, with the graphics tools they already use. This is not a production technique for people who want to get the most benefit out of (X)HTML by creating structural, semantic markup. Creating structural, semantic markup, as A List Apart and most standardistas recommend, still takes time, thought, and hand-coding.

WYSIWYG graphics editors such as Fireworks, GoLive, and ImageReady allow you to generate HTML code, but the exported code tends to use tables or absolute positioning. That’s so 1999. So what, then, can these programs do in terms of producing valid and useful code? More than you think. I’ll show you an easy way to produce mockups with Photoshop, prepare them for the web with ImageReady, and clean up the code afterward.

Background#section2

I must admit, Fireworks was a major part of my design arsenal until I started taking accessibility and standards compliance seriously, and I don’t think I’m alone here. 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. Only with ridiculous hours of coding and copious quantities of caffeine could you convert such a table to relative divs, and this just steals more time from when you could have been designing more mockups or sleeping. So why start off with a sliced table at all? What I needed was a way to generate clean relatively positioned divs—or, barring that, code that was close enough that it wouldn’t take aeons to make it play nice with W3C standards. These days, this is surprisingly straightforward with ImageReady.

Make ImageReady CSS-ready #section3

Adobe Photoshop CS ships with a web-focused sidekick: ImageReady CS. Adobe Fireworks is great for vector applications, but less so for raster work. Conversely, ImageReady is perfectly suited for raster work, but less so for vector work (although that’s changing). Using ImageReady, you can export slices as absolutely positioned divs, which can be easily transformed into relatively positioned divs.

This means you can start off in Photoshop to do all your complex masking, fades, Illustrator vector art, filters, etc., and then switch to ImageReady to slice up your layout. You’ll want to be sure that your layout is aligned to the top left; don’t try to center it just yet—that’s a job for CSS later on. Using ImageReady, you can style your navigation menu items (unless you’re doing that with pure text / CSS) and set rollover states. (For a production layout, you would probably shy away from Adobe rollovers and actions in favor of your own JavaScript or CSS rollovers, but for mockup use, these rollover states should suffice.)

Slice it up #section4

Use the Slice tool to create your slices. Once you’re finished use the Slice Select tool to select and rename each section. For example, you may have a header that will become a div tag later on. ImageReady would really like to call this “Yourfile_1_01,” but you’ll save yourself some work by giving it a logical name from the start, like “header”. You will use this later on when editing your CSS. The same goes for the content area, any side columns, the footer, and other areas you may want to define.

Jump back and forth between designing in Photoshop and ImageReady until you’re ready to test out your design in a browser. Then, in ImageReady, go to File < Preview In < (insert favorite browser here). See whether your slices look and behave as intended, and modify your optimization settings accordingly. Exported slices will result in JPG or GIF images inserted into div tags with img tags; later, you may want to insert some of the images as background images for the individual divs instead.

Exporting HTML & CSS#section5

Set your output settings: select File › Output Settings › HTML and change the settings to your liking. Note that you can opt to generate XHTML code. Select “Next” and check the settings in Saving HTML Files.

Select “Next” again; this brings you to Slices. Here you can choose to “Generate CSS.” Next to Referenced, you’ll see a dropdown menu that allows you to choose By ID, Inline, or By Class. Select By ID. You can also get detailed with slice naming conventions if you’re so inclined.

Export your mockup to (X)HTML/CSS using File < Save Optimized As, and choose a location that makes sense to you. Note that ImageReady will create an /images subdirectory in the same location where you save the HTML file. (Line wraps marked » —Ed.)

Example of ImageReady-produced CSS#section6

#header {
position:absolute;
left:0px;
top:0px;
width:800px;
height:150px;
}

Example of ImageReady-produced HTML#section7

<!--

(Line wraps marked » —Ed.)

-->

<div id="Table_01">

	<div id="header">
	<img id="header" src="images/header.jpg" »
width="800" height="150" alt="" />
	</div>
	
	<div id="navigation">
	<img id="navigation" src="images/navigation.jpg" »
width="200" height="450" alt="" />
	</div>
	
	<div id="content">
	<img id="content" src="images/content.jpg" »
width="600" height="450" alt="" />
	</div>
	
</div>

Toast, anyone? #section8

We now have slices consisting of absolutely positioned divs, with the CSS contained directly in the HTML file’s head. Maybe absolutely positioned divs are just what you need—if so, grab a cup of coffee and relax. Otherwise, let’s take things a step further by converting these divs to relative positioning.

First, make a copy of the ImageReady-generated HTML file and open it in your code editor (e.g. Dreamweaver, BBEdit, or another favorite editor). You’ll probably want to wrap all your divs inside an outside container div to control your mockup layout more precisely. ImageReady exports the CSS slices as divs and wraps them in a container div called “Table_01.” Rename the “Table_01” div (to “container”, for example) and style it with CSS as you see fit. If you don’t need a container div, just delete the “Table_01” div and its CSS counterpart.

Next, switch all your other divs to relative positioning by removing the absolute positioning declarations and letting them inherit relative positioning. Pay special attention to your floats and clears. You could try to switch all your divs at once, but a more precise and predictable way to go about it is to change one div at a time and check each div individually.

For divs that contain images, decide which should be turned into CSS background images and which really deserve an image tag. 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. Set the overall page background separately using your stylesheet. If this were a production layout, you’d probably move your CSS to an external stylesheet, but that may be overkill for single-page mockups. Validate your code and you’re good to go.

Example of converted and cleaned-up CSS#section9

#header {
float: left;
clear: right;
}

You’ll need to add appropriate height and width declarations back in if the image in this element becomes a background image in a later revision.

Example of converted and cleaned-up HTML#section10

(Line wraps marked » —Ed.)

<div id="header">
	<img src="images/header.jpg"  »
alt=""> name="headerimg"  »
width="800" height="150" id="headerimg" />
</div>

Workflow#section11

When you need to revise the mockup, you can simply make your graphic changes in Photoshop and ImageReady, then re-export the HTML file, overwriting the original one and its supporting images in the /images subfolder. But before you do, make sure you’ve saved your converted, cleaned-up HTML file under a different name so it and its stylesheet will refer to the updated images without the danger of being overwritten by your newly exported revised HTML.

About the Author

Casper Voogt

Casper Voogt is the founder and director of Plethora Design, LLC, a web design firm specializing in content management solutions.

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. … 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.
  10. 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

  11. 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.

  12. 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.

  13. 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!

  14. 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.

  15. 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!

  16. 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.

  17. 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 ?

  18. 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.

  19. 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!

  20. 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.

  21. 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.

  22. 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!

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

  24. 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.

  25. 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.

  26. 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

  27. 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…

  28. 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 🙂

  29. 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.

  30. 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.

  31. 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!

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Making Room for Variation

In this excerpt from Expressive Designs Systems, Yesenia Perez-Cruz goes deep on what it takes to create design systems that enables intentional, meaningful variation.
Design