Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Basic Navigation

Basic Navigation


1. Opening the document

Open a new document, size 500px x 90px.

2. First background step

Fill the document with two colours split as shown below:

image 1

3. Second background step

Now, fill the left hand side as shown in the image below:

image 2

4. Creating the borders

Create a new layer and using the pencil tool, make sure the setting for brush size is on 1 and pencil in the white lines as shown below:

image 3

5. Add drop shadow to borders

Right click on the border layer and click 'Blending Options'. Add a drop shadow with these settings:

image 4

This is what your image should look like so far:

image 5

6. Adding the text

Almost done already! Now you just have to add the text. I used the font 'Danube', and this is my final result. After you have added the text, apply the same drop shadow that you used on the borders.

Basic Navigation Tutorial: Final Result (Click to enlarge)
Click to enlarge

I think it looks pretty good for something done in about five minutes! Hope you like it :)



Author's URL: murphj
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Basic Navigation"

Captcha