Creating Your First Website Design In Photoshop!

What We'll Be Producing
Large image:


Things You'll Need

Mandatory:

An editing program (I highly advise using Adobe PhotoShop CS2 or higher versions to follow along)
To be able to read material of the English language

Optional:

Creativity
960 Grid System
The Source File

Explanation of the 960 Grid System

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

In Layman's terms, 960.gs is a guideline to make sure to keep your whole design in organization.

Preparing Your Design

Before you begin actually designing a website, it's good practice to actually draw it out first, or produce it as a rough draft.
This technique is coined as wireframing, it puts down a foundation of your design before you put countless hours of work into it, so that you can spot out what you should add in and cut out!

From the above diagram, you can see that this is what many websites look like.
It has a logo at the top right, a navigation bar to the right of it, below this there is all the content of the website, and finally below the content there is a footer.
It's good practice to include these three things in all of your designs.
The wireframe I started off with looks like this (and yes, it doesn't have to look pretty, at all).

Time To Design

I prefer to work from top to bottom, so lets go with that for this tutorial.
First of all, we need to create the header.


Make a #ff7132 rectangle however wide your canvas is (my canvas is 1200 pixels wide) and the height of this container will be 450 pixels.


After, let's put in our logo and navigation text so that our users can flip through our other pages.


Lets add in some text to draw our traffics attention to some type of graphic process we are advertising.


As you can see there is a lot of empty space on the right, so lets throw in a picture to go with the text on the left.
This is very crucial, as this can make or break your page. These images need to match the mood of the rest of the webpage, and correspond with the content.


Adding In Content

Now that we have the header built, we need to add in some content for our viewers to learn about who we are.
On this particular design, I took the easy way out for times sake and split the 12 columns into 3 separate columns of 4, and this is a very simple and bold effect.

Here is what we are going to reproduce

For times sake, I'll explain what this is composed of.
This is three columns have a separation of content, but are structured nearly the same, each column is 300 pixels wide (add 60 pixels from gutter space in between all three columns and that will lead you with 960 pixels).

They each compose of: An icon, to portray a certain trait or characteristic event about the below content, header text, to identify the above picture and foreshadow the content text below, and the content text, to explain that particular section of information.
Repeat this process three times, and you have your content for the page!

Additional Content

This is an optional step, but I went ahead and did this for those of you who may be more interested in this tutorial.
I added in a website description area, and a monthly newsletter form area.
Many websites choose to have these on their website as well, or place them in the footer area.

Both columns are 460 pixels wide, and there are only two columns instead of three this time, this equals out to 940 pixels in width, with 10 gutter pixels on each side to leave us with 960 pixels (see where it all comes into play?)!
I shouldn't need to explain how this is done, but if someone needs me to, I'll replace this text with the process of it.

The Footer

The footer area is the area where viewers will reach after the content of the website is all browsed over.
The footer can redirect the view to other pages of the website, inform them of some crucial statistics, or may some external links, the choice is up to the webmaster.
However in the footer we are creating today, it will contain some links as there are above, and a new link "The Team" replacing the "Portfolio" link.

My footer is 100 pixels tall, and of course, 1200 pixels wide.

Final Result


Side Note

This tutorial was designed to help out those who aren't familiar with the program make a sleek and easy approach to a well-thought design.
This isn't a programmed version, and you don't have to follow my color scheme is you don't choose to, I encourage you all to try something new and different!
I took a lot of time to design this website design and tutorial to put you one step further into designing than you were, the least you can do is private message me saying thank you, or writing on this thread telling me what you might have learned from it.
Also, post your results here or on a separate thread so I can see it.
Here is the source file of the website design I designed, for those of you who want to use it to learn more in-depth or see how i structured everything together