Article
Cool Web Design Effects Tutorials
Push Buttons In Photoshop
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.