Building a Website with Photoshop and Dreamweaver (Part 3)

If you have followed along with part 1 and 2, you should now have a page design. Now its time to add some interactivity. We are going to set up the rollovers. After this tutorial we will be leaving Photoshop and heading on over to ImageReady.

1. The way that rollovers work is by replacing one image with another. The easiest way to achieve this in Photoshop is by using 1 click layer styles.

2. Here is the layers palette. You should have each text link on its own layer. Of course you will have more descriptive names to yours I hope.

Select one of the text layers and press the little "f" at the bottom on the layers palette to open the layer styles palette.

3. Create a layer style for your rollovers.

Create your own or use the one here:

• It has a standard drop shadow.
• Pink outer glow,
• Bevel and emboss (Bring the size down),
• and choose black for the color overlay.

4. This is what the rollover will look like.

5. We are now going to copy the layer style to all the text. Twill show you a quick way to do it here:

Link all the text layers. To link, just click the little box to the left of the thumbnail. You will see a small chain icon, indicating that the layers are linked.

6. Now right click on the word effects on the layers style, choose "copy layer style" from the drop down menu. This has loaded the style into the clipboard.

7. Right click again and this time choose "Paste layer style to linked" All the linked layers will now have the layer style applied to them.

8. This is what you will see.

Click to enlarge

9. Lastly make sure that you unlink the layers. To do this , simply click on the chain icons. Also hide the layer styles by clicking the eye icon next to the word "effects" on each layer.

In the next 2 installments we will be slicing the webpage and actually creating and testing the rollovers.