|
|
Exercises
> Creating Rollovers
Creating
Rollovers
Page 1 of 2
By Linda M. Perry
This
exercise uses Dreamweaver's handy rollovers tool. The illustrations
are from CS4.
Once
you have decided on a look for your navigation bar, carefully measure
how big you want your buttons to be. You want them to be big enough
to fit in the text you need, but not so big as to look dorky. This
exercise will feature long, shallow buttons to fit a website's colour
scheme. Before we can create the rollovers in Dreamweaver we have
to create the buttons in Photoshop.
Open
Photoshop and create a new document. Be sure you're in RGB
mode and set the resolution at 72 ppi. Set the width of the file
at 116 pixels and the height 24 pixels. Save As buttonhome.
If you are turning in this exercise for class credit, add your initials
(mine would be buttonhomelp). For your websites, it's good
form to use the word button in front of all your navigation buttons
so they are easy to find in your directory.
- Double
click in the set Foreground Colour box (A).
- In
the Color Picker box, make sure the Only Web Colors box
is selected (B). Move the slider (C) to the bottom red section
of the spectrum and choose mauve, #cc9999. (When the colour you've
selected is a recurring colour in your website, select Add
to Swatches (D) and give the new colour a name, such as mauve.
Click OK. The new colour will come up in the Foreground Colour
box.
|
 |
- Select
the Rounded Rectangle Tool (A, below) and fill the background
with a rounded rectangle (B). Photoshop will automatically add
the new colour.
- (Alternatively,
you can draw the rectangle in the default colour and use the Paint
Bucket tool to colour the rectangle.)
|
 |
 |
- Double
click on the colour background (A, above) of the layer called
Shape 1 to get the Layer Style dialogue box. Move the opacity
slider to 95% (B). [You can also set the new opacity in the main
Layers window (C).] In the left-hand Blending Options box, select
Bevel and Emboss and Contour (D). Leave everything
else at the default setting. Select Preview (E) to see your changes
take effect immediately.
|
 |
-
Double click on Bevel and Emboss (A, above) to get more
options. (Hint: You should experiment with this Photoshop
feature when you have time.) In the Structure box, move the Depth
slider (B) to 310%. Double click in the Set color of shadow
box (C), which is now on default black. In the Select shadow
color box, assure Only Web Colors (D) is selected, then click
on or type #66333 (E) and click OK in the color box (F)
and in the Layer Style box (G). This is the basic button you'll
use for your nav bar. Save.
|
- Select
the Text Tool. Choose a sans serif font, such as
Eras Bold. Set the type size at 12 to 14 points. Some fonts
work better if Strong is selected; others with Sharp. This
example is set at 14 pts, Sharp. Click once on the Text
Color box (A). Choose #330000 (B).
- Select
the move tool, then click on the small triangle (C) in the
upper right corner of the Layers window and select
New Layer from the Layers dialog box. Select the Text
tool and click on its centering icon.
|
|
 |
- With
that layer selected, place the Text tool cursor in the
center of the mauve rectangle you drew. Type Home. Click
on the Move tool. In Edit > Preferences > Units &
Rulers, change the Rulers units to points. Reset
zero to the left edge of your button. Zoom in for a very enlarged
view. Bring over a guide rule to the halfway point, which
is 58 points (A). (You may have to toggle off Snap, in View, to
move the guide rule freely.) Use the move tool to center the text
precisely, aligning it with the guide rule. Select View > Actual
Pixels. Save. Then Save for Web & Devices as
a GIF.
- For
all subsequent buttons, all you have to do is Save As,
giving each button a unique and descriptive name, and then change
only the text. See the next page for instructions on changing
the text without losing any of the button's properties and for
preparing rollover versions of your buttons.
|
|
|
