Her

Home Photoshop Tutorials Web Layout Pill Shaped Navigation Button

Pill Shaped Navigation Button

Author: Mark Author's URL: www.pixeldigest.com More by this author

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