In this tutorial you will learn how to create a photo gallery website 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 Result
Click on the image to view the full-scale final result.

Lets get started
1. First thing we want to do is create a new document with the dimensions of 10201200.

2. Next we want to use our Paint Bucket Tool to fill our background layer with #1F2329.
3. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with any
solid color.

4. Insert the following blending options onto your layer by right clicking your newly created layer,
and choosing blending options from the drop down menu.



5. For our logo we want to add some simple text on the left side of our header. I used Myriad Pro
with my foreground set to #FFFFFF. After you place your text, add the following blending options
onto your text layer:

6. Your text will look something like this:

7. I wanted to add a little icon in our header. So go pick up the Iconic Icon Pack to download
their icon pack. Find an icon you would like to use, an then add it in your header in a similar
fashion below. I used the same drop shadow that we used on the text in the previous layer. Keep
this icon pack handy, as we will be using it throughout this tutorial.

8. Next we want to add some links into our header. Using your text tool set to Georgia, add
some links in a similar way to the following

9. The RSS Icon used can be found in the Iconic pack we downloaded in step 7.
10. Now what we need to create is some dividers between our links. To do so create a new layer
and with your Rectangle Marquee Tool make a 1px wide selection similar to the following and fill it
with #FFFFFF

11. Now insert the following blending options onto its layer.



12. Go ahead and duplicate the layer you just created and place it in between all your links. When
your finished youll have something that looks like this:

13. Using your Rectangle Tool, now make a selection similar to the following and fill it with
#18191B.

14. Using your Text Tool, go ahead and insert some text in a similar way to the following to
represent your categories. I used Helvetica for these links. The icon shown can be found in the
Iconic icon pack.

15. The next thing we want to create is our featured area. Using your Rounded Rectangle Tool with
a radius of 10px, and a foreground set to #FFFFFF, make a rectangle similar to the following.

16. Using your Rounded Rectangle Tool with your radius still set to 10px, make a rectangle similar
to the following. Rasterize this layer, and then use your Marquee Tool to make a selection of the
right side of your Rounded Rectangle, and choose EDIT>CLEAR to remove the rounded edges on
that side. You should have something that looks like this:

17. Now insert the following blending options onto your layer


18. Open up your Iconic Icon Pack again and find the arrow I used below. Place it in a similar
fashion.

19. Go ahead and repeat steps 16-18 for the right side, and youll have something that looks
similar to the following:

20. All thats left for our featured box is to add our thumbnails. Using your Rectangle Marquee
Tool (or Rectangle Tool), make a Rectangle similar to the following and fill it with any color.

21. Now insert the following blending options onto its layer



22. Next, add your thumbnail image. I chose to leave 5px of our Rectangle visible behind our
image. We now want to make a spot for the name of our image. Using our Rectangle Marquee
Tool again, make a selection similar to the following and fill it with #1F2329.

23. Now lower this layers opacity to about 73%, and then insert the following blending options
onto its layer


24. All thats left is to add some descriptive text, and repeat this process and your featured area
will look like the following:

25. The last thing we want to do is layout our content area. Using your Rounded Rectangle Tool
with a radius of 10px, we want to make a Rounded Rectangle similar to the following:

26. For our thumbnails, we will be using the same options we used in the featured box. The only
thing that changes is where the title is placed. The heart icon used is from the Iconic Icon pack,
and the font color is #0C57C6. For the background of our title, we created a rectangle filled with
#1F2329, and lowered the opacity to 9% on that layer. Once you have it all complete, you will have
something that looks like this:

27. The last thing we need to add is our pagination and footer. For our pagination, we just used
#FFFFFF as our text color. For our active page box (the pink), we used the color #FC4F83. For the
text on the right, we used the color #6A7278. After that all we have left is the footer, and you just
need to repeat the steps we used for the Categories section back in step 14. When your finished,
your template will look similar to the following: