FOR BETTER DESIGNS

In this tuto­r­ial I’ll show you how to make a nice unique web but­ton. I hope you will like this.

1. Take the rounded rec­tan­gle tool with radius 35px and draw a rec­tan­gle sim­i­lar or same like in the picture:

2.Open the layer style win­dow of this rec­tan­gle and fol­low the set­tings from the next few steps. Drop Shadow:

3.Inner Glow:

4.Bevel and Emboss and you can use con­tour here If you want the set­tings are default with the lower opacity:

5.Satin:

6.Stroke:

7.After this you must have some­thing like in the pic­ture here and now make a selec­tion of the shape of this but­ton (Hit CTRL+one mouse click on the vec­tor mask thumbnail)

8.The next thing you should do is to take the rec­tan­gle mar­que tool and cut the bot­tom part of the selec­tion. So now we’ll have a half selec­tion. To cut with rec­tan­gle mar­que tool hold ALT key­board key and drag with the mouse.

9. Make a new layer and feel it white color. Use CTRL+Backspace to do this much faster, but remem­ber your fore­ground color must be white while doing this.

10.Make the layer mode to soft Light opac­ity: 25% like in the picture:

11. Take the type tool and with some nice font with a white color type the text you want (About us in my case):

—So now If you like the but­ton as it is, you can leave it like that. If you want you can con­tinue to see how to make the other part of it.—

12.Take the cus­tom shape tool now and choose the shape I am shown in the image:

13.So on a new layer draw this shape in right side of the button.

14.Take the direct selec­tion tool and while hold­ing CTRL+ALT+SHIFT try to make the shape like in the next image:

15.Use the free trans­form tool to flip the shape horizontal.

16. While you have some­thing like that, you can fol­low the set­tings in the next images:

17.Drop Shadow:

18.Inner Shadow:

19.Stroke:

20.Inner Glow:

21.Gradient Over­lay:

22.Now here you can make a selec­tion again and you do the same for this shape like in the step 7 and step8.

23.Make the layer mode to soft light again and maybe change the opac­ity. And this is it.

24.The final result of this but­ton in dif­fer­ent col­ors. Hope you like it.

Related Posts

1. Tuto­r­ial: Greeny nav­i­ga­tion for your web­sites
2. Tuto­r­ial: Design a film strip in Pho­to­shop
3. Tuto­r­ial: Design awe­some 3d Graph in Pho­to­shop
4. Tutorial:Learn to make mosaic of pho­tos
5. Tuto­r­ial: Nice glossy menu