Her

Home Photoshop Tutorials Web Layout Creating a Navigation Header

Creating a Navigation Header

Author: Fiery Darts Author's URL: www.fierydarts.com More by this author

Start by creating a rounded rectangle in a new file.

image 1

Apply gradient overlay with the settings shown.

image 2

image 3

Enable subtract from shape area at the top bar and draw a circle using elliptical shape tool.

image 4

image 5

Create a light and a dark color line as a divider.

image 6

Create a rectangle and apply following layer style .

image 7

Select the rectangle using direct selection tool. Using add Anchor point tool add two anchor points at the each side of the bottom of the rectangle. Delete the corner nodes of the bottom and join the new anchor points using pen tool. This will create a button which is rounded at the bottom.

image 8

image 9

Create a rectangle below the divider lines. This will serve as a button bar.

image 10

Apply gradient overlay with the settings shown.

image 11

Place the button over this bar.

image 12

Duplicate this button 4 times.

image 13

Scale down the buttons and place it to fit the whole button bar.

image 14

Create a triangle using polygon shape tool.

image 15

Press Ctrl+T and squeeze it vertically.

image 16

Duplicate it and place over all buttons.

image 17

Type your text links on all buttons.

image 18

Insert a cutout of a relevant image and move it below all layers.

image 19

Insert the company logo and place it on the left of the header.

image 20

Type some categories to the right side of the header.

Creating a Navigation Header