Subscribe Via RSS

3827 Subscribers

Subscribe Via RSS
Subscribe Via Twitter


Subscribe Via Twitter
WordPress Layout #2

August 15th, 2008 in Photoshop Tutorials by Richard Carpenter

WordPress Layout #2

1 Star2 Stars3 Stars4 Stars5 Stars19 Votes, Rating: 3.95
Loading ... Loading ...

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.

Select the elliptical tool and draw out a small selection.

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

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

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

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

Add your blog title and slogan.

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.

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

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

Add these layer styles to your content boxes.

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

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

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

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

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.

You should end up with something like this.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.


Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

18 Responses to “WordPress Layout #2”

  1. zvonko says:

    i think it should have been more descriptive….thnx nyways… \”"/

  2. ed says:

    Thanks im going to be changing to a wordpress and i will be using this on my site

  3. Everyone that has a wordpressblog
    should use this information…

  4. Thanks for the tutorial…

  5. I also only use wordpress @

  6. ehem says:

    how can i code this? is there a tutorial on how to code these layouts? is there any difference in coding wordpress layouts & blogger layouts and normal pages?

  7. Clero says:

    ????????? ???????? ? ???? ????????? ?????? ????????? ????????? ?? ??? ????) ????? ?????????…

  8. preollefeds says:

    :) reflects the couple’s low-key approach to their royal connections.

  9. Waitng for a Css3 Tutorial…

  10. ADMIN says:

    All in good time, ive got other things on the agenda 1st :)

  11. Cachaito says:

    it’s perfect job ;)

Leave a Reply