Design a Textured Portfolio Site Layout Using Photoshop

Today we’ll go through the process of designing a portfolio homepage in Photoshop. The design will use a large textured background, which is easily created with a photograph. At the end of the tutorial you will be able to download the original PSD if you would like to work with it, plus you can get a two-page PSD set that includes the homepage we will be designing, and a secondary page. The PSD set can be downloaded from our portfolio gallery, Folio Focus.

The Final Result:

Before we get started, here is a look at what we will be designing. To see it in full size, click on the image below. Throughout the tutorial the images of the design in process can be seen in full size by clicking on the image.

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.

Step 1: Create a new document

To start with, create a new document (File – New) that is 1600 pixels wide and 800 pixels high.

Step 2: The background

In the background layer we are going to apply a radial gradient that will sit behind the texture that we will be using. To do this, set the foreground color to #e1d5a0 and the background color to #a1986b. Select the gradient tool and choose radial gradient fading from the foreground color to the background color.

To get the desired effect, start the gradient in the middle of the canvas horizontally (800 pixels) and above the top of the canvas. Drag it straight down (hold down the shift key to keep it straight) and release it about 75% of the way down the canvas.

Next, we’re going to use a texture that comes from Caleb Kimbrough and Zen Textures. You can find the image in the grunge category (here is the URL of the image).

Copy that image and paste it on top of your background image. Move that image around to get an area that you like on top of your canvas. Then double click on the layer in the layers palette to open the layer styles. Select “soft light” for the blend mode and leave it at 100%.

Here is how it will look on top of the radial gradient after soft light is selected for the blend mode.

We’re now going to add some linear gradients to the background image so that when we code the site we can use CSS to set the background color of the page and so it will fade from the background color to the textured image.

Create a new layer (Layer – New) and set #a1986b as the foreground color. Then select the linear gradient that fades from the foreground color to transparency.

Starting at the bottom of the canvas, click the mouse and drag up about 150 – 200 pixels before releasing the mouse. This will give us a a solid color at the bottom of the background image that blends into the background image. Now if the page becomes longer after it is coded, the background image won’t end abruptly.

We’re now going to add two new layers and apply linear gradients on each side of the canvas so that it will also fade nicely on widescreen monitors. I’m starting the gradient at the edge of the canvas and bringing it in about 250 pixels before releasing the mouse.

Step 3: The header

Our site is going to have a header that includes the site title/branding area and navigation. Select the top 60 pixels of the canvas (I like to set a horizontal guide at 60 pixels and use the rectangular marquee tool to select everything above the guide). Set the foreground color to black (#000000) and the opacity to 80%. Fill the selected area using the paint bucket tool. This will create a header area that shows a small amount of the texture from the background image.

Our page is going to be 960 pixels wide, so you can set vertical guides at 320 pixels and 1280 pixels to show the edges. Then, create the site title with the text tool and line it up with the left edge at the 320 pixel vertical guide. I am using the Vollkorn font at 30 pt in the color #e2d8aa.

Then add some text for the navigation in the right side of the header lining it up with the vertical guide 1280 pixels. I am using 18 pt Arial in #e2d8aa.

Step 4: The copy

The main content area of our design will include text on the left side and a screenshot on the right side. The text will start 40 pixels below the bottom of the header (at the 100 pixel mark vertically), and it will line up with the title at the 320 pixel vertical guide to give the design an even left edge. The right edge of the text will go to the middle of the page (you can place a vertical guide at 800 pixels for this if you like).

To add the copy, simply use the text tool and create a text box between the 320 pixel and 800 pixel vertical guides, and with 40 pixels of space between it and the header. I’m using 22 pt Georgia in #9c4132 for the headline, 18 pt Georgia in #191919 for the sub-header, and 14 pt Arial in #191919 for the rest of the text.

Step 5: Screenshots from the portfolio

To the right of the text we will be adding some images to showcase work from the portfolio. I’m using some images from my own portfolio as samples, obviously you will want to use images from whatever work you would like to showcase to your visitors and potential clients. For the screenshots I am using a width of 410 pixels and a height of 220 pixels. So get the necessary images from your portfolio and size accordingly. Then, each will have a 10 pixel border. To do this I prefer to create a new blank image that is 430 pixels wide and 240 pixels high, and then paste in the screen shot from the portfolio that is already sized. This will place it directly in the middle of the image with a 10 pixel white border around it.

I want to give the border a slight texture, so I will be pasting in a photo of concrete (from the DesignM.ag Concrete and Pavement Texture Pack) to lay behind the screenshot to give texture to the border.

First, give the background layer of this new image a color that is slightly darker than the background color of the page we are designing, something like #928a64. Then, copy the textured image (you can get it from Flickr) and paste it on top of the background but below the screenshot. Then double click on the texture layer in the layers palette and set the blend mode to overlay. I’ve then used the pencil tool to apply a 1 pixel border (#897c48) to the image. Now that your image is complete, copy and paste it into your design.

Now I will repeat this process with two other screenshots that will sit behind this one. Very little of these images will be visible, so you’ll want to put your preferred choice on top so that it is most visible. Once you have the other two images ready, paste them in to the design, move them to the area of the first screenshot, and tilt them using the free transform (Edit – Free Transform).

Step 6: Add featured project section

Below the text and the images that we have just added, we are going to design an area that will allow you to showcase a featured project from your portfolio, include a description of what was done, as well as a testimonial from the client.

To start, we will leave 40 pixels of space from the bottom of the previous text, and using the text tool add a line in 18 pt Arial, #9c4132.

Then we will add a small screenshot for the featured project and use the same technique for creating a textured border, but this one will be 5 pixels instead of 10.

Next, we will use the text tool to create a text box that is lined up with the top border of the screenshot and starts 20 pixels to the right of the screenshot. You can set up vertical guides at 560 pixels and 920 pixels to set the edges of the text area. I’m using 14 pt Arial in #191919.

Now we will add the testimonial to the right. The text should be aligned between vertical guides at 960 pixels and 1280 pixels. Again, I’m using 14 pt Arial in #191919, but  the testimonial text is italicized.

Step 7: The footer

The last step to the design is to add a basic footer. Add a new layer and use the rectangular marquee tool to select the area for the footer. Leave 40 pixels of space from the bottom of the screenshot’s border in the featured project section. You can set a horizontal guide at 610 pixels to determine the top of the footer. Select everything below this area and use the paint bucket tool to fill it with #191919 at 100% opacity.

Then with the text tool add the company name and address, along with links to the other pages. I’m using 18 pt Georgia for the company name and 14 pt Arial for the address and links, all in #e2d8aa.

The End Result:

That completes the design. Here is the finished product (click to enlarge).

If you’d like to work with the original PSD file, you can download it here.

Two-Page PSD Available at Folio Focus

We have made a two-page PSD set available for free at our portfolio gallery, Folio Focus. This includes the homepage that we just designed as well as a secondary page so it can be used to create a template. This can be used for personal or commercial purposes.

If you’d like to get the two-page PSD set, you can get it here.

For more web design layout tutorials see:

• 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 Layout 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.