How to Create Buttons

Open Photoshop and ImageStyler.
In ImageStyler draw a rectangle (round corners).

Make to the size of your preference. With the rectangle selected, pick the eyedropper tool and pick a color
from the color window on the right hand side.

(If you cannot see the color window, go to the Window menu and select Color)
From the Edit menu select Deselect All.
Using the eyedropper tool, pick the color that you want your text to be.
Then select the text tool and type the word "Links" over the rectangle.
Make it a size that fits within the rectangle. From the Edit menu pick Select All
Then from the Object menu select Align --> Vertical Centers and then Horizontal Centers.
From the Edit menu select Duplicate, and move the copy to the away from the original.
Select the text on the recently copied set, and with the eyedropper choose a different color.

Right now our progress looks something like this.

Now select the first set, and choose Copy from the Edit menu.
Go to photoshop, and select New from the File menu. Click OK to the default size.
Then from the Edit menu select Paste and from the Layers menu select Flatten Image.
Then save this image as button_down.jpg (choose JPG as the file format). Repeat this
procedure with the second set, and save it as button_up.jpg

To create the rollover, open Dreamweaver and save a blank page to the same directory
the button_down and botton_up images were saved. Then from the Insert menu select
Rollover Image and in the dialog box enter Links as the name and browse for the button_down
and button_up images.

Save the page and open it in a web browser, it should look like this. Try moving over it.

There are tons of different ways of making buttons, whicheve one you use, it is recomemded that you keep the
images that are replacing each other of the same size. ImageStyler has a nice set of 3D Styles that can be
easily added to text and objects. Simply select the object and from the Styles window (if not visible, re-open
from the Window menu and selecting Styles. To apply the 3D effect, simply double-click over the style.

The results are rollovers that look like this.


Go back to the main Main Page