How to Make Cool Web Buttons with Adobe Photoshop

What would be designing a web page like if Adobe Photoshop did not exist? It gives you the ability to design and create some pretty robust graphical affects. Here in this tutorial we will create a simple button that you can place on your web pages. I would not put this button in the realm of robust, but it will definitely give you a good launching pad for your creativity.

Difficulty: Easy

Instructions

Things You'll Need:

• Adobe Photoshop CS4

1. 
    

   Launch Adobe Photoshop and select "File" from the menu at the top then select "New".

2. 
    

   When the "New" window appears, give your button a name (I named it "button"), select "custom" in the "preset" drop down box, type in a width of "100 pixels" and height of "35 pixels", then click the ok button. This will give your button the size it needs.

3. 
    

   Unlock the background layer by double clicking on it in the layers panel then clicking the "ok" button when the layer window appears.

4. 
    

   Make sure the background layer is selected then click the "fx" icon at the bottom of the layers panel. When the pop up menu appears, select "drop shadow". See the picture for more detail.

5. 
    

   The "Layer style" window will appear and it is here on this window we will add the affects to our background stage that will be the design for our button. Take a look at the picture associated with this step and check the same boxes on your layer style window that is checked in the picture. I am using all of the defaults. After you get through this tutorial you can go back and play with some of the adjustments to get the buttons you desire. Click the "Ok" button when you are done.

6. 
    

   Now all we need to do is add text to our button. To do this click the text tool in your tools panel to activate it. Select "arial" and "black" and size "12 pt" as shown in the picture associated with this step.

7. 
    

   Type in whatever you want your button to say. Don't worry about location just yet, you can use the "move" tool in your tools panel to move the text where ever you like. I made the color of my word, red, but you can make the color anything you like.

8. 
    

   Click your text layer to make sure it is active and then click the "fx" icon again. Give your text a drop shadow so that it looks like it is floating above the button stage.

9. Finally save your file as an image that can be used with the image tag in HTML and you are all set. I find PNG or JPG works best.

Resources

• Share your knowledge, Earn Residual Income
• Follow me on Twitter
• Mike's 'How to' Blog
• eHow Group: Making Money Online for Writers
• eHow Group: Software Engineers & Programmers

[lemonpeppoart]

on 4/21/2009 I love how-to's for Photoshop. Very nicely written with clear instructions. I plan to try this later today. Thanks so much!