Back to top

Trendy Website Design in Photoshop Part 2: Slicing in ImageReady

Trendy Website Design in Photoshop Part 2: Slicing in 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. Let ImageReady snap your slices for you. It works by default to help you keep everything straight and in order, leading to a much cleaner looking website – that’s much easier to edit in Dreamweaver – than if you randomly slice what you want and fill in the spaces after that. Finally, make sure to start from one corner of your image (I usually start at the top left) and work your way to the opposite corner. You always want to go in a single direction – left to right and top to bottom, for example – to make your life easy. 3. Check Your Slices: You can make sure that everything sliced up right by previewing your work in a browser. To do this, just click “File”, choose “Preview In”, and pick the browser you want to see your design in. This is just a temporary preview, which doesn’t affect any of the work you’ve done so far, but can often show you when you’ve missed sections of your graphic before you save everything. When you’ve taken a peek, go ahead and close the browser out. 4. Update Your Output Settings: There are a few settings that you’ll want to change before you output your html, just to keep your code looking cleaner and make sure everything goes where you want it to go. Click “File”, and choose “Output Settings”, then click “HTML”. For the next few things we’ll do here, you’ll be working from the dialog that pops up and just be selecting sections from the drop-down box in the dialog. In the HTML section, look for the series of check-boxes under “Coding”. The only boxes you want ticked are “Close All Tags” and “Include Zero Margins on Body Tag”. From the drop-down, select “Metadata”. De-select the box marked “Add Custom ImageReady Metadata”. Now, before you click “OK”, you can save these settings for later use (so you don’t have to go through and check the settings on your next design). From the series of buttons to the right of your dialog, click “Save…” and name the settings something you’ll remember like “Site Slice Settings”, for example. Click OK and you’re done. 5. Export Your HTML: This is the easiest part, and so very nice of ImageReady to do all the hard work for us! Click “File”, and choose “Save Optimized As…”. You’ll get the standard save dialog, but there’s a couple of new options. First of all, you’ll want to give your file a better name – Template.html, maybe. Then, make sure that your “Save as type” option is set to “HTML and Images”. Beside the “Settings” option, select the settings you’ve just saved. Finally, the “Slices” option should read “All Slices”. Click Save … and you’re done and ready to move on to Dreamweaver and finish this baby off!