Adobe Photoshop Tutorial - How to Make a Classy Looking Navbar
Tutorial Overview
This free Photoshop tutorial is designed to show you an easy way to create an elegant sleek looking Navigational Bar for your site in just a few minutes. This lesson is very easy to grasp and will show you some simple techniques that you can use across your site design. With this navbar you can use a variety of backgrounds for different effects using the text placeholders from this tutorial so it's a good template for later use down the road.
Step 1 - Render Some Photoshop Clouds
For this navbar we will start off with 2 simple layers. First create a new image, for this example we will use 760x90 as it fits well for most web sites. Set your foreground color to yellow and background color to black. Choose [Filter -> Render -> Clouds] until you get a nice smoky effect. Now create a 2nd layer on top, set the foreground color to orange (255, 123, 0 is a good mix) and background color to black. Render clouds in this layer also, don't forget to fill the layer with a solid color first or Photoshop will give you an error. Set the top layer mode to overlay and keep rendering clouds until you get just the right effect. You can see the animated steps on the right.
Step 2 - Adding Text Placeholders
Of course any navigation bar would be worthless without adding text. There is of course one problem, you can't expect people to see your text on a complicated background very well. The solution is simple. We create text placeholders. Create a new layer on top and call it text or whatever you fancy and select the rounded rectangle tool from the toolbar. Use a Radius setting of about 5 pixels. Now find some areas where you think the text will be well suited and drag a rectangle in the area. You may want to turn on the guides to keep it accurate and well aligned. You also want to keep the text areas somewhat synchronous to draw attention to where you want it. For this example we are using a logo area on the left, 2 navigational text areas and some filler sharp edged pointed rectangles on the right just for effect. For the sharp edge filler you want to use the Polygonal Lasso Tool aligned to the grid so you can get the nice right angles. Your template should now look like the image below.
Step 3 - Adding the 3D Effect
Now it's time to add a little depth to the text template. On your text template layer add a Bevel & Emboss layer style, select outer bevel, the rest of the default settings work fine here. Now adjust the fill amount in the layer palette to about 25%. You've now got an excellent placeholder for your text! Go ahead and add an inner bevel to the background to give it a nice 3D effect. For text you can either use plain links in a table over the image or if you prefer just add the text in Photoshop and use image ready to build layer slices for your html template. When finished you're new navbar will look something like this. Thanks for reading and be sure to come back often!
