HV-Designs.co.uk

October 9th, 2007 in Photoshop Tutorials by Richard Carpenter

Vista Themed Layout #1 Tutorial

• Share

Create a new document 900×800 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 shud 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.

If you dont no how to do reflections….. my “reflections tutorial” can be found here. If you dont no how to do orbs….. my “simple orb” tutorial can be found here.

Your site should look like this. (see link below).

CLICK HERE TO SEE RESULT SO FAR.

Now your going to need a busyish background, im 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 sufficent space for a footer.

CLICK HERE TO SEE RESULT SO FAR.

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 abit smaller. place at the bottom of your image making sure it aligns up with the rest of the layout.

Duplicate your footer and flip it vertical again. Use this to make a reflection. If you dont 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 HERE TO SEE RESULT SO FAR.

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.

Hide all your layers except your button layers, select one of your button layers and goto “layer > merge visable”. 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 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 cirlce to about 30%. Label your navigation you should have something like this, (see link below).

CLICK HERE TO SEE RESULT SO FAR.

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 inbetween 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 > guassian blur” blur by 3.0 pixels.

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

• Share