HV-Designs.co.uk

October 10th, 2007 in Photoshop Tutorials by Richard Carpenter

Vista Themed Layout #3 Tutorial

• Share

Create a new document 800×950 pixels with a transparent background select the rectangular marquee tool and create a rectangle 800 pixels wide and about 215 pixels high. Fill the rectangle with a linear gradient using black and a dark grey color. Select the pen tool & a brush size of about 2-6 pixels. Ceate a squiggley line using the color #4c842d. Add an outer glow layer style to your line using the settings below.

You should have something like this.

Select the pen tool once again and create another line using the color #389fa4. Add an outer glow using the settings below.

You should have something like this.

Create yet another 2 lines one of each color BUT this time dont add any layer styles goto “filter > blur > guassian blur” blur the lines by about 3-5 pixels.

Now select the rounded rectangle tool and create a rectangle at the top of our header, fill with the color black and add a stroke using the settings below.

Your should have something like this.

Still with the rounded rectangle tool create a little button in the top right corner, add this layer style.

Do the same again only this time move the button along towards the right and add this layer style.

Select the elliptical marquee tool and create a white circle. (see image below).

Inverse the selection and set layer opacity to 20%. Do this for both buttons, you should be left with this.

Select the rounded rectangle tool and create a rectangle at the bottom of the header. Add these layer styles.

Your rectangle should look like this.

Select the rounded rectangle tool and create your buttons for your navigation. Use the same styles as the 1st green button we created in step1.

Our header and navigation are nearly done. Add your site title, slogan and navigation buttons.

Select the rectangle marquee tool, select the rest of the page starting from the bottom of your header, overlapping some of the navigation, fill with the color white.

Add this layer style to your white rectangle.

Select the rounded rectangle tool and create 3 rectangles, fill with the color white and add a stroke.

Your layout should look like this.

Label each of the 3 boxes. You dont have to use the same labels as mine, im just creating example content.

In the start here box Create 4 circles using the ellipitcal marquee tool. Fill with any color and then add these layer styles.

You should now have something like this.

Add some text to complete it.

Now select the rounded rectangle tool once again and re-create our 2 buttons that we created in step 1, only this time create them on a much bigger scale, place them underneath our start box.

These 2 boxes will act as my advertisments for the site.

Now lets create the area for our tutorials, create an icon of your choice, im using a shape from the custom shapes libary. Place the icons in a list in the middle of our page. Im going to have two sets you’l see why in a minute.

Now label each section. Once labeled select the rectangular marquee tool and create a colored divider.

Once again select the rectangular marquee tool and create a black rectangle at the bottom of our page this will act as our footer. Add your all important footer information.

Your layout is now complete, here is the finished version.

• Share