Vista Themed Layout #1

Create a new document 900x800 with a background color of #cccccc, create a new layer labeled "header" select the round rectangle tool and draw out a rectangle like so.

Once you have your rectangle right click and goto make selection. Now select the rectangular marquee tool and whilst holding the ALT key on the keyboard make a small selection at the bottom. You will notice the cursor change, it should turn to a cross with a little minus (-) sign by it.

Your shape should now have square corners at the bottom and rounded corners at the top. Double click your header layer and apply the following layer styles.

Now add your site title and logo.

Click to enlarge

Your site should look like this.

Click to enlarge

Now your going to need a busyish background, I'm going to use a windows vista wallpaper known as vista grass feel free to use your own, the vista grass image can be found here. Open up your image your going to use in my case the vista grass image. Copy/paste onto your layout canvas you will need to resize it so press "ctrl + t" select one of the corner anchor points and drag down also whilst holding the shift key. (the shift key keeps the original shape). You want the image to be the same width as your header and to cover most of the canvas at the bottom but leaving sufficient space for a footer.

Click to enlarge

Add this layer style to your image. (vista background).

Duplicate your header, rename duplicated layer to "footer" goto "edit > transform > flip vertical" now press "ctrl + t" and make the height a bit smaller. place at the bottom of your image making sure it aligns up with the rest of the layout.

Click to enlarge

Duplicate your footer and flip it vertical again. Use this to make a reflection. If you don't no how to do reflections.. my "reflections tutorial" can be found here. Also add your footer text/info. You should have something like this.

Click to enlarge

Click to enlarge

Select the rounded rectangle and draw out a little rectangle (button size). Add these layer styles.

Your button should look like this.

Set your buttons opacity to 70%, duplicate as many times as needed and place under your header.

Click to enlarge

Hide all your layers except your button layers, select one of your button layers and goto "layer > merge visible". Unhide everything, you buttons should now all be on one layer. Create a new layer above your buttons layer and select the elliptical marquee tool.

Draw out a big "white" circle over the top of your buttons.

Click to enlarge

Click your buttons layer whilst holding the ctrl key on the keyboard to make a selection, make sure your white circle layer is selected and goto "select > inverse" then hit the delete key. Set the opacity of the white circle to about 30%. Label your navigation you should have something like this.

Click to enlarge

Create two shapes similar to your header and footer (these were made exactly the same way just on a much smaller scale).

You will notice the light blue bit at the top, this was also made the same as the white circle shine on the navigation, i just used the the rectangular marquee tool instead of the elliptical marquee tool just follow the steps in step 4. Select the rectangular marquee tool and draw a rectangle in between the to shapes making sure the align up in the corners just like the header and footer, fill with any color. Add these layer styles.

Set the rectangles opacity to 60%. You should have something like this.

Hold the ctrl key on the keyboard and click your rectangle to make a selection. Select your vista background layer and goto "filter > blur > gaussian blur" blur by 3.0 pixels.

Follow the above steps for all your content boxes and don't forget to blur the background as shown above.

Click to enlarge