How to make 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 #1F2B33for 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.