FREE DOWNLOAD

Want access to the full PSD files? Click on the free download button below.

Final Preview

Let’s take a look at the Website we’ll be creating.

Step 1

Create new photoshop file with 960 x 968px.

Step 2

Let’s create the grid for this page.
Leave 10px padding for both left and right of the page, now create 60px wide column like the sample below with 20px gap inbetween.
You find more grid system in this URL
http://960.gs/demo.html

Step 3

Place your logo on the first column leaving 10px padding from left of the page. Here 30px top padding used

Step 4

Create your navigation, here the navigations are “Home, Services, Products, About, Contact” with 8 keyboard spacing inbetween. And the font Family is Arial, size 11, “Home” bold, Color #3e3e3e.
link color is # 0099cc.

Step 5

Create (1px height, #ededed) divider line below with 20px spacing form motto line. Also create highlight line for the current page, here I have given it for the “Home” height = 3px, color: #ff0000.

Step 6

Let’s create the leader board for the page, here I have placed image on the left and content on the right aligning to the grid like the sample below.

Font Details:
“HIGH QUALITY”: Font: Arial Black, 33px, # 8cb60c
“SIMPLE CLEAN WEBSITE TUTORIAL”: Font: Arial, 18px, # 3e3e3e
“Lorem ipsum dolor sit amet…”: Font: Arial, 12px, bold, # 3e3e3e
“Ut congue lorem ad…”: Font: Arial, 12px, , # 3e3e3e

Step 7

Let’s create the content part of the website, here its separated in to three column, the first main (6)column is double the size of the other two column(3 each) like the sample below. It can be anything at your discretion like equal columns each or just two columns etc.

Here the title for the columns is “INTERACTIVE WEB DESIGN AGENCY”, “PRODUCTS” and “SERVICES”.
Font: Arial, 16px, #3e3e3e.
Divider line: Height: 3px, #3e3e3e

Step 8

Leave 20px top padding from the divider,
Now type your own content, here it’s “lorem ipsum” with Font: Arial, 12px, #3e3e3e.
Once your done with the content part, create one more divider below content (20px padding from top) with 1px height, # ededed.
Below divder add “more” link with 10px top padding.

Step 9

Place your screenshot, in any of the column here it’s displayed in the product column with width 220 and height 100px.
Below Screen have the description with link like the example below.
Font Detail for Link: Arial, 12px, bold, # 0099cc
Short Description: Arial, 12px, #3e3e3e
Create one more screenshot and repeat the same with the divider in between 20px padding from top) with 1px height, # ededed.
And more link below the divider line

Step 10

Create quick services column with content with list of services as link and divider line and more link below like the sample given below.
Additionally you can give the contact details below the services column.

Step 11

You’re almost done, now add you legal stuff below, here its “© 2010 thinkingnext.com | Sitemap” with Font: Arial,. 11px, (bold), # 878787 (Link color for “Sitemap”: #0099cc.)

Step 12

Now lets place the whole website in wider width, Here chosen width is 1200px and height is same

FREE DOWNLOAD

Want access to the full PSD files? Click on the free download button below.