website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Creating a Navigation Header
rss

Creating a Navigation Header

Author: Fiery Darts 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 Tutorial: Final Result



Author's URL: www.fierydarts.com

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 "Creating a Navigation Header"