Clean Photo Gallery Website Layout

In this tutorial you will learn how to make a clean photo gallery website layout. 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.

Author:

Matthew Heidenreich

Category:

Photoshop

This will be your final result

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

2. Using your Paint Bucket Tool from your tool pallet, fill your background layer with #3E4C54

3. Next lets use our Rectangle Marquee Tool to make a selection similar to the following and fill it with #1F2B33. This will represent our headers background

4. On this layer we want to add some blending options, so go to your layers pallet and Right Click your layer and choose Blending Options from the drop down menu and insert the following

5. Time to move onto a couple links for our header. This is where our page links will be displayed. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FC4F83

6. Next make 2 more boxes of equal size with a fill color of #27343C. Then you can add some text with the color #FFFFFF to your buttons similar to the following

7. Keeping with the simple nature of this layout, our logo won’t be too flashy. For the logo, I used the font Helvetica Neu, set to bold, with the anti-alias set to strong. I used #FFFFFF for the “Your” and “Gallery“, and for “Photo” I used the color #FC4F83. For the tagline I used the color #B1D4E8. When it’s all said and done, you should have something that looks like this

8. Now it is time to get the sidebar out of the way. Using your Rounded Rectangle Tool with a radius set to 10px, and a foreground color of #ECF1F3, make a rectangle similar to the following

9. We now want to create our link units for our Category box, and our Highest Rated image box. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000

10. Next, insert the following blending options onto it’s layer


11. Now just use your text tool to add the heading “Categories” and you should have something that looks like this by now

12. Using your Rectangle Marquee Tool again make a selection similar to the following and fill it with #000000

13. Insert the following blending options onto its layer


14. Use your Text Tool now to add a link with the color #3E4C54, and you should have something that looks like this

15. Now just repeat steps 12-14 as many times as you’d like and you’ll have something that looks like this

16. I repeated those steps for a “Highest Rated” box, and added some 200×80 ads, and you’ll have something that looks like this for your sidebar

17. Time to move onto our content area. Using our Rounded Rectangle Tool with a radius set to 10px, and a foreground of #FFFFFF, make a Rectangle similar to the following. Be sure to let it overlap your sidebar a bit

18. On your newly created Rounded Rectangle layer, insert the following blending options

19. We now want to work on how our picture will be displayed in our gallery. Using your Rounded Rectangle Tool with the radius set to 10px, and a foreground color of #ECF1F3, make a rectangle similar to the following. It doesn’t have to be exactly the same size as mine, just a rough estimate.

20. Now insert the following blending options onto your rounded rectangle layer

21. We now want to duplicate our rounded rectangle layer, and make a selection similar to the following and choose Edit>Clear (or hit delete on your keyboard). To make it easier for you to see what was done, I made the rounded rectangle red for the purpose of this tutorial. This will be a background for the title of our image.

22. Insert the following blending options onto its layer now


23. Your results will look similar to this

24. Next we want to add a little shine. Make a 1px high selection similar to the following and fill it with #FFFFFF. Change its Blend Mode to Soft Light and lower the opacity to around 57%

25. When you zoom out you’ll have something that looks like this

26. Using your Text Tool, go ahead and place it in a similar manner to the following

27. Now insert the following blending options onto your newly created text layer


28. Next we want to add some text to show what day it was posted. I used the color #3E4C54 for my text. I also went ahead and added some rating stars to the header using the default custom shapes tool and you’ll have something that looks like this

29. The last step is adding some text for tags, and your category, and you’ll have a finished result that looks like this for your pictures display box

30. Now we want to add a simple pagination option at the bottom of our content area. I used the color #1F2B33 for the numbers. For the active page, I used the same settings we used back in step 5 for our active page. I made a box and fill it with #FC4F83

31. The last thing we need to do is add our footer. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #27343C.

32. Now insert the following blending options onto its layer

33. The last thing I did was add some footer text, and that is it! You are finished! I went back and added a different background behind the category and tags on your photo gallery, but it is an optional change. Your final product will look similar to the following

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.


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

Show Some Love
Thank you for your support

37 Responses

  • Diogok

    awesome!

  • Edward.H

    awesome tutorial,good job! thanks! I’v submitted a link of this article to our website http://www.webmasterclip.com in order to share it with more people

  • Jeff R.

    Forgive my naivety as I’m a newbie with web design, but how do you go about making a .psd into a functional website? I am currently trying to teach myself flash and am actually working on creating a photography website for myself, so this tutorial was great to read… but I’m at a roadblock when it comes to making it functional. Any help would be much appreciated!

    All my best,

    Jeff

  • Matthew Heidenreich

    @Jeff

    This will be another tutorial, where we take the PSD and then convert it to XHTML/CSS. We currently only have 2 of those tutorials up on the site, but are working on doing that for most of our layout tutorials.

  • David Vega

    Thanks for this tutorial. It helps me a lot!

    I saw link on Twitter.

  • Alex Yule

    Would love a color scheme tutorial… how do you go about choosing all the colors? Do you use a particular relationship for each element? i.e. Main bg color, then that color -10% brightness for darker bg section, then its approximate complement for highlights/accents (or whatever).

    Thanks!

  • CgBaran Tuts

    Great layout i hope you will post another about coding it

  • Matthew Heidenreich

    @Alex Yule

    I honestly just mix and match different pallets until I find something I like. One of my favorite sites for finding color scheme inspiration is colourlovers.com. They have a great assortment of colors to keep your designs looking fresh

  • huwaw69

    This is a good layout for photo gallery.. thanks for the tutorial

  • gana

    So Beautiful!

  • Florim Kosova

    Pls. Fonts of Site

  • Matthew Heidenreich

    the fonts used in this template are Helvetica and Helvetica Neu. They are licensed out on all Apple Computers. If you have a PC the equivilent is Arial. If you want helvetica you would have to pay for a license, or “download” it somewhere else.

  • bogdan

    These are some of the best tutorials I’ve found on the web up to now. Thanks a lot and keep up the good work.

  • Design-notes

    Nice tut, I like it

  • Jarod

    yes it would be good to code it now. but it looks awesome! i followed every step and its sweet. Great Tutorial!

  • UPrinting.com Printing Services

    Excellent tutorial! I love the design, it’s clean, uncluttered, yet it still looks sleek and stands out. I even like the use of the color pink, and I’m not a pink fan haha :) Thanks for sharing this awesome tutorial! Great job!

  • Adrian

    Great tut matt!

  • Ivan

    amazing….great

    thanks

  • Dk

    Geat work learn a lot thanks

  • xonezx

    tHx for tHis tuTorial ^_^
    i Like it…

  • Web Design Quote

    Nice tutorial….!This is a good layout for photo gallery.I love the design. Keep up the good work.

  • firma ekle

    Perfect site great tutorial.
    Your rss readers +1 now.

  • GarykPatton

    Hi! I like your srticle and I would like very much to read some more information on this issue. Will you post some more?

  • AB Web Design, LLC

    Oh man, exactly what I was looking for. Thanks!

  • komang

    Good Tutorial THANKS….

  • Murtaza

    Nice work. Thanks for the post

  • Rameexgfx

    great work .. nice tutorial
    Teacher Thankx for share…..

  • lucy

    wow…great, I think you are the person who likes to share, thanks for sharing so many tutorials….

  • nadia

    Awesome tutorial to learn. Very easy and well defined . thanks for sharing this nice post.

  • nadia

    this is one perfect and clean tutorials, thanks for sharing

  • sydney

    All the tutorials are great.
    Any way I can export to Flash, and make it a dynamic photo gallery?

  • Muhammad Asif

    how do you convert that psd file into html. i need this template, can you kindly upload its html file online..

  • Jenn

    I love the design, what I am having trouble with is WP code to do this. The design part, I can do. I need help with the WP code to make it a gallery. Any help would be awesome! XD

  • tim

    is the code posted anywhere as of now? if so where?

  • Business Cards

    Matthew,
    Wow, for this tutorial to be over a year old it still covers the concept in
    detail on how to build a Photoshop template for a website well. Now you just
    need some good web designers to translate your vision into the concept art you
    gave them. Sometimes that doesn’t work out as easily as planned.

    Would be cool to do an advanced tutorial on different business card layouts.
    Our website actually allows people to design their own business cards with some
    cool tools without Photoshop over at
    http://www.overnightprints.com/businesscards. Let me know what you think?

    Pete,
    Business Card Division of OvernightPrints.com

  • Jim

    Great tutorial. Although it’s quite tedious and lengthy but I guess everyone can follow. The screenshots you’re providing really helps.

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors