What Well Be Creating

[ Register or Signin to view external links. ]

Resources Used In This Tutorial

• [ Register or Signin to view external links. ]
  
• [ Register or Signin to view external links. ]
  

Drafting Out The Header

Create a new (Ctrl + N) document 1200 x 1150 pixels with a white #ffffff background. Select the Rectangular Marquee Tool (M) and drag out a rectangle at the top of the canvas 1200 pixels wide and about 220 pixels in height.

[ Register or Signin to view external links. ]

Once you have created the rectangle label the layer Header. Now select the Rounded Rectangle Tool (U) with a radius of 20 pixels.

[ Register or Signin to view external links. ]

Drag out a rounded rectangle just above the bottom of edge of the header rectangle, this rectangle should be around 950 pixels wide and about 60 pixels in height.

[ Register or Signin to view external links. ]

Label the rounded rectangle layer Navigation. Reselect the Rounded Rectangle Tool (U) then just above the navigation rectangle on the right hand side drag out a small rectangle big enough to be a search field. Label this new layer Search.

[ Register or Signin to view external links. ]

Bringing The Header Area To Life

Select the Header layer then add the following layer styles using the settings below.

[ Register or Signin to view external links. ]

[ Register or Signin to view external links. ]

Create a new layer above your Header layer and label it Header Glow. Make a selection around the Header layer by going to Layer > Load Selection then select the Gradient Tool (G) with a Radial Gradient. In the fill options bar change the gradient type to Foreground To Transparent.

[ Register or Signin to view external links. ]

Drag the gradient from the top center of the header, once you have applied the gradient set the opacity to around 15%. You should have something like this.

[ Register or Signin to view external links. ]

Bringing The Navigation To Life

Select the Navigation layer then add the following layer styles using the following settings.

[ Register or Signin to view external links. ]

[ Register or Signin to view external links. ]

[ Register or Signin to view external links. ]

Inside of the navigation bar add some textual links using the Text Tool (T).

[ Register or Signin to view external links. ]

In between each navigation item, create two 1 pixel lines next to each other on a single layer, the two lines should be the same height as the navigation rectangle.

[ Register or Signin to view external links. ]

Once youve created the lines set the layer blend mode to Overlay, you should have something like this.

[ Register or Signin to view external links. ]

Next, well create a hover state for one of the navigation items. Select the Zoom Tool (Z) then zoom into one of the navigation links, draw a white #ffffff single line along the stroke on the navigation rectangle. The line should start at the left divider and end at the next divider line.

[ Register or Signin to view external links. ]

Once youve drawn the line add the following layer styles.

[ Register or Signin to view external links. ]

[ Register or Signin to view external links. ]

The navigation should now look something like this.

[ Register or Signin to view external links. ]

Adding Detail To The Search Field

Select the search field layer then add the following layer styles using the settings below.

[ Register or Signin to view external links. ]

[ Register or Signin to view external links. ]

[ Register or Signin to view external links. ]

Once youve added the layer styles add a small white #ffffff magnifying glass icon which can be found in the custom shapes library. Then add the text Search Here inside of the search field using the Text Tool (T).

[ Register or Signin to view external links. ]

Finishing The The Header

To finish the header off simply select the Text Tool (T) and add your website title and slogan. The font i used for the website is HelveticaNeue LT 55.

[ Register or Signin to view external links. ]

Creating The Featured Area

On a new layer underneath all the header elements select the Rectangular Marquee Tool (M) and make a selection similar to the image below.

[ Register or Signin to view external links. ]

Once the selection has been made fill (G) the selection with any random color, then add a Gradient Overlay using the settings below.

[ Register or Signin to view external links. ]

[ Register or Signin to view external links. ]

On the left hand side of the featured area add some example featured text, leaving space on the right for an image.

[ Register or Signin to view external links. ]

Download the HTC Pad from the resource list.

• [ Register or Signin to view external links. ]
  

Then copy over the HTC Pad and place it inside of the featured area on the right. Resize the HTC Pad with the Free Transform Tool (Ctrl + T).

[ Register or Signin to view external links. ]

Next, download the Loupe: Screenshot Magnifier from Premium Pixels then drag the magnifier onto the canvas over the HTC Pad.

• [ Register or Signin to view external links. ]
  

[ Register or Signin to view external links. ]

On a layer above the magnifier layer drag a bigger version of the HTC Pad, right click the bigger version of the HTC Pad layer and select Create Clipping Mask. The bigger HTC Pad should disappear inside of the magnifying, simply move (V) the bigger HTC Pad until you have something like this.

[ Register or Signin to view external links. ]

Creating The 2nd Navigation

On a new layer below all your other layers select the Rectangle Tool (U), then drag out a rectangle underneath the featured area.

[ Register or Signin to view external links. ]

Add a Gradient Overlay to the 2nd navigation rectangle using the settings below.

[ Register or Signin to view external links. ]

Inside of the 2nd navigation rectangle add a couple of sub headings with a small description. In between each sub heading add the little divider lines as we did with our 1st navigation.

[ Register or Signin to view external links. ]

Finally above one of the sub headings add a small arrow pointing upwards. This can be created using the Polygonal Lasso Tool (L).

[ Register or Signin to view external links. ]

Creating The Content Area

Select the Rectangular Marquee Tool (M) then make a selection around the last bit of the white area, as shown below.

[ Register or Signin to view external links. ]

Set the Foreground color to #cecece and Background color to #ffffff, select the Gradient Fill Tool (G) then drag a linear gradient from the top of the selection downwards a couple of pixels.

[ Register or Signin to view external links. ]

Select the Rectangular Marquee Tool and create two 1 pixel lines on top of each other, just like we did for our navigation only this time create them horizontally. Place the lines where the blue navigation meets the gradient. Once created set opacity to 50%.

[ Register or Signin to view external links. ]

In the space left over begin to build up your content, Ive done nothing special just add some dummy text and a list for the blog entries. You can take more time on your content area and get it looking how you want to.

[ Register or Signin to view external links. ]

Creating The Footer

For the footer simply select the Rectangular Marquee Tool (M), drag a selection out at the bottom of the canvas then fill (G) the selection with the color black #000000. Inside of the footer add your copyright information and maybe a small textual navigation.

[ Register or Signin to view external links. ]

Conclusion

Thanks for taking part in this tutorial.

[ Register or Signin to view external links. ]