In this tutorial we are going to learn how to design a Vista style layout.
1) Create a new document with the dimensions 800 x 1000 px and search on the web an nice Vista wallpaper. Place the imagine in our document at the top.
2) Select Rectangular Marquee Tool and make an selection with the fixed size 800 by 150 pixels, then hide or delete the rest of the image.
3) Create a new layer (Ctrl+Shift+N). Then with Rectangular Marquee Tool select the white area of our document, fill it with the color #cfe5e4, open the Layer Style window and use the settings from the following image for Gradient Overlay.
4) Now we are going to create a Vista style menu. Create a new layer, select Rectangular Marquee Tool and make a selection with the fixed size 800 by 15 pixels. Fill it with any color, then go to Blending Options and add a 90 degrees gradient from #000000 to #0c0c0c.
5) Duplicate the layer created on the step 4, move it above the original one, then open the Layer Style window and change the gradients colors to #35393d and #787b7d.
6) Create a new layer, select Line Tool (U) set the weight to 2 pixels and draw a line across the bar using the color #9fa2a4. In a new layer create another line using the color #484b4d. Place the second line above the first one.
7) Now we are going to create the dividers. Create a new layer, and draw a vertical line from the center with the same weight of 2 pixels. Open the layer style window and add a 90 degrees gradient overlay using the colors #676a6d and #afb1b2. In a new layer create another line and fill it with the color #43474b. Place this line under the first one. Now you can place this two layer intro a group and duplicate the group as many times as necessary. Write the page names of your site on the menu.
8) Now we are going to create a hover effect. Create a new layer, and draw a large ellipses that fills the bottom area between dividers. Use the color #5c95c8. Then add a 10 pixels Gaussian blur and use Rectangular Marquee Tool to clean up the excess. Place all the menu layers intro a group, change the name of the group intro “menu” and set the opacity to 90%. Then make sure that you have placed the menu above the Vista wallpaper.
9) Place the name of your site in the header. Use Layer Style to create different effects.
10) Now we are going to create a background for the content and sidebar. Create a new layer, then make a rectangular selection with the fixed size 468 by 708 pixels.Fill it with white and add a 1 pixel stroke using the color#504d42.
11) Create a new layer, make a rectangular selection with the fixed size 228 by 708 pixels and fill it with the color #eceae1. Add 1 pixel stroke using the color #504d42 and place this layer next to the one created at the step 10.
12) Create a new layer, select Line Tool, set the weight to 1 pixel then draw a vertical line using the color #cbc5b0 which will be the separator between content and sidebar.
13) Now let`s create a gradient at the top of the content background. This will give a nice effect to our layout. Create a new layer, press Ctrl+Click on the content background layer`s thumbnail. Select the Rectangular Marquee Tool and from the option bar choose the “Intersect with selection” option. Make sure that you are working on a blank layer then draw a rectangular selection and fill it with white. Open the Layer Style window and use the next settings for Gradient Overlay.
14) Now we are going to create a background for featured posts. Create a new layer, make a rectangular selection with the fixed size 443 by 167 pixels and fill it with white. Open the Layer Style window and add a gradiend overlay using the colors #f0f0f0 and #fafafa. Then add 1 pixel stroke using the color #353329 and the opacity 45%. Now place the content for this featured post and put a image.
15) Now we are going to make a box where will be placed the subscribe links. Make a rectangular selection with the fixed size 228 by 116 pixels and fill it with any color. Then open the Layer Style window and add a 90 degrees linear gradient from #c1d71a to #dee75a.
16) Select the green rectangle (Ctrl+Click on the green rectangle layer`s thumbnail) then create a new layer and paint with a big soft white brush. Set the blend mode for this layer to Soft Light.
17) Follow the next link and download a rss icon set
Over 35 Different Styles of RSS Icons : Design Bliss . Place a rss icon above the green rectangle, then set the blend mode to Soft Light and opacity to 50%.
18) Add the text and a box where readers can write their email to subscribe.
19) I also created 2 rectangles for advertising. The “Advertise here” button is created just like the menu.
20) Using Pen Tool create two green hills (I used the color #83be1d). Then select Burn Tool, set the Range to Highlights and Exposure to 10% and start creating shadows.
21) Download the Pool icon set from
Iconka.com: Free stuff and place in you document two icons which you like. Take a look at the next image to see my result.
22) Now all you have to do is to write the content. I hope you will enjoy this tutorial as much as I did creating it.
Final Result
07-27-2008, 09:38 PM
Linear Mode
