Building a website
Part 6 Optimizing and Publishing
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.
INGREDIENTS
by Colin Smith
1. Preparing the background
2. Adding the design elements
3. Preparing rollovers with
Layer Styles
4. Slicing in *Imageready
5. Rollovers in *Imageready
6. Optimizing and publishing
7. Bringing it into *Dreamweaver
8. Turning the page into
a website
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. Preparing the background *Photoshop 6
2. Adding the design elements
to the page *Photoshop
6
3. Preparing rollovers with
Layer Styles *Photoshop
6
4. Slicing in *Imageready 3
5. Rollovers in *Imageready
3
6. Optimizing and publishing *Imageready
3
7. Bringing it into *Dreamweaver
4
8. Turning the page into
a website *Dreamweaver 4
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.
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 transparancy.
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 optomized 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 featues as well as how to open our page and edit it.
Enjoying this Tutorial?
Photoshop and Dreamweaver Integration
Learn how to build stunning web pages using Photoshop and Dreamweaver together. This step-by-step approach makes it so easy, that even beginners can produce great webpages. Covers the latest version of Photoshop (CS) and Dreamweaver (MX 2004).
Check out the DVD for easy to follow video, watch over Colin's shoulder as he builds a complete web site from scratch, explaining every step along the way. Ever wished you could sit in a professional design studio for a day and learn all the trick? This is your chance, only better!
For a more detailed approach See the book includes iframes, design theory, drop downs, liquid sites and no programming commerce. Perfect companion for the DVD!
