website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Wordpress Layout #2
rss

Wordpress Layout #2

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


Create a new document 850 x 1200 pixels with a white background, double click your background layer, press ok when the box pops up. This has now unlocked your background layer, double click your background layer again and add this layer style.

Wordpress Layout #2 image 1

Select the elliptical tool and draw out a small selection.

Wordpress Layout #2 image 2

Hold the shift key and drag out another selection, over lapping your original selection.

Wordpress Layout #2 image 3

You will notice the selections merge together reapeat the process untill your have a cloud looking shape like this.

Wordpress Layout #2 image 4

Once you have you cloud shape fill it with the color white, then add these layer styles to it.

Wordpress Layout #2 image 5

Wordpress Layout #2 image 6

Wordpress Layout #2 image 7

Wordpress Layout #2 image 8

Set the layer opacity to about 69%, then duplicate your clouds a couple of times, changing the opacity of each one.

Wordpress Layout #2 image 9

Add your blog title and slogan.

Wordpress Layout #2 image 10

On the text in the header just copy and paste the layer styles from the clouds to the text. Select the rounded rectangle tool and draw out a small navigation size box the side of your blog title and slogan, again copy/paste the layer styles from the clouds to your navigation.

Wordpress Layout #2 image 11

Add your navigation text, using the elliptical tool add some blue dots inbetween each navigation link.

Wordpress Layout #2 image 12

Select the round rectangle tool again and draw out your content boxes like this.

Wordpress Layout #2 image 13

Add these layer styles to your content boxes.

Wordpress Layout #2 image 14

Wordpress Layout #2 image 15

Wordpress Layout #2 image 16

Select the rounded rectangle once again and create a square within your big main content box.

Wordpress Layout #2 image 17

Add these layer styles so it look like the image above.

Wordpress Layout #2 image 18

Wordpress Layout #2 image 19

Wordpress Layout #2 image 20

Select the square tool and add a dark gray square in the middle. Use the elliptical tool to create a shine effect.

Wordpress Layout #2 image 21

Using the rounded rectangle again add a green rectangle above your polorid, then start adding your content.

Wordpress Layout #2 image 22

Wordpress Layout #2 image 23

Wordpress Layout #2 image 24

Wordpress Layout #2 image 25

Finally select the rectangle tool and create a rectangle at the bottom of your canvas, fill with the color white then copy and paste the layer styles from the cloud, copy elements from the header I.E clouds and title, combine them together to get your footer.

Wordpress Layout #2 image 26

You should end up with something like this.

Wordpress Layout #2 Tutorial: Final Result



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 "Wordpress Layout #2"