How to Make a Light and Sleek Web Layout in Photoshop

Sep 14 2009 by Ionut Ciursa | 54 Comments

How to Make a Light and Sleek Web Layout in Photoshop

In this web design tutorial, we’ll create a light and sleek layout in Photoshop. We will use the 960 Grid System, and if you haven’t used it before, no problem, I will show you how it works and how it can help you design better layouts.

Final Result

Below, you can see the final result of the what we are creating. Clicking on the image will show you the full-scale version of the web layout.

Final Result

Preparation: download the 960 Grid System template

Before we begin creating our layout, go to 960.gs and download the grid system. Then unpack the ZIP file and open the PSD file which contains the a 12-column grid; you will find this file by going to 960_download > templates > photoshop folder.

If you look in your Layers Panel, you’ll see that you have the standard Photoshop Background layer and two groups. You can delete the Layer 1 group because we don’t need it. The 12 Col Grid group should always remain on top. To hide the grid when you don’t need it, simply click on the eye icon of this group in the Layers Panel to toggle off its visibility.

Besides the red bars that you see, the PSD file also contains some guides that will be very useful. To see these guides, go to View > Show > Guides (you can use the shortcut Ctrl+; to toggle the visibility of your guides).

Start off by increasing the size of the document

1 To begin our layout’s design, go to Image > Canvas Size, set the width to 1200px and the height to 1300px, and then click OK.

Start off by increasing the size of the document

Creating the background

2 Use the Paint Bucket Tool (G) to fill the background with the color #ADBFCA.

3 Double-click on the Background layer to unlock it. Double-click on this layer again to open the Layer Styles window and use the settings from the following image for the Gradient Overlay layer style.

Creating the background

4 Now, we are going to create a white radial gradient at the top of our layout. First, create a new layer and fill it with white.

5 Double-click on this layer to open the Layer Style window, set the Fill Opacity to 0% and use the settings from the following image for the Gradient Overlay layer style. While the Layer Style window is still opened, click on your image and move the gradient at the top of your layout. Take a look at the following image for reference. Name this layer radial gradient.

Creating the background

6 Choose the Horizontal Type Tool (T) from the Tools Panel and write the name of your site above the white gradient which you have created with the color #EBF0F3. For this layout, I have used only fonts from the Myriad Pro family, but you are free to use any other fonts you want.

7 Double-click on this text layer to open the Layer Style window and use the settings from the following image.

Creating the background

Creating the navigation bar

8 Create a new group (Layer > New > Group) and name it navigation bar. Select the Rounded Rectangle Tool (U), set the Radius to 10px and the Color to #DCDCDC, and create a rounded rectangle with the dimensions 960px by 65px. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Note: open the Info Panel (F8) to see the size dimensions (width and height) of your rounded rectangle while you are creating it. Also, to create more guides onto your canvas, click and hold down on a ruler (they’re at the sides of the Photoshop GUI), and then drag towards the canvas.

Creating the navigation bar

9 Select the Horizontal Type Tool (T) and add the text for your navigation menu items, using the color #B5B5B5. Add a Gradient Overlay layer style to each of these text layers, using the settings from the following image.

Creating the navigation bar

10 Create a new group and name it separators.

11 Get the Line Tool (U) from the Tools Panel, set the Weight to 1px, hold down the Shift key to keep the line straight, and create a vertical line from the top of your navigation bar to the bottom using the color #F3F3F3.

12 Duplicate this layer (Ctrl+J), select the Move Tool (V) and hit the right arrow on your keyboard to move this layer one pixel to the right. Change the color of this line to #B8B8B8. Doing this step creates a very nice inset effect that’s subtle but adds a detail to the design.

13 Select the two layers inside the separators group (hold down the Ctrl key and click on them in the Layers Panel) and duplicate these layers by dragging them over the "Create a new layer" button from the bottom of the Layers Panel. Create as many separators as you need and put them between your navigation menu items.

Creating the navigation bar

Designing the search bar

14 Create a new group and name it search bar". Then select the Rounded Rectangle Tool (U), set the Weight to 4px and create a rounded rectangle with the dimensions 220px by 35px in the right side of your navigation bar using the color #E5E5E5.

Designing the search bar

15 Select the Horizontal Type Tool (T) and write the words "type and hit enter to search" inside your search bar, using the color #BBBBBB.

16 For the search icon, we will get an icon from the free icon set called Function Icon Set. Download the set, unpack it, look for the search icon and open it in Photoshop. Get the search icon into your canvas and move it into position using the Move Tool (V); put this icon in the left side of your search bar and name its layer "search icon".

Designing the search bar

Building the "Recent Projects" area

17 Create a new group and name it "recent projects".

18 Select the Rounded Rectangle Tool (U), set the Radius to 10px and create a rounded rectangle with the dimensions 960px by 280px using the color #F1F1F1.

19 Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer "bg".

Building the "Recent Projects" area

20 Select the Rectangle Tool (U) and create a rectangle with the dimensions 960px by 40px, using the color #D8D8D8.

21 Double-click on this layer to open the Layer Style window and use the settings from the following image. Move this rectangle at the top of your rounded rectangle, and name this layer top bar.

Building the "Recent Projects" area

22 The top corners of our big rounded rectangle are not rounded anymore because of the rectangle we have created at the previous steps. However, we can correct this very easily. Right-click on the top bar layer and select Create Clipping Mask. Now the top bar layer is using the layer beneath it as a mask and the top corners of our rectangle are rounded again.

Building the "Recent Projects" area

23 Select the Horizontal Type Tool (T) and write the text "RECENT PROJECTS" in the middle of your top bar, using the color #C5C5C5. Double-click on this layer to open the Layer Styles window and use the settings from the following image.

Building the "Recent Projects" area

24 Select the Rectangle Tool (U) and create a rectangle with the dimensions 460px by 240px, using the color #949494. Double-click on this layer to open the Layer Styles window and use the settings from the following image. Put this rectangle in the middle of your "Recent Projects" area.

Building the "Recent Projects" area

25 Open an image that you like in Photoshop and move it into your document using the Move Tool (V). Put this image above the rectangle from the middle of the "Recent Projects" area. Right-click on this layer and select Create Clipping Mask, then name it image, and lastly, set its opacity to 70%.

Building the "Recent Projects" area

26 Create a new layer, turn your guides on (toggle your guides’ visibility on and off using Ctrl+;), select the Rectangular Marquee Tool (M) and create a selection like I did in the following image. Select the Gradient Tool (G) and drag a #CCCCCC to transparent linear gradient from the right side of your selection to the left side. Name this layer left gradient and set its opacity to 30%.

Building the "Recent Projects" area

27 Duplicate the left gradient layer (Ctrl+J), and then go to Edit > Transform > Flip Horizontal. Move this layer in the right side of your "Recent Projects" area and name it right gradient.

Building the "Recent Projects" area

28 Create a new group and name it separators. Select the Line Tool (U), set the Weight to 1px and create a horizontal line with the width of 240px, using the color #E2E2E2. Create a new line beneath the first one, but this time use the color #FAFAFA.

Building the "Recent Projects" area

29 Duplicate the two lines which you have created at the previous step five times (hold down the Ctrl key, select the two layers by clicking on them in the Layers Panel, and drag them over the Create a new layer icon at the bottom of the Layers Panel).

30 Use the Move Tool (V) to arrange all these lines so you have three separators on each side of your Recent Projects area.

Building the "Recent Projects" area

31 Create a new group and name it arrows. Select the Ellipse Tool (U), hold down the Shift key to ensure that you’ll be creating a perfect circle, and create a small circle in the left side of your image from the "Recent Projects" area using the color #F1F1F1.

32 Click on the Exclude overlapping shape areas button from the Options bar, hold down the Shift key, and create a smaller circle inside the first one. To move the circle while you are creating it, hold down the Spacebar. Name this layer left circle.

33 Select the Custom Shape Tool (U), right-click on your image and select an arrow that you like. Hold down the Shift key and create an arrow inside your circle, using the color #F1F1F1. Name this layer left arrow.

Building the "Recent Projects" area

34 Hold down the Ctrl key and click on the left circle and left arrow layers to select them. Then drag these two layers over the Create a new layer icon on the bottom of the Layers Panel to duplicate them.

35 Go to Edit > Transform > Flip Horizontal and move these two layers in the right side of your image. Change the name of these layers to right circle and right arrow. Then set the opacity of the arrows group to 65% so that all layers inside this group will have a 65% opacity.

Building the "Recent Projects" area

36 To cap off the Recent Projects area design, select the Horizontal Type Tool (T) and add the text for your recent project items using the color #ADADAD.

Building the "Recent Projects" area

Making the "Services" area

37 Create a new group and name it services. Select the Rounded Rectangle Tool (U), set the Radius to 10px, and create a rounded rectangle with the dimensions 960px by 350px, using the color #F1F1F1. Name this layer services bg.

38 We are going to use the same layer style that we have used for the background of the "recent projects" area. Open the recent projects group, right-click on the bg layer and select Copy Layer Style. Then right-click on the "services bg" layer and select Paste Layer Style.

Building the "Recent Projects" area

39 Select the Rectangle Tool (U) and create a rectangle with the dimensions 960px by 40px using the color #D8D8D8. Name this layer services top bar. Put this layer at the top of your rounded rectangle, right-click on it and select Create Clipping Mask.

40 Right-click on the top bar layer from the recent projects group and select Copy Layer Style. Then right-click on the services top bar layer and select Paste Layer Style.

Building the "Recent Projects" area

41 Write the word "services" in the middle of your top bar, using the color #C5C5C5 and use the same layer style that you have used for the Recent Projects area text.

Building the "Recent Projects" area

42 Create a new layer, turn your guides on, and use the Rectangular Marquee Tool (M) to create a selection like I did in the following figure. Then use the Gradient Tool (G) to drag a #CDCDCD to transparent gradient from the top of your selection to the bottom. Name this layer as gradient and set its opacity to 30%.

Building the "Recent Projects" area

43 Now we are going to split the Services area into three columns; the 960 Grid System makes this very easy for us. Each column will have the width of 300px (that means four red bars).

44 To delineate these three columns, we will use two separators. First, create a new group and name it separators. Then select the Line Tool (U), set the Weight to 1px and create two vertical lines – the first one using the color #CDCDCD and the second one using the color #FAFAFA. Duplicate these two lines, select the Move Tool (V) and arrange your separators to create your three columns. Check out the following image to see where you have to put your separators.

Building the "Recent Projects" area

45 Select the Horizontal Type Tool (T) and add some text in each of your three columns, using the color #8E8E8E. I have also created three squares that can be replaced with images.

Building the "Recent Projects" area

46 Create a new group and name it buttons. Create a new group inside the previous one and name it 1st button.

47 Select the Rounded Rectangle Tool (U), set the Radius to 6px and create a rounded rectangle with the dimensions 100px by 28px, using the color #F1F1F1. Double-click on this layer to open the Layer Style window and use the settings from the following image.

48 Select the Type Tool (T) and write the text "read more" on your button, using the color #AFAFAF.

Building the "Recent Projects" area

49 Duplicate the 1st button group two times (right-click on the group in the Layers Panel and then pick Duplicate Group). Then put these two new buttons in the middle of the second and third columns.

Building the "Recent Projects" area

Creating the "About us" area

50 Create a new group and name it "about us". Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 620px by 360px. Name this layer bg. Right-click on the "services bg" layer and select Copy Layer Style. Then right-click on the "bg" layer and select Paste Layer Style.

Building the "Recent Projects" area

51 Select the Rectangle Tool (U) and create a rectangle with the dimensions 620px by 40px, using the color #D8D8D8. Name this layer top bar. Right-click on the "services top bar" layer and select Copy Layer Style. Then right-click the top bar layer and select Paste Layer Style.  Right-click on this layer and then select Create Clipping Mask.

Building the "Recent Projects" area

52 Select the Type Tool (T) and write the words "about us" at the top of your rounded rectangle using the color #C5C5C5. Copy the layer styles from the services text layer and paste it to this layer.

Building the "Recent Projects" area

53 Turn the guides on and use the Rectangular Marquee Tool (M) to create a selection like I did.  Use the Gradient Tool (G) to drag a #CDCDCD to transparent linear gradient from the top of your selection to the bottom.  Name this layer "gradient" and set its opacity to 30%.

Building the "Recent Projects" area

54 Create a new group and name it "separator". Use the Line Tool (U) to create two vertical lines – the first one using the color #CDCDCD and the second one using the color #FAFAFA. Put this separator in the middle of your About us area.

Building the "Recent Projects" area

55 Select the Horizontal Type Tool (T) and add some text inside the two columns from the "About us" area, using the color #8E8E8E.

Building the "Recent Projects" area

Designing the "Contact us" area

56 Create one more rounded rectangle like we did for the "Recent Projects", "Services" and "About us" areas. The dimensions of this rectangle should be 300px by 360px.

Designing the "Contact us" area

57 Now, we are going to design the contact form for our website. Select the Rectangle Tool (U) and create three rectangles like I did, using the color #E6E6E6.  Add a Stroke layer style to each of these rectangles using the settings from the following image.

Designing the "Contact us" area

58 Select the Horizontal Type Tool (T) and write the words "name", "email" and "subject" next to the first three rectangles using the color #BBBBBB.

Designing the "Contact us" area

Making the "send" button

59 Next up, we are going to create the send button. First, select the Rounded Rectangle Tool (U), set the Radius to 6px and create a rounded rectangle with the dimensions 100px by 30px, using the color #EFEFEF. Double-click on this layer to open the Layer Style window and use the settings from the figure below. Select the Type Tool (T) and write the word "send" on your button, using the color #AFAFAF.

Making the "send" button

Making the "send" button

A simple footer

60 Finally, to finish off – get the Horizontal Type Tool (T) out and add a copyright statement in the footer of your layout, using the color #999999.

Making the "send" button

We’re done!

I hope you enjoyed this tutorial. You can view the final result image below or you can click on it to see the full-scale version of the web layout.

Final Result

Download the source file

If you’d like to check your work with the Photoshop file used in this tutorial, download the file below.

Share your work on Flickr!

Did you follow along this tutorial? If you did, why don’t you show us what you were able to do by joining the Six Revisions Flickr group and uploading your own work?

Related content

About the Author

Ionut Ciursa is a freelance designer based in Romania. Photoshop is one of his passions and he has been using this wonderful program for about four years. He loves to share his knowledge with others through his tutorials. He is also the founder of PSDBURN.com where he writes Photoshop tutorials.

54 Comments

Roberto

September 14th, 2009

Nice tutorial. Your design looks great. Thanks.

Website Design Uk

September 14th, 2009

Nice work, Ionut. Very comprehensive tutorial too.

Dugg and Stumbled!

Maxime Perron Caissy

September 14th, 2009

Wow, its amazing to see how much work the author has put to make this tutorial. Definitely a nice tutorial.

Philip Davis

September 14th, 2009

Great Tutorial! thanks so much!

Dugg+RT

Jim Bob

September 15th, 2009

Great article. Photoshop never daunted me technically, just artistically. As in…I’m not.

However, I am a web developer, mainly in .NET. What has confused me about this approach is what do you do with this now? Great non-functioning mockup? Are there tools in/for photoshop to save this as a css style sheet and html that can be used as the basis for the functioning page?

My assumption is this would have to be recreated in whatever IDE or Web Design tool your team uses?

Really just curious how other developers would take this and make it into a functioning site.

richard carpenter

September 15th, 2009

nice layout but i do have a couple of suggestions in which would maybe improve the layout.

1. justifying the text makes the paragraph’s look that little bit better.

2. use a smaller font size for the navigation.

3. maybe color the headings a slightly darker color from the paragraph text.

i know there just small minor details, but would definetly improve the look of the layout.

good job :)

Kevin

September 15th, 2009

great tutorial, very well explained

Maarten

September 15th, 2009

Great tutorial, thanks for spending this much time on it!

Patrick Toribio

September 15th, 2009

Man… your tutorials are great and I really like your design style. Very cool website, thanks

Mj

September 15th, 2009

Brilliant and detailed Tutorial. Now all I need to learn is how to code it and upload it for web.I suck at the coding side of things :(

Oggy

September 15th, 2009

Love the design! It looks excellent. Only bit I don’t like quite as much is the look of the text on the “Recent Projects” and “Services” parts. Still, it’s a minor thing and it’s still an excellent tutorial! Great job, thanks! (Dugg)

Nutt

September 15th, 2009

Wow, very very impressive tutorial! Do you happen to have a tutorial for putting the Photoshop layout into a .css? I’m new to website design and this will clear up a lot of confusing issues I have.

Thanks.

Vlad

September 15th, 2009

How do you make it into a website (HTML)? Can you follow this one up with a conversion into a website? Please let me know.

i00_000i

September 15th, 2009

Coming from programming background I have only used GIMP(a wonderful tool which comes bundled with major Linux distro). These things are do-able in GIMP but not this easy. Anyway photoshop comes with a price tag.
This article gave me a good insight into the designers world. I appreciate the authors willingness to apply this much effort for the tutorial.
Nice work. keep it up..

Epic Alex

September 15th, 2009

Wow, I think I’m in love! One of the best complete site design tutorials I’ve read in a long long time, thanks very much for the effort, and for providing the psd as well.

Naughty Beaver

September 15th, 2009

Awesome tutorial on creating a web site mockup. Thank you so much for the time and energy you put into this. Very well done.

I agree with Jim Bob and the others with the BIG question of what to do next. I’ve done a few web page mockups in photoshop that I’ve been really happy with. The challenge is I’ve not been able to find much help on how to make them into an actual web site. My guess is that it’s such a pain in the neck to do that next big step that there isn’t much out there on how to do it.

Keith Davis

September 15th, 2009

Never seen such a detailed video… must have taken you ages.
Fantastic final product.
I’m just starting to take a look at Photoshop, my usual graphics software is Fireworks, but you don’t see many tutorials of this quality for Fireworks.

Ivan Mišić

September 15th, 2009

Wooow, great web layout.

Sasa Zivaljevic

September 16th, 2009

Very impressive!

Ashely Adams

September 16th, 2009

I cannot help but appreciate all the effort you’ve put into writing that tut. It’s very detailed and can be used by almost everybody. However, for the final effect, the steps appear too many and the tutorial seems to be trying too hard for too little. I’m sure experienced Photoshoppers can achieve a similar effect with 50% fewer steps.

Josh

September 16th, 2009

Either Jim Bob and Naughty Beaver are spam or they really don’t have a lot of web experience. It’s a fairly trivial process to make this into a functioning HTML site.

Colin

September 18th, 2009

I have a small problem. (I’m using CS4). When I make a rectangle to create the 40px header bar to the content box, when I go to add a clipping mask to recover the rounded edges, the entire rectangle disapears instead of just the square edges – am I missing something obvious here, is there a setting that I’m forgetting to tweak.. any help would be gratefully received.

Thanks for the tutorial, it’s been a great help to get back into photoshop (I had been using fireworks for my last lot of designs, but began to find it restrictive).

Cheers

tasarhane

September 19th, 2009

nice layout.. good tutorial.
thanks.

sonnydesign

September 20th, 2009

This is the kind of post that’s why i keep on visiting this site. You really help other designer. thank you

sidd

September 23rd, 2009

I am amazed at the amount of effort put in to write the tutorial. Not to undermine the excellent result of the effort. Great design indeed !

Chris Johnston

September 23rd, 2009

To briefly answer some of the questions in the comments regarding what to do next, there are some tools in Photoshop that allow you slice up your image into the different parts that you will, i.e., corner images, div background images, etc.

The rest would have to be created by hand in CSS. This isn’t as hard as it sounds though since the entire design has been created using a grid. This means you can simply grab one of the grid frameworks out there – 960 grid system – and use it to create the squares into which your design goes.

This combination – slice tool and grid system – make it fairly easy to create the final web page and have it look the same across all or most of the A-class browsers (just don’t forget to use some kind of reset css file).

As for the tutorial, this is an excellent one that I need to read a lot more carefully and actually work my way through.

Thanks you.

Codes Rock

September 24th, 2009

You can export the entire “image” file with html already created. There’s no magic to it. Just as Chris Johnston stated, simply slice up the image and save images/html and upload to your server . . . and your done!

I of course clean up the html to be valid code, but I’m picky like that.

Great tutorial!

jASON

September 25th, 2009

Can we have a css/html follow up?

sircyr

September 29th, 2009

Efficient detailed step-by-step demo
thanks a lot !

jabga

September 30th, 2009

very good tutorial.
I loved the design. thank you

bucabay

September 30th, 2009

Thanks for the very detailed tutorial. Very nice design also.

Unfinished Bussiness

October 2nd, 2009

Hello Guys, if you wish to use this i coded it to valid xhtml/css using 960 grid system. i hope newbie will learn something new from this layout. (not fully done, you need to customize it further to your needs)

Download: http://www.mediafire.com/?hu1yttt5xzc

RJC

October 9th, 2009

Great tutorial and theme. Colors and lines are very clean. I took it further and themed it customized for my site. I themed it for WordPress and using it as a CMS for my site. Take a look.

http://designrjc.com

Sajid Hussain

October 26th, 2009

this is great lookin..
weldone!

Shashi Singh

November 6th, 2009

This is great dream of design.
Thanks for share.

Michel

November 11th, 2009

Indeed a very comprehensive tut. Your really took the time to create a step by step design guide. Thanks to that I have learned a lot of new things. Thanks!!

moses

December 5th, 2009

Love it! Great Work!

Akin

January 5th, 2010

great tutorial, lovely layout, i would love to see how this laout is sliced and converted to web page….is there a tutorial like that on this site????

Santiago

February 10th, 2010

Amazing tutorial.
I didn’t read it yet, but it comes to sight immediately that you put a ridiculous amount of effort in this. It’s incredible beautiful.
Congratulations mate :)

murugan

February 12th, 2010

Great. Excellent tutorial

derek

March 15th, 2010

and now what do I do with the image? …

Vinicius Almeida

April 7th, 2010

Awesome Tuto!

@Unfinished Bussiness:
Tnks for your work!

neelam

September 15th, 2010

really very helpful site for the beginners.

Richard

October 17th, 2010

Very good tutorial content but layout of instructions is not consistent. Numbered info does not match accompanying image.

Joan

December 30th, 2010

很好的教程,非常感谢!

xiaozi

February 22nd, 2011

Thanks for sharing the article to us.Great work! Wish some more good articles.

lvacs

February 23rd, 2011

Love the simplicity of it and the color scheme. Great job!

Cedric

March 16th, 2011

Great tutorials with details! thank you so much!

amanda

July 5th, 2011

I love this layout and design! I’ll try to make the layout later! And maybe it will be my new layout for my designsite! thanks so much! of course i will credit you for this wonderful tutorial! :)

amanda

July 5th, 2011

Where is the download link on http://960.gs/ for the grid system?!

amanda

July 5th, 2011

oh, I found it! :) Sorry!

Haidar

August 10th, 2011

great tutorial, lovely layout, i would love to see how this laout is sliced and converted to web page….is there a tutorial like that on this site????

Ann Kristin

November 7th, 2011

Thank you so much for this great tutorial! It took me a while to finish the design, but I am finally done! Send me an email if you want to see :)

Leave a Comment

Subscribe to the comments on this article.