Design a Portfolio Site with a Textured Background

Today we will be going through the process of creating a portfolio home page. The design uses a textured background created with Photoshop brushes and a featured content area to show off your work. At the end of the post you can download the PSD file used to create the tutorial, or you can get a two-page PSD set (home page and a secondary page) for free at Folio Focus.

The End Result:

Here is a preview of what we will be designing in this tutorial (click 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.

Step 1: Open a New Document

Create a new document (File – New) that is 1600 pixels wide and 1050 pixels high.

Step 2: The Background

Use the paint bucket tool to fill the background with #3a3535, the dark gray that will serve as our background color.

We’re going to add some texture to the background by using some Photoshop brushes. In this case, we’ll be using some of the high res cracks brushes that I created and released here on DesignM.ag a few months ago (these brushes are free for personal or commercial use). To start with, I used one of the large square brushes with a darker gray color, #100f0f. Then I added a few more cracks using the smaller brushes with individual cracks. You can experiment here to get a background that you like.

We’ll want the background image to fade to a solid color so that we will be able to set that color for the background of the site using CSS. The gray color we’re using is the color that we used to fill the background layer, #3a3535.

Add a new layer (Layer – New) and use the gradient tool to add a linear gradient that fades from #3a3535 at the bottom to transparent at the top.

I started to drag the gradient at the 900 pixel mark (vertically) and ended it at 600 pixels. That allows for plenty of area at the top for the texture. Then, add another new layer and create a linear gradient that goes from #3a3535 at the far left of the document to transparent. I started the gradient at the edge of the document and dragged it in about 200 pixels. Then, add another new layer and repeat this process at the right side of the document.

Step 3: Create the Content Area

We’ll be using a content area that is 960 pixels wide, so set vertical guides (View – New Guide) at 320 pixels and 1280 pixels. We’ll be using a header area that is 200 pixels in height, plus 40 pixels for a navigation menu, so also set a horizontal guide at 240 pixels. Add a new layer and use the rectangular marquee tool to select the content area between the guides. Using the paint bucket tool, fill this area with #efefef, a very light gray.

Step 4: Add the Header/Title

We’ll be using a simple title for the header area, which you can obviously change to suit your needs. I’m using the Rockwell font. The top line is 30 pt #efefef, and the second line is 18 pt #8b8a8a. I’ve lined up the left edge of the text 20 pixels inside the left edge of the content area, which will line up with the text on the site. To give the header text a slight drop shadow, double click the layer in the layers palette, check “drop show” and the distance and the size to 2 pixels.

Step 5: The Navigation Menu

Add a new layer. Use the rectangular marquee tool to select an area for the navigation menu that is 40 pixels in height (between the 200 pixel and 240 pixels mark) and 960 pixels in width (between the 320 and 1280 pixels marks), and use the paint bucket tool to fill the selection with #3a5b84, a blue color that we will use for the navigation menu.

Using the pencil tool, we’ll add a 1 pixel border all the way around the nav menu with a lighter blue, #5f7da2.

We’ll add some text for the links in the navigation menu using 14 pt Arial in white, #ffffff.

Next, we’ll add 1 pixel borders between the links using the same lighter blue color, #5f7da2.

We’re going to give the active link in the navigation menu a tabbed effect, so we will be adding a new layer to cover up part of the menu. Use the rectangular marquee tool to select the “Home” link area, plus 5 pixels of additional height. Then use the paint bucket tool to fill it with #efefef.

Next, move that new layer behind the text layer for the links in the navigation menu, and change the color of the word “Home” to #3a5b84.

Step 6: Create a Featured Content Area

We’ll be adding an area to display recent work or featured projects from the portfolio. This area will include a screenshot on the left side and a description on the right. jQuery sliders are popular for this purpose, so we’ll design it to be used as a slider. To create this area, set vertical guides at 340 pixels and 1240 pixels, and horizontal guides at 280 pixels and 570 pixels. Add a new layer, select the area between the guides with the rectangular marquee tool, and fill it with #d2dae3. We’ll then use the pencil tool to give this featured area a 1 pixel border in #c3cfdd, a slightly darker blue.

Next, we’ll add a background for the screenshot. We’ll leave 10 pixels to the top, left and bottom, and the right edge will be at the 800 pixel mark, the middle of the document. Use the paint bucket tool to fill the area with #b8c9dc. Then use the pencil tool to add a 1 pixel border of #b3bfcc.

Now we can insert a screenshot in the middle of this area. I’m using an image from my own website, you could use any image from your own work here.

We’ll be adding some links above the screenshot so that visitors can control the slider. To do this, we will use 5 20×20 boxes. So we’ll select an area that is 20 pixels in height and 100 pixels in width, and fill it with #b8c9dc. Then we’ll draw 1 pixel borders every 20 pixels to separate the links. To create the borders we will use #c3cfdd.

We’ll then show that the first link is active by giving it a background color of #d2dae3.

Now you can complete the links by adding the numbers 1, 2, 3, 4, and 5 in 10 pt Arial bold. The “1” is in #3a5b84 and the others are in white, #ffffff.

We’ll want to add some text to go next to the slider, so we’ll leave 20 pixels of padding on every side and create a text box. I’m using 18 pt Georgia in #930d0d (red) for the header and 14 pt Arial in #191919 for the rest of the text.

Next, we’ll use the rounded rectangle tool with a 15 pixel radius to create a button to link to the portfolio. Set the foreground color to #3a5b84 and the background color to #51749e. Double click on the layer in the layers palette and select “gradient overlay” to give the button a lighter blue at the top and a darker blue at the bottom. While the layer style options are open, select “stroke” and give it a 1 pixel stroke outside with #60758e.

On top of the button, add the text “view portfolio” in 14 pt Arial #efefef. Double click the layer in the layers palette and give it a drop shadow with 1 pixel for the size and distance.

Step 7: Create Three Columns of Content

We’ll be adding three columns of content that are each 280 pixels in width. There will be 20 pixels of padding from the edges of the content area, and 40 pixels between columns one and two, and another 40 pixels between columns two and three. So to start, we’ll set vertical guides at 340 pixels and 620 pixels. We’ll also be setting a horizontal guide at 610 pixels that will give 40 pixels of space between the featured content area and the top of the three columns. Then fill the left column with text. I’m using 18 pt Georgia in #930d0d for the header and 14 pt Arial for the rest of the text.

Then add another column of text between vertical guides at 660 pixels and 940 pixels. I’m using bold text in #112a4a for the words “web design,” “web development” and “graphic design.”

Then add the third column of text between vertical guides at 980 pixels and 1260 pixels. In this area we will be showing titles and excerpts of recent blog posts. The post titles are in bold #112a4a, and the date and author are in 12 px #626161.

Step 8: Create the Footer

To add the footer we will use the rectangular marquee tool to select the area at the bottom of the page (leaving 40 pixels of white space below the end of the content) and fill it with #3a3535.

We’ll add some text links to the footer using 14 pt Arial in white, #ffffff.

The End Result:

Here is what we have just created (click to see in full size).

If you want to download the ordinal Photoshop file used for this tutorial, you can get it here (3MB).

Get a 2-Page PSD File for Free at Folio Focus:

I’ve also created a secondary page and you can get both PSD files from our gallery site Folio Focus. It can be used for personal or commercial purposes, no attribution required (although links are always appreciated). There are plans to add more free PSDs of portfolio sites in the future.

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.