1. Creating Our Main Layout
First, lets start off by creating a new canvas size 450X100 with the background being #FFFFFF. create a new layer. select your rectangular marquee tool and starting from the top of our canvas, make a selection going all the was across and about 94px high. Click on Layer > New Fill Layer > Solid Color. Enter #70211E in the color selection and click OK. We should now have a red rectangle going across the top of our document, and a white slip at the bottom.
2. Detail, Detail, Detail!
Next we will be adding a small detail. zoom in close, and Scroll to the bottom of our red rectangle. Now we will create a new layer and select our single row marquee tool. 3px from the bottom of our rectangle make a selection and fill with #000000. click the up arrow on your keyboard to go up 1px and fill this selection with #FFFFFF. now we will go to Layer > Layer Style > Blending Options. Change your blend mode to Soft Light and your opacity to 20%. This may not look like much at this point but it will make the whole navigation look more distinguished in the end.
3. Text
Now we will be adding text. Select your horizontal Type Tool. I used the BigNoodleTitling text at 18pt for my text, with a regular font style, and anti-aliasing set to sharp. If you do not have this text you should download it for this tutorial. It can be found at http://dafont.com. I simply typed Text for an example, but you can put your actual links if you wish. between each link i pressed the space bar 21 times.
4. Lets Glow!
Next we will be adding a bit of glow to our navigation. Create a new layer and select your brush tool, using a soft brush at 100px. set your foreground color to #FFFFFF and go through clicking ONCE on each link. Go to Layer > Layer style > Blending Options and set the blend mode to overlay and the opacity to 50%.
5. Our Shine
Now we will use the same technique again to add more shine to it. Create a new layer and change your soft brush size to about 65px and start clicking over each link once more. this time we will go to Layer > Layer style > Blending Options and set the blend mode to Soft Light and the opacity to 50%.
6. Finishing Touches
For the finishing touches, we will be adding a hover effect to our links. Start by selecting your rounded rectangle tool. Press D on your keyboard to reset your colors. Now create a rounded rectangle that is about 75px wide and about 50px tall. right click on the layer that was just created and click on Rasterize Layer. now select your eraser tool. use a soft brush at about 65px and erase half of out rectangle. now go to Layer > Layer style > Blending Options and set the blend mode to Soft Light and the opacity to 50%.
I hope this tutorial has been helpful and that you have learned how to successfully create a Clean Red Navigation of this style.


More Tutorials:



