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.
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).
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.
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.
7 Make a new layer. Create a linear gradient going from top to bottom of the navigation with the Gradient Tool.
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.
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:
10 Lower the opacity of the layer to 25%.
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.
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.
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.
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.
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).
Mid content
I placed introductory text and an image in the top "mid content" area.
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.
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.
What I ended up with…
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.
- simple-portfolio-web-layout.zip (ZIP, 1.2MB)
Related Content
- How to Design a Space Futuristic Gallery Layout in Photoshop
- How to Make a Light and Sleek Web Layout in Photoshop
- How to Create a Dark and Sleek Blog Design in Photoshop
- Related categories: Tutorials and Photoshop
About the Author
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