Article written

  • on 19.12.2007
  • at 01:29 AM
  • by Admin
  • with 42,876 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Winter WordPress Theme 23

We’re going to create a wordpress theme that can be coded into a real theme if you know how to do this.

1. Create a new document (900*700).

2. Fill the background with #4399d1 and look at the guides I’ve created in the screenshot below. Also select a rectangle like shown below (heigth of 350px) using your rectangular marquee tool.

weblayoutq1

3. Now create a new layer (layer – new layer) and fill the previous selection with any color you like. Then adjust the blending options to add a gradient overlay with the settings like shown in the second screenshot in this step.

weblayoutq2

weblayoutq3

4. Create another new layer and select a rectangle for your content and text like shown! Fill it with white #ffffff so the whole desgin looks like this for now.

weblayoutq4

5. Now we’re going to add a stroke with a special gradient instead of just a plain color (again go to layer – layer style – blending options and then stroke). Look at the screenshot below to find out what I did to achieve the special border…

weblayoutq5

6. Now create a new layer just above the header layer (the one with the gradient) and select your brush tool (change the foreground color to white #ffffff). Start brushing using this brush and this one untill you have something looking like this! Looks cold and snowy, just what we wanted (i also changed the opacity of this layer to 75%)! You also might want to add these snowflakes on more than 1 layer like I did in step 7…

weblayoutq6

7. Use your horizontal type tool to type out a title and a subtitle… I used a font called microsoft sans serif with a size of 30px for the title and 10px for the description.

weblayoutq7

8. Like every wordpress template you also need a menu (on a new layer so create a new one)… So use your rectangular marquee tool to select a rectangle like this on the right of your screen. Then fill it with #fafafa. Ofcourse this can also be done using css and divs, but for now we’re just going to duplicate the looks of this design.

weblayoutq8

9. In this last step I’ve just added some demo text like always! I hope you liked this tutorial! The coded wordpress theme for a look-a-like of this design can be downloaded here!

weblayoutq9

Learn the art of web designing using testking 642-642 self paced study guides. We offer the best quality testking 70-432 design tutorials and testking E20-001 videos to help you become expert in photoshop work.

Please Login or Register to download the source files.

subscribe to comments RSS

There are 23 comments for this post

  1. Jason says:

    Very neat to see someone actually share how an image can be set up for a WordPress layout like that. It’d also be helpful to include the dissecting to make each component clickable, and go a little more into the codification of the site in case we want to design our own from scratch…a good start regardless…

  2. Admin says:

    Hello, thank you for your comment jason! This site is just about the desgin part and not coding everything… Other sites will help you doing that, hehe… Just google for “slicing” or “wordpress theme coding” but I guess you already knew that I was going to say something like this… Kindest regards!

  3. manele says:

    thx for this theme, is really cute!!!

  4. Great job.
    Could have done with this for Xmas!
    :)

  5. Watch Reaper Online says:

    I wish i had found this photoshop tutorial before Christmas!

  6. Admin says:

    Hmm, too bad… But on some sites it takes a long time before tutorials are accepted… You can use it this year!

  7. Adam says:

    I’ll be using it this for year for sure! :) As I’m a programmer, this will no doubt come in handy! I’m not totally inept with Photoshop.

  8. shari says:

    beautiful layout! will the psd work in version 8?

  9. Vinit says:

    I have created a theme in photoshop , now how should i convert it to wordpress theme. Can i get details plz ?

    Thx
    Vinit

  10. Admin says:

    Hi Vinit, I don’t provide tutorials on how to code websites and themes… I just design them and show you how I did it! There are some other sites for this:

    http://hv-designs.co.uk/2007/10/10/site-to-wordpress-tutorial/
    http://www.live-cms.com/articles/Developing_a_Wordpress_Theme/

  11. tomw says:

    I think the PSD is corrupt. Can’t open in Photoshop. Tried downloading twice. Anyone else?

  12. Admin says:

    Hi tom, the .psd file problem is fixed now so try downloading it again!

  13. admin says:

    hi,
    this is santhohs kumar
    its my own exp
    its very nice website as u my website ok fine thkq sir

    have @ nice d@y

    whit regards
    santhosh kumar

  14. goldenboy says:

    Keep up the good work! :)

  15. yudo says:

    Thanks for this – great idea.

  16. TakingOff says:

    I came across. Thank you.

  17. Krissy says:

    This is a really clean and lovely design. Thank you for sharing it with us.

  18. PhotoshopInstructions says:

    Very clean, thanks for sharing. Running WP as well, will make sure to try it out.

  19. in says:

    Looks like download link is dead! Could u pls reupload it?? Thanks!

  20. Admin says:

    Thanks for telling me this, the links is fixed. You can also just google for “coolwinter wordpress theme” ;) !

    Regards.

  21. Nice tutorial, and very easy and very useful for newbie. I learn from it thanks author.

  22. adam says:

    Awesome tutorial. I might try to use something like this for one of my clients in Colorado.

  23. Fantastic winter wordpress theme, and this is what I was searching for. This helped me much to learn advanced photoshop graphics designing. Thanks for sharing.

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top