Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Simple Brilliant Button

Simple Brilliant Button


1. Create a new image 300x150 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 180x50 pixels and used white color #ffffff

Save this selection as "base selection".

image 01

4. Right click the "base" layer and choose Blending Options, use these settings:

Bevel and Emboss:

image 02

Gradient overlay:

image 03

Gradient overlay: use these colors # 0a521d -> # 2ac553

image 04

The result is:

image 05

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 192x62 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:

image 06

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

Outer Glow:

image 07

Bevel and Emboss:

image 08

Gradient overlay:

image 09

Gradient overlay: use these colors #598e67-> #ffffff

image 10

Stroke with grey color # 5e6270

image 11

The result is:

image 12

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:

image 13

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.

image 14

The result is:

image 15

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:

Simple Brilliant Button Tutorial: Final Result



Author's URL: Digital Street
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Simple Brilliant Button"

Only registered users can write comment

No comments yet...