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

Portfolio Gallery Layout


1. The first step is to create a new document with the dimensions of 1024x1000. The size of your document may vary on your choosing.

image 1

2. The next thing we want to do is to go ahead and use our paint bucket tool to fill our background layer with #424347

3. Next, using your rectangle marquee tool, make a selection spanning the top of your document that looks similar to this and fill it with #353638.

image 2

4. We then want to add a inner shadow to this layer. To do so, right click its layer in the layers pallet and choose blending options from the drop down menu and insert the following

image 3

5. In the top right, I decided to add a little text showing the address to our business. The color of the font I used is #999a9a

image 4

6. The next step is adding our navigational buttons at the top. Go to your tools pallet and use your rectangle marquee tool to make a selection similar to the following and fill it with any color you'd like

image 5

7. Now we would like to add some blending options to our layer, so insert the following onto your layer

image 6

image 7

8. Next lets go ahead and choose our text tool from our tools pallet and insert a title for our button. I used the color #B1EE85 for my font

image 8

9. We then want to make a subtitle with the color #A4A5A7, and then place a number in the top left corner showing which number button it is

image 9

10. Just repeat steps 6-9 and you will have something that looks similar to this

image 10

11. The the extra space to the left, I added a little text logo with a slight gradient.

image 11

12. For the blue gradient I used the following blending options on its layer

image 12

image 13

13. And for the green I used these blending options

image 14

image 15

14. Next lets go ahead and make the background to our sidebar, and to our main content display area. Using your rectangle marquee tool, or rectangle tool, make two rectangles similar to the following and fill them with #353638

image 16

15. Then go ahead and make a footer area for your design. Fill it with the same #353638

image 17

16. Now all thats left is to plop in some content and some text and your layout is finished.

Portfolio Gallery Layout



Author's URL: PSDVIBE
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments lee May 11, 2010 says:
thank you very much for your tutorials,it's really very good!
Reply
Add comments to "Portfolio Gallery Layout"

Captcha