gototopgototop

design blog - graphic and web articles

graphic and web design tutorials

 

 


Web 2.0 Button in Photoshop Print E-mail


final artwork

 

Overview:

Buttons Photoshop tutorials are probably one of the most popular categories in any Photoshop tutorials site and since Web 2.0 became such attractive subject. Lets focus and together create a simple button suitable for any Web 2.0 application of websites.

 

 

1) Create a blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg01‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. You can choose any color from available palette.

 

tutorial image 1

 

tutorial image 2

 

2) Call up the Blending Options of ‘bg01‘and adjust the following styles:

Drop Shadow

  • Opacity: 40%
  • Distance: 0px
  • Spread: 0%
  • Size: 6px

Gradient Overlay

  • Color stop: 0%, #d00031
  • Color stop: 100%, #ff2b5d

tutorial image 3

 

3) Hold CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixels.

 

tutorial image 4

 

4) In the next step please create a new layer call ‘bg02‘ and filled the highlighted (after shrink) area with any color. I uses #000000 black. Double click on ‘bg02? to launch up the Blending Option and select as follows:

Gradient Overlay

  • Color stop: 0%, #c6002f
  • Color stop: 100%, #c6002f

5) Create another new layer for text, call it ‘txt‘. Insert your button’s text. I’ll use an alphabet to represent. The font styles I’m using here are as follow:

  • Rounded Arial Bold
  • 150pt

6) Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles:

Drop Shadow

  • Opacity: 25%
  • Distance: 0px
  • Spread: 0px
  • Size: 5px

Inner Shadow

  • Opacity: 10%
  • Distance: 0px
  • Choke: 0
  • Size: 10px

Bevel Emboss

  • Depth: 1px
  • Direction: Down
  • Size: 0px
  • Softten: 0px
  • Highlight Mode Opacity: 32%
  • Shadow Mode Opacity: 32%

Gradient Overlay

  • Color Stop:0% #d2d2d2
  • Color Stop:100% #f0efef

tutorial image 5

 

7) Button is almost ready to use. A glow over the top part will look very nice here & it will give better overall effect. Hold CTRL, left click ‘bg02‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area. If in doubt look at the picture below.

 

tutorial image 6

8) With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.

 

9) Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button. And here we go, we finally have a button which, with a bit of luck, should look something like this:

tutorial image 7

 

 

Author: hongkiat

Website: tutorial

 

 

 

submit tutorial to us

 

 


back_to_tutorials

 

 

Covering all UK area: Bedfordshire, Hertfordshire, London, Buckinghamshire, Northamptonshire, Cambridgeshire, including:
Luton, Hertford, Bedford, St Albans, Stevenage, Milton Keynes, Welwyn, Cambridge, London and more.