Building a Website with Photoshop and Dreamweaver (Part 6)

We have sliced, now its time to serve up our goodies! This part will show you how to optimize your graphics and save your website.

1. Click on the optimized view tab at the top of the document.

Choose the slice select tool and select any slice. Here I have slice 2 selected.

Click to enlarge

2. In the optimize palette, choose either gif or jpg.

Use gif for large areas of solid color, art without gradients, and repeating patterns. Reduce the # of colors until you have a good compromise between file size and quality. Also use the gif format for animations and areas that need transparency.

For Photographs and detailed color work with a lot of gradients choose the jpg option and reduce the quality setting until you have a nice balance.

Experiment with different setting until you find the best display with the smallest file size.

3. You will see the file size displayed on the bottom left.

Next to it you will see the download time, you can change the modem speed for different download times.

4. Select another slice.

5. This one need to be 128 colors to still look good.

Keep going through all the slices until you have optimized each one. Save your document.

6. Now you are ready to test your page in your web browser.

Click the "preview in default browser" button.

7. You web browser should launch with your web page in it, Check it to make sure all the rollovers are working correctly and that everything looks ok.

8. When you are satisfied with your file optimization, choose File>Save optimized as"

9. Choose a location and choose a name. Imageready will now build your webpage and export it along with all the images needed.

Click save

10. Navigate to your directory and you will see your new HTML file along with all the images neatly packed into the "images" folder. Click on the HTML file to launch it and view.

When you upload to your web server make sure you keep all the images in the images folder so that they display correctly and upload the HTML file and the images folder to the web server.

Next week we will look at Dreamweaver, its site features as well as how to open our page and edit it.