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

Designing an All Purpose Web Navigation Header


Create a rounded rectangle using rounded rectangle shape tool.

image 1

Ctrl+Click to get the selection. Contract the selection by 2 pixels. Create a new layer. Apply Black to white gradient.

image 2

Change layer mode to "Hard Light" and opacity to 50% for this layer.

image 3

Duplicate the layer. Move it a few pixels upwards. Change the layer mode to "Screen" from the layer palette.

image 4

Similarly create more buttons.

image 5

Similarly create a big rounded rectangle and repeat the steps for this rectangle too.

image 6

Create a rectangle using rectangular shape tool.

image 7

Double click the layer to open layer style window. Apply settings as shown.

image 8

image 9

image 10

Create a rectangle using rectangular shape tool. Press Ctrl+Alt+G to create a clipping mask.

image 11

Insert company name, logo and link names as shown in the image below.

image 12

Insert any image and place it over the big rectangle. Play around with the layer modes.

Designing an All Purpose Web Navigation Header



Author's URL: PhotoshopForFun.com
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 "Designing an All Purpose Web Navigation Header"

Captcha