Creating Navigational Buttons

I usually prefer to use buttons over Nav Bars, as navigational tools for two reasons. First they tend to load faster. Second It is easy to make the same button refer to different pages from each page that you present.

Here are some simple buttons that I created using Adobe Photoshop. I then used GifConverter and GraphicConverter to reduce the file size, by setting all of the colors to web safe values, removing unused colors and optimizing the file.

If the following notes don't make much sense to you, it is because they were composed to help me remember how I created the images.


Click Me 200W by 75H pixels.
Gradient - R0 G0 B255 / R255 G0 B0 diagonal, normal, linear.
Noise 56% uniform,
Text= New Berolina MT 36 pts R0 G255 B0, 2 duplicate layers .
Deko boko bevel filter +51 light -51 dark, 2 Steps size=7,.
Resize 50%.
File size; 3,013 bytes.

Home 1.5W by .5H inches.
Elliptical selection Feather 1, Saved selection.
Drop shadow filter black X3 Y3 blur 3 opacity 80%.
Fill R0 G153 B51.
Fade edges 100% screen.
Text= Script MT Bold 20 pts R0 G0 B255.
File size; 2,196 bytes.

Order Form 150W by 50H pixels.
Foreground R102 G102 B153 Background R0 G0 B102.
Radial gradient.
Inverse selection .
Text= Old English MT 20 pts R255 G255 B0.
Brightness +36 Contrast +9.
File size; 2,106 bytes.

Products 100 X 38.
R153 G0 B0.
Filter SuckingFish FrameCurtain Blue Mountain.
Deko boko bevel filter +51 light -51 dark, 2 Steps size=7 .
Text= Klang MT 20 pts R0 G153 B255.
File size; 1,157 bytes.
Web Graphics Index
See my site THE BLIND PHOTOGRAPHER for application of buttons.