Trendy Website Design in Photoshop Part 2: Slicing in ImageReady

How to Automatically Generate HTML from ImageReady

This tutorial is the second of three parts outlining a method for creating great website designs tailored to your needs. You'll want to check here for the first and third parts, detailing the design process in Photoshop and taking the sliced files into Dreamweaver for finishing.

You won't need to have much knowledge of ImageReady at all - just the ability to find the tools and options discussed in this article.

How to Slice a Website in ImageReady

Adobe ImageReady is a useful - if limited - program that comes packaged with all versions of Photoshop. It can be used to animate images, and has a perfect use for our needs: it will export a sliced graphic in html format ready for our web design use.

1. Open Graphic in ImageReady: You'll need to have a website design graphic ready to go. If you don't have one already, look for Part 1 of this tutorial series here. To open the file, just click "File", choose "Open", and navigate to your graphic (preferably saved in JPEG format).

2. Start Slicing: There is nothing hard about making slices in ImageReady. If you're not familiar with the slice tool, just think of it as a marquee. You select the slice tool, click and drag a box or rectangle out across the area you want to slice.

The tricky part is knowing what to slice, where. It does take a bit of practice to get it really figured out, but here are the key things to keep in mind:

*Each slice will be in its own table in the final html
*Each slice should represent a content area or graphic (like buttons)
*You will need to account for page height expansion

Take a close look at Illustration 01. It shows all the slices I've made on my layout. The large boxes are content areas. Each navigation button has been sliced separately. The thinnest boxes are areas that will be nothing but background, allowing my page to stretch in height as much as it needs to without breaking up the design. Finally, I've broken up some of the larger images just so that it seems to download more quickly when published as a website.