Cool Web Design Effects Tutorials

Step 8. Copying the File

Once you've merged the layers press the following keys in the order shown here:

1. Ctrl+A to select all
   
2. Ctrl+C to copy
   
3. Ctrl+N to create new document
   
4. 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.