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

Computer Web Site Navigation Header


Start by creating a rectangle using rectangular shape tool.

image 1

Create another rectangle half in height of the header using rectangular shape tool.

image 2

Insert an image of brick wall. In fact any textured image would do.

image 3

From filter menu select blur>>motion blur. Blur the image horizontally.

image 4

Change the layer mode to hard light.

image 5

Press Ctrl+Alt+G to create clipping mask.

image 6

Create a few rectangles and play around with their layer modes.

image 7

image 8

Create a rounded rectangle using rounded rectangle shape tool.

image 9

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

image 10

image 11

Duplicate layer and place for the buttons.

image 12

Select the top layer. From layer menu select new adjustment layer>>hue/saturation. Apply settings as shown.

image 13

image 14

Create an ellipse using elliptical shape tool.

image 15

Place it right below the button layer.

image 16

Create duplicates and place below one another.

image 17

image 18

Select all ellipse layers and merge together. Create an ellipse in path mode using elliptical shape tool.

image 19

Enable subtract form shape area form the top bar.

image 20

Create a rectangle using rectangular shape tool.

image 21

From layer menu select vector mask>>current path. Fill the layer with black color.

image 22

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

image 23

image 24

Duplicate both black layers and place below other buttons.

image 25

Type button links over the rectangular buttons. Select one set of button layers and duplicate. Merge the layers. Enable lock transparent pixels from layer palette. Fill with a solid color. Press Ctrl+T. Right click the layer and select distort. Adjust nodes to get the a perspective shadow. Similarly create perspective shadow for all the buttons.

image 26

Create a black rectangle using rectangular shape tool.

image 27

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

image 28

image 29

image 30

Reduce the fill value to 0.

image 31

image 32

Create a white rectangle using rectangular shape tool. Reduce opacity and place it below the frame.

image 33

Create a stand for this as you did for the buttons.

image 34

Insert company logo and place over the big rectangle.

Computer Web Site Navigation Header Tutorial: Final Result



Author's URL: Slowly Sinking
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 "Computer Web Site Navigation Header"

Captcha