How to Make this Cool Web Button with Adobe Photoshop CS4

This tutorial is a fairly easy one to create a neat object that can be used as a web button on a website. Here is a step by step tutorial to create a really neat web button.

Difficulty: Easy

Instructions

Things You'll Need:

• Adobe Photoshop CS4

1. Launch Adobe Photoshop CS4 and create a new project selecting "web" as a preset. You can choose any size just make sure you give yourself enough room to work with

2. 
    

   Create a new layer. Rename it "bottom layer".

3. 
    

   Select the rounded rectangle tool and set the radius to 10 px and draw the object.

4. 
    

   Rasterize the object you just drew by right clicking on the object and selecting "rasterize layer".

5. Create a new layer. Rename it "smaller layer".

6. Change the default color to white by pressing the letter "x" on your keyboard until the default color is white.

7. 
    

   Using the rounded rectangle tool with the radius still set to 10px. Draw a smaller object on top of the existing object you drew earlier, and rasterize the new object layer. Your drawing should looke like what is shown in the picture associated with this step.

8. 
    

   Select "smaller layer", then click on the "Filter" menu item then select "Blur" then select "Gaussian Blur".

9. 
    

   When the gaussian blur window appears set the radius to 7.0 pixels.

10. 
     

    Press "CTRL+T" keys on your keyboard to activate the transform tool. We will use this pull the smaller object to each of the edges of the biggler object. Once you are done click the checkmark to accept the changes.

11. Select the bottom layer. We are now going to add the effects necessary to make it look like our final button.

12. Click the "fx" icon located at the bottom of the layer window to bring up the "Layer Style" window.

13. 
     

    Click the "Drop Shadow" checkbox and use the settings as shown in the picture associated with this step.

14. 
     

    Click the "Inner Glow" checkbox and use the settings as shown in the picture associated with this step.

15. 
     

    Click the "Gradient Overlay" checkbox and use the settings as shown in the picture associated with this step.

16. 
     

    Click on the gradient drop down box to bring up the "gradient editor" window. Set the color of the left slider to "fa0707" and the color of the right slider to "710202" and the location of the left slider to 75%. Take a look at the picture associated with this step.

17. 
     

    Click the "Stroke" checkbox and use the settings as shown in the picture associated with this step.

18. You now have the object in its final stage. Just add some text to it with the text tool and you are done.

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

[lenrapp]

on 6/13/2009 Nice job on this article Mike, thanks, gave you a 5 Star Rating