Submit Your Article
Welcome to the first tutorial at Photoshoptown.com! Stay tuned for new tutorials added daily!
Well, let’s go ahead and get started with this simple tutorial. First we will create a new document. I prefer to still accommodate those users at 800×600, so lets set this new document at 790×21
Create a new layer and fill with white. Remember you can hit “D†to revert to the default white/black and then “X†to bring white to the brush color.
Double-click the layer to bring up the Layer Style menu and apply the following effects.
And remember, feel free to make the gradient any color you desire.
Now it’s time to separate the bar into individual fields with insets. Zoom in on your document to about 1200% by pressing the on your keyboard.
Create a new layer and using your marquee tool, make a selection one pixel wide and the height of your document. Fill this with black. Create another selection the same size and right next to your black line. Fill your selection with white.
Now you will want to change the blend mode for the layer. Double-click the layer to bring up the Layer Style menu. Under general blending, change the Blend Mode from
Duplicate the layer as many times as needed by right-clicking the layer and selecting duplicate layer. Slide them over to create different sections for your nav bar.
You are almost done, just a couple more steps!
Use the text tool to create your links using any font that you choose. I like Myriad Pro. Space them out to fill up the nav bar, and resituate those insets to separate the different sections.
And there you have it, a completed navigation bar! All that is needed is to break the image down for use in your webpage and add rollover effects if you desire, but that’s another tutorial!
Topics: Design, Navigation, Photoshop, Web Design
