Create a Very Simple Portfolio Web Layout with Photoshop

Oct 5 2009 by Reece | 23 Comments

Create a Very Simple Portfolio Web Layout with Photoshop

In this web design tutorial, we will be creating a minimalist, dark-themed web layout that’s perfect for a portfolio site. We’ll only cover the creation of the basic parts of the layout and leave it up to you to apply your own finishing touches.

Final Result

To view the finished product, click on the following image to see the full-scale version.

Final Result

Setting up the Photoshop document

1 Open up Photoshop, create a new document (Ctrl + N) that is 1000px by 1000px and with a white background (#FFFFFF).

New document settings

Creating the background

2 Select the Rectangular Marquee Tool (M) and create a marquee selection covering the entire Photoshop canvas (Ctrl + A).

3 Choose Edit > Fill and fill the selection with any color. Fill the Background layer with a dark gray color, #0E0E0E.

4 Duplicate the Background layer (right-click on the layer in the Layers Panel and choose Duplicate layer). Double-click the duplicated layer to open up the Layer Styles dialog box and then add a Gradient Overlay with the following settings.

Gradient overlay settings.

Making the Navigation menu

5 Select the Rounded Rectangle Tool from the Tools Panel. Set the Radius of the tool to 5px. Create a large rectangle in the canvas that is 900px by 50px. This will serve as the navigation menu’s background.

6 Select the Gradient Tool (U), then in the Options bar, open Gradient Editor and use the settings shown below.

Gradient Editor settings.

7 Make a new layer. Create a linear gradient going from top to bottom of the navigation with the Gradient Tool.

Creating a linear gradient.

8 Choose the navigation background layer in the Layers Panel, select the Magic Wand Tool (W) and click the outside of the navigation. You should see a selection like the following figure.

Selection created with the Magic Wand Tool.

9 With the Magic Wand selection still active, switch to the layer with the linear gradient on it, and press the Delete key to clear the area beneath it. This is what you should end up with:

After Magic Wand selection is cleared.

10 Lower the opacity of the layer to 25%.

opacity is lowered to 25 percent.

Designing the content area

11 Select the Rounded Rectangle Tool from the Tools Panel. Set the Radius of the toml to 5px. Create a large rectangle in the canvas (900px by 200px). This will serve as the Main content area’s background.

Main content background.

Adding a search input field

12 Select the Rounded Rectangle Tool again. Set the Radius of the tool to around 5px. Create a small white (#FFFFFF) rectangle (250px by 30px) at the right side of the main menu bar. This will serve as the search input field.

Search input field.

Adding a search button

13 Select the Rounded Rectangle Tool from the Tools Panel. Set the Radius of the tool to 5px. Create a small (38px by 38px) light blue (#0089FF) rectangle on top of the search input field, oriented at the right of it.

search button.

14 Double-click the layer with the search button to open up the Layer Styles dialog box and then add a Gradient Overlay as shown below.

Gradient overlay settings for search button.

Finishing touches

15 Finish the layout by adding your content: add your header, banners, navigation links, content boxes and footer.

Navigation links

To simulate HTML text, I chose Arial with the anti-aliasing method set to None (you can do this in the Options bar of the Horizontal Type Tool).

Navigation link items filled in.

Mid content

I placed introductory text and an image in the top "mid content" area.

mid content section.

Main content/ Copyright

I filled in the main content area section with a few image thumbnails arranged in a three-column layout. I placed the copyright information of the site at the bottom of the design.

main content area filled.

Header

I placed a simple logo at the top left corner of the design. Here’s the finished view of the header section of the design.

Header

What I ended up with…

Final Result

Now it’s your turn to show us what you what you’ve got!

If you followed along this tutorial and would like to share your final touches, share it with the rest of us in the Six Revisions Flickr Group.

Download the source file for this tutorial

The PSD source file is available for you to download and study.

Related Content

About the Author

Reece is an enigmatic and mysterious freelance designer based in the beautiful state of Victoria in Australia. He loves to create eye-catching websites.

23 Comments

Cosmin

October 5th, 2009

Very simple is well said :)

The idea behind the layout is nice, but the layout itself would need improvements in colors and typography, IMO

Thanks for sharing tho :)

coder

October 5th, 2009

Too simple, and can use “select inverse” directly at step 8 rather than using magic wand, unless there has benefit using magic wand than “select inverse”

Matthew Heidenreich

October 5th, 2009

looks good. My only comment would be to maybe add an icon to the search button, so your average person that wouldn’t assume that as a search would know so. Other than that, great job

Ben

October 5th, 2009

I think your audience is too advanced for that kind of tutorial.

Maybe are you trying to reach newcomers ? Then I’d suggest you to make a series, taking this Photoshop tut as a start, then teach how to slice it, to add some fancy JS… Maybe a PHP contact form & stuff like that. That’d bring there people that are learning how to do webdesign, and they would probably subscribe to your feeds too.

Regards

Dangr

October 5th, 2009

Nice and short tut!

I guess the idea is to add/edit this “last touch” of improvements, colours and typography?! :)

Well, one or two mistakes though:

The reflection of the Iphone kinda sucks – it’s not correct! You may want to correct this, as well as the “welcom” – or what kind of language would that be? ;)

Thanks for sharing!
dangr

Jarryd

October 5th, 2009

Not a bad portfolio site. For me the search field has some major focus which is really distracting me, imo I would dim the focus on it with a bit of grey. It’s nice if you have some great imagery :)

sno0p

October 5th, 2009

that great to me…thanz for sharing…;)

AtiKuSDesign

October 6th, 2009

I don’t mind that the tutorial is of a beginner standard. There’s always room to be writing for more than one audience on the odd occassion.

However, it does seem to end rather abruptly. It pretty much only describes how to make the header and then just ends there.

Minneapolis

October 8th, 2009

though pretty simple and not too advanced, it looks decent and take about 10 minutes to make, so kudos to you! I’m always up for going back to the basics every now and then. Sometimes you re-discover techniques that you’ve forgotten that then lead to inspiration.

Lauren Jordan

October 8th, 2009

My problem isn’t creating a great portfolio layout, my problem is really getting to understand JS or JQuery, you know, those fancier codes. I’ve read some of those tutorials but if I wanted to change it and make it my own instead of just copying it then I’m lost.

Roberto

October 8th, 2009

Good tutorial. Thanks.

vamsi

October 13th, 2009

very nice..I will try this :D
Thanks !!

fanhua

November 10th, 2009

I don’t understand how from the step 5 to step 7.

Lyons

November 29th, 2009

Definitely is for beginners, but it’s always good to check out on others ;)

geff

January 15th, 2010

good tutorial, luv it am a newbie in design world (www.finchtravels.com)

is it posible you you guys to send me some of your work so that i can grow from there.but first I must design this tutorial

Regards everyone
Geoffrey(kenya)

sriram

January 19th, 2010

Hey Good One But Many More Designer Wanted to learn
How to transfer Photo shop TO HTML ????

Lory_dash

June 13th, 2010

Hello! Congratulations to the designer, by any chance have I seen online already this work led to better code in this site , seems ok http://www.imediacratives.it/portfolio.html WC3 Validated

Lory_dash

June 16th, 2010

Hello! Sorry to disturb you, I saw that you added my comment on your excellent blog. I wanted to tell you that I mistake for the link. The exact site is: http:// http://www.imediacreatives.it/portfolio.html I apologize for my mistake Thanks! Lory_dash

Michael

October 11th, 2010

Good start on a design. A little basic but it is a very good start.

goldenboyz

March 30th, 2011

simple and clean, just how I like it :)

optimistic28

April 24th, 2011

I am new in web designing field, was going to follow but I stopped with your 5th step!! I just don’t know how to make such size and from what point, sucks! hope there are more tutorials with clear explanations, thanx

ramin

April 27th, 2011

Man, you are great. Enjoyable to read article.
Thanks

Peshawar

October 28th, 2011

wow, it was very helpful, Thanks for sharing

Leave a Comment

Subscribe to the comments on this article.