Portfolio Gallery Layout

In this tutorial you will learn how to create a portfolio styled layout for your design studio gallery. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.


Matthew Heidenreich



This will be your final result

1. The first step is to create a new document with the dimensions of 1024×1000. The size of your document may vary on your choosing.

2. The next thing we want to do is to go ahead and use our paint bucket tool to fill our background layer with #424347

3. Next, using your rectangle marquee tool, make a selection spanning the top of your document that looks similar to this and fill it with #353638.

4. We then want to add a inner shadow to this layer. To do so, right click its layer in the layers pallet and choose blending options from the drop down menu and insert the following

5. In the top right, I decided to add a little text showing the address to our business. The color of the font I used is #999a9a

6. The next step is adding our navigational buttons at the top. Go to your tools pallet and use your rectangle marquee tool to make a selection similar to the following and fill it with any color you’d like

7. Now we would like to add some blending options to our layer, so insert the following onto your layer

8. Next lets go ahead and choose our text tool from our tools pallet and insert a title for our button. I used the color #B1EE85 for my font

9. We then want to make a subtitle with the color #A4A5A7, and then place a number in the top left corner showing which number button it is

10. Just repeat steps 6-9 and you will have something that looks similar to this

11. The the extra space to the left, I added a little text logo with a slight gradient.

12. For the blue gradient I used the following blending options on its layer

13. And for the green I used these blending options

14. Next lets go ahead and make the background to our sidebar, and to our main content display area. Using your rectangle marquee tool, or rectangle tool, make two rectangles similar to the following and fill them with #353638

15. Then go ahead and make a footer area for your design. Fill it with the same #353638

16. Now all thats left is to plop in some content and some text and your layout is finished.

Get a commercial/public use licence for this PSD (More info)

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors

Show Some Love
Thank you for your support

16 Responses

Leave a Comment

Name (required)

Mail (required)