All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
design-a-stylish-button-in-photoshop

Design a Stylish Button in Photoshop

1-19-08Category Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 190×60 pixels canvas set at 72dpi, and black background. Then set your foreground color on the tools palette to black.

Step 2:
Select the Rounded Rectangle Tool from your tools palette then above your screen under options palette choose Fill Pixels, set the radius to 20 px and check anti-aliased. Create a new layer and draw a white rounded rectangle, exact size 77×30 px.

Step 3:
Now select the rectangle tool and draw a white rectangle on the top right corner of your rounded rectangle.

Step 4:
Under Layer Style(Layer > Layer Style) add a Satin and Gradient Overlay blending options to your white rounded rectangle.

Step 5:
Your button should now look like this.

Step 6:
Select your Horizontal Type Tool from the Tools Window and above your screen under the options palette set the font family to Arial, bold, 10 pt, crisp and #009DD9 color shade. In a new text layer type ’search’.

Step 7:
Thats it your done, if you want a different color button just use your own color throughout the tutorial and it will have the same effect in the end.

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

11 Responses to “Design a Stylish Button in Photoshop”

  1. istanbull Says:
    January 21st, 2008 at 4:32 am

    sitenizde güzel e?itimler var çok i?e yarar ?eyler bunlar bence güzel

  2. nani Says:
    January 22nd, 2008 at 11:32 am

    its a nice one to fallow
    thankful to the owner’s

  3. nani Says:
    January 22nd, 2008 at 11:33 am

    nice to use

  4. rko Says:
    January 25th, 2008 at 3:27 pm

    hey man good tutorial,congratulations but where is the program??:d how can i get it?thanks if u let me an reply

  5. rko Says:
    January 25th, 2008 at 3:27 pm

    :D*

  6. admin Says:
    January 30th, 2008 at 8:51 am

    Buy the program at bestbuy :D

  7. Zoami Says:
    February 18th, 2008 at 11:03 am

    Really easy tutorial! Thanks!

  8. laipu Says:
    February 29th, 2008 at 12:11 pm

    Easy and quick to follow. Can run from here… tx.

  9. 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design Says:
    March 3rd, 2008 at 11:14 pm

    […] Stylish button from OriginMaker […]

  10. moneyblog » 45 Photoshop Tutorials for Better Navigation Says:
    March 4th, 2008 at 2:12 am

    […] Stylish button from OriginMaker […]

  11. 45 Tutoriais Photoshop para Itens de Navegação | RuanWeb Says:
    March 5th, 2008 at 12:53 am

    […] Botão Estiloso - Créditos: OriginMaker […]

Add a Comment