Navigation Buttons - A Tutorial
In making a header graphic we learned a little about some important Photoshop tools: Paint Bucket, Rectangular Marquee, Eyedropper, Foreground/Background color swicher, Crop, Move, Eraser, Text, and Layers, Save for Web, and more. We'll work with some of these same tools and really work the Layers Palette as we make buttons for our sites. We'll also explore a cool tool called Filters.
For the Mike's Bikes website I made six buttons, each containing an idle and a rollover state, for a total of 12 images. We could do this with 12 different Photoshop (.psd) documents. But I like to keep the key information for my buttons in one .psd file. Besides, doing it all on one file gives us some practice with our Layers Palette. In this tutorial we'll make the buttons for Mike's Bikes, our demo website for the class. You can follow along using Mike's Bikes text and images, or modify the tutorial for your needs. (I recommend the latter, unless you don't have any ideas.) Our goal is to make a pair of buttons like the following:
 |
 |
These buttons represent an "idle" and a "rollover" state for the Home button for a demonstration website we'll use for a few weeks. It is a basic website, and so these are basic buttons.
1) Open a new Photoshop document (File-New). Size the document 150px by 50px. Make sure we've got RGB and transparent selected. When we're done, this single file will have all the information for all our buttons. And it will have at least 6 layers that we'll hide or show to create our buttons as GIF images, a background color layer, and one layer for each of 5 different buttons (Home, Community, Major, Hobbies, Portfolio).
2) We need a background color for the button. For Mike's Bikes, I chose
a background that blends into the background of the main navigation area.
It is #A58F74, and looks like a light brown or dark tan. Let's select our
foreground color in the toolbox 
,
and enter the appropriate hex code. Then, select Mr. Bucket 
and pour our background color onto our Untitled document. Now we're ready
to lay down some text.
3) Select the Text tool. 
We used Times New Roman for the text in our header graphic; for these buttons,
we'll use Arial. I set it at 30pt and colored the text black (#000000).
Remember, this is an exercise and it is not particularly imaginative. I
hope you'll be a bit more creative in your own work. Let's start with the
Home button. Type "Home" in the document. (Notice that Photoshop
made you a new layer for your text? Cool.)
4) Using the Move tool 
,
get your Home text where you want it. It is important to anticipate here.
We're going to lay down a number of buttons, and each will have a different
number of characters. I want the first letter of each button to be aligned
left, while still seeming a little centered. (One way to do this is to start
by making the button with the most letters - "Portfolio" perhaps?)
Anyway, get Home far enough left to leave room for more letters after the
"e". Don't worry too much; I learn a lot by making mistakes, and
you will too. (If you don't fall down you never learn to walk!) Got it where
you want it? Good.
5) The hard work is almost done now. Let's duplicate our Home layer by right-clicking it in our Layers Palette and choosing duplicate layer. Now we have two "Home" layers. One will be our idle state and the other will be our mouseover state. Let's hide the original Home layer by clicking on the eye next to it. (There are other ways to do this!)
6) Make sure we have our duplicate Home layer selected. Now we're going to play with Filters to give our button some action. Two options here: choose Filters from the options across the top of Photoshop, or click the tiny stylized "f" icon at the bottom of our Layers Palette. I prefer the latter for this kind of thing, but you choose. Both paths get you to the same place. Either way, Photoshop reveals a treasure-trove of filter effects just waiting to be explored and exploited. In fact, it is here that you can go really wrong with your visual design if you aren't careful. (Just look at my green glowing Home button!) Just because you CAN do something visually does not mean you SHOULD do it. Anyway, do play around with this stuff. (I recommend playing by following some of the tuts at Good Tutorials; you'll learn and make cool stuff.)
7) We're here for a basic mouseover or hover state filter effect on our Home button. Not wanting to be too fancy, I chose "Outer Glow" for Mike's Bikes. I leave it to you to play around with all the goodies in just this one simple filter. Here are the options I selected:
8) When you're finished playing it's time to try the "button" effect. Let's pretend this is a button. Hide the Home layer with the filter and show the original Home layer. That's our normal state. Now show the filtered Home layer. That's it. Normal, Hover. (We'll need to learn a little about implementing a javascript to bring this to life on a real webpage, but the graphics work is basically done!)
9) Two (or three) more steps. Let's make the idle and hover states for
our other buttons. This is so easy it should be called cheating. Right-click
your Home layer and duplicate. Use the mouse to deselect the eyeballs and
hide the Home layers you made in the last two steps. (Don't worry if you
forget to do this; you'll quickly see why it's important and make the adjustment!)
Make sure the newest layer is selected before proceeding. Select the Text
tool ,
highlight the word "Home" on the image, and type the name of another
button (Sales, Rentals, Hobbies, Portfolio, etc.). Working this way ensures
that the text for each button starts at the same position, creating a neat,
orderly appearance. Got it? Now duplicate that layer. Then, mouse over the
filter effect for your Home mouseover layer, click and hold, and drag that
filter up to the duplicate layer for your second button. Handling filters
this way ensures consistent application of the same filter for every button!
You can either repeat this step to make the rest of the buttons, and skip
to Step 11, or do Step 10 and see another way to get to the same place.
10) You've been paying attention. Right? You know that we can show or hide a layer using the eye next to the layer. We can do the same thing with our Filters. Try it. Click the eye next to the filter effect for the mouseover layer you just created. Voila! Now it looks the original or idle state. Click again and you have the hover effect. We can use this technique to make the rest of the buttons and end up with fewer layers so the Layers Palette for our .psd doesn't look so cluttered. Duplicate the layer for the hover effect you created in Step 9. Select your Text tool and highlight the text on your button. Type the text for your next button. Now, duplicate that layer and repeat this step over and over - until you have all your buttons made. We'll make our actual GIF images by showing and hiding different layers and filters, and Saving for Web as we go. Onward to the final step.
11) Remember our header graphic tutorial? We used Save for Web to select an image format (JPG or GIF) that balanced file size and image quality. With these buttons we have a straightforward case of GIF-appropriate images, though I encourage you to check JPG just to be sure. We'll start at the beginning, with Home. Hide all layers except your original Home layer and the layer with your background color. Look right? Good. Choose File-Save for Web. GIF 32-Dithered is probably your best bet. Save this image as something simple (home.gif) in your images subfolder. Now, hide the original Home layer and show the duplicate one with the filter effect. Choose File-Save for Web and save it the same way. But let's call it home_over.gif so it will be right next to home.gif in our directory and will be clearly labeled. Good. Now, repeat these steps with each button until you have made all the buttons. If you followed Step 10, you have to do the same thing. The only difference is that you'll also be showing and hiding the Filters for as you make your buttons. When you're all done, save this Photoshop document with all the layers in your images subfolder. Call it something like (personalsite_buttons.psd, buttons_tutorial.psd, or something else.)
That's it! Make sure to make some buttons like these for your personal website if you didn't make them using this tutorial. We'll insert the original buttons when we put our graphics into our personal websites, and we'll add the interactive hover effect in a few weeks. Don't lose those buttons!