Design a Clean Portfolio Site in Photoshop
Today we will be working through the process of designing a portfolio site layout in Photoshop. The tutorial will break down each step of the process, and you can download the PSD file from Folio Focus if you are interested.
The End Result:
Here is a look at what we will be designing in this tutorial (click on the image to see it in full size).
This post is supported by SnobbySlice. SnobbySlice provides PSD to HTML/CSS services created by coders for coders. With our money back guarantee, we’re confident in our abilities to slice your PSDs into pixel perfect HTML. Learn more about our services.
Getting Started: The New File
The first thing you need to do is create a new file (File – New) that is 1600 pixels wide and 950 pixels high. You could make it less than 1600 in width if you want, but I prefer to design it this way so I can see how it will look on widescreen monitors.
Step 1: The Background
Start by using the paint bucket tool to give the background layer a color of #b1a38d.
To set the boundaries for some other areas of the layout, set new horizontal guides (View – New Guide) at 120 pixels, 150 pixels, 190 pixels, and 320 pixels. Set vertical guides at 320 pixels and 1280 pixels.
Add a new layer (Layer – New) and use the rectangular marquee tool to select everything above the horizontal guide at 120 pixels. Use the paint bucket tool to fill it with #d2e2e3.
Add another new layer and use the rectangular marquee tool to select everything between the horizontal guides at 120 pixels and 320 pixels. Use the paint bucket tool to fill it with #463328.
Add another new layer and use the rectangular marquee tool to select the area between the two vertical guides and between the horizontal guides at 150 pixels and 190 pixels. Use the paint bucket tool to fill it with #94bb40.
Add another new layer and use the rectangular marquee tool to select the area below the 190 pixel horizontal guide and between the two vertical guides. Use the paint bucket tool to fill it with #fefae8.
We now have the background area for the layout and we can move forward.
Step 2: The Header
At this point you can now clear the guides (View – Clear Guides). Select the layer that contains the light blue header area by clicking on it in the layers palette. Set the foreground color to #d2e2e3 and the background color to #e2f2f3. Double click on the layer in the layers palette to bring up the layer style options. Click on gradient overlay. Select the gradient that fades from the foreground color to the background color and click “ok.”
Now the header has a very slight linear gradient rather than a solid blue color.
Next, we will add a title in the header using the font Qlassik Bold. You can set a vertical guide at 340 pixels so that the left edge of the title will line up with the content of the site, which will have 20 pixels of padding from the start of the content area. Using 30 pt Qlassik Bold in #3a6669, enter a title for the site.
Now, set the foreground color to #bed2d3, select the header layer from the layers palette, select the pencil tool with a one pixel square brush tip. Using the pencil tool, add a one-pixel border to the bottom of the header. It’s easiest if you increase the view to about 600% before doing this.
Step 3: Styling the Horizontal Band
Select the layer that contains the dark brown horizontal band. Set the foreground color to #463328 and the background color to #684f40. Double click on the layer in the layers palette to open the layer style options and click on “gradient overlay.” Again, select the gradient that fades from the foreground color to the background color and click “ok.” This will give you a subtle gradient that goes from a lighter brown at the top to a darker brown at the bottom.
Add a new layer above the horizontal band and set the foreground color to #ecf6f7. Using the pencil tool, create a one-pixel border at the very top of the brown horizontal band that will go just below the one-pixel border that was added to the bottom of the header. Here is how it will look at 600%
Change the foreground color to #f1e4cf. In the same layer, go to the very bottom of the brown horizontal band and add a one-pixel border using the pencil tool.
Step 4: The Navigation Menu
From the layers palette, select the layer that contains the green area that will be used for the navigation menu. Set the foreground color to #94bb40 and the background color to #93ba40. Double click on the layer in the layers palette to open the layer style options and click on “gradient overlay.” Again, select the gradient that fades from the foreground color to the background color and click “ok.”
Set the foreground color to #d3f291. Use the pencil tool to add a one-pixel border above the navigation menu.
Our navigation menu is going to include five links, so we will set vertical guides every 192 pixels to show us where the borders should be. Set vertical guides at 512, 704, 896, and 1088 pixels.
Set the foreground color to #bbdc75. Use the pencil tool to add a one-pixel border just to the right of each vertical guide. Then change the foreground color to #7b9c33 and add a one-pixel border just to the right of the other border. This will give you one pixel of a lighter green and one pixel of a darker green. Here is how it looks at 600%.
And here is how it will look at regular size.
With the foreground color still set at #7b9c33, give the left and right edges of the navigation menu a one pixel border by using the pencil tool. Here is how the left side looks at 600%.
Add a new layer. Using the rectangular marquee tool, select the area of the first link/tab in the navigation menu. Use the paint bucket tool to fill it with #fefae8.
The last thing to do with the navigation menu is to add the text for the links. I’m using 14 pt Arial in #fefae8 for all but the active link, which is in #463328.
Step 5: The Slider
jQuery sliders are very popular on portfolio sites (and other types of sites as well), so we will design an area with this in mind. When coding the site you could just leave it as a static image, or you could set it up as a slider to show a few different images.
Set vertical guides at 340 pixels and 1260 pixels. Set horizontal guides at 210 pixels and 460 pixels. Add a new layer. Use the rectangular marquee tool to select the area inside these guides and use the paint bucket tool to fill it with #e3d8c5. This will serve as a border for the slider area.
Add another new layer. Set vertical guides at 345 pixels and 1255 pixels. Set horizontal guides at 215 pixels and 455 pixels. Use the rectangular marquee tool to select the area within these four new guides.
Set the background color to #473328 and the foreground color to a lighter shade, something like #9e7c69. Select the gradient tool and make sure that the radial gradient is active.
We want the slider area to have darker brown around the edges with a fade to the lighter brown in the middle. Line up your mouse in the middle of the canvas horizontally, and start somewhere in the header, well above the slider area. Click and hold and drag down to well below the slider area (hold shift to keep it straight) and release the mouse.
Doing so should give you a result that looks like this.
Next, we’re going to add some texture to this area by using a free image from Zen Textures. The image we’re using can be found here.
Download the image, open it in Photoshop and flip it 90 degrees clockwise (Image – Image Rotation).
Open a new file that is 910 pixels wide and 240 pixels high. Paste this texture into the new file and use the free transform (Edit – Free Transform) to get an area from the center of the texture that is showing in this new canvas.
Select all of this canvas (Select – All), copy it to your clipboard (Edit – Copy). Move back to your PSD file for the layout, use the rectangular marquee tool to select the area for the slider (if it is not already selected) and paste in the texture (Edit – Paste).
Double click the texture’s layer in the layers palette to open the layer style options. Change the blend mode to overlay and the opacity to 40%.
And this is how it should look.
Now we’ll add some screenshots from the portfolio to the slider area. I’m going to collect 3 screenshots, crop them, and re-size them so they are all 296 pixels by 188 pixels. (your sizes can be a little bit different, but keep all three of them at the same size).
We’re going to paste the screenshots in and move them to the left side of the slider area and then adjust the perspective and have them sit in front of each other. I’m going to use guides to get it set in the right place. Set vertical guides at 395 pixels, 445 pixels, and 495 pixels. Set horizontal guides at 241 pixels, 256 pixels, and 429 pixels.
Start with the screenshot that you want to appear on top. Copy it and paste it above the layers for the slider. Line it up with the guides as shown in the image below.
Copy the second screenshot and paste it in. Align it with the guides as shown below.
Then move the layer of the second screenshot below the layer of the first screenshot.
Copy the third screenshot and paste it in. Align it with the guides as shown below.
Then move the layer of the third screenshot below both layers of the other two screenshots.
Select the layer of the top screenshot and go to Edit – Transform – Perspective. This will put boxes at each corner of the image, as well as in the middle of each side, that you can use to change the perspective. Click on the box at the top right corner and drag it down to the horizontal guide at 256 pixels.
When you do that, this is what you will get.
Then go to Edit – Transform – Skew, click on the box in the top right corner and drag it to the left about 10 – 20 pixels. Do the same with the bottom right corner.
Repeat this process with the other two screenshots.
One-at-a-time, double click on the layers of the screenshots in the layers palette to open the layer style options. Click on “drop shadow.” Change the angle to 45 degrees but leave the other settings as is.
Here is how it will look.
Next, we will add some text to the right side of the slider. This could say anything that you want to promote your services. For the text at the top I am using 24 pt Georgia in #fefae8 with a drop shadow with distance and size set to 4 pixels. For the bottom text I am using 18 pt Georgia in #f0c786 with a drop shadow with distance and size set to 3 pixels.
That completes the work for the slider area. Of course, if you were going to use a slider you would want to create additional images with the same dimensions, but for now we will just use the one.
Step 6: The Content Area
Add a new layer. Just below the slider we will add space for one line of text that can be used for a tagline or welcome message to visitors. At the right we will include a button that links to the contact page. To start with, 20 pixels below the slider, use the pencil tool to draw a one pixel line. Leave 20 pixels of white space at the each side so it aligns vertically with the borders of the slider. The color should be #e3d7c5. Than, 40 pixels below that line add another.
Add a line of text in 14 pt Georgia, italic, #463328. Start the text 20 pixels in from the left edge of the line.
Set the foreground color to #cf8b1f and the background color to e29e33. Select the rounded rectangle tool with a radius of 10 pixels.
Set a vertical guide at 1240 pixels. We’re going to create a button with the rounded rectangle tool that sits between the two borders, and the right side will align with the vertical guide at 1240 pixels.
Double click the new shape layer in the layers palette to open the layer style options. Click on “gradient overlay.” Select the gradient that fades from the foreground color to the background color. Then click on “stroke.” Set it at 1 pixel, inside and #b17517.
Add the text “Get a Quote” in 14 pt Arial, #fefae8. Double click on the text layer in the layers palette and click on “drop shadow.” Set the drop shadow at 60% opacity, with one pixel for distance and size.
Now we’ll add two columns of text. Set vertical guides at 340, 780, 820, and 1260 pixels to control the edges of the columns.
Create a new text box. I’m using 24 pt bold Arial in #7b9d33 for the heading and 14 pt Arial in #463328 for the rest of the text.
Add text for the right column with the same settings. I am also using #cf8b1f in bold for the services that are offered.
Step 7: The Footer
Add a new layer. Set a horizontal guide at 890 pixels. Use the rectangular marquee tool to select everything below the guide. Use the paint bucket tool to fill the selection with #b1a38d.
The last thing we need to do is add the text to the footer. Line it up with the main body text.
The Finished Product:
Here is a look at what we just designed.
Download the PSD File:
If you’d like to work with the PSD file that was used to create this tutorial, you can download it at Folio Focus.
For more Photoshop layout Tutorials, please see:
- How to Design a One-Page Portfolio in Photoshop
- Design a Textured Portfolio Site Layout Using Photoshop
- Design a Stylish Blue Blog Theme in Photoshop
- Design a Portfolio Site with a Textured Background
- Design an E-Commerce Website in Photoshop
- Design a Premium Theme Marketplace Layout Using Photoshop
- Design a Website for a Non-Profit Organization in Photoshop
- Design a Clean Blog Theme in Photoshop
This post is supported by SnobbySlice. SnobbySlice provides PSD to HTML/CSS services created by coders for coders. With our money back guarantee, we’re confident in our abilities to slice your PSDs into pixel perfect HTML. We can also convert mockups into WordPress and MySpace templates. Learn more about our services and place your order to get started.
Veri good tutorial..
really amazing work over there you using tools with easy way for visitors. thanks
Great tutorial, really like the outcome.
Excellent tutorial, thanks…
Pingback: 9 Best Web Design mockup tutorials on september | blogfreakz.com
great tuts.. tnx!
This looks so clean and nice, and your instructions are very clear. Well done Steven!
Thanks for the feedback everyone. It’s appreciated.
That was awesome! Thanks a lot 😉
Clean and simple… only the header is tooo simple for me…
I love these step by step tutorials for Photoshop and yours is not just easy to follow (even for a beginner), the design is also very nice und clean. Great Tutorial!!
Good, I’m glad that it is easy to follow. That is the goal!
Excellent tutorial for designing Portfolio Site in Photoshop, thanks for shearing this nice tutoiral.
Very good work. Thanks for the excellent tut. It would be nice to see how you slice the template to bring it to xhtml/css.
Pingback: Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog
Pingback: Haftanın Derlemesi – 29 | Tasarımcının El Çantası | Hasan Yalçın
Pingback: Design a Clean Portfolio Site in Photoshop | Techdoom Reports
Pingback: Design a Green Corporate Layout in Photoshop
I just had a quick question:
On average, how long does i take you to create a tutorial like this?
Good job on the tutorial by the way.
It probably takes about 8 – 12 hours total. That includes thinking of an idea for an example site (partly why I have done a few portfolio sites and blog layouts, they’re usually on my mind), sketching a layout, designing in Photoshop, writing the tutorial and preparing the images, editing the tutorial and preparing it for posting. Unfortunately that’s still not enough time to really duplicate the process of designing a site for a client or in a real world scenario, so the result is certainly not perfect, but much more time than that and it is not practical.
Pingback: ReadyPhotoSite Blog » Creating An Online Portfolio: A Good Read Round-Up
I have question, I don’t know what I am doing wrong. Once I do the 1px pencil border on the blue header, I can’t see it unless I turn the layer styles off. I know it’s something silly that I am missing, but great tutorial! Keep up the good work.
I should have been a little more descriptive. I’m using Adobe CS4 on a PC. I have the same issue with the brown area of the comp. It seems as if the layer I can’t pencil over the layer style.
So what I ended up doing as workaround is to create a layer on top of the layer I want the pixel line to show. Let me know what you think.
I think I did the border in a separate layer on top, which sounds like what you’re doing now. If you have a gradient overlay (as is the case with the header) it lays over anything and everything else that’s in that layer, which would include the border. If you want to you can download the PSD that I used for the tutorial.
I always used to be in awe at the beautiful websites created similarly and wonder how they do it. Now I know I too can do so :o). Quiet a few neat tricks up my sleeve now.
Thanks and will keep coming back for more.
Great Tutorial thanx
Thank you so much for one of the best tutorial I have ever followed. You do a superb job on it.
Absolutely excellent tutorial. Well done!
I really liked the Tutorial. Well Done. When I saw the title, I was excited. I am not sure how it is a portfolio site over any other type of site.
As it is up to us, to create the portfolio pages. What you have taught us is how to create the home page. So there is nothing really portfolio about it, other than there is a link saying portfolio.
I am not faulting you in anyway. I understand why your calling it a portfolio type site. And I realize that this is a stepping stone to creating a full site with this type of design as the starting point.
I am just saying, that there are lots of homepages already done out there, hundreds of tutorials on the subject of the homepage. What would be interesting to see is the creation of the actual portfolio. As you could use nearly any type of style as the home page, and call it a portfolio site, as long as their is a portfolio link.
Anyway. I truly am not criticizing you or your tutorial, it really is easy to follow, and the style is nice, and as I mentioned it is a nice starting off point for a portfolio site.
I have just noticed a trend lately of this type of tutorial. The “other” pages besides the home page would be nice.. that is all I am really saying.
But seriously.. keep up the good work.
Absolutely excellent tutorial
Good design. Thanks for your work.
in a single word … its an outstanding posting.
hooray! now, code it.
thank you,It’s good tutorial important for me
I am new to the world of graphic design tutorials. (In fact, I am new to graphic design in general.) When I started designing commercially, I heavily relied on tutorials because that was the one and only way for me to learn to use Photoshop. From what I understood, it is ok to use such tutorials in designing real websites. However, today I started questioning it, wondering if I made a bad mistake by selling a design that looks so much like yours.
If you have a minute, please let me know, and if I did commit plagiarism, I will do all in my power to recall and replace the design (the site hasn’t gone live yet and I haven’t been paid for it).
I did it. Thank you for guiding.
I will send this article to my friends. I think with your step-by-step guides, even a “girl” can follow.
thank for sharing ^^
It’s very usefull for my job
I’ll do it now
If I have problem, can you help me.
thank a lot