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 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.

Navigation Button Tutorial: Final Result image 11

image 12 image 13



Author's URL: Mark
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 "Navigation Button"

Only registered users can write comment

No comments yet...