Digital Street - Photoshop tutorials

Photoshop tutorials


Easy Brilliant Button

Category: Web graphics

1) Create a new image 300×150 pixels with transparent background. Rename this layer as “background”

2) Fill the background with black #000000.

3) Create a new layer, rename this layer as “base”, make a rectangular selection and fill it with any color. I have made selection 180×50 pixels and used white color #ffffff
Save this selection as “base selection”.

01.png

4) Right click the “base” layer and choose Blending Options, use these settings:

Bevel and Emboss:
02.png

Gradient overlay:
03.png

Gradient overlay: use these colors # 0a521d —> # 2ac553
04.png

The result is:
05.png

5) Create a new layer, rename this layer as “border”.

6) Select the Rectangular Marquee Tool and draw a rectangle that will be used as a border. I used 192×62 pixels. Position the rectangle around the “base” layer.

7) Fill the selection with any color. I used white color #ffffff

8) Load the “base selection”.

9) Press DEL to delete selection and you will get a border around the “base” layer:

06.png

10) Right click the menu layer and choose Blending Options, use these settings:

Outer Glow:
07.png

Bevel and Emboss:
08.png

Gradient overlay:
09.png

Gradient overlay: use these colors #598e67—> #ffffff
10.png

Stroke with grey color # 5e6270
11.png

The result is:
12.png

11) Create a new layer, rename this layer as “light”. These layer will add a nice light effect to the button.

12) Select the Rounded Rectangle Tool and draw a shape similar to this:
13.png

13) Right click the “light” layer and choose Rasterize Layer.

14) Select Filter > Blur > Gaussian Blur. Select a radius you like, I have used 3,0 pixels.
14.png

The result is:
15.png

15) Finally add some text for the button and you are done. I have used a font called RedFive 36 px
The final result is:
16.png

An easy custom web button than can be used for your own website.

Want more tutorials?
See more recent tutorials HERE !

7 Comments so far

  1. krypton May 25th, 2006 4:12 pm

    nice dude, simple but nice

  2. soUL May 31st, 2006 6:31 am

    Very nice tutorial easy and usefull thanks bro

  3. maria June 2nd, 2006 4:04 pm

    simple n usefull thnx

  4. dj June 8th, 2006 12:52 am

    I had a bit of a problem in the border layer, I couldn’t figure out how to get the cutout part of the border so the bevel and emboss would work correctly. A little unclear in the directions for that part for a newbie user.

    Otherwise, an EXCELLENT tutorial, i learned a lot, thanks :)

  5. admin June 8th, 2006 2:50 am

    dj: in the step 3 you have: Save this selection as “base selection”.
    To save a selection you have to go to menu Selection > Save selection. So you have that selection saved for future use.
    In the steps 5 to 9 you only create a new layer, make a bigger rectangle and position it aligned to “base” rectangle. You can align it manually or using align tools. Fill it with color. Then having your “border” layer selected load the selection of step 3 going to menu Selection > Load selection. Finally just press the key DEL to delete that portion of rectangle and you will have a border.

    You can use the selection tools too, go to Selection > Modify and use Expand or Contract, that is up to you, the nice thing of Photoshop is that there are many ways to reach the same result :)

  6. hoya October 4th, 2006 4:31 am

    waaaaw

    thatz very good

    thanx

  7. Yasir Shaikh 92+333-2637495 August 23rd, 2007 4:16 am

    oh ya! this is very nice again…
    i have learn more…
    thanxxxx