Design a Minimal and Modern Portfolio Layout with Photoshop

Oct 29 2009 by Richard Carpenter | 66 Comments

Design a Minimal and Modern Portfolio Layout with Photoshop

In this Photoshop web design tutorial, we’re going to create a mock-up of a clean and modern-looking website. This is Part 1 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

Minimal and Modern Portfolio Layout Tutorial Series

Preview

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

Preview

Make a new Photoshop document

1 Start off with a new document (Ctrl + N) in Photoshop; make the document 1200 x 1200px with a transparent background.

Make a new Photoshop document

Creating the Header’s background

2 Choose the Rectangular Marquee Tool (M) from the Tools Panel and then create a rectangle selection spanning the width of the canvas; the height of the rectangle should be about 120px.

Creating the Header's background

3 Use the Paint Bucket Tool (G) to fill the selection with any color. Double-click on the layer in the Layers Panel to open up the Layer Styles dialog box then add a Gradient Overlay using the settings below.

Creating the Header's background

You should have something like this.

Creating the Header's background

Creating the Content Area background

4 We’re now going to create the second half of our background for the layout’s content area. Start by setting your Foreground color to #00315C and Background color to #001B32 in the Tools Panel. Select the Rectangular Marquee Tool (M) and make a selection around the remaining transparent area; once you’ve made the selection, select the Gradient Tool (G), and set the Gradient Type in the Options bar to Radial Gradient.

Creating the Content Area background

5 Once you’ve set up the Gradient Tool (G), drag it over the marquee selection we created, and start dragging from the top middle of the selection to about a quarter of the way down the Photoshop canvas.

Dragging the Gradient Tool over the Photoshop canvas.

Setting up Guides

6 We are now going to set up some guides so that the website layout remains 850px wide throughout the design process. To create your first guide, go to View > New Guide. In the New Guide dialog box, enter 175px and make sure that the Orientation setting is set to Vertical. This will create a guide 175px away from the left edge of our 1,200px canvas.

Setting up guides 175px away from left edge.

7 Repeat the previous step and create another vertical guide, only this time enter 1025px (175px + 850px = 1025px). This will give us a layout that is 850px wide and centered on our 1,200px wide canvas.

Setting up a vertical guide 1025px away from left edge

Designing the Header section

8 Select the Horizontal Type Tool (T) and then add your layout title and slogan text at the top against the left guide.

Setting up a vertical guide 1025px away from left edge

9 Create a new layer underneath your layout title text, and then get the Rectangular Marquee Tool (M) ready. Make a selection over your header area; the selection should be the whole width but only half of the height of the header (about 60px in height).

Setting up a vertical guide 1025px away from left edge

10 Fill (G) the selection with the color white (#FFFFFF) then set the layer’s Opacity to 25% in the Layers Panel. You should have something like this.

Setting up a vertical guide 1025px away from left edge

Creating the Navigation

11 Select the Horizontal Type Tool (T) with a font size of about 11-12px. Add your dummy navigation text to the right of your layout’s title and slogan; leave margins in between each dummy link.

Creating the Navigation

12 In between each dummy link, add a 1px line using the Rectangular Marquee Tool (M); the line should be from the top of the header/navigation to the bottom. Fill (G) the 1px lines in the color #CECECE. You should have something like this.

Creating the Navigation

13 Now, let’s add a simple hover state to one of our dummy links. I’ve already colored one of the links in a dark blue color to represent a hover state. Select the Polygonal Lasso Tool (L) and create a triangular shape – holding down the Shift key whilst making the triangle will ensure each side is perfectly straight.

Creating the Navigation

14 Fill the triangular selection with the color #00315C.

Creating the Navigation

Creating the Welcome Area

15 Choose the Horizontal Type Tool (T), and then add some dummy welcome text; again place the text against the left guide and leave a decent amount of space in between the header/navigation and the welcome text. At the bottom of the welcome text, I’ve added 4 bullet points for a small list. The bullet points are icons from the Function Icon Set (the file name is circle_blue.png).

Creating the Welcome Area

16 We’re now going to add a welcome image on the right side of our welcome text; I’m using a screenshot of Six Revisions. Crop your image and remove any unnecessary parts that aren’t needed. Once you have your image ready, alter the perspective by going to Edit > Transform > Perspective.

Creating the Welcome Area

17 Select the Elliptical Marquee Tool, and then make an elliptical selection at the bottom of your welcome image.

Creating the Welcome Area

18 Fill (G) the selection with the color black (#000000) on a layer underneath your welcome image.

19 Once you’ve filled the selection, set the layer’s Opacity (you do this in the Layers Panel) to 35%.

20 Then go to Filter > Blur > Gaussian Blur and blur the ellipse by about 1 to 2px.

Creating the Welcome Area

21 Duplicate your welcome image and shadow layers, and then drag them underneath there originals. Move the duplicated image and shadow so that it looks like it’s standing behind the first one.

22 Once you’ve moved it in place, go to Filter > Blur > Gaussian Blur and blur the second screenshot by 1px.

Creating the Welcome Area

Creating the horizontal 3D divider

23 Select the Rectangular Marquee Tool (M) and create two 1px lines on top of each other; the lines should be 850 pixels wide from the left guide to the right guide. You can create the two lines on the same layer.

24 Fill the top line in the color #000D19 and the bottom line in #003461.

Creating the horizontal 3D divider

25 Select the Elliptical Marquee Tool (M) and make a selection over the divider line.

Creating the horizontal 3D divider

26 Fill (G) the rectangle with the color black (#000000) then apply a 2 to 3px Gaussian blur. Once you’ve blurred the ellipse, cut the top half away from the divider by using the Rectangular Marquee Tool and deleting the area beneath it so that you are left with half an ellipse.

Creating the horizontal 3D divider

27 Merge both layers together (Ctrl + E with the top layer selected in the Layers Panel), and then add a layer mask (click on the Add layer mask icon at the bottom of the Layers Panel) to the merged layer.

28 Select the Gradient Tool (G) with a gradient type of Reflected Gradient, and then set your Foreground color to white (#FFFFFF) and Background color to black (#000000).

Creating the horizontal 3D divider

29 Drag the reflected gradient from the middle of the divider to either the left edge or right edge – both the left and right sides should slowly fade into the background.

Creating the horizontal 3D divider

Designing the Content Area

30 Select the Horizontal Type Tool (T) and then add a dummy header and paragraph on the right side of the layer underneath the 3D divider.

Designing the Content Area

31 On the left side of the layout next to the dummy paragraph, create a rounded rectangle using the Rounded Rectangle Tool (U); make sure that it has a Radius option is set to 10px (the radius is set to 10px by default).

Designing the Content Area

32 Once you’ve dragged out your path, select the Pen Tool (P), right-click inside the rectangle, and then choose to Make Selection.

33 Set your Foreground color to #00315C and Background to #001B32 and choose the Gradient Tool (G) with a gradient type option set to Radial Gradient.

34 Drag the gradient from the top of the selection down to the middle, just as we did for our background. Once done you should have something like this.

Designing the Content Area

35 Now Add a Drop Shadow, Inner Shadow, and Stroke layer styles to your rounded rectangle layer (double-click on the layer in the Layers Panel to open up the Layer Style dialog box). Use the settings as shown in the following figures.

Designing the Content Area

Designing the Content Area

Designing the Content Area

36 Select the Polygonal Lasso Tool (L), and then make a triangular selection around the bottom corner of the rectangle.

Designing the Content Area

37 Cut and paste the selection to a new layer. Once you’ve re-pasted the corner you cut off to a new layer, you would have lost its layer styles. So before we go any further, re-apply the Layer Styles from above to the corner layer.

38 Once you’ve re-applied the layer styles, rotate the corner 180 degrees by going to Edit > Transform > Rotate 180; place the corner back at the bottom of the rectangle.

Designing the Content Area

39 To finish off the content box, add your dummy content.

Designing the Content Area

Creating the Footer area

40 Select the Rounded Rectangle Tool (U) and then drag out your footer sized rectangle.

Creating the Footer area

41 Fill the rectangle with any color, then add a Gradient Overlay with the following settings.

Creating the Footer area

42 Finally, add your footer information to your footer and you’re done!

Creating the Footer area

Finished!

That concludes this tutorial, thank you for reading. In the next tutorial, I’ll show you how to code it into a working portfolio template.

Share your work on Flickr

If you followed along this tutorial, why don’t you show it off to the rest of the Six Revisions community by placing it in the Six Revisions Flickr Group?

Download

If you want to download the PSD file of this tutorial, you can grab it as a ZIP archive.

Related Content

About the Author

Richard Carpenter is a freelance Web and Graphic Designer from England. Check out his portfolio here.

66 Comments

Teen Blogger

October 29th, 2009

great design.

looking forward to the coding part.

bonde

October 29th, 2009

What’s the difference between this and the Business Layout in the article from October 22nd, really?

Fahdos

October 29th, 2009

Really awesome layout ^^ but i didn’t like one thing, the blue, it’s too soft.
anyway ^^ I think I’m gonna use the same navigation menu for my Portfolio’s new version soon ^^

zoe4ever

October 29th, 2009

thanks for this great tutorial.

JoseOrestes

October 29th, 2009

Wow, great job man, thanks!

linh

October 29th, 2009

nice tuts. thanks

xing

October 30th, 2009

i’m so sorry tell you ,all you web designs are the same styles.could you exchange it??

Tom

October 30th, 2009

is it worth the time? its very simple, and generic maybe.

Webjohn01

October 30th, 2009

Hello Richard!

I really love your design because it is very simple and clean.
I cannot wait for the conversion of this design.

Keep up the good work!

Tejas

October 30th, 2009

I too didn’t like the blue color. But I liked that the overall article and look forward to the 2nd part.

Benjamin Ds

October 30th, 2009

This is minimalist ? hm…

Brayden Styles

October 30th, 2009

Simply amazing, another great tut

Mr. Dee

October 30th, 2009

Sorry found this difficult to follow. Many mistakes in coding and what was actually done. How do you use the rectangular marquee tool to make shape???? I thought it was for selection only. And How did you create the dividers? The pencil tool? Sorry I downloaded your final product and it looks good but I think the tutorial explains it wrong

- Anthony

Hamza Oza

October 30th, 2009

Very nice tut. Clean and modern. Cool

Sebastian

October 30th, 2009

Richard takes a lot of heat for having designs that are “similar” to others he’s done. What a lot of people don’t seem to realize, or are, perhaps, just missing is that web design isn’t always about reinventing the wheel, so to speak.
His designs are functional, and can expand to suit many people’s different needs. And many designs out there use the same elements over and over, yet no one seems to worry about it. And you can’t blame the guy for taking time out of his undoubtedly busy day to write for other sites, while maintaining a few of his own, AND helping out those that are new to all of this.

Keep up the good work!

SweetOpium

October 30th, 2009

Nice and simple, thenks!

Anthony

October 30th, 2009

Didn’t work for me I was confused by the directions and when I downloaded the final result it did not look like what the author said in the directons

ravi

October 31st, 2009

Wow, great job man, thanks!

richard carpenter

October 31st, 2009

Thx for all your comments
much appreciated.

@Sebastian: Yours especially

Yvonne

November 1st, 2009

great tutorial.. love the final result

Anthony

November 1st, 2009

Sorry if my comments offended you, I was only looking for some clarification on this tutorial. In the past when I have questioned the tutorial author I had received feedback on how to rectify the mistakes made.

- My apologies

jASON

November 1st, 2009

nice 1, looking forward to the coding part

Jacob Gube

November 1st, 2009

Thanks for the feedback everyone. What would help me, now that I know what you guys are sick and tired of, is: what types of styles and tutorials would you like to see more of in the future? Email me (check out the contact page of the site) or leave your comments here if you have particular suggestions.

quangtran

November 1st, 2009

I alaway have suprise and enjoy when visited your website, because it has multi tutorials userful for designers.

Tung

November 2nd, 2009

Thanks. super cool layout

muthiulhaq

November 2nd, 2009

nice ………..thanx

David Rojas

November 2nd, 2009

@quangtran You know, what I really like about this site is these tutorials that are useful for *non-designers*, people like me that haven’t received a proper design training but like to improve their design skills.

jASON

November 2nd, 2009

@ jacob
maybe something like converting to a wordpress layout
some php/jquery stuff would be sweet too

Kelsey

November 2nd, 2009

Thanks for this step-by-step guide. It really makes things a lot easier to understand when you see an actual screenshot. Thank you for taking the time to do this.

Perry

November 3rd, 2009

Minimal and modern, such an abuse of adjectives. Not so much. It’s generically corporate looking.

tsedaka

November 3rd, 2009

Hi!

I used your layout for a short slicing tutorial. ( http://tinyurl.com/yj6zzf7 )

I hope you don’t mind.

Btw. Even if your layout lacks a little something identity-ish, it’s still a very good job.

Jacob Gube

November 5th, 2009

Hi everyone. As promised the follow-up of this tutorial (Part 2) has been posted so that you can see how to convert this beautiful design by Richard Carpenter into a working XHTML/CSS template. The link is on top of the page, but in case you’re down here already and don’t want to scroll back up, here’s the link to the follow-up tutorial: Minimal and Modern Layout: PSD to XHTML/CSS Conversion

fanhua

November 6th, 2009

very useful

Ryan

November 12th, 2009

It really is just that simple when you show it this way.

Jarod B

November 14th, 2009

Can you make a tutorial on how to slice this please?

Ben

November 16th, 2009

I totally follow this tutorial, super-helpful to understand the concept. I never was a photoshop layout-maker, I always go straight to code and over that, create my design, this tutorial teach me that I need to start from scratching up on Photoshop and then go to coding.

Thanks for the magic Richard!

John Rossi

November 19th, 2009

I don’t know what Perry is seeing, but I like the design myself. Quite a bit actually. It seems like it could do well for sites on a myriad of topics. Sometimes I think the desire to be “different” is a distraction.

Paul Ehrenreich

December 1st, 2009

Hi Jacob, I seem to be stuck on one of the steps in the tutorial.

I am at 32 where you apply the radial gradient to the rounded square shape. If you select the pen tool, right click on the shape and click selection. It will highlight the shape like it’s supposed to. However it will not let me add a gradient to it. Photoshop just tells me that the content of the layer is not directly editable.

I apologize in advice is this is some what of a noob question, I am still learning the ropes with Photoshop. I am used to using Fireworks for doing web layouts.

Reactmedia

December 3rd, 2009

Richard Carpenter…..as expected….AWESOME……..itz like you make tutorials from a dummy’s eye cos ur steps are the easiest to follow..big ups man!!!

Claude

December 3rd, 2009

Excellent tutorial for beginners (like me) thank you so much

Michael UK

December 9th, 2009

Hi, you guys are doing a fantastic Job here.

I am new into using photoshop to create web layouts. I was following the step by step guide and got stucked in step 6. I use Photoshop elements 6 for windows and can not create a guide because the guide option looks disabled under the view menu.

Is there a way round it please?

Cheers and thanks in anticipation

Sam Logan

December 13th, 2009

Hi Richard, thank you for the excellent tutorial, love the minimalist look and the incredible techniques used in this tutorial, very helpful.

Waasys

December 16th, 2009

Not bad, I like the result!

Valeraz

December 22nd, 2009

Hi !
Thanks for great tutorial, its looks nice!

Stephanie

December 28th, 2009

Richard,

Thank you for taking the time to share this excellent tutorial! Your instructions were very concise and easy to follow. I look forward to your next posting!

Komodosam

January 6th, 2010

Hey Paul, I’m having the same problem as you.

Komodosam

January 6th, 2010

Nice design and tutorial though :) Thanks Richard.

Ajith

January 16th, 2010

Really helpful for beginner to start. Thanks many

Looking forward to move to the coding part

sumit

January 26th, 2010

Great and useful post, thanks for sharing.

srilaxmi

January 29th, 2010

I have read all above comments. My opinion is, it is a excellent tutorial. since 3 years i am working as web designer but I am not perfect in photoshop. since so many days i was searching tutorial, at finally i got nice and excellent tutorial. I have learnt so many things from this tutorial. You are doing great job. thanks so much. I want to learn how to creat round corner template and convert into HTML/CSS. please can you help me.

Rahul

April 13th, 2010

Hi

Your website has got some good points and some weak points.These are

Good : Your description is very good.You are a very good teacher.You also provide source files(awesome !).

Bad : Your designs are nothing in front of PsdTuts or other tuts(you should work on quality ma dear).

Please work on the Quality of your designs.Please !

MediaTech

May 7th, 2010

Wow, I love minimalistic designs!

reda

May 9th, 2010

Wow, one of the best tutorial on the internet. Great result !

Thanks

Bobby C

June 16th, 2010

This would be great if I could get past the second step. For the life of me I cannot get past the gradient header. When I set the colors for the content area it turns the whole background the color of the header. When I make a rectangular selection of the content area you figure it would change the selection not the whole page. Nope. Do Icreate a new layer for the content area? And when I create a new layer for the content area and use the colors you suggest it turnd the content gradient a blue/green and looks nothing like yours. If you could help me through this I would greatly appreciate the help. I am new to this and just got cs5 and I’m ready to send it back. I constantly run into problems like this when doing tutorials. Unless my photoshop is different than everyone elses I must be doing something wrong. Thanks in Advance, Bobby C

wdd

July 16th, 2010

I have read all above comments. My opinion is, it is a excellent tutorial. since 3 years i am working as web designer but I am not perfect in photoshop. since so many days i was searching tutorial, at finally i got nice and excellent tutorial.
This would be great if I could get past the second step. For the life of me I cannot get past the gradient header. When I set the colors for the content area it turns the whole background the color of the header. When I make a rectangular selection of the content area you figure it would change the selection not the whole page. Nope. Do Icreate a new layer for the content area? And when I create a new layer for the content area and use the colors you suggest it turnd the content gradient a blue/green and looks nothing like yours.

MJP Soluções

September 12th, 2010

Perfect!
From Brazil: Thanks!

Raghvandra Kumar

September 17th, 2010

WAO…………..NICE Tutorial…..

Leah

November 23rd, 2010

Thanks!

EWW

December 7th, 2010

awsome..

Vitaly

January 10th, 2011

Thank you very much!!!!! perfect material for novice!

moch84

January 20th, 2011

nice tutorial, easy to follow. Thanks

Sara

February 1st, 2011

I can not figure out step 12, is there something missing in this step? like layer I’m supposed to be on or something? I don’t see how this line is supposed to magically appear. I have been trying for the last 30 mins to get it to work, this is for photoshop cs5 correct?

Rohith

March 29th, 2011

nice post… thanks for this sharing its very helpful for me to make an layout with photoshop…

goldenboyz

March 30th, 2011

looks really common

tushar

April 23rd, 2011

thnks dude,good tutorial and very easy to understand.

danish

August 31st, 2012

the remaining part step is not working, the M tool appears to have some sort of issue or i’m missing some step, i followed every thing but still not able to make the remaining part blue, please help me

Leave a Comment

Subscribe to the comments on this article.