Building a website with Photoshop and Dreamweaver: Part 4 Slicing

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.

INGREDIENTS

by Colin Smith

More Great Tutorials

PhotoshopCAFE home

 

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. 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

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 itergrate 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 seperate = 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 degregation 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.

Imagre ready will seperate 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.


7

 

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


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.

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!