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

Posted in Tutorials, Web Interface • Posted on 31 Comments

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:

Conclusion

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!

1 Written ArticlesWebsite

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.

31 Comments Best Comments First
  • Robin

    Saturday, June 12th, 2010 17:34

    29

    Nice post…. i have to try this out inorder to design my portfolio…Nice…work

    +1
  • Billig Ferge

    Tuesday, January 18th, 2011 10:15

    31

    Thanks for a nice step bby step tutorial. Ceep up the good work :-)

    +1
  • sriganesh

    Tuesday, February 9th, 2010 05:04

    10

    ya ! thats a good tutorial buddy :) thanks for sharing. the PSD with it.

    0
    • Saad Bassi

      Tuesday, February 9th, 2010 10:33

      13

      We believe in Free stuff.:)

      0
  • e11world

    Monday, February 8th, 2010 23:46

    12

    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!

    0
    • Mahmoud

      Tuesday, February 9th, 2010 00:00

      8

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

      0
    • Saad Bassi

      Tuesday, February 9th, 2010 10:34

      14

      You should must give a try to 960gs. It will save your time.

      0
  • Matthew Heidenreich

    Tuesday, February 9th, 2010 02:20

    9

    nice layout, thanks for this.

    0
  • Mihai O.

    Tuesday, February 9th, 2010 03:03

    15

    Great tutorial, I really like the result!

    0
  • Murlu

    Monday, February 8th, 2010 16:30

    3

    Pretty awesome, gonna need to try it out tonight after work :)

    0
  • fatCow

    Monday, February 8th, 2010 15:12

    2

    Thanks a lot for this beautiful article

    0
  • Tutorial Lounge

    Monday, February 8th, 2010 18:13

    4

    really professional layout design tutorial with tools awareness and design inspirations.

    0
  • Yofie Setiawan

    Monday, February 8th, 2010 20:38

    5

    Nice tips! i like that shadowing style…

    0
  • Mukesh

    Monday, February 8th, 2010 14:15

    7

    Seems really cool.. will surely give a try.. thanks a lot for this beautiful article :)

    0
  • Mahmoud

    Monday, February 8th, 2010 20:39

    6

    Thanks everyone for your nice comments. really appreciated :)

    0
    • Dainis Graveris

      Tuesday, February 16th, 2010 17:03

      23

      Thank you from 1stwebdesigner and me as well! Great job! :)

      0
  • Skip

    Tuesday, February 9th, 2010 19:16

    16

    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!
    Skip

    0
  • setia nugraha

    Monday, February 8th, 2010 13:32

    1

    wow!! amazing tutorial!!! Thanks a lot ..
    Best regards
    setia

    0
  • Marius

    Wednesday, February 24th, 2010 20:17

    25

    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!
    GREAT WORK!!

    0
  • uemshkatkar

    Wednesday, March 3rd, 2010 09:27

    26

    it nice

    0
  • Kim Røen

    Tuesday, June 1st, 2010 14:57

    28

    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.

    0
  • Tom Girling

    Friday, March 26th, 2010 14:08

    27

    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!

    0
  • viettel

    Thursday, February 18th, 2010 17:17

    24

    Your tutorial’s amazing , thanks for that post!

    0
  • CSSim Benim

    Sunday, February 14th, 2010 02:47

    22

    Wow, very useful guide

    0
  • Mark

    Wednesday, February 10th, 2010 16:14

    17

    Nice tutorial. Anyone know of a similar tutorial to get the showcase section animated? Perhaps in JavaScript?

    0
  • Tom Dringer

    Wednesday, February 10th, 2010 18:43

    18

    Hey nice, thanks for the effort.

    0
  • Ben

    Thursday, February 11th, 2010 15:10

    19

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

    0
  • Pi

    Thursday, February 11th, 2010 21:01

    21

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

    0
  • ganesh

    Thursday, February 11th, 2010 15:36

    20

    Wow, Its really fantastic tutorial.

    0
  • Safaa

    Monday, July 26th, 2010 13:11

    30

    nice tut. Mahmoud
    Thanks

    -1
  • Billig Ferge

    Tuesday, January 18th, 2011 10:15

    31

    Thanks for a nice step bby step tutorial. Ceep up the good work :-)

    +1
  • Safaa

    Monday, July 26th, 2010 13:11

    30

    nice tut. Mahmoud
    Thanks

    -1
  • Robin

    Saturday, June 12th, 2010 17:34

    29

    Nice post…. i have to try this out inorder to design my portfolio…Nice…work

    +1
  • Kim Røen

    Tuesday, June 1st, 2010 14:57

    28

    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.

    0
  • Tom Girling

    Friday, March 26th, 2010 14:08

    27

    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!

    0
  • uemshkatkar

    Wednesday, March 3rd, 2010 09:27

    26

    it nice

    0
  • Marius

    Wednesday, February 24th, 2010 20:17

    25

    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!
    GREAT WORK!!

    0
  • viettel

    Thursday, February 18th, 2010 17:17

    24

    Your tutorial’s amazing , thanks for that post!

    0
  • CSSim Benim

    Sunday, February 14th, 2010 02:47

    22

    Wow, very useful guide

    0
  • Pi

    Thursday, February 11th, 2010 21:01

    21

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

    0
  • ganesh

    Thursday, February 11th, 2010 15:36

    20

    Wow, Its really fantastic tutorial.

    0
  • Ben

    Thursday, February 11th, 2010 15:10

    19

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

    0
  • Tom Dringer

    Wednesday, February 10th, 2010 18:43

    18

    Hey nice, thanks for the effort.

    0
  • Mark

    Wednesday, February 10th, 2010 16:14

    17

    Nice tutorial. Anyone know of a similar tutorial to get the showcase section animated? Perhaps in JavaScript?

    0
  • Skip

    Tuesday, February 9th, 2010 19:16

    16

    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!
    Skip

    0
  • Mihai O.

    Tuesday, February 9th, 2010 03:03

    15

    Great tutorial, I really like the result!

    0
  • e11world

    Monday, February 8th, 2010 23:46

    12

    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!

    0
    • Mahmoud

      Tuesday, February 9th, 2010 00:00

      8

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

      0
    • Saad Bassi

      Tuesday, February 9th, 2010 10:34

      14

      You should must give a try to 960gs. It will save your time.

      0
  • sriganesh

    Tuesday, February 9th, 2010 05:04

    10

    ya ! thats a good tutorial buddy :) thanks for sharing. the PSD with it.

    0
    • Saad Bassi

      Tuesday, February 9th, 2010 10:33

      13

      We believe in Free stuff.:)

      0
  • Matthew Heidenreich

    Tuesday, February 9th, 2010 02:20

    9

    nice layout, thanks for this.

    0
  • Mukesh

    Monday, February 8th, 2010 14:15

    7

    Seems really cool.. will surely give a try.. thanks a lot for this beautiful article :)

    0
  • Mahmoud

    Monday, February 8th, 2010 20:39

    6

    Thanks everyone for your nice comments. really appreciated :)

    0
    • Dainis Graveris

      Tuesday, February 16th, 2010 17:03

      23

      Thank you from 1stwebdesigner and me as well! Great job! :)

      0
  • Yofie Setiawan

    Monday, February 8th, 2010 20:38

    5

    Nice tips! i like that shadowing style…

    0
  • Tutorial Lounge

    Monday, February 8th, 2010 18:13

    4

    really professional layout design tutorial with tools awareness and design inspirations.

    0
  • Murlu

    Monday, February 8th, 2010 16:30

    3

    Pretty awesome, gonna need to try it out tonight after work :)

    0
  • fatCow

    Monday, February 8th, 2010 15:12

    2

    Thanks a lot for this beautiful article

    0
  • setia nugraha

    Monday, February 8th, 2010 13:32

    1

    wow!! amazing tutorial!!! Thanks a lot ..
    Best regards
    setia

    0

Comments are closed.

23.20.77.156 - unknown - unknown - US