In this very own photoshop tutorial of this humble quantum, we will learn how to make some kool background for a horizontal navigation bar. You can use this background for a table then split the table into as many columns as you wish and put your links in each column cell. Dreamweaver is recommended for easy setup of the table. Because you can visually change and manipulate the table quickly to your needs in the dreamwever design view. Anyway, let's start. This tutorial assumes that you are familiar with the photoshop interface and are willing to find out little settings by yourself from short references.
1. Create a new photoshop document with the width of your total navigation bar and about 300 pixels height. Background white.
2. Make a selection of 30 height and width = your document width.
3. Keep the selection and make a new layer. Fill (edit-fill) the new layer's selection with white.
4. Now is the tricky part. Go to the blending option of the new layer by right clicking on the layer. Select and Change the settings:
Drop Shadow:
Angle: 90 degree
Distance: 0
Spread: 0
Size: 9
All other settings must remain the default photoshop settings.
Gradient Overlay:
Style: Linear
Angle: -90
All other settings must remain the default photoshop settings.
Now choosing and editing the gradient.
Bring out the gradient editor window by clicking on the gradient selection pull down menu. Choose the Foreground to Background Gradient from the selection. If you did'nt know already, you can add many preset gradient to the selections by clicking load from the gradient editor window. Now let us modify the gradient using the color stops at the gradient bar. We will use three color stops.
The left stop: Color: CCCCCC at 0%
The middle stop: Color: FFFFFF at 60%
The right stop: Color: CCCCCC at 100%
And there you have it. A nice background for your navigation bar custom made in photoshop. Now crop the bar from the main image and bring it to the dreamweaver to add to your table.
Additional effect:
You can add additional effects to the bar.
1. Duplicate the navigation bar layer.
2. Delete all the blending effects.
3. Select the layer by control right clicking the layer in the layer window
4. Fill the layer with pattern. I choose Sparse Basic Noise 200 by 200 gray scale. It is one of the photoshop's preset pattern.
5. Now lower the opacity to about 15-20%.
6. Cool, nah? You can try and experiment with other patterns and see how it comes out.
Good luck.
_________________
Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.
