Designing a Simple Portfolio Layout

Web Design | May 25th, 2009

Hey everyone, I apologize for how long it has been since the last tutorial, and I thank all those who signed up for the 2Photoshop feed and stayed patient! I am currently finished with school for the year and am planning to post more tutorials and articles in the next couple months!

With that being said, today we will be making a simple portfolio layout:

Click for full size

STEP 1: Open a new document 1024×768 px

I find that this size is good for starting a website design, however if you have other preferences feel free to change it.

Now fill your background or first layer with dark gray, I used #1e1e1e

STEP 2: Add pattern to background

Create a new layer, go to Edit>Fill and Use: Pattern. A basic pixel pattern often helps a layout look more interesting and dynamic. If you are unsure of how to do this please refer to one of the many tutorials on the subject, Pixel Pattern Technique.

I filled my layer with this pattern:

…which should give you a background that looks like:

STEP 3: Add top gradient

Create a new layer and select the gradient tool. Make sure your foreground color is black (#000000) and select the second available gradient in the drop down gradients.

Click at the top of your document, hold down and hold shift, move your mouse down around 1/5 into the document and let go. Then set the opacity of the gradient layer to 90%. Now you should have something like this:

Click for full size

STEP 4: Make content shapes

Select the Rectangular Marquee tool in your tools window

With the shape tool make 2 black wide rectangular shapes, they will be your navigation and footer areas. You want to make the navigation shape slightly larger than the footer since it should to be more dominant. Then make a larger gray rectangle for the content, use the color: #7e7e7e, and change the opacity of the shape to 30%. You can change the opacity through the layers pallet. You should now have something like this:

Click for full size

If you want to move the shapes around to match my result you can do so simply with the move tool.

STEP 5: Distort shapes

To add a little style and make your design more dynamic, we will distort the shapes. One by one, select each of the 3 shapes you have made, and go to Edit>Transform>Distort. Move the corners a little on each side to make it look more interesting, but make sure you do not distort so much that the shapes no longer overlap, make only subtle changes. Here is how my shapes turned out, since they are vector shapes, you can go back and distort again if you are unhappy and the quality of the pixels will not change.

Click for full size

Now duplicate the gray content shape, by selecting the layer of the shape and go to Layer>Duplicate Layer (ctrl+J). Change the opacity of the duplicated shape layer to 100% and its color to the color of your background, #1e1e1e. You can change the color of the shape by double clicking on the color block of the layer in the layers pallet.Lastly, in the layers pallet move this duplicated shape layer so it is just under the two black shape layers. This will ensure that the pixel pattern will not be visible behind the content.

Click for full size

STEP 6: Add navigation bar & links

Create a new layer and using the Rectangular Marquee tool, select a long and skinny rectangle in the lower half of your black navigation shape and overlapping on its right like so:

Click for full size

Click for full size

Then fill layer by going to Edit>Fill and choose any color. Make sure your shape is 3 pixels in height, if it is too large or small you can use the Rectangular Marquee tool to add or cut away from the shape.

Now select the Horizontal type tool and click on the left side of the navigation bar above the line you just filled in. Using the font “Verdana” bold and white, with size of 11, type out the six links you want to use. Between each link use 11 spaces. (You can move the text or change the spaces accordingly as you see fit)

Click for full size

Click for full size

To add arrows, select the Pen tool and create a small arrow shape pointing up, and hold the Shift key while you do it to ensure proper dimensions, make this shape on the left side of the navigation and right above the bar you just filled in. You want to align this shape in the middle under your text link. It does not matter what color this shape is.

(Zoomed in 300%)

In this tutorial, we have 6 total links in the navigation bar so we need 6 arrow shapes. Select the arrow shape layer in your layers pallet, duplicate it, select the move tool and move it to be in the middle right under the next link. Repeat this until you have an arrow under each link:

Click for full size

STEP 7: Stylize navigation

In the layers pallet, select ALL the arrow shapes as well as the filled in navigation line (hold Shift while you select the layers) and merge them into one layer by going to Layer>Merge Layers (ctrl+E). Now, while you have this layer selected, go to Layer>Layer Style>Gradient Overlay.

Change the angle of the gradient to 0, and click the gradient image to edit the colors. To make a rainbow gradient place these colors as I have done below:

You can use your color picker to pick the colors, but if you want the exact same result as I did, here are the details I used (NOTE: if you used different text for links you would probably want to play around with location of the colors to align properly):

Red #ef4833 Location: 0

Orange #f7911e Location: 11

Yellow #fff335 Location: 21

Green #49b749 Location: 40

Blue #00b4e5 Location: 58

Dark Blue #355ba9 Location: 76

Pink #c5197e Location: 100

Also, make sure to save this gradient so you never have to do this again by simply clicking “New” in the same window. Once you have done this, click OK, and once again OK. You should now have something like this:

Click for full size

Be Sociable, Share!

7 Comments to “Designing a Simple Portfolio Layout”

  • Vangelis | April 11th, 2010 at 2:10 pm

    Thanks for the tuto. Great layout

  • Rory | April 15th, 2010 at 3:25 am

    Very cool website design, love the rainbow navigation really stands out against the black background. Not sure about the font though…cheeky!

  • Texture plus | May 29th, 2010 at 2:37 pm

    Thanks for this nice tutorila! Its realy what i need it!

  • Koertes | September 5th, 2010 at 12:21 am

    Great Tuto and a simple Layout.

    Thank you

  • Jan | December 3rd, 2010 at 2:56 pm

    Thanks for the tutorial. ^_^

  • PS Patterns | January 17th, 2011 at 3:28 pm

    Nice tutorial and an exceptionally nice layout. Great colours and great structure. I like it!

  • ululf01 | February 19th, 2013 at 1:18 am

    thank you :)

Leave a Reply