Cool Web Design Effects Tutorials

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".