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

Navigation Button


Step1:

Create a new image, File> New or Ctrl+N. Set the Width (800) and Height (600). Change the back ground color to white #FFFFFF

Step2:

Press Shift+Ctrl+N to create a new layer, Click on the Rounded Rectangle Tool (U) image 1 and enter the setting below.

image 2

Right click on the layer that your pill button is on and click Blending Options and enter the setting below.

image 3

Inner Shadow

image 4

Inner Glow

image 5

Bevel and Emboss

image 6

Contour

image 7

Color Overlay

Blend Mode color #f7f7f7

After entering the Color Overlay setting click on ok to accept the setting. You should have something like I have below.

image 8

Now click on the Type Tool image 9 and type something on to the button. If you reduce the Opacity to 50% or less on your text layer what ever you type onto your pill button will look like its inside the button.

Step3:

That's it.

image 10 image 11

image 12 Navigation Button



Author's URL: Mark
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Navigation Button"

Captcha