Create a Slick and Minimalist Web Layout in Photoshop


Slick Minimalist Werb Layout

In this Photoshop web design tutorial, we’re going to learn how to create a slick and minimal-looking website layout. We will use the 960 Grid System as a template to make it easy to align the design elements on the layout.


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


Create a new Photoshop document

1 We’ll be using the 960 Grid System (download it at http://960s/) as a starting template. Once downloaded, ppen up the file called 960_grid_12_col.psd and then hide the group called 12_col_grid.

Create a new Photoshop document

Creating the background

2 First of all, right-click on the Background layer in the Layers Panel and then choose Layer From Background. This will unlock the Background layer so that it’s editable. I named the Background layer as bg.

Creating the background

3 Now select the Gradient Tool (G), set your Foreground color to #efefef and your background color to #cacaca. Select Radial Gradient as the type of gradient in the Options bar. Drag the gradient onto the canvas so that you have something similar to this:

Creating the background

Designing the header section

4 We’ll add a new horizontal guide at the 50px mark from the top of the document to set our top borders. This will mark the location of the layout’s header section.

Designing the header section

5 We’ll start adding our title and slogan; select the Horizontal Type Tool (T) and type your site’s name and your slogan. Here are the font settings I used in the layout:


"some awesome slogan"

6 Align the fonts on the left top, using your guides for accurate placement.

Designing the header section

Creating our navigation

7 Select the Horizontal Type Tool (T) and type the navigation text (home, about us, services, portfolio, and contact) using the following font settings:

8 Use the document’s guides to align the navigation link text like the following image:

Creating our navigation

Creating the search bar

9 Now it’s time to create the search bar that’s situated on the right of the navigation links. Select Rounded Rectangle Tool (U), set the Radius option value to 5px, and then draw the rounded layer shape onto the canvas such that it has 155px width and 20px height, and located at the right of the navigation links.

10 Add an Inner Shadow layer style by double-clicking on the rounded rectangle shape layer in the Layers Panel to open up the Layer Styles dialog box. Use the following settings below for the layer style settings:

Creating the search bar

11 Let’s create the GO button now. Create a new rounded rectangle shape with the same height (20px) and Radius option value (5px), but with a width of 30px.

12 Apply a vertical (90 degrees) Linear Gradient layer style onto the Go button, with the left color stop being #2fa9c1 and the right color stop being #207687.

Creating the search bar

13 And then write any text like "search…" using the Horizontal Type Tool (T) on top of the search bar; use a white color (#ffffff).

14 Using the Custom Shape Tool (U), create a white arrow and align it to the center. I used the custom shape called Arrow 2, which comes standard in Photoshop CS versions. Look for it in the Shape option dropdown menu in the Options bar.

Our search bar should be looking like this:

Creating the search bar

15 Before we move to the next step, just make sure that everything is well-organized in our document. Here’s a screen grab of my Layers Panel as I was developing the layout:

Creating the search bar

Creating the separating lines

16 Using the Line Tool (U), Create two 1px lines on top of each other, with the following color values:

Creating the search bar

Note: There are many ways to set the colors of the line shapes. The first is by setting the Color option in the Options bar before drawing the lines. The other way, if you already drew the lines, is to use a Color Overlay layer style. I’ll let you decide how to do this.

Adding the sub-navigation

17 Type your sub-navigation text using the Horizontal Type Tool (T) using the following settings:

18 Make sure that the separating line is centrally aligned between the main and sub-navigation. Here’s how it should look:

Adding the sub-navigation

Creating the featured designs area

19 We’ll start creating the place where the image of a featured design would be, so we’ll select Rounded Rectangle Tool (U), and we’ll create a rectangle of 335px width and 128px height, and a Radius option set to 5px.

20 Apply a gradient Stroke layer style to it by setting the Fill Type option to Gradient. Modify the gradient colors so that it starts at #31aeca and ends at #2b9ab2.

Creating the featured designs area

Creating the featured designs area

21 Call this newly created layer photo_holder.

22 Well, let’s add an image of a featured design by going to File > Place. This will open up the Place dialog box where you can select an image to place on our canvas. Pick an image, and then press the Place button when you’re done.

23 Make sure that the layer of the image is above the photo_holder layer; if it isn’t, move it. Right-click on the image layer and choose Create Clipping Mask.

Creating the featured designs area

24 Modify the size of the image to fit; you can use Free Transform (Ctrl/Cmd + T). When you’re happy with the size, Make sure that your image is aligned according to the image above, flushed to the right of the layout design.

Add some content to the design

25 Let’s add some content to our design, but before we do that, we have to set our boundaries for our content. To do that, drag two horizontal guides like in the following image.

Add some content to the design

Add a title and a category

26 Use the following settings for the title and category.

Title (in my case it was "Handstand!")

Category (in my case it was "Photoshop design"):

Paragraph content

27 Add your paragraph text, using the following image for reference.

Paragraph content

28 Choose the Move Tool (V) in the Tools Panel and select our three text layers in the Layer Panel (hold down Ctrl/Cmd while clicking on them to select all of them).

29 Give them equal spacing using the Distribute top edges option.

Paragraph content

Create the slider control

30 It’s time to create the slider control. Start by duplicating the two lines we’ve created for the navigation, and then resizing them (you can use Free Transform to do this). We’ll make the dark line darker, giving it a color value of #777575.

Create the slider control

31 Then create a small box rectangle shape using the Rectangle Tool (15px wide and 15px high) and apply a Gradient Overlay layer style to it.

Create the slider control

32 Before we move to the next step, we have to organize our layers. Use the following reference image to make sure the layers are in proper order.

Create the slider control

Creating the content boxes

33 First off, we need to set our boundaries. Drag a horizontal guide and put it on the slider line. Leave a 50px gap, and then add another horizontal guide.

Create the slider control

34 Now select the Round Rectangle Tool (U). Create a rectangle of 260px width and 170px height and a color of #d0d0d0. Call this layer bg_1.

35 Align the rectangle like the following reference image, using the Move Tool (V) to position them accurately.

Create the slider control

36 Right-click on the bg_1 layer in the Layers Panel and choose Create Layer Mask from the contextual menu.

37 Select the Gradient Tool (G), set your foreground and background color to Black and White (press D to automatically reset the colors). With a linear gradient, drag from top to bottom until you’re satisfied with the look.

Create the slider control

38 Now let’s create the shadow. Duplicate the bg_1 layer. Name the duplicated layer shadow. Place the layer beneath the bg_1 layer. Then apply a Color Overlay layer style with a dark gray color (#3e3e3e).

Create the slider control

39 While having the shadow layer selected, go Filter > Blur > Gaussian Blur. Set the Blur Radius to 5.0px.

Create the slider control

40 Using Gradient Tool (G), adjust the layer mask until you have something like this:

Create the slider control

41 Add some content to the box. Below, you’ll see what I ended up with.

Create the slider control

42 Group the content layers that you created into a group called content.

43 Now we want to align it. Select the content group, hold down the Ctrl/Cmd key, and select the bg_1 layer in the Layers Panel. Choose the Move Tool (V), and click on the Align horizontal centers option and the Align vertical centers option to position them.

Create the slider control

44 Now make two copies of this box by duplicating the layers of the original content box we just created. Align them, change the content, and don’t forget to add a horizontal guide at the bottom.


45 Let’s check back and make sure that all of our layers are organized; use the screenshot of my layers as reference.


Creating the main content area

46 Leave a 50px gap and drag a new horizontal guide. Start adding your content and align it according to the following image.

Creating the main content area

Creating the main content area

47 Let’s make it look a bit better. We’ll select Rectangular Marquee Tool (M). In the Style option, choose Fixed Size with a fixed width of 15px and a fixed height of 30px. Set your foreground color to #12197b and fill the rectangular marquee selection with the color (Press Ctrl/Cmd + Backspace to fill).

Creating the main content area

48 Using the same settings, you can add some content in the right side.

Creating the main content area

49 Drag a new horizontal guide at the bottom. Add a separating line; use the following image for reference.

Creating the main content area

50 Check back to see all your layers are organized, using the following image as reference.

Creating the main content area

Creating footer area

51 We’ll start with the footer area creation by (again) creating a new horizontal Guide. Leave a 50px gap between the guide above, and drag a new horizontal guide!

52 Select the Single Row Marquee Tool (M). Set your foreground color to white (#ffffff). Click on the canvas to create the marquee selection. Then press Ctrl/Cmd + Backspace to fill it. Call this layer 1px_upper_line.

Creating footer area

53 Select Rectangular Marquee Tool (M) and create a rectangle of 1020px width (it spans the entire width of the canvas, and 160px height. This will be the background of the footer area. Fill it with any color. Apply a Gradient Overlay layer style to it using the following settings.

Creating footer area

54 Duplicate the 1px_upper_line layer and move it to the bottom of the footer, call it whatever name you want, but I’ve called mine 1px_down_line. Here’s how it looks.

Creating footer area

55 Start adding some content; use the following images for reference:

Creating footer area

Creating footer area

56 You can download the social media icons from deviantART – they’re called Aquaticus.Social by Junwei.

57 Align them like in the following image:

Creating footer area

Creating the small footer

58 Drag a new horizontal guide at the bottom of the big (brown footer), leave a 50px gap, then add a new horizontal guide.

59 Then write your footer navigation text like so:

Creating the small footer

60 Write the copyright text and align it to the right, add a final horizontal guide.

Creating the small footer

Adjusting the canvas size

61 Finally, we need to leave another 50px gap between the footer navigation, copyright text and the borders in order to do that, we’ll adjust our canvas size.

Adjusting the canvas size


And there we have it! We’ve created a clean and minimal layout design!


Download source file

You want a PSD copy don’t you? Here’s a ZIP archive that contains a PSD, and a JPG preview, get it now!

Related Content

About the Author

Mahmoud Khaled a web and graphics designer from Egypt. He’s also a blogger and tutorial writer. At a young age of 15, he already shows skills equivalent to his much older counterparts. Send him a tweet @MahmoudKhaled, connect with him on Facebook, and visit his site and blog called

This was published on Jan 8, 2010


Really awesome tutorial, so easy to follow with the images :-)

That is one talented 15 year old :)
Great tutorial.

Great post, love minimal designs. It takes much more work than one would think.

Jon Rawlins Jan 08 2010

Great Tutorial for a simplistic design. I love inspirational tutorials like this.

Keep up the good work.

Amanda Radley Jan 08 2010

Personally I’d never use this, I like WordPress too much and it’s nice and easy for a blonde like me. However I love this tutorial, it’s back to basics, easy to use and creates impressive results. Well done and thank you for sharing.

Milos Milikic Jan 08 2010

Nice one!

Very nice articel and qool design =)

Jacob Gube Jan 08 2010

Hi everyone, thank you for the encouraging words that you’ve given Mahmoud. I think he did a wonderful job here, and his tutorial was very well-explained and detailed. I hope that if you follow along the tutorial, that you’d upload your final work on the Six Revisions Flickr showcase so that we can keep building it together as a community.

@Angela: After reading Mahmoud’s submission, I pretty much said the same thing. What adds to my amazement is not only that such a young individual can create a beautiful layout, but also write a great tutorial on his process that’s well-explained and easy to follow.

Gilberto Ramos Jan 08 2010

Thanks!! following you on twitter since now ;)

Leandro Jan 08 2010

Isn’t too much gray? Looks a bit dark.

Jordan Walker Jan 08 2010

Great job!

Alex Yamaguti Jan 08 2010

Nice tutorial Mahmoud! :9

kutchbhi Jan 08 2010

Ok thats very elegant. But exactly how do we go from psd > html|css ?

cool man!
but how to take this to html?
i am always stuck on that part:(

Juliana Garcia Sales Jan 08 2010

Congratulations! A beautiful layout in a very accessible tutorial. Thank you! =D

Zak Groner Jan 08 2010

Haha, another teenage web designer. :)

Nice tutorial, the final outcome is great, my only criticisms are the paragraphs at the bottom. The left one is longer than the one on the right- it just looks odd to me.

nicolas Jan 08 2010


Question: How it works later ?(links, html, code, etc)

How I convert it in html page?

Bye and thanks

Rishi Luchun Jan 08 2010

Perfect been looking for something like this!

Barbara Jan 08 2010

Excellent Tutorial. It was very well thought out and easy to follow. Mahmoud, you have a very promising future!

Great stuff. However, from the CSS aspect of using the 960 system, the design breaks the grid a few times here and there. As I have worked with it, I have noticed that the 12 column system doesn’t give you enough flexibility. There actually is a 24 column system now ( lets you build your own with as many columns as you want, actually). Now you might think it’s crazy e.g. “Why not just make a grid with 960 columns while you’re at it” but the 24 column one is pretty nice because it still gives you the framework for being able to line up columns but the columns are smaller so the width jumps from a grid_1 to grid_2, for example, are less jarring and give the design a more organic, less griddy look. The point is having that nice floating/clearing architecture in place while trying to make it not look so much like a grid.

Mahmoud Jan 08 2010

Thanks a lot everyone for your encouraging and nice words :)

Callum Chapman Jan 08 2010

Very talented 15 year old indeed, great tutorial Mahmoud, well done!

Matt Lewsley Jan 08 2010

Photoshop is the best program for designing. Thank you.

Charlie Jan 08 2010

Very nice article. My one complaint would be the title, as the resulting design is not even a little bit minimalist.

Nice, clean layout, I can’t imagine what you’re skills will be like in a couple of years from now..

Julian Gaviria Jan 08 2010

Great talent and bright future. Good Stuff.

Great tutorial! Bookmarked for future reference on the next layout I attempt to design. Thank you!

Shawn Hooghkirk Jan 08 2010

Great tutorial Mahmoud.

Good to see you are introducing the grid for beginners, rather than just creating a simple website without it. The grid can save you an incredible amount of time, and reduce the time thinking about staying in the lines ;)

Keep it up Mahmoud!

Mohamed Mansour Jan 08 2010

Very creative! Looking forward for your next one.

Ivan Mišić Jan 08 2010

Excellent tutorial and nice clean design

Fantastic tutorial, Mahmoud! I would agree that it’s a little dark, as a place to start from it can’t be beat. We only wish everyone adopted more minimalism! I’m hoping this tutorial will get new designers pointed in the right direction.

Lee Fuller Jan 08 2010

Excellent tutorial, nice clean and stylish layout.


Nice clean layout, great tutorial. Thanks!

izulcybercafe Jan 08 2010

Nice, how to slicing & css ?

perfect and its very clean layout

sayan mukherjee Jan 09 2010

Nice and very detailed but the design looks a bit dull to me.

Mahmoud Jan 09 2010

Once again thanks a lot everyone!
Concerning the HTML part, I’m actually not a coder, However I’ll be contacting Mr, Jacob to see if any of Six Revisions authors would like to code the design and share it back.

wow that’s great tutorial

Excelent tutorial.

TutsBot Jan 09 2010

Thanks for this great tut :)

The final result looks great !

lol your 15,cool!. you got a bright future.
only thing i notice bad is the spacing, my opinion of course.
shadow looks good though

That was really fab. I really liked your tutorial very well explained and straight forward .. U r talented my friend ;D keep it up & waiting for more

Vladimir Remenar Jan 09 2010

Very clean and professional design!

Using a pure black text for content and orange colour instead of this greenish-bluish for headings could make it a bit interesting and more readable… I even might give it a try and create a comp :)

SmashDesign Jan 09 2010

great toturial

Thanks a lot

Simon Carr Jan 10 2010

This is a nice tutorial – especially with all the graphics included. My site, Work By Simon uses a lot of the same minimal techniques that were mentioned in this article.

Deepu Balan Jan 11 2010

Very well explained… Wonderful tutorial. The design is really awesome… Neat n cleat UI which is unique and professional. Very well done, Way to go talented young man! :-)


Webjohn01 Jan 11 2010

Hello Mahmoud!

I really like your design, because it was very simple and clean. I hope the psd to xhtml/css conversion will follow.

Keep up the good work.

More thanks!

Modern Zen Jan 11 2010

Fantastic design, great use of the grid system. You’ve got a bright future ahead of you!

stephanie Jan 11 2010

I’m having trouble with the bg_1 layer. I create the rounded rectangle as described, but when I right click on that layer in the layers panel, I don’t have an option to “Create Layer Mask”. I even tried to rasterize that layer first, and still didn’t have a layer mask option. Am I missing something? I’m using PS CS4. Thanks for any help! I would really like to be able to duplicate that faded background shadow effect.

Great tutorial!

Too bad the link to the zip file is broken.

You might want to check the link near the top of the article. The page to download the template is

I also found this design to be a bit dull. Possibly a lighter background could give it more contrast.

Julian Gaviria Jan 12 2010


First make sure the layer is rasterized. It isn’t to supposed to show up when you right click it, instead you highlight the layer and then at bottom of the layers panel you have the icon of a rectangle with a circle in the middle. When you put your mouse over it it should say add layer mask, and that’s what your looking for.

Mahmoud Jan 13 2010


First off, I’m sorry for the kind of late reply!

Well, you mean by the layer “bg_1″ the background layer of the content box no.1 right ?

Let’s relax and create again :)

Step1 : Create a new layer, Select the Rounded Rectangle Tool (U) and select “paths” for the option.

(see this image : )

Step2 : After you’ve created your rectangle – and while you’re selecting the Rounded Rectangle Tool (U) – right click on the rectangle and choose “Make Selection”.

(see this image : )

Step3 : Now let’s fill it! set your foreground color to #d0d0d0 and click Shift+Backspace (use : foreground color)

(See this image : )

Don’t forget to click Ctrl+D to deselect.

Step4 : Here’s the important part, While having the layer we’ve created in the first step selected, at the bottom of the layers panel there’s a couple of icons, click on the one that says “Add a layer mask”.

(see this image : )

Here’s how your layer should look after clicking the icon :

Step6 : Now with a Black, White gradient you can adjust your layer mask.

(see this image : )

And that’s it!

You’ve also mentioned duplicating the faded shadow layer.
There’s many ways the easiest way is to:

Right click on the layer you want to duplicate and click “duplicate layer”

(see this image : )

I really hope this helped! and please do let me know if you need any other help.

BTW, Julian Gaviria explained it very well, but I thought it would be better with images.

@ bart
I just tried downloading the zip and it’s working perfectly, give it another try and I’m pretty sure it will work :)

I think minimalist websites look and work the best, I mean the are usually alot more user friendly as your eye is not overloaded with to many things.

Stephanie Jan 13 2010

Thank you Julian and thank you Mahmoud!!
I was able to make this work thanks to your extra help! :)

Elemental Jan 14 2010

thanks for the tutorial, but the link: http://960s is not resolving??

Or am i missing something?

Hey Elementsl..
try this

Ben Stokes Jan 15 2010

I base all my work on minimalist design – I think a busy design tends to make the viewers eyes wander some-what form what they really should be looking at. This is an excellent tutorial, very easy to follow.

Thank you.

Great! Such skills at 15 y.o.! Awesome!

Somebody asked about convertation to xhtml/css.

You can read about it here:

This is the 1st part (‘painting’). There you’ll find a link to the 2nd part – convertation to xhtml/css.

Have fun!

Stuart lyon Jan 19 2010

Very siple and easy tutorial!
But if you want to use it you have to code it using css! Do you have a tutorial on that.

Very cool, would love to see a tutorial on html/css

Miss "B" Jan 21 2010

Great tutorial! Wish I’d discovered you sooner. Thank you!

Thank you for this great tuto about how making a great minimalist web layout in toshop. I don’t use photoshop for making complete layouts anymore but it’s very useful for beginners :)

Great tutorial, I love photoshop, but i do all my web inerfaces using fireworks. Would like to try sometimes photoshop as well. Thanks

You’re 15???
Well that means two things:
1) You’re awesome.
2) I quit.

Looks like a great walkthrough, can’t wait to try it out.

Constantin Feb 04 2010

that was great fun. thanks for the tutorial. and kudos to the fact that you are doing this at the age of 15.

Thanks for sharing, should try this one day . . .

It sure would help if you would specify which the heck version of photoshop the tutorial has in mind. I can never finish any of the tutorials because you guys don’t include every single step. I can’t get a gradient into my rounded rectangle. To heck with it.

Wow! this is great, thanks for the post!

Mahmoud Feb 15 2010


Well this tutorial was made in Photoshop CS4 (Creative Suit 4). but it’s not that big deal though!

And would you please specify exactly which rounded rectangle that you can’t get gradient into?

Let me know if you need any other help :)

*Note: “Which the heck, heck, heck..” isn’t an attractive way to get response :)

Jacob C Feb 18 2010

@Mahmoud – Nice tutorial! I personally don’t like the layout, it’s not my taste and there are some issues with spacing/typography.

Anyway, my only question is this, please don’t take it wrong.
Your comment above says that you created this with CS4.

Now, I have been a web and graphic designer in the USA for 3 years and have worked with some large clients but I don’t even have CS4 yet. I still work with CS3.

How in the world does a 15 year old boy in Egypt able to afford Photoshop CS4? That just boggles my mind. Hope you don’t take this wrong.

But if you are using a pirated copy, then shame on you! If not, then ignore this comment.

Have a nice day.

Mahmoud Feb 20 2010

@Jacob C

I did not get you wrong,
but I just don’t understand; What’s the connection between living in Egypt and having Photoshop CS4?

Well, my father is a Petroleum Engineer. He’s worked in USA, Australia, Europe, the Golf area, etc. Also with large corporations (such as; Aramco)

He bought the CS4 master collection as a gift.

Bryce Wisekal Mar 19 2010

This is an amazing tutorial. I hope you do not mind but I am going to share this in my blog as well, of course with credits and will link back to this article numerous times.

Beautiful, absolutely beautiful. You’ve accomplished a lot and you’ve a very bright future ahead of yourself. Congrats!

great man…keep going..

fireRox Apr 13 2010

very clean and fresh design. great tutorial. thank you very much.

very great design. great tutorial. thank you。

good job! Teacher…?

Vicente May 05 2010

Thank you very much for this tutorial, I found it very useful for a future project .. greetings!

Ajinkya May 10 2010

this is really slick :)

thanks for the awesome TuT.

Hello all

I can say.Love it !

ratna p Jun 02 2010

thankyou very much great tutorial

ron2k10 Jun 04 2010

Thank you Mahmoud Khaled such a great tutorial its realy help me as a newbies for web design. love it your concept. God bless

Lelia Marino Jun 25 2010

Hello! I saw a website in Italian which have codified this great tutorial, also used here CSS3. The site is here

Dude-your work is amazing!! I only have Photoshop CS do you think i can do something like this with it. Anyway a big cheers from Australia mate.
Rock on

Great tuto, could you add more design layouts

@Jacob C
Wow, that was an extremely offensive comment. I’m only 17 and I’ve had CS4 for over a year now. It really isn’t that difficult to obtain legally. You do realize it was released in 2008, right?

Disregarding age…are you implying that someone who lives in Egypt can’t have advanced programming? Honestly, how could you even think something that stupid?

hi, I stucked at #36 and #37, i can’t get the layer mask working. is there anything i need to look at?

ok, i got it, and sorry again for not reading the posts before asking.

thanks for the great tutorial.

great stuff kid. Love it.

Hey Dude,

Great work
at this age you have nice understanding of UI and Design.

have you created HTML for this design or you are going to explain it. if yes can you please share link I would love to see it.

youyouk Jan 10 2011

I love it :) nice

youyouk Jan 10 2011

It would be nice if you could make a PSD to XHTML/CSS Conversion tuto for this design too :)

jacob C
you are a real geek who needs to lighten up. Your large clents must be bankrupt if you cant afford cs4.
leave the kid alone jealousy gets you no where

Marcell Purham Jan 18 2011

Great tutorial. This web layout is very clean. And you’re only 15 keep it up :)

minooka Jul 14 2011

Testimonails? Oops.

normal course of event, it is not my idea to leave a comment for any web page i visited, but this time, i can’t turn my head away without doing anything, so i was force by my well-desire to leave comment,
Ok, all in all, this writer is a really grate guy, who know what we exactly need, and who explain what we want very clearly, carefully and wishfully, his tutorial tell me that he is good-nature guy, and the one in a million!

Raghavendra Nov 12 2011

Hi ..
Can anyone tell me after i create this design , How to import it to my joomla site .
Please help me has i am looking forward for joomla designing .

This comment section is closed. Please contact us if you have important new information about this post.