Simple Portfolio Gallery Layout in Photoshop

Matthew Heidenreich in Tutorials with 6 comments

In this tutorial you will learn how to create a simple yet colorful portfolio gallery in Photoshop. 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.

Final Preview

Tutorial Resources

• Blackout Font
• Mono Icon Pack
• Twitter Bird Icon

Lets Get Started

1. The first thing we need to do is create a new document with the dimensions of 1020×1200.

2. Using your Paint Bucket Tool (G), fill your background layer with #AED6EE.

3. Next, we want to add a little gradient at the top of our background. While we could do this on our background layer, I want to go ahead and make a new layer and make a white rectangle that looks similar to the following. I do this because it makes things more precise for when you go to code:

4. Now insert the following blending options by right clicking your layer in the layers palette and choosing blending options from the drop down menu.

5. Starting with our header, we want to create our logo. Using your favorite rectangle tool, create a rectangle similar to the following with a fill of #D4EF9F:

6. Add the following blending options to your newly created rectangle layer:

7. Next we need to add the text for our logo. For our design we will be using the font face Blackout, with #FFFFFF as its color. On your text layer add the following blending options:

8. Using your favorite Rectangle tool again, make a rectangle similar to the following and fill it with #416073.

9. Now add the following blending options to your newly created rectangle:

10. Our navigation will keep with the simple theme. Using Helvetica, and icons from the pack listed above lay your links out in a similar fashion. Our active link will have a #2D4655 rectangle. Our links colors will be #99CAEA, and our icons colors will be #AED6EE.

11. Under our navigation, we want to display our recent tweet. To do so we want to create a cloud using our Elliptical Marquee tool (M). Hold SHIFT to add to your selection and make something that looks like this and fill it with #FFFFFF:

12. Next, add a slight drop shadow to your cloud.

13. After adding some filler text, and the twitter icon, your header will look something like this:

14. For our content area we want to make it looks like there are a couple pieces of paper stacked on top of each other to give it a unique look. First make a white rectangle that looks like the following:

15. Next, duplicate this layer and move your duplicated layer (Command+J) under your original. Hit Command+T to make your duplicated layer transformable and rotate it to the right until it looks something like the following:

16. Go back to your original layer now and add the following blending options:

17. For each project, we want to add a thumbnail preview with the name and category of our portfolio piece. Using your favorite rectangle tool, create a rectangle that looks similar to the following and make sure it had a fill of #FFFFFF:

18. Now add the following blending options to its layer:

19. All you need to do now is add a preview image, and some text with the color #416073, and then repeat the process until you get something that looks like this:

20. The last step for our content area is to add our back and next buttons. For our button we will be using the same effect we used in step 14 for our background. Your top rectangle will be #D4EF9F, and the one below it will be #AFD465.

21. Add the following blending options to the rectangle on top:

22. All you need to do now is add an arrow icon, and your text. Your text and icon should be the color #2D4655. The icon used is from the Mono Icon Pack.

23. Do the same thing for a back button, and add some text showing how many pages you have and you’ll have something that looks like this:

24. The last step is adding our footer. We want to make it feel as if we are in the clouds, so using your Elliptical Marquee Tool (M) make a selection and then hold SHIFT to add to your selection and fill it with #FFFFFF. Keep adding to your selection until you get something that looks like this:

25. All that is left is to add some text in your footer for your links and your copyright and your final Photoshop template will look like this: