Design a clear website layout in Photoshop

In this tutorial we`re gonna create a PSD layout which can be used for a portfolio site and as well for a business one.

We`ll use a set of nice icons which it will give color to the layout.

You may click the image for a bigger preview of the final layout.

Materials needed:

Wood image

Dellipack 2 icons set

Scriptina font by Apostrophe

Step 1:Download the 960 grid system template.

First step is downloading the 960 grid system template,which is in big lines,a system which allow us to divide the layout in equal columns.You can find it on the 960.gs official website.Unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col.We`ll use the one named 12_col because the template we`ll have 3 columns,as you can see in the final image.

So,open the 960_grid_12_col.psd into Photoshop.

Step 2

You can see that the image has some pink vertical stripes,to evidence those 12 columns,but we want to get rid of them.For this,hide the group named 12_col_grid.

Now we are ready to move on.

Step 3:Adding the background.

Set the canvas size(Layer->Canvas size) to 1200 px wide and 1020 px high.

Load the wood image into Photoshop and paste it over the project.

Step 4:The logo

Add an horizontal guide at the 170th pixel.This will be the height of the logo area.

Now with the Scriptina font downloaded from the top list,grab the Horizontal type tool(T) and write a title for our layout.

Add the next blending options:

Drop Shadow:

Gradient overlay:

The logo looks ok for me.

Create a new layer and place it under the logo layer.Using a soft round brush of 500-600px with a low opacity,draw several times above the logo some white points to create a nice light effect.

Now the logo looks cooler than before.

Step 5:The search field

Select the Rounded rectangle tool(U),set the radius to 5px and draw a shape in the right side of the image.After,center the shape at the same level with the logo.

Next,add some blending options.

Drop Shadow:

Gradient overlay:

Stroke:

Now add some text like “Search the site” or whatever and from the Dellipack icon set,add the pen icon and resize it to fit into the shape.

The layer until now looks like this:

Step 6:Navigation bar

With the same Rounded rectangle tool(U) with the radius of 5px,draw a shape of 960px width and 55px height.

Add some blending options as gradient overlay and stroke.

Gradient overlay:

Stroke:

Step 7:Defining the buttons

Add vertical lines of 1px weight of gray and black colors to define the buttons areas.

Step 8:Defining the a:hover button.

With the Rounded rectangle tool(U),radius of 5px,draw a shape of 125px width and 55px height and delete from the right side,the 2 rounded corners of 5px.

Add the next gradient effect:

…and an inside stroke:

Next,add some light following the same process we`ve made at the logo,but resizing the brush tool.

Step 9:Adding text to buttons

Now,add some text inside the buttons just created.I used a text with Georgia font and a nice blue color(#7ddddd) and grey.

Repeat the process for all buttons.

Step 10:Adding some icons.

Choose some icons from the icons pack and place them above the navigation text.I used the 32px icons.

We have now a nice header,containing the logo,a search field and a navigation bar.

Step 11:The middle area

With the Rounded rectangle tool(U) and the radius set to 5px,draw a shape of 960px width and 350pxheight.

Then add the next effects:

Drop shadow:

Gradient overlay:

Stroke:

You should have something like this:

Now apply the step we took when we added the light effect above the logo and place a light at the top of the middle box too,using a soft brush with a low opacity.

Step 12

It’s time to design the content for middle tab. We need a featured design image and a nice heading.
First we will create the featured image. I thought that it would be nice to create a nice stacked photos effect for our featured design image. To do this, draw a white rectangle with a 1px light gray border, and a very subtle drop shadow effect.The shape has 410px width and 260px height.

Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.

Step 13

Import an image of 400x250px and place it into the white slider.Give it a black color stroke to contrast a little bit with the white frame.

Select the Custom shape tool(U) and from the list select a type of button and place two nice ones in the right and left of the image.

Add them the next blending options:

Inner Shadow – color: #000000, Blend mode: Multiply, Opacity: 75, Angle: 90*, Distance: 0px, Size: 1px.

Outer glow- color:#646464,Blend mode: Multiply, Opacity: 75,Size: 1px.

Gradient overlay-Blend mode: Normal, Opacity: 100, Angle: 90*, Style:Linear, Color:#666666-#FFFFFF.

Add a nice heading near the slider.Mine is some big text with a Drop shadow and a left to right Gradient Overlay effect.

The middle tab is finished.

Step 14

By adding some more icons,headings,some text and links,our layout is almost ready.

Add 3 groups of content and give them each 10px padding to the left and 25px to the top,to center them into the layer.

Above each group,add some lights using a soft brush tool with a low opacity and the white color.

Step 15:The footer

Duplicate the navigation bar shape and place it at the bottom of the image,under the content area.

Using a gray color,type some links and Copyright text into the footer.

And now the layer is ready.

Final Image:

So there we go,the final design:

Click the image for a bigger preview.

I hope you enjoyed the tutorial and waiting your comments for any suggestions or questions regarding the layer.The difference between a good designer and a not so good one are details.So,keep this in mind when you create something.

See you next time for another tut.