Learn How To Create A Clean Layout In Photoshop [Very Detailed]
Mkhaled
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!!
![Learn How To Create A Clean Layout In Photoshop [Very Detailed]](http://cdn1.1stwebdesigner.com/wp-content/uploads/bigthumbs/100-200/preview-learn-to-create-clean-layout-photoshop.jpg)
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!
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Safaa
Posted 567 days ago 29nice tut. Mahmoud
Thanks
Robin
Posted 611 days ago 28Nice post…. i have to try this out inorder to design my portfolio…Nice…work
Kim Røen
Posted 622 days ago 27I 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.
.-= Kim Røen´s last blog ..kimroen: RT @funnyoneliners: I’m going to name my son Waldo and then every time I can’t find him it’s going to be awesome. RT @friedmanjon =-.
Tom Girling
Posted 689 days ago 26I 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!
uemshkatkar
Posted 712 days ago 25it nice
Marius
Posted 719 days ago 24Hey, 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!!
viettel
Posted 725 days ago 23Your tutorial’s amazing , thanks for that post!
.-= viettel´s last blog ..Viettel trao nhà tình nghĩa cho bà con miền Trung =-.
CSSim Benim
Posted 729 days ago 21Wow, very useful guide
Pi
Posted 732 days ago 20I am in the middle of redesigning my site in the same clean style and with the same colors. Great for inspiration!
ganesh
Posted 732 days ago 19Wow, Its really fantastic tutorial.
.-= ganesh´s last blog ..Rounded Corner Techniques with CSS =-.
Ben
Posted 732 days ago 18Simplicity 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 :)
Tom Dringer
Posted 733 days ago 17Hey nice, thanks for the effort.
.-= Tom Dringer´s last blog ..Welcome =-.
Mark
Posted 733 days ago 16Nice tutorial. Anyone know of a similar tutorial to get the showcase section animated? Perhaps in JavaScript?
Skip
Posted 734 days ago 15Great 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
sriganesh
Posted 734 days ago 12ya ! thats a good tutorial buddy :) thanks for sharing. the PSD with it.
.-= sriganesh´s last blog ..Giveaway – 250 stickers from Uprinting =-.
Saad Bassi
Posted 734 days ago 13We believe in Free stuff.:)
Mihai O.
Posted 734 days ago 11Great tutorial, I really like the result!
.-= Mihai O.´s last blog ..Guest Blogging =-.
Matthew Heidenreich
Posted 734 days ago 10nice layout, thanks for this.
.-= Matthew Heidenreich´s last blog ..Simplistic Black and White Portfolio Layout in Photoshop =-.
e11world
Posted 735 days ago 8I 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!
Mahmoud
Posted 735 days ago 9You 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 :)
Saad Bassi
Posted 734 days ago 14You should must give a try to 960gs. It will save your time.
Mahmoud
Posted 735 days ago 7Thanks everyone for your nice comments. really appreciated :)
Dainis Graveris
Posted 727 days ago 22Thank you from 1stwebdesigner and me as well! Great job! :)
Yofie Setiawan
Posted 735 days ago 6Nice tips! i like that shadowing style…
Tutorial Lounge
Posted 735 days ago 5really professional layout design tutorial with tools awareness and design inspirations.
.-= Tutorial Lounge´s last undefined ..If you register your site for free at =-.
Murlu
Posted 735 days ago 4Pretty awesome, gonna need to try it out tonight after work :)
.-= Murlu´s last blog ..How To Find Minimal Techno Tracks For DJing =-.
fatCow
Posted 735 days ago 3Thanks a lot for this beautiful article
Mukesh
Posted 735 days ago 2Seems really cool.. will surely give a try.. thanks a lot for this beautiful article :)
.-= Mukesh´s last blog ..jQuery: A simple Tooltip =-.
setia nugraha
Posted 735 days ago 1wow!! amazing tutorial!!! Thanks a lot ..
Best regards
setia