LegitTutorials.com

Download XHTML/CSS Coded Files

Pre-Step: Supplies

Ok, before we get started lets get all the patterns/supplies we will need step one. Save the pattern below (Open it in photoshop then go to edit>define pattern).

Also, download the 960 grid system. You can download it here.

Step 1: New Document

Ok, now that were all set up, open a new document 1000×1000. Leave the
background transparent. Open up the 16 column 960gs template, unlock the folder, and drag it too the new document we just opened. Center it. You can uncheck the eyeball making it invisible for now.

Step 2: Background

Go to edit>fill, and fill the background with the pattern I had you save. It should look like this:

Step 3: Rectangle

Ok, now that we got our background set up, create a new layer, and grab the rounded rectangle tool. Set the radius to 10px, and set it to fill pixels. Now create a rounded rectangle 960px (across all 16 columns of the 960gs) by 35~px. The color doesn’t matter as well be applying gradient overlay. Move he bar about 120px from the top.

Step 4: Blending Options

Open up blending options on the bar layer (layer>layer style>blending options), and apply gradient overlay and bevel and emboss with the settings shown below.

Step 5: Text

Grab the horizontal text tool. Set the font to “arial”, the size to 17pt, and the color to #535353. Type out whatever links you want on the navigation bar. Put 5 spaces between each one, and use all lowercase letters. Mine says “home tutorials about contact”. Place it on the right side of the navigation bar.

Step 6: More Text

Now lets add some header text. I used the font “edwardian script itc” with the size at 90pt. Make the first word blue (#27b3a4), and the second word white. Mine says “legittutorials”, place it above the navigation bar on the left side.

Step 7: Blending Options

Open up blending options on the header text and apply gradient overlay and drop shadow with the following settings.

Step 8: .COM

In the same font type out .com in white, size 38pt. Place it right below your header on the right.

Ok now our header, navigation, and background are done. Heres how it should look so far.

Step 9: Sidebar

Ok now lets make a sidebar. Set your foreground color to #1c1c1c, and create a new layer. grab the rounded rectangle tool, with the same settings as before, and make a rounded rectangle the width of the 5 right bars (on 960gs) and 600~ pixels tall.

Step 10: Text

Now lets add some text to the sidebar. All the fonts, sizes, and colors are labeled in the picture below. To make the divider just create a new layer, set your foreground color to #212121, and draw it with the pencil tool. For the bullets I created a new layer set my foreground color to #, and used the elispse tool.

Step 11: Post Box

Ok now lets to the same thing for a post. Make a post box (on a new layer) the same color with the rounded rectangle tool. Make the width the size of the remaining 960gs bars and the height around 450px.

Thats it, your just about done, all thats let to do is to create a footer using the same elements as the post and sidebar. Heres how it should turn out.

Download .PSD/HTML/CSS Source Files

Download .PSD Source File
Download XHTML/CSS Coded Files