PSDFan Extra

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (1000X900px) and fill your canvas with dddad6:

Step 2

Now create a new layer called ‘top gradient’. Use your linear gradient tool to create a gradient at the top of your canvas ranging from b1ada9 to transparent. This should give a little extra shadow to your header.

Step 3

Create a new layer called ‘white area’. Create a large white rectangle in the center of your canvas. This is where your content will be placed later:

Step 4

Now use your rounded rectangle (10px radius) and create a rounded rectangle at the bottom of your canvas. This should result in having a white content area that is straight edged at the top, and rounded at the bottom:

Step 5

Now you want to add a highlight to the area where your logo will be. Create a layer BENEATH your white content area layers, called ‘radial gradient’. Drag out a radial gradient (ranging from white to transparent) in the top left of your canvas.

Then change this layer’s blending mode to ‘overlay’ and reduce it’s opacity to 40%. This should give a subtle highlight lighting effect in your header:

Step 6

Now we want to add some tabs for our menu. Use your rectangular marquee tool to create a white tab just above the top left of your white content area. Then next to this create 3 dark gray tabs (ranging from 171717 to 454444). The white tab will be your active menu tab, and the darker tabs the rest of your menu:

Step 7

Now create your logo. I used the font Chunkfive, 36pt, -50 kerning for my logo text, and downloaded this great free icon for the logo icon.

Step 8

Now in the top-right of your canvas type out ‘RSS Feed’ and ‘Twitter’ using Arial, 12pt, -50 kerning. Then paste in these two great free icons:

RSS Icon

Twitter

Step 9

Now using Arial, 12pt, -50 kerning, type out some text over your menu text:

Step 10

Type out some headings in your main content area using the font Chunkfive.

Add in these great free icons:

Featured Client Icon

Blogging Icon

Step 11

Use Arial, 10pt, ‘None’ Styling as vertical type in order to create a subtle divider between the two columns of your content area.

Then paste in an image of your featured client’s website.

In this case I went with a screenshot of our upcoming network FanExtra.

Be sure to check out the network page today if you’d like more information.

Step 12

Now type out some information below your featured client image. I used Arial 18pt for the header, and Arial 12pt for the main info text:

Step 13

Add some more text to your sidebar, and create a new heading (using Chunkfive) called ‘Our Services’. I used the free icon: Services Icon.

Step 14

Now repeat your logo design, but in the footer of your website. Reduce the logo’s opacity to 25%. This should give it a nice watermark effect.

The using Arial, 12pt, -50 kerning, 6f6f6f repeat your menu links in the footer, and add a copyright notice:

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

Download Source File for this Tutorial

Related Posts

• Design a Quick and Clean Portfolio Website
• Design a Unique Grungy Website Layout
• Design a Super Sleek Sports Web Layout