Step 1: Creating the Workspace:
Start by creating a 650 x 150 Document and filling in the background as a Neutral White (#FFFFFF)
Step 2: Create the background
Unlock the background layer by double clicking on it and then right click the unlocked background layer and select blending options. Apply these settings:
Gradient Overlay:
Pattern Overlay:
Step 3: Download the Pattern file (If needed)
(The following pattern is not loaded in as a default in Photoshop you will need to download it. To download it you will be able to find it within the .zip file which will contain the PSD file as well as other things. Click here to download the .zip. The pattern will be called lines.pat)
Once you have done all of the settings Click OK and we should have a background like this:
Step 4: The Nav Bar
Next grab your Rectangular marquee tool and make a selection like this:
Fill in the selection with any color and then duplicate the layer a few times to create this:
On the first square layer (The square shape far left) right click on it's layer and select Blending Options apply these settings:
Gradient Overlay:
Stroke:
Apply all of those settings and you should end up with the first square looking like this:
Step 5: Add the gloss
Let's make it more web 2.0 by adding a bit of gloss to it. Click on the layers thumbnail in the layers panel. You will then get a selection around the square again. Make a new layer and fill it with white. Shrink the new layer to this size:
Lower the opacity to about 12% to get this effect:
Step 6: Apply some styles to the second nav link
Now let's concentrate on the second and third square shapes. So on the middle square layer go to Blending Options and apply the following settings:
Drop Shadow:
Gradient Overlay:
Stroke:
Click OK to apply the settings and this should be the outcome of the middle square:
Step 7: Transfer the updated layer style
Now on the layer we have just been messing with right click on it and select Copy Layer Style. Then on our final square right click on it's layer and select Past Layer Style. It will then copy all of the settings we have changed on the middle square shape like so:
Now copy the gloss layer twice and place it on the middle and far right square shapes, set the opacity of the two new glossy layers to 14% instead of 12%:
Step 8: Add some text
Finally to finish off the navigation bar let's add in some text. For the text I'm using the Font Georgia, using the colours #FFFFFF and #535353 and using a font size of a regular 18px font. Add in your text like so:
Step 9: Create the header
Now to add in the header text. Grab your text tool and make some text near the top left hand corner. I'm using the same font as I did for the Navigation links expect I've set the font to a Bold Style and using a 24px size:
Now duplicate the text layer you've just made and then go to Edit > Transform > Flip Vertical and then position the layer like so:
Lover the opacity to about 27% to get this effect:
Now grab your rubber tool and selected a brush that has a blur setting and make a few swipes with the rubber tool on the duplicated text layer until you get a effect like this:
Finally add in a slogan underneath like so. For the font I'm still using Georgia but this time set the size to 12px and the style has Italic:
The Final result:
There we go a Web 2.0 Style Header with Navigation!
