Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Vista Themed Layout #1 Tutorial

Vista Themed Layout #1 Tutorial


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.

image 1

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.

image 2

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.

image 3

image 4

image 5

Now add your site title and logo.

image 6

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).

image 7

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.

image 8

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.

image 9

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

image 10

image 11

Your button should look like this.

image 12

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

image 13

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.

image 14

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

image 15

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).

image 16

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.

image 17

image 18

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

image 19

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.

Vista Themed Layout #1 Tutorial



Author's URL: Hv-Designs.co.uk
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


Like us to: