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 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:




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:




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:




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.
  • 36

    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.

    Click to rate this post!
    [Total: 0 Average: 0]

    Madalin Tudose

    A web developer with a crush on SEO. Having my skin in the game of website development and digital marketing for more than 10 years already, you might consider me an expert. At least this is what people call me. Honestly, I HATE that term. I prefer to describe myself as a person who takes action and risks. I test every hypothesis, document every step of the process, and implement what works.

    Join the discussion

    1. irwan on June 5, 2009 at 7:26 am


    2. HD Wallpapers on June 9, 2009 at 7:32 am

      I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

    3. Brian on June 10, 2009 at 2:55 pm

      Nice work! I will be implementing many of your techniques in my next site design.
      Thank you.

    4. Cheri Amour on June 10, 2009 at 6:27 pm

      Great post! Although I’m a photographer, I also know how to design websites:) Thanks for sharing:)

    5. JaneRadriges on June 13, 2009 at 10:14 am

      The article is usefull for me. I’ll be coming back to your blog.

    6. KattyBlackyard on June 14, 2009 at 6:35 pm

      The article is usefull for me. I’ll be coming back to your blog.

    7. George on June 18, 2009 at 4:42 am

      Very interesting… thanks.

    Comments are closed.