Advertisment
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 280×40px 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 270×40px, 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 65×30px – 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 250×150px 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 340×200px 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 100×30px – 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 20×20px (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!
[...] a Cartoon Car Similar to Cars MovieCreate a Cartoon Car Similar to Cars MovieWeb Layout DesignLearn How To Create A Clean Layout In PhotoshopLearn How To Create A Clean Layout In Photoshop Create a Gnarly Snowboarding Themed Web DesignCreate [...]
it nice
[...] 2. Learn How To Create A Clean Layout In Photoshop [...]
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!!
[...] gleich als XHTML-Template und 50 clean Websites. By the way, unsere Lehrlinge lernen jeweils mit diesem Tutorial und dem 960 Grid System, wie sie eine Website aufbauen. Wenn Sie Ihre Website haben und eine [...]
Your tutorial’s amazing , thanks for that post!
viettel´s last blog ..Viettel trao nhà tình nghĩa cho bà con miền Trung
[...] 79. Learn How To Create A Clean Layout In Photoshop [...]
Wow, very useful guide
[...] Learn How To Create A Clean Layout In Photoshop [...]
niiiiiiiiiice
Ahmed´s last blog ..ÈÊÇÑíÎ Çáíæã :: ÚãáÇÞ ÊÍãíáÜ ÇáãáÝÇÊ ãä ÇáÅäÊÑäÊ ÇáãÌÇäí // Orbit Downloader v3.0.0.2
I am in the middle of redesigning my site in the same clean style and with the same colors. Great for inspiration!
Wow, Its really fantastic tutorial.
ganesh´s last blog ..Rounded Corner Techniques with CSS
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 :)
Hey nice, thanks for the effort.
Tom Dringer´s last blog ..Welcome
Nice tutorial. Anyone know of a similar tutorial to get the showcase section animated? Perhaps in JavaScript?
[...] Learn How To Create A Clean Layout In Photoshop [...]
Thank you very much for this well written article. I am impressed with your methods of building templates and now I am dying to adapt some of your technique into mine. I will share this with some of my friends who also do web development. Thanks again.
[...] Learn How To Create A Clean Layout In Photoshop [...]
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
[...] Link: Learn How To Create A Clean Layout In Photoshop [Very Detailed] [...]
[...] Learn How To Create A Clean Layout In Photoshop [...]
What a great tutorial. Love the instructions shared through this tutorial. Keep blogging and thanks for sharing.
ya ! thats a good tutorial buddy :) thanks for sharing. the PSD with it.
sriganesh´s last blog ..Giveaway – 250 stickers from Uprinting
We believe in Free stuff.:)
Great tutorial, I really like the result!
Mihai O.´s last blog ..Guest Blogging
nice layout, thanks for this.
Matthew Heidenreich´s last blog ..Simplistic Black and White Portfolio Layout in Photoshop
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!
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 :)
You should must give a try to 960gs. It will save your time.
Learn How To Create A Clean Layout In Photoshop…
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….
[...] Learn How To Create A Clean Layout In Photoshop 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!! Possibly related posts: (automatically generated)No Title [...]
Such a great tutorial! Very detailed. Very useful. Thanks for sharing!
WebDesign Orange County´s last blog ..Get Paid NOW Taking Free Surveys – A New Program That Works
Thanks everyone for your nice comments. really appreciated :)
Thank you from 1stwebdesigner and me as well! Great job! :)
Nice tips! i like that shadowing style…
really professional layout design tutorial with tools awareness and design inspirations.
Tutorial Lounge´s last undefined ..If you register your site for free at
Great tutorial, very easy to follow. I made this one of my three links for the day on my Design Thought blog:
http://designthoughtfortheday.blogspot.com/2010/02/02-08-web-design-mistakes-fail-at.html
All the best, Ted
Another nice roundup. Thanks for sharing.
Pretty awesome, gonna need to try it out tonight after work :)
Murlu´s last blog ..How To Find Minimal Techno Tracks For DJing
Thanks a lot for this beautiful article
Seems really cool.. will surely give a try.. thanks a lot for this beautiful article :)
Mukesh´s last blog ..jQuery: A simple Tooltip
wow!! amazing tutorial!!! Thanks a lot ..
Best regards
setia