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:
