4/21/2009

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.

Portfolio Gallery Layout 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.

Portfolio Gallery Layout 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

Portfolio Gallery Layout 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

Portfolio Gallery Layout 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

Portfolio Gallery Layout image 5

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

Portfolio Gallery Layout image 6

Portfolio Gallery Layout 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

Portfolio Gallery Layout 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

Portfolio Gallery Layout image 9

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

Portfolio Gallery Layout image 10

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

Portfolio Gallery Layout image 11

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

Portfolio Gallery Layout image 12

Portfolio Gallery Layout image 13

13. And for the green I used these blending options

Portfolio Gallery Layout image 14

Portfolio Gallery Layout 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

Portfolio Gallery Layout image 16

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

Portfolio Gallery Layout image 17

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

Portfolio Gallery Layout Tutorial: Final Result

No comments:

Post a Comment