website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Web 2.0 Navigation
rss

Web 2.0 Navigation

Author: Xtra Tutorials More by this author


Step 1: Open a new document around 500x100 pix for you web 2.0 navigation and fill it up with a gradient using #eceae5 and #e5e5e5 to make a slight gray color, or you can also use any other color you like.

Step 2: Using the Rounded Rectangle Tool and with a radius of 15 px make a rectangle like I have done to make the base of the navigation.

image 1

Step 3: Now go to blending options and apply the following effects:

image 2

image 3

image 4

image 5

After applying all those effects your outcome should be this:

image 6

Step 4: After you have added all the effects its now time for the text, just type the text you want for your navigation and for a divider you can you the | keyword in your keyboard or make a line using the line tool and you should have this:

image 7

Step 5: Now using the Custom Shape Tool select the shape of a star present and make a star at the corner of the navigation and rotate it.

Note: If you cant see the shape of the star you have not loaded all the default shapes.

Step 6: Go to Blending Options and use the following effect:

image 8

After all this you should have this:

image 9

Now I have just added a rss icon inside the star.

Now you should get your final result:

Web 2.0 Navigation Tutorial: Final Result



Author's URL: xtratutorials.uni.cc

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Web 2.0 Navigation"