Building a Website with Photoshop and Dreamweaver (Part 4)

Here we are at part 4 of our tutorial on building a webpage. We are now leaving the familiar territory of Photoshop and entering the domain of Imageready. You will notice that essentially IR is the same as PS. There are a few differences, the main one which is unseen is that IR isn't designed to handle large hi res files, which makes it a web only program. Anyway enough smack, lets do some work.

1. In photoshop you will see the button on the bottom of the toolbar. This is the Jump to Image ready button. Enjoy it while you can, I suspect that Adobe will integrate the IR features into Photoshop one day. But not in Version 7. It will ship with Imageready 7. What happened to versions 4-6? Same thing as KPT 2-4, guess 7 sounds better.

2. You will notice that after a (short) wait, IR will launch with our layout and guides intact. At this point you may ask, "why not slice in Photoshop?" The reason I wait is so I can do a quick general optimization and fine tune it later. If we had slices already we would have to optimize each slice separate = more time wasted.

Click the optimized tab. We will work in this window for an accurate preview.

3. Quick optimize time: Choose the Optimize palette and select jpg and reduce the quality until you just can't stand the segregation anymore them push it up 5%. We have 42% for our project here. As a rule you should always be below 50%.

4. Now choose the slice tool.

5. Click and drag to define slices on your image. You will see a little box and a number in the top let of each slice.

ImagreReady will separate your image into smaller images and then generate tables to join them together seamlessly.

Why Slice?

1. Smaller images load faster
2. You can optimize each slice, also mix gif and jpg.
3. Creating rollovers
4. Creating "hotspots" to click
5. Add animations

You can always refine your slices later by using the slice select tool.

6. Think intuitively about how you will slice your page. You want it clean and as few tiny slices as possible. Make slices around each button this will define all the rollover areas.

Make the rest of your slices follow the guides. Make sure your main image area is 1 slice so we can use it as a background later.

Click to enlarge

7. If you haven't named the links yet, now is a good time to do it. Just use the text tool in Image ready.

Click to enlarge

This one was a short tutorial. I encourage you to experiment with different kinds of slices.

You can use Layer based slices too, which will generate a slice around the area of a layer's content. Theses are good because they automatically redefine the slice areas. Refer to your online help for more info on this. This tutorial will only deal with user slices because they are the easiest to control.