How To Create Cool Portfolio Layout – Photoshop Lesson with images

This Photoshop Lesson is about how to create a cool portfolio layout, the final result is shown below; please click on the image for a larger view.

So to start of you will need a background images, please use this one <photobucket>

1. Make a new Photoshop document 1000px wide and 1200px high and paste in the background image from above.    Rename this layer background

2.  Create a new layer and then using the rectangle marquee tool; make a selection 200px high and 1000px wide and fill this color black.  Rename this layer header.

3.  Now we need to add some guides, go to view > new guide and add a vertical guide at 200px and 800px and create a new layer, call this layer content and drag this layer under the header layer. See the picture below if your unsure.

4.  Select the rounded rectangle tool and with the settings below, draw a box 700px in length and make sure you draw the box between our 2 guides.

Right click on the content layer and select rasterize layer.  You should have something that looks like this.

5. Create another layer this time above the content layer but below the header, call this layer main.  Now use the same settings as before when drawing a box but this time, instead of using the color a3a3a3 use a solid black and also change the feather to 15px and draw a 500px box.

You should now have something that looks like this.

6. create a new layer again above the other two layers but still below the header layer, name this layer navigation, use the same settings as we did for the last box but change the color to a nice green shade, I will use the color b1cd19,

Draw a 50px high box from the 200px header now right click on this layer and rasterize it.  You should have something similar to the below image.

7.  Create 2 new vertical guides at the 210px mark and the 790px mark.

8.  Click back onto our ‘header’ layer and press ctrl + j to duplicate the layer. Then drag the block all the way to the bottom of our design and rename this layer footer.

We now have the basic shapes for our layout.  Check the image below to see if yours looks similar.

9.  Let’s now start to add some text to the layout.  We will start from the top, select the header layer by clicking once on it then select the type tool (T). I have used ‘my portfolio’ as the name of our site. I have used the font hemi head at size 60pt.

Double click this font layer and select these blending options.

10.  Now we will add the navigation text, i’m going to use a pixel font called ‘pixel your life’ which can be found at dafont.com.  Once you have added the text double click on the layer to add this layer style to it.

11. using the same pixel font make a new text layer and write ‘our portfolio’ then make a new layer and draw a 1 pixel line all the way across the main image until you reach the outer guides, make this line color ‘898989’

12.  Now add some stock images to your site, to make it look more interesting, only add these images to the main layer though.  You should now have something that looks like this.

Now where we have left blank space on this layer just add the text ‘<< Previous Next >> “so it looks like you can flick through our design to see more creations.

13.   Our website is coming along nice however the navigation looks very basic so we will make it look a lot nicer, we can do this by selecting the navigation layer and changing the layer style.

So select the navigation layer and double click on it.  Now use these settings below.

Gradient overlay

Stroke

14.  Now click on the content layer and then create a new layer above it.  Using the same font settings as before write ‘latest works’ and add a 1px solid black outside border to it.

15. create a new layer and draw a 1px solid black line all the way across just like we did before, stopping before the inner lines.  Once you have done this add some stock images to the content layer.  You can also leave room and duplicate the ‘previous next’ layer and drag it down on our image, but this time change the text color to black, keep the green arrows however.
You should now have something that looks like this.

16.  For the bottom of the layout you might want to add external links or a copyright for your website, i’m going to add the PSFarm logo and some links.

17.  Now looking at the image, the layout is nearly complete however i’m not to keep on the logo at the top of the screen so to fix this we will change it a little.  Find the text logo layer that is at the top of the screen then press CTRL + J to duplicate it, then press ctrl + T then right click on the image and select flip vertical.

18.  Drag this new layer below the original layer on the layers pallet.  Then right click on the copied layer and select clear layer style.  Now change the opacity of the copied layer to 15%.
19.  All that’s left to do is to clear the guides left behind to do this go to View > Clear guides.

We are now left with our finished version.  Please click on the thumbnail image below to view our layout in all its glory.

We hope this Photoshop Lesson will help you to start making your first design layouts. You are welcome to post your attempts in our Webmaster Forum where you may ask for original psd of this lesson as well.

Latest Headlines

• Understanding Economies of Scale For Domains
• Zen and the Art of Domain Auction Science
• Webmaster – GHG Corporation – Denver, CO
• Tuesday’s Big List of Domains at Auction and Dropping Around the Net 2-6-12
• Webmaster-Drupal Developer-PHP Programmer – Waiting Room Solutions – Goshen, NY
• Webmaster – Creative Group – Chicago, IL
• Webmaster at GHG (Denver, CO)
• Webmaster – WFTV – Orlando, FL
• Webmaster/Web Developer at Zebra Technologies (Vernon Hills, IL)
• Part Time Webmaster and Project Manager for Web Design Company – oDesk – New York, NY