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

Creating a Navigational Header


Start by creating a new file. Draw an rectangle at the top using rectangular shape tool.

image 1

Create a line below the top rectangle.

image 2

Copy the line layer and place it at the bottom. Create another thin line.

image 3

Create a rectangle with green color.

image 4

Create another rectangle with gray color. We'll create buttons on this rectangle.

image 5

Open an image and place it at the right of the header.

image 6

Create a rectangle for button.

image 7

Double click the layer and enable bevel&emboss, satin and stroke. Apply settings as shown.

image 8

image 9

image 10

image 11

Create two white lines vertically as shown that will serve as divider between three portions of the navigational header. We'll use one portion for the logo, second one for the buttons and last one for the image.

image 12

Duplicate the button rectangle 5 times and place it downwards.

image 13

Create a vertical rectangle equal to the height of six buttons and right align with buttons.

image 14

Change the color mode to multiply.

image 15

image 16

Open another image and place it at the left of the header.

image 17

Change the color mode to hard light and reduce the opacity to 50%.

image 18

Place the logo in the left of the header.

image 19

Type your links on bottom rectangles.

image 20

Create an arrow shape and duplicate. Place it on the right of the links.

image 21

Duplicate the arrow layers and place them in every link layers.

image 22

Add faq & search bar at the top of the header.

image 23

Creating a Navigational Header Tutorial: Final Result



Author's URL: Head Nerd
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Creating a Navigational Header"

Only registered users can write comment

No comments yet...