PHOTOSHOP - making buttons

We've already seen how Dreamweaver allows us to create a snazzy rollover effect. This exercise will explain how to create images that you can use with the rollover function in Dreamweaver to create clickable buttons.

In this tutorial we'll be creating two images: the image users see before they move the mouse over the image, and the image users see after they move the mouse over the image.

PART 1: the first button

First, open Photoshop, then File > New

Choose your canvas size and click OK. (If you're not sure how large to make your canvas, opt for a larger space -- you can always crop it to size later.)

Select the color you want your button to be.

Select the shape you want your button to be.

Tip: If you're using the rounded edges tool, you can adjust the rounded edges by typing in a new radius value.

Draw your button on the canvas (we'll trim it down later).

Now click on the text tool, then choose a contrasting text color (upper right).

Then click on your button and type your text.

Let's select the area around the button with the marquee tool,

then crop down the button to size,

(so that it looks like this)

and save it as a .gif.

PART 2: rollover version of the first button

Now that we've created our first button, we need another, slightly different version of it for the rollover / mouseover. There are lots of ways we could do this.

We could change the color of the text . . .

We could add an arrow or some other visual feature . . .

Or we could add a shadow . . .

(see next three screenshots for the steps to make a shadow)

Finally, use the button images you've created to make your rollover button in Dreamweaver. It should look something like this (go ahead, click on it!):

home