Simplistic Header/Navigation Tutorial
Posted in Photoshop Tutorials, Web Design on December 1st, 2010
Hey everybody in this tutorial I’m going to teach you how to create a simplistic and clean navigation/header.
Step 1: New Document
Open up a fresh document 1000×100 pixels. Leave the background transparent.
Step 2: Background
Fill the background a light blue (#bed9ef). You can also apply pattern overlay like I did, but thats not really part of this tutorial. If you like what I used, the pattern is available for download at the bottom of the page.
Step 3: Rounded Rectangle
Create a new layer (ctrl+shift+n). Now grab the rounded rectangle tool with a radius of 10 pixels. Create a rounded rectangle around 960 pixels wide and 55 pixels in height. Delete the top 5 pixels of this rectangle so only the bottom corners are rounded. Place it centered at the top of our document.
Step 4: Blending Options
Open up blending options on the rectangle layer (layer>layer style>blending options). Apply the following settings.
Step 5: Text
Grab the horizontal text tool. Set the font to Helvetica, and the size to 30px. Type out your website name, make the first word bold (#d94242) and the second regular (#258bf4). Place in on the left side (centered vertically).
Step 6: Gradient Overlay
Apply gradient overlay (white to transparent) with the following settings.
Step 7: Navigation
Now make another text layer. This time set the font to arial (bold) size 14 pixels. Type out your navigation links (#d94242) with 5 spaces between each one. Make one link a dark grey, this will signify that its hovered over.
One Response