adv banner
Photoshop  Home Photoshop Web Layout Vista Themed Layout #3
rss

Vista Themed Layout #3

Author: Hv-Designs.co.uk More by this author


Create a new document 800x950 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. Create a squiggley line using the color #4c842d. Add an outer glow layer style to your line using the settings below.

image 1

You should have something like this.

image 2

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

image 3

You should have something like this.

image 4

Create yet another 2 lines one of each color BUT this time don't add any layer styles goto "filter > blur > gaussian blur" blur the lines by about 3-5 pixels.

image 5

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.

image 6

Your should have something like this.

image 7

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

image 8

image 9

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

image 10

image 11

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

image 12

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

image 13

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

image 14

image 15

Your rectangle should look like this.

image 16

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.

image 17

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

image 18

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.

image 19
Add this layer style to your white rectangle.

image 20

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

image 21

Your layout should look like this.

image 22

Label each of the 3 boxes. You don't have to use the same labels as mine, I'm just creating example content.

image 23

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

image 24

image 25

image 26

You should now have something like this.

image 27

Add some text to complete it.

image 28

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.

image 29

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

image 30

Now lets create the area for our tutorials, create an icon of your choice, I'm using a shape from the custom shapes library. Place the icons in a list in the middle of our page. I'm going to have two sets you'll see why in a minute.

image 31

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

image 32

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.

Click to enlarge
Click to enlarge

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

Vista Themed Layout #3 Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Vista Themed Layout #3"