Creating The Navigation Bar:

1. Creating The Navigation Bar:
3

2. Creating The
Navigation Bar:
Create a new group and name it “navigation“, it
should be above “logo” group. Drag a guide from
the top ruler, 150px below the top edge of the
canvas.
Select the Rectangle Tool (U) and draw a horizontal
line of 4px height with a color of #e3ab27, across
the canvas.

3. Add navigation links at 12px-high from this horizontal line and
20px to the right of the left guide. Select the Rounded
Rectangle Tool (U) and draw a box with the size of 72px by
35px.
Move this layer below the text links and name the layer
“hover“. Straighten the bottom rounded corners with the
Convert Point Tool. Move the sides of uneven edges below
with an 8px margin to make the edges equal to other inner
edges at bottom.
Double-click the “hover” layer to open the Layer Style dialog
box and add gradient colors (Left color stop: #e5ad27, Right
color stop: #b27625). Select the Horizontal Type Tool (T),
select the text, “Home” and change color to #ffffff (white).

5. Creating The “Call Us” Section:
Next we are going to create the “call us” section at the
top-right of our design (exactly opposite side of the
logo). Download this phone icon and place this near
the right guide. Name this layer “phone icon“.
Select the Horizontal Type Tool (T). Add a phone
number on the left of the phone icon using the font
Arial, with the size set at 20pt and the color #292929.
Add some related text below the phone number using
font Arial, set at Bold, with a size of 11pt and a color
of #595959.

7. Creating The Header:
Now we are going to a create the header section. Create a
new group and name it “header“. Select the Rectangle Tool
(U) and create a rectangle shape with the size of 1200px by
440px.
Put this rectangle at a distance of 1px below the navigation
bar and name this layer “header bg“.
Double-click the “header bg” layer, select the Gradient
Overlay layer style and have these two colors in the Gradient
Editor (Left color stop: #2e2226, Right color stop: #7a7556).

9. Create another rectangle from the Rectangle Tool (U)
with the size of 960px by 360px.
Put this rectangle at the distance of 40px from the top
of the “header bg” layer and 0px from the left guide.
Name this layer “header container“.
Preview below what we have done until now with the
design.