In this very easy Photoshop tutorial we’ll be learning how to design a nice, sleek navigation bar that you can use on your website design. This is a beginner tutorial, so if you’re an intermediate or professional Photoshop user, I’m not sure you’ll be learning from this
1. Create a New Document
First, start by making a new document in which you can make this sleek navigation bar! (I used a regular template size of (800×1000, but you might want to use a much smaller size for this tutorial.)
2. Create the Bar
Start by creating a new layer. Now make a selection inside of your document, fill your selection with #52A1C4.
Now please apply the following Gradient Overlay in the blending options/layer styles:
3. Add a Glossy Shine
Create a new layer and select the main bar layer (CTRL + Click layer thumbnail) now contract the selection down 1 pixel by going to Select > Modify > Contract in the menu.
After contracting the selection, find and get out the Gradient Tool ( ) and set the gradient to Foreground to Transparent gradient
![08 Glossy Navigation Bar Tutorial Glossy Navigation Bar Tutorial](http://www.buildtutorial.com/wp-content/uploads/2010/09/08.gif)
Now a much smaller gradient at the bottom:
![09 Glossy Navigation Bar Tutorial Glossy Navigation Bar Tutorial](http://www.buildtutorial.com/wp-content/uploads/2010/09/09.gif)
Change the layer mode for your gradient layer to Overlay, and lower the opacity if necesary.
![10 Glossy Navigation Bar Tutorial Glossy Navigation Bar Tutorial](http://www.buildtutorial.com/wp-content/uploads/2010/09/10.gif)
4. Adding some Text
For the text I used: Tahoma, 11 pt, Bold, White with a 100% Drop Shadow as shown in the below image:
![11 Glossy Navigation Bar Tutorial Glossy Navigation Bar Tutorial](http://www.buildtutorial.com/wp-content/uploads/2010/09/11.gif)
My finished product:
![http://img197.imageshack.us/img197/2527/102ru.gif](http://img197.imageshack.us/img197/2527/102ru.gif)
0 comments:
Post a Comment