Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Clean Photo Gallery Website Layout

Clean Photo Gallery Website Layout


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

Clean Photo Gallery Website Layout image 1

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

Clean Photo Gallery Website Layout image 2

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

Clean Photo Gallery Website Layout image 3

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

Clean Photo Gallery Website Layout image 4

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

Clean Photo Gallery Website Layout image 5

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

Clean Photo Gallery Website Layout image 6

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

Clean Photo Gallery Website Layout image 7

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

Clean Photo Gallery Website Layout image 8

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

Clean Photo Gallery Website Layout image 9

Clean Photo Gallery Website Layout image 10

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

Clean Photo Gallery Website Layout image 11

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

Clean Photo Gallery Website Layout image 12

13. Insert the following blending options onto its layer

Clean Photo Gallery Website Layout image 13

Clean Photo Gallery Website Layout image 14

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

Clean Photo Gallery Website Layout image 15

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

Clean Photo Gallery Website Layout image 16

16. I repeated those steps for a "Highest Rated" box, and added some 200x80 ads, and you'll have something that looks like this for your sidebar

Clean Photo Gallery Website Layout image 17

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

Clean Photo Gallery Website Layout image 18

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

Clean Photo Gallery Website Layout image 19

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.

Clean Photo Gallery Website Layout image 20

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

Clean Photo Gallery Website Layout image 21

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.

Clean Photo Gallery Website Layout image 22

22. Insert the following blending options onto its layer now

Clean Photo Gallery Website Layout image 23

Clean Photo Gallery Website Layout image 24

23. Your results will look similar to this

Clean Photo Gallery Website Layout image 25

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%

Clean Photo Gallery Website Layout image 26

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

Clean Photo Gallery Website Layout image 27

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

Clean Photo Gallery Website Layout image 28

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

Clean Photo Gallery Website Layout image 29

Clean Photo Gallery Website Layout image 30

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

Clean Photo Gallery Website Layout image 31

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

Clean Photo Gallery Website Layout image 32

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

Clean Photo Gallery Website Layout image 33

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.

Clean Photo Gallery Website Layout image 34

32. Now insert the following blending options onto its layer

Clean Photo Gallery Website Layout image 35

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

Clean Photo Gallery Website Layout Tutorial: Final Result



Author's URL: PSDVIBE
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Clean Photo Gallery Website Layout"

Captcha