Full Web Building Tutorials

How to Design a Stylish, Unique Button in Photoshop
Unique Button in Photoshop

In this tutorial you will be creating this button:


1. Create a new document with the settings below:

2. Using the zoom tool (), zoom up to 600%

3. Select the paint fill icon () and fill the document in with the purple below:

4. Now go to the layers palette and right click on it, and select Blending Options

5. Go to Inner Shadow and apply the settings below

6. Now click okay, and close that out and make a new layer named “shine”

7. Now make the foreground color white

8. Get out the elliptical marquee tool and click and drag outside of the image to the inside until you get a selection like below:

9. Select the gradient tool and make sure its settings match

10. With the gradient tool still selected, click the gradient editor right under the word “Image” to edit the gradient fill. Copy the settings below:

The top sliders adjust the opacity of the color below it, the bottom ones are the colors.

11. Click OK, and click and drag from top to bottom inside the selected area, stop where you hit the line you made. You should get something like below:

Your button should look like this so far:

12. Click the shine layer and change the opacity to 83%

13. Now make a new layer on top of the rest and name it “border”

14. Change the foreground color to black

15. Select the pencil tool () and draw a black border. Hold shift to keep your line straight

16. Now you’re done! Just add some text, and that’s it.

The font used in the example is “Acknowledge TT BRK” and can be downloaded here.

If you want to change the color, it’s easy. Just go back to the bottom layer, select Blending Options, and go to color overlay. Then change the color!

in: | Posted on Mar 12th, 2009 | views 2,350
About the author
i'm moustafa from egypt i love doing one thing 'web programming & designing', This year I've got 19 years old and i'm in the english College of management (in Business Administration part soon)