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.