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

Website Gallery Layout Design


1. The first thing we need to do is create a new document in Photoshop with the dimensions of 1024x998

Website Gallery Layout Design image 1

2. Next lets go ahead and change our background color. Go to your Tools Pallet and choose your Paint Bucket tool and fill your background layer with #E3E8CF

3. Using your Rectangle Marquee tool make a rectangle similar to the following and fill it with #70AFC4

Website Gallery Layout Design image 2

4. Now lets go ahead and make a 1px high selection at the bottom of our newly created rectangle spanning the whole document and fill it with #E3E8CF and lower the opacity of your layer to 55%

Website Gallery Layout Design image 3

5. Next lets go ahead and create a text logo. For "Website Gallery" I used the color #17404E, and for the tagline I used #E3E8CF

Website Gallery Layout Design image 4

6. Lets go ahead and create some navigational buttons now. Using your rectangle marquee tool make a rectangle similar to the following and fill it with #427383.

Website Gallery Layout Design image 5

7. Now right click that layer and choose blending options from the drop down menu and insert the following blending options

Website Gallery Layout Design image 6

8. Add some text and your button will look something like this

Website Gallery Layout Design image 7

9. Now just go ahead and repeat steps 6-8 and you should have something that looks very similar to this

Website Gallery Layout Design image 8

10. Next we want to go ahead and make the content boxes for our content. The top left with be our featured box, top right is our sponsors box, and the large box is for our website gallery listings.

Website Gallery Layout Design image 9

11. Go ahead and apply the following blending options to all of your content boxes

Website Gallery Layout Design image 10

Website Gallery Layout Design image 11

12. For the featured box I used the color #C5617B for the pink stars, and for the gray stars I used #6e686a. You want users to know that it is a featured box, so I labeled it with the vertical text on the side. I used the font Helvetica Neu #FFFFFF with the opacity set to 80%. Once you place your content in it, it will look something like this

Website Gallery Layout Design image 12

13. Next lets work on our gallery area. We want to give it a label similar to our featured area. Using the same method write the word "Gallery" vertical next to your content box with the font color #70AFC4. Then lower the opacity of the layer to 80% and it will look like this

Website Gallery Layout Design image 13

14. Now we are going to work out how our websites will be displayed in the gallery. Using your rectangle marquee tool create a selection similar to the following and fill it with any color.

Website Gallery Layout Design image 14

15. Now insert the following blending options onto its layer

Website Gallery Layout Design image 15

Website Gallery Layout Design image 16

16. Using your rectangle marquee tool create a rectangle similar to the following and fill it with #000000. Then lower the opacity of that layer to 50%

Website Gallery Layout Design image 17

17. Again make another rectangle similar to the following with your rectangle marquee tool and fill it with #000000. Then lower the opacity of that layer to 30%, and make sure its on top of the last rectangle you created.

Website Gallery Layout Design image 18

18. Now go ahead and add a thumbnail preview, and some text and stars for ratings similar to the ones in our featured area. You will then have something that looks like this

Website Gallery Layout Design image 19

19. Then all I did was repeat the steps for the gallery view, and then repeated steps 3 and 4 for the footer area. I then added some copyright information in my footer and it should look something like this

Website Gallery Layout Design image 20

20. You could stop there, but I want to go ahead and add some texture to our template. I used this cardboard texture for my header and footer, and then this cardboard texture one for the center of the background.

For my header and footer, I lowered the opacity to 35%, with the blend mode set to 35%. Then for the center of my background, all I did was set the layers blend mode to Overlay. Your final results will look something like this

Website Gallery Layout Design Tutorial: Final Result



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

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Website Gallery Layout Design"

Only registered users can write comment

No comments yet...