Learn How To Create A Clean Layout In Photoshop [Very Detailed]

In this Photoshop tutorial we’ll learn how to create a clean looking website layout, we’ll also be using 960s grid system to keep everything aligned. This is very detailed tutorial, so if you have basic knowledge about Photoshop you should be able to easily keep up and let me guide you through this layout creation process.  I am explaining all small steps and every step is shown by visuals as well, good luck!!

Final Outcome

Here’s a preview image of what we’ll be creating together, Click the image to enlarge.

Creating New Document

We’ll be using 960s Grid system (Download here ) once downloaded open up the file 960_grid_12_col.psd; then right click on the “Background” layer >> Layer from Background. and call it “bg”.

Creating the background

Let’s starting creating our background, select the Gradient Tool (G) in the Gradient Editor panel set your colors from #dcdcdc to #ffffff:

Now with a Linear Gradient drag from down to top. Use the image below for reference:

You should have something like this:

Creating the logo area

Before we start creating our logo we need to set upper borders for our design, so we’ll drag a new Horizontal Guide after 50px. to do that go to View >> New Guide and follow with the image below:

It’s time to create the logo tag; we’ll start by creating a selection – I personally have use Polygonal Lasso Tool (L) – make about it 280x40px try making something similar to this:

Now click Shift+Backspace to fill it (with any color just in case).

We’ll give this tag a smooth gradient; from #efe352 to #db1b47 – check the image below:

Write your name with the following settings:

  • Font: Rockwell (it’s famous just Google it!)
  • Size: 46px
  • Type: Regular
  • Color: #1e1e1c
  • Anti-aliasing: Strong

Here’s how it should look!

Now create another selection for the catch tag, about 270x40px, something like this:

Fill it, and give it the same smooth gradient – that we’ve given to the name tag – and we’ll just add a Drop Shadow:

Now add your kickass catch with the following settings:

  • Font: Rockwell
  • Size: 33px
  • Type: Regular
  • Color: #1e1e1c
  • Anti-aliasing: Strong

Here’s how it should looks!

Before we move forward to the next step, make sure that all your layers are well-organized, and grouped. Here’s how mine looks:

Creating the navigation

We’ll start by creating a small rectangle, select the Rounded Rectangle Tool (U) and create a rectangle of about 65x30px – Radius: 5px.

Now let’s give it Inner Glow, Gradient Overlay, and Stroke. see the image below!

Add some navigation text, with these colors: #ffffff – #1e1e1c:

Select the navigation text layer and the small rectangle layer, then click on Align Vertical Centers in the control bar.

Before we move to the next step, group your layers!

Creating the featured designs area

First off let’s set our borders; drag a new guide at the end of the catch tag, leave 50px and drag a new one!

Writing welcome text

Write some text, with the following settings:

  • Font: Rockwell
  • Size: 30px
  • Type: Regular
  • Color: #e8204e – #676666
  • Anti-aliasing: Strong

Drag yet another guide after 50px:

Creating images of featured designs

We’ll start working on the images; create a selection of 250x150px and align it like the following:

Fill your selection with any color, and give it a Stroke with the following settings. the call it “pic_holder”.

Let’s add an image of a featured design, go to File >> Place and place an image from your computer.
Make sure that the layer of the image is right above the layer (“pic_holder”) of the rectangle we created
Now right click on the image layer >> Create Clipping Mask.

It’s time to create a shadow for our image! with the Elliptical Marquee Tool (M) create a selection like the one below; set your foreground to #1e1e1c then click Shift+Backspace to fill it.

Now go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Go ahead and make another copy of the image we’ve created and align it to the right.

We’ll make the center image a bit bigger; so create a selection of 340x200px and align it like this:

Repeat the same previous steps. finally you should have something like this:

Don’t forget to group all your layers!

Creating the sliding arrow

Now let’s create the sliding arrow, use Custom Shape Tool (U) to create an arrow with this color value #e8204e.

Now give it the following layer styles:

To align our arrow, we’ll select its layer and the layer “pic_holder” then click on Align Vertical Centers in the control bar.

Make a copy of the arrow and align it to the right.

Creating the upper content area

Start by dragging a new horizontal guide at the end of the featured area, leave 50px and then drag another one!

Add some text as a title (I’ve written “who we are”) use the image below for reference.

Drag two new horizontal guides according to the following image.

Add some text with these character settings.

Now drag yet another horizontal guide according to the following image.

Using the Rounded Rectangle Tool (U) create a rectangle of 100x30px – 5px radius. Give it the following layer styles.

Now create a circle and an arrow inside it.

Write the word “read more” with this color value #3e3e3e and give a Drop Shadow according to the following image.

Let’s create the separating line! create two lines next to each with the following color values: #ffffff – #979797:

Then align it according to the following image

Now write a title for the right part (I’ve written “featured services”):

Select the Ellipse Tool (U) and create a circle of 20x20px (fill it with any color) then give it the following layer styles:

Using the Custom Shape Tool (U) create a check shape and fill it with #dcdcdd:

Let’s give create a shadow for it! create a selection (like the one below) and fill it with #000000 then go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Add some text of a featured service, character settings goes according to the following image:

Make two copies of the featured service:

To align the three services, put each of them in a separate group, select the three groups and then click on Distribute top edges:

Creating the lower content area

We’ll start by dragging a new horizontal guide after 50px:

Write another title, and drag two guides, use the image below for reference:

Then drag another guide according to the following image:

Now write some text according to the following images:

Duplicate the text you’ve written, then align it like the following:

To create the separating line; create two lines on top of each other, fill them with #ffffff – #8d8d8d:

I think the best way to align the separating line is to do that visually. However, I have my own way of doing that! create a rectangle (like the pink one below) and while having the layer of the rectangle and the separating line selected; click on Align Vertical Centers in the control bar.

See how it works! ;)

Now repeat the same previous steps to get something like this!

Creating Social Media links

Now add the third title, Facebook icon, and write a link beside it. You can download the social media icons from deviantART – they’re called Aquaticus.Social by Junwei.

While having the link layer, and the icon layer selected click on Align Vertical Centers.

Make three copies of what we’ve created in the previous step. put each of them in a separate group, then select the four groups and click on Distribute Top Edges.

Creating the footer area

Drag a final guide after 50px.

We’ll start by creating another separating line, create two guides on top of each other and fill them with #ffffff – #8d8d8d.

Then align the separating line like following:

We’re almost there! add your sub navigation text according to the following image:

Finally add your copyrights text with the same character settings:


There we have it! We’ve created a clean and simple layout in Photoshop. Hope you enjoyed it!

You can download free, layered *.PSD version here!


a web and graphics designer from Egypt. He’s also a blogger and tutorial writer. At a young age of 15. Send him a tweet @MahmoudKhaled, connect with him on Facebook, or visit his blog called mkhaled.com.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now


  1. says

    I always enjoy quality Photoshop tutorials, but what I think would make these kinds of posts even better is maybe some insight in to _why_ you chose to do the things you show us how to do.
    What are the benefits of having a minimalistic design? What do you achieve by putting in a 50 pixel gap in certain places, and how is that related to the goal of a clean layout? Why are you using the 960grid system instead of something else? What are the benefits?
    You don’t have to explain every aspect of everything, but maybe providing links and small extra bits of information would make for a richer experience rather than just another blogpost teaching yet another way of doing something in Photoshop.

  2. says

    I used to use a full grid system like this – I now tend to use a more simple, basic grid. I found that the more complex grid system can sometimes get a little messy to work with.

    I have a couple of starting templates that I use with my more common column spacings already set up with page widths etc….this really does help keep your layout clean, neat & tidy – grids & guides rule!

  3. Marius says

    Hey, is there any tutorial how to produce a full working website out of this psd file?
    There are always design tutorials but i dont get it how to create a website with all of its features out of a .psd file….Thx for your help!

  4. Pi says

    I am in the middle of redesigning my site in the same clean style and with the same colors. Great for inspiration!

  5. says

    Simplicity is always key to a great website design, it is far too easy to get carried away adding more and more content. A great post, this one has taught me a few new techniques that will come in handy.

    Thank you :)

  6. Skip says

    Great tut! how do you plan to make the artwork on the page revolve? I’d love to see a part 2 with a flash lesson!

    Thanks for sharing!

  7. e11world says

    I still don’t use grids the way you use it here but I’m open to trying it. I personally drag my own in a set way and work from there. Good tutorial though!

    • says

      You really have to give it a try!
      It saves so much time, and gives you accurate results.
      And as soon as you get familiar with it you will only use it and nothing else!
      Happy you liked the tut :)