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

Professional Navigation Buttons


1. Start out with a new 200px wide x 75px tall image with a white background. Create a new layer titled Button Shape by going to Layer > New > Layer. Using the Rectangular Marquee Tool, create a rectangular selection for the button and fill the selection in white. Next right-click on the layer and select Blending Options. Use the following Stroke settings.

image 1

2. Next Ctrl+click on the Shape layer then create a new layer titled Gradient. To leave some of the white below, go to Select > Modify > Contract and enter 2 pixels.

Then fill the selection in white. To add the gradient, right click on the current layer (Gradient). Use the following settings for a Gradient Overlay. In the Gradient Overlay, click on the current gradient that is displayed to bring up the Gradient Editor. Use the settings in the second image for this.

image 2

image 3

image 4

3. Next create a new layer titled Small Gradient. Using the Rectangular Marquee Tool, hold the shift key down and create a small selection on the left side of the button. Fill the selection in white. Right-click on the current layer and select Blending Options. Use the following settings for Drop Shadow and Gradient Overlay.

image 5

image 6

image 7

4. To add a shape in the small button, grab the Custom Shape Tool and select a shape from the tool options bar. Then create a selection over the small button in order to add the shape to the image. Finally add text.

Professional Navigation Buttons Tutorial: Final Result

image 9



Author's URL: Depiction.net
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 "Professional Navigation Buttons"

Only registered users can write comment

No comments yet...