By Doug Cloud
Push buttons are a good, tactile addition to your Website. Not only can they enhance a clean, professional design, they can also add an element of tangibility, which can be important in the online environment.
This tutorial will show you how to make buttons that appear to "push down" when a visitor places their mouse pointer over them. While the steps below may seem excessive for making this kind of effect, it is important to note that this process creates a more crisp, clean, legible button image than those you will find proliferating the Web. Try it!
Step 1. Shape and Colour
Open Photoshop and create a new document that's 117px by 65px, resolution 72, in RGB mode, with a white background. Use the Zoom Tool (keystroke Z) and zoom in on your image by 400%. This will make working on the button easier.
Create a new layer and name it "Back", then take the Marquee Tool and draw a rectangular selection in the middle of the canvas. Make this selection 80 pixels long and 20 pixels wide (to see the size of your selection make sure the Info Palette is visible; if it isn't, go to Window > Info).
Choose the color you want the "Back" to be. In this tutorial I used a light sky blue (#0099CC). Make this your Foreground color and then hit Alt+Delete to fill the rectangle with the color. Finally, deselect (Ctrl+D).
Step 2. Button Up
Create a new layer, and name it "Button Up". Take your Pencil Tool from the tool bar and make sure the tip size is set to one pixel. Make your Foreground color black.
With your Pencil, draw a rectangle similar to the one on the left using the Back layer as a guide -- right along the top, and three pixels from the bottom.
Last of all, click the "eye" icon to turn off your Back layer, which will make it easier to do the next steps.
Step 3. Apply Gradient
Select your Magic Wand from the toolbar. In the Properties bar for the Wand tool make sure the Tolerance is set to 30, Contiguous is checked, and that Anti-aliased is off. Now select the inside of your rectangle.
Now click on your Gradient Tool in the tool bar, and make sure that Foreground to Background is selected in the Properties bar. Set your Foreground color to #51CEF8, and your Background color to #0E6D8D.
Draw your Gradient Tool from the bottom to the top, then deselect.
Step 4. Finish Button Up
Now take the Pencil again and use the same light blue color (#51CEF8) we used in Step 3 to draw a strip down the left side of your rectangle.
Next, use the dark blue color (#0E6D8D) from Step 3 to draw a strip along the bottom and up the right side of your rectangle.
Grab your "Button Up" layer and drag it down to the "Create a new layer" icon at the bottom of the Layers palette. Put this layer below the "Button Up" layer and name it "Button Down".
Turn the "Button Down" layer off for now by clicking the little "eye" icon next to it.
Step 5. Shadow
Create a new layer and place it below both your button layers. Name this one "Shadow".
Turn your "Back" layer on again by clicking the "eye" icon next to it. Use the Pencil to draw a "shadow" similar to mine using the dark blue color (#0E6D8D) from Step 3.
I turned off the "Button Up" layer so you can see the exact shape of the shadow I drew.
Here's how the shadow looks with the "Button Up" layer on.
Step 6. Finish Off
Now turn the "Button Up" layer off and turn the "Button Down" layer on. Select your Move Tool from the toolbar and press the "down" arrow key on your keyboard twice. Now turn this layer off and turn the "Button Up" layer back on.
Ok, that's it for making the buttons. Now let's create some text and then save the buttons for use on your Web page.
Step 7. Create Text
For the text, I used the Verdana font, size 10, in white with no anti-aliasing (when working with a font of this size I never use anti-aliasing). I also added a drop shadow to make the words stand out from the button a little more. You can add any words you like at this stage; perhaps use the names of the pages to which the buttons are going to link to (I'll use the word "About", as the button will like to my "About" page).
Your layers palette should resemble the one shown here. Notice I have the "Button Down" and "Background" layers turned off.
Now click on the small squares next to each of the visible layers to link them. Click on the small arrow in the upper right hand corner of the Layers palette and choose Merge Linked.
Tip: If you select a layer before you link it, the resulting merged layer will have that layer's name. For instance, on the left I've highlighted "About", and when all the linked layers are merged, the resulting layer is automatically named "About".
Step 8. Copying the File
Once you've merged the layers press the following keys in the order shown here:
- Ctrl+A to select all
- Ctrl+C to copy
- Ctrl+N to create new document
- Ctrl+V to paste
At the third step you can name your new document (for instance, as the file contains the About button in the "up" state, you might name it about_up).
Now highlight your buttons file (clicking on the title bar will highlight it) and press Ctrl+Alt+Z (to Undo) until you get back to where you were in the Layer palette example in Step 7.
Step 9. Button Down
Now we need to make the "down" state of our button.
Turn off the "Button Up" layer and turn on the "Button Down" layer. The first thing you'll need to do is move the word "About" so that when someone clicks the button on your Web page it will appear that both the button and the word "push" down.
Highlight the type layer that has the word About in it, select your Move Tool, and hit your down arrow key two times.
Now link the layers as you did in Step 7, and follow the directions in Step 8 to merge, copy, and paste into a new document. Name this new document about_down (or choose a name of your own).
Make sure you go back to your original button file and use Ctrl+Alt+Z to undo your changes back to the state in which your layers are not merged.
You should now have two separate documents -- one containing the about_up button,
and one containing the about_down button.
You will need to repeat these steps for each button you want to create. Remember to name each button accordingly. You can use different colors than the ones we used here -- just make sure your Back layer is always the same color as the background you'll be placing the buttons on.
Doug has been a commercial graphic designer for 23 years, and had his own comic strip for a while. He's been doing Web and graphic design work for the last 5 years.
Posts
No comments:
Post a Comment