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!

    < ?php // convert photoshop xhtml/css output from images in // divs to divs with background images // don't forget to remove the comments around the css // inside the