Tutorial #01

Navigation Buttons

Summary

We'll use Photoshop to create navigation buttons for a Web site. Here you'll see how to make one button with two images: one for the "up" state and one for the "down" (mouse-over) state. Then you'll make a second button with up and down images.

 

Setup: Create a tutorial folder with subfolders

1. In My Documents, create a new folder called lastnamefirstinitialButton.
2. Inside this folder, make two folders:
   1. assets - this is where you'll put your image ready for the Web
   2. workdesk - this is where you'll keep your working Photoshop files

Note: when you create buttons for your Web sites, use the assets folder that already exists and create a workdesk folder to store your Photoshop files.

 

Step 1: Create a new file

1. Open Photoshop.
2. Create a new file (File > New) with the following settings:
   1. Name: Button
   2. Width: 100 pixels
   3. Height: 20 pixels
   4. Resolution: 72 pixels/inch
   5. Color Mode: RGB Color
3. Save your file as Button.psd inside the workdesk folder in your lastnamefirstinitalButton folder.

 

Step 2: Create two background colors

1. Create two new layers (Layer > New > Layer).
   1. Name one layer Up.
   2. Name the other layer Down.
   3. The down layer should be above the Up layer in the Layers palette.
2. Fill the Up layer with color:
   1. Click on the Up layer in the Layers palette.
   2. View the Swatches palette and click on a dark color you like.
   3. Press Alt-Backspace on your keyboard to fill the layer with the color.
3. Fill the Down layer with a different dark color.
4. Save your file (Ctrl-S).

 

Step 3: Add text

1. Click on the white swatch in the swatches palette. This will make white text.
2. Click on the Text tool in the tool palette.
3. Up in the Options bar, use the following settings:
   1. Font: Choose whatever font you want. A heavy or bold font is best.
   2. Size: 18pt
   3. Alignment: Left

3. Click on the left side of your button rectangle, but not right up against the edge.
4. Type the word Button.
5. In the Options bar, click on the check mark to finish your text editing.
6. Save your file (Ctrl-S).

 

Step 4: Save for Web

1. First we'll save the Down image:
   1. File > Save for Web and Devices
   2. Preset: GIF 128 Dithered
   3. Click Save
   4. Navigate to your assets folder inside your lastnamefirstinitialButton folder and save the file as ButtonDown.gif
2. Turn off the visibility of the Down layer by clicking on the eye image on the left of the Down layer in the Layers palette. This makes your Up color visible.
   

3. Now do steps a - d above again, but save the file as ButtonUp.gif
4. Save your file (Ctrl-S).

 

Step 5: Rinse and repeat

1. Save the file as a new name:
   1. File > Save As...
   2. Name the file Button2.psd
   3. Save the file inside the workdesk folder
2. Select the Text tool again.
3. Select the Button layer in the Layers palette.
4. Click just at the right edge on the "n" in the word "Button" in the image. You'll know you're about to click in the right place if the dotted rectangle around your cursor disappears.
5. Type a space and the number 2, so that the text reads "Button 2".
6. Click the check mark in the Options bar to complete the text edit.
7. Turn the visibility of the Down layer back on.
8. Save the file for Web and Devices as Button2Down.gif (make sure it goes into your assets folder).
9. Turn off the visibility of the Down layer and save the file for Web and Devices as Button2Up.gif.
10. Save your file (Ctrl-S).

 

Turn it in

Turn your lastnamefirstinitialButton folder into the InBox.