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

Purple Navigator


We'll begin this tutorial, by creating a new canvas at a size of 609 x 124 using the color 60015c. Double click the background layer to unlock it for future editing needs.

image 1
Click to enlarge

Now right click on the background layer and select, "Blending Options...". Now click on "Pattern Overlay".

image 2

You may now click OK.

You should now have the below image.

image 3
Click to enlarge

Now select the "Rectangle Tool" and draw the below shape using f334fa as the color. Name this layer "Menu Back" in the Layers Palette.

image 4
Click to enlarge

Now right click on the "Menu Back" layer and select, "Blending Options...". Now click on "Outer Glow".

image 5

You may now click OK.

You should now have the below image.

image 6
Click to enlarge

Now select the "Rectangle Tool" again and draw the below shape using 9d0097 as the color. Name this layer "Menu" in the Layers Palette.

image 7
Click to enlarge

Now right click on the "Menu" layer in the Layers Palette and select, "Blending Options...". Now click on "Inner Shadow".

image 8

You may now click OK.

You should now have the below image.

image 9
Click to enlarge

Then choose the "Text Tool" and use the below settings.

image 10

Now type your perferred menu items.

image 11
Click to enlarge

Select the "Ellipse Tool" and draw a ff2bb7 circle as I have done below. Name this layer "Circle" in the Layers Palette.

image 12
Click to enlarge

Now choose the "Custom Shape Tool" and find the arrow shape and draw it above the previous layer as I have done below using 4b0148 as the color.

image 13
Click to enlarge

Duplicate the circle and arrow layers and change the colors as I have done below.

image 14
Click to enlarge

For a rollover effect, I chose to create a 60015c rectangle as shown below.

image 15
Click to enlarge

Now, using the "Rectangle Tool", draw a White rectangle as I have done below. Name this layer "Gloss" in the Layers Palette.

image 16
Click to enlarge

The Results!!!

Now turn the Fill of the "Gloss" layer down to 22% and you're all done. I hope you enjoyed this tutorial.

image 17
Click to enlarge

The below example shows a bit more to the header but you get the idea.

Purple Navigator
Click to enlarge


Author's URL: EmpireDezign
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Purple Navigator"

Captcha