Stylish Navigation Bar
Views Today: 1, Total Views: 2125, Submitted by: Python on 15-06-2006
The navigation of a website plays a huge part of its design and can make or break the style. Because of this you should pay quite a lot of attention to your navigation when designing it to ensure that your users get the most out of your site.
In this tutorial I will show you how to create a fairly basic, but stylish website navigation bar.
1. You should start off by creating a new document. The size all depends on how big your navigation is going to be. For example if your webiste is 760px wide then you should create your document at least 760px wide also. For this tutorial however, I am using a fairly small sized document to save space.
2. Select the Rectangular Marquee tool from the tools window (or press M on your keyboard). Now at the top of your window click on the Style drop down box and select Fixed Size. Then enter the approiate sizes in pixels. Ive chosen 350px by 25px. Now click on your workspace so that you can see the selected area.
3. Create a new layer by going to Layer >> New Layer and call it Bar.
4. Click on the foreground colour in the tools window and set it to a ligh grey. Im using #C7C5C5. Click OK and then fill in the selected area with that colour. You should have something similar to the following:
5. Now were going to actually make it look good. Right-click on the Bar layer and select Blending Options. From here you can apply a wide selection of effects however were only going to be looking at Gradient Overlay and Stroke.
6. Click on Gradient Overlay. Make sure that the selected gradient is going from black to white or vice versa. Set the opacity to 30% and the angle to 90 degrees. Now click on Stroke. Change the size to 1px and the position to Outside. Set its opacity to 40% and its colour to black. Now click OK.
7. You should now see that your bar has got a smooth gradient on it as well as a border around the outside. Mine looks like this:
8. Now were going to split up the navigation bar so we can have links on it. To do this select the Single Row Marquee Tool. If you cant see it on the tools window then right-click on the rectangular marquee tool and select it from the drop down. Now click on your bar whereever you want your first dividing line to be. Then simply press the Delete key on your keyboard. Do this as many times as you need until you have enough sections.
9. The next step is adding some text onto the navigation bar. You can do this by clicking on the text tool on the tools window and then clicking where you want it to go. All you have to do now is type in whatever links you want. If you want to change the font of the text go to Window >> Character and change the settings in the Character window. Thats all thats to it.
10. You can then add some other effects such as adding a stroke to the text. You can do this the same way you done it earlier through the blending options window.
My final result is:
Post A Comment
If you want to comment on this tutorial you must first register or login.
Syndicate