Jun 10th

Simple Portfolio Gallery Layout in Photoshop

Simple Portfolio Gallery Layout in Photoshop

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

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:

Sign up for JN0-100 web designing course and learn how to create interesting images in photoshop using our HP0-Y23 tutorials and 642-426 videos.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts16 Comments

  • PSDhome June 10th, 2010 at 4:17 am

    Clean and beautiful design. Thanks a lot…

  • Strafe Web Design June 10th, 2010 at 9:37 am

    Great, like this alot! Great work Matthew

  • Espreson Media June 10th, 2010 at 9:43 am

    Really simplistic..

  • Webjohn01 June 16th, 2010 at 11:43 pm

    Hello Matt!

    What a great design, I love it.

    Keep up the good work.

    More thanks!

  • Wordpress Themes June 30th, 2010 at 10:44 am

    Amiable dispatch and this mail helped me alot in my college assignement. Gratefulness you as your information.

  • Pakdoz July 2nd, 2010 at 12:16 pm

    Nice and clear to follow. Good job dude!

  • zencart September 26th, 2010 at 12:06 am

    Great….

  • Photoshop Friends September 27th, 2010 at 12:49 pm

    an amazing and very well described tutorial! thanks for the post…

  • esrea1 November 24th, 2010 at 12:56 am

    Great,i like it.

  • Religious Garden Statue Fountain October 22nd, 2011 at 12:48 am

    excellent collection of art with fonts…

  • French Antique Replica Furniture October 22nd, 2011 at 12:49 am

    What a great design, I love it.

    Keep up the good work.

    More thanks!

  • tardive dyskinesia lawsuit October 26th, 2011 at 3:47 pm

    Great design, slick look, it’s simply amazing, thanks for putting it out there.

  • Vines September 30th, 2012 at 7:31 am

    Really great design..i like the colors too..thanks

  • 1suming March 15th, 2013 at 6:45 am

    good design,very beautiful!

  • ming March 15th, 2013 at 6:49 am

    nice stuff!

  • Liam Dang May 2nd, 2013 at 8:44 pm

    Hi,

    A great psd template. I want to share this design on my site (http://bloggingwordpress.net/). Would be permitted.

    Liam.

Leave Your Response