Web Design & Development Blog

I wrote this article in 2007 for A List Apart, but since then technology has forged ahead, and this technique is now outdated, as the numerous comments illustrate. There seem to be two flavors of comments: designers who appreciated how quickly you could produce an XHTML/CSS mockup pretty straight from Photoshop, and the purists who voiced a vigorous distaste for the dirtiness of this technique, by which they mean that it is not semantic HTML. That is true, but then again, this technique was only meant for mockups, or perhaps as a starting point for a final HTML document. I typically only used this technique for creating quick mockups, but would create the final layout from scratch, coding the HTML and CSS by hand in Dreamweaver and producing the necessary images in Photoshop one by one.

Although the technique is outdated, maybe some of you still use ImageReady and could benefit from this. A discussion of Photoshop guides and slicing techniques is next on my agenda.

Following is the original article, reprinted with the permission of A List Apart and the author (me!):

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.

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

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

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

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

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

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

Example of ImageReady-produced HTML

(Line wraps marked » —Ed.)

  

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

  
  
    <img id="content" src="/images/content.jpg" <strong>»</strong>
 width="600" height="450" alt="" />
  

Toast, anyone?

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

#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

(Line wraps marked » —Ed.)

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

Workflow

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.

View the original article over at A List Apart