PSD Tutorial: Design An Ocean Blue Menu Navigation For A Web Layout
In this Web Layout PSD, I'll be demonstrating, step by step, how to design a menu navigation bar, a header (where your logo, etc could be), and a custom text logo using the NFL Chargers font. The beautiful ocean blue menu navigation uses the modern sans serif font known as PetitaBold, one of my favourite fonts, and also divides each menu item with an embossed or engraved vertical dividing line, which I've created with simple light effects using Bevel & Emboss. The stripey tiled header has a slight crunched paper texture, and is admittedly one of the more amateur tutorials on the site.
If you don't have Adobe Photoshop, or you would like to upgrade to the new CS5.5 Version, take a look at the Adobe Special Offers from the online Adobe Store. If you're new to Photoshop, we have some beginner tutorials and basic tips coming very soon for some of the lesser established designers.
If you don't have Adobe Photoshop, or you would like to upgrade to the new CS5.5 Version, take a look at the Adobe Special Offers from the online Adobe Store. If you're new to Photoshop, we have some beginner tutorials and basic tips coming very soon for some of the lesser established designers.
Download Photoshop (PSD) File
Download Blue Striped Grunge Texture
Download NFL Chargers Header Font
Download PetitaBold Menu Navigation Font
Photoshop Tutorial Step 1: Making The Sky Blue Background With Cloud Effect
1.1. Fill your background #74B2FC sky blue, and then add Filter » Noise » Add Noise.
1.2. Make sure the Amount is 2%, Distribution is Uniform, and then tick the Monochromatic box.
1.3. Now, Create A New Layer and then add the Filter » Render » Clouds effect.
1.4. With Image » Saturation, lower the Saturation completely and add a Soft Light Blending Mode.
1.5. Play with Duplication and Opacity if you want to intensify the effect.
1.2. Make sure the Amount is 2%, Distribution is Uniform, and then tick the Monochromatic box.
1.3. Now, Create A New Layer and then add the Filter » Render » Clouds effect.
1.4. With Image » Saturation, lower the Saturation completely and add a Soft Light Blending Mode.
1.5. Play with Duplication and Opacity if you want to intensify the effect.
Photoshop Tutorial Step 2: Designing The Blue Striped Grunge Header & Logo
2.1. With the Rectangular Marquee Tool on a New Layer, Fill your header the same #74B2FC Sky Blue.
2.2. Add the Noise effect again, and also a Layer » Layer Style » Drop Shadow and Stroke.
2.3. For the Stroke, make sure it is 2px, White and with 85% Opacity.
2.4. For the Drop Shadow, change the colour to #74B2FC, make the Spread 100%, and Size 4px.
2.5. Paste in the Blue Striped Grunge Header Texture and tile it by Duplicating.
2.6. Merge All the tiles together and then change the Blending Mode to Soft Light.
2.7. With The NFL Chargers font, create your logo and anything else important you'd like to add there.
2.8. Add a Gradient Overlay with a Soft Light Blending Mode and 5% Opacity.
2.9. Make the header text have 95% overall Opacity.
2.2. Add the Noise effect again, and also a Layer » Layer Style » Drop Shadow and Stroke.
2.3. For the Stroke, make sure it is 2px, White and with 85% Opacity.
2.4. For the Drop Shadow, change the colour to #74B2FC, make the Spread 100%, and Size 4px.
2.5. Paste in the Blue Striped Grunge Header Texture and tile it by Duplicating.
2.6. Merge All the tiles together and then change the Blending Mode to Soft Light.
2.7. With The NFL Chargers font, create your logo and anything else important you'd like to add there.
2.8. Add a Gradient Overlay with a Soft Light Blending Mode and 5% Opacity.
2.9. Make the header text have 95% overall Opacity.
Photoshop Tutorial Step 3: Designing The Ocean Blue Menu Navigation
3.1. Repeat the Marquee step, instead using the Elliptical Marquee Tool as well to create the rounded corners effect.
3.2. Add the same three layer styles as before: Drop Shadow, Stroke and Gradient Overlay.
3.3. With the Gradient Overlay, change the Opacity to 100% instead of %5.
3.4. With the Text Tool, write out the PetitaBold font with appropiate spacing in between each menu item.
3.5. Add a Drop Shadow with 40% Opacity, 1px Distance, 0% Spread and 1px Size. Angle is variable.
3.6. Fill a Single Column Marquee Tool #365169 Blue and add an Outer Bevel & Emboss with the following...
3.7. 3px Size, 1px Soften, 32 Degree Angle, 30 Degree Altitude, and both Opacities at 50%.
3.8. Flatten the layer, Transform » Scale by 50%, and then change the Blending Mode to Soft Light.
3.9. Wwith a soft brush, erase only what you need, and Duplicate as many times as necessary the effect to intensify it.
3.2. Add the same three layer styles as before: Drop Shadow, Stroke and Gradient Overlay.
3.3. With the Gradient Overlay, change the Opacity to 100% instead of %5.
3.4. With the Text Tool, write out the PetitaBold font with appropiate spacing in between each menu item.
3.5. Add a Drop Shadow with 40% Opacity, 1px Distance, 0% Spread and 1px Size. Angle is variable.
3.6. Fill a Single Column Marquee Tool #365169 Blue and add an Outer Bevel & Emboss with the following...
3.7. 3px Size, 1px Soften, 32 Degree Angle, 30 Degree Altitude, and both Opacities at 50%.
3.8. Flatten the layer, Transform » Scale by 50%, and then change the Blending Mode to Soft Light.
3.9. Wwith a soft brush, erase only what you need, and Duplicate as many times as necessary the effect to intensify it.
Photoshop Tutorial Step 4: Adding Final Lighting Effects & A Quick Tip
4.1. After Creating A New Layer, open a large soft brush and use it on an area you'd like to intensify.
4.2. Alter the Blending Mode to Soft Light and Opacity to 35%.
4.3. Another tip: flatten the menu navigation text before continuing with the tutorial.
4.2. Alter the Blending Mode to Soft Light and Opacity to 35%.
4.3. Another tip: flatten the menu navigation text before continuing with the tutorial.
