Create a Brown Web Portfolio Design in Photoshop

Today we’re going to switch things up and create a brown web portfolio design in Photoshop. This is my first layout tutorial and hopefully everyone will keep their sanity in place after this one.

The End Result

First let’s take a look at the final design that we’ll be putting together (Click the image for a larger version).

This design is the result of a mock request that I’ve been assigned to with the following requirements:

Your objective is to present any visitor who reaches your website with an eyeful of graphics, but presented in a very pleasant and easy to use / view manner. The purpose of the site is to showcase your portfolio, let them know who you are and how to contact you.

If you would look closely this is a really simple layout: large wood texture, simple logo and a straightforward menu and content.

Step 1

First, open up a 16-column Photoshop template from 960.gs. We’re going to adjust the document size by going to Image > Canvas Size. Enter 1600 for width and 1350 for height then press Ok. Just press Ctrl + ; (semicolon) to make the grids visible. Get your Paint Bucket Tool and fill the background with #f3f0e9. This is where everything is going to be lined up.

Step 2

We’re going to use a wood texture and place it at the top most part of our document.

Step 3

Let’s write a simple logo on the top left side. We’re going to use Georgia. 48px for the logo and 18px for the tagline.

Step 4

Create a simple menu, this time we’re going to position it on the right side just opposite the logo. For most of the text we are going to use Arial. Give each link proper spacing and you can use either the Rectangle Tool or the Rounded Rectangle Tool for the buttons. I then lowered the button’s opacity to 50%.

Step 5

Create a black rectangle using the Rectangle Tool, drop the opacity to 60% and place it just below the logo and the menu. Then write out a prominent message to your visitors.

Step 6

On to the featured work section. Grab your rectangle tool (doesn’t matter what fill color you use). We’re going to add a Gradient Overlay to add some depth to our background.

Step 7

Type in some text heading. Please notice how I align the elements within the grid.

Step 8

Create a 300×200 black rectangle and align the block to the grid. This will be the container for our thumbnails.

Step 9

I’m going to copy the thumbnails from my portfolio page (you can use whatever image you want) and paste it in our document. Make sure the thumbnail layer is above the black rectangle layer (the black rectangle from previous step).

Step 10

While pressing the Alt key, hover between the black rectangle and the thumbnail image. Left click when you see the mouse crosshair change. This will basically put the thumbnail inside the black rectangle. Then Ctrl + T on the thumbnail and resize to your heart’s content.

Step 11

Repeat Step 10 twice with two different images. After you’re finished with your thumbnails, your design will more or less look like this.

Step 12

Put in your content and do your best to align them on the grid.

Step 13

We’re almost finished. It’s time to create the footer. Create a new layer Ctrl + Shift + N. Outline a footer section using the Rectangular Marquee Tool and fill it with brown (492b16).

Step 14

Let’s put some effects on the footer background by applying a Gradient Overlay.

Step 15

Put content in your footer section.

Finished Layout

Here’s the finished layout (Click for a larger version).

As always please feel free to ask in the comment section for clarification on some steps. I hope you enjoyed my first layout tutorial in Photoshop. It’s not very detailed but I hope beginners can get something out of this. Thanks!