GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

03
Jan

Design a light wordpress theme in photoshop

Psd Themes, Templates, Tutorials, Web layouts
39 Comments

In this tutorial I will create a new wordpress theme with a web 2.0 look. Sometimes the simplicity of the theme will bring you more readers. The light wordpress themes seams to keep your readers more on your blog.  From my experience is very important to create a good place for your readers to find quality content on a well designed theme.

Want to download this PSD layout ? Register for a VIP account and download our entire collection with 70.000 items.

Create a new document with the following size:  1000×1400 pixels. After you create the document you need to add a color on the background layer. The easy way is to set your foreground color to #cccccc, and with Paint Bucket Tool you need to click one time inside your document. Now you have a background with the color you want.  If you want to use another color you can change it later with the same method.
I will select Rectangle Tool, and I will create a shape on the top of the Wordpress theme. This will be our header for this layout.

For this shape I will add the following layer styles

Please note that all gradients used in this tutorial you will find in one of the biggest pack of gradients you will find on internet. You can download here: 27.000 Photoshop gradients

With Rectangle Tool I will create another shape right under the header. Here I will place the menu buttons.

Of course I will add also some layer styles

I will place here some text, and this is my result so far.

You can see that I have used different sizes for the font.
Now I will create another shape with Rectangle Tool. I will create the search form

In the middle of the Wordpress theme I will create a shape with Rectangle Tool. Here I will create a featured post, or you can create also a slideshow

I will add the following layer styles

This is my result so far

In the middle of the shape I will add a image.

If you want to subscribe to our newsletter you can use this link:

Subscribe and download soon the Designer’s Pack – Free

Under this featured post you can add another shape. I will use the same layer styles.

I will start adding different elements. For start I will create a spot where I will add the date when the post was written , and the number of comments.
I will select Pen Tool and I will create a shape like this one. If you turn on the grid you will be able to create this shape very easy

I will add the following layer styles

This is my result so far

With Pen Tool I will create a small triangle with a dark grey. I will place the layer under the big white layer

Then with the same tool and color I will create another shape

With this last shape I will create a nice shadow right under the button. To create a smooth shadow you need to go to Filter > Blur > Gaussian blur. In the Gaussian blur window I will use the following settings

Now I will add some images and text

In the image from above you can see that I have placed also another button for the read more. I have used the same techniques, but for the button I have used a darker gradient. You can see also some lines. If you don’t know already there is a tool called Line Tool. If you set the weight to 1 pixel you can create the same lines like mine.
While you draw the line hold down your Shift Key. In this way you will create a perfect horizontal line.
My line is made from two lines with different colors. Always the top one will be darker the bottom one it will be white.
I will create the second post right under this one

On the right side I will create a new shape with Rectangle Tool. I will use this shape for our sidebar. Here you can place advertisements, Google ads, or any other things you want.

You can see that I did not aligned the sidebar with the featured post. this is because I will place there some social bookmarking icons. If you search this blog you can find different icons for social bookmarking sites in vector format

On the sidebar I will place some banners on the top

On the bottom of the post I will add some other details. for example you can add some of your best post

You can see in my previous image that I have used one more time the thin lines
On the bottom of the layout I will create a big shape with a dark gradient, and there I will place some text and images
This is my final wordpress theme. I hope you like it

Want to download this layered PSD layout ? Register for a VIP account and download our entire collection of downloads: 70.000 Items
Want to save almost 50% when you purchase a VIP account ? Register for one year and you will bring down the month-to-month cost to around 5$

We offer self paced 70-642 training program to help you become expert in web designing.  Download expert 640-822 photoshop tutorials and 70-649 demos to learn about wordpress themes and photoshop plugins.

Download

Responses to “Design a light wordpress theme in photoshop”

Trackbacks

  1. 37 Inspirational and Detailed Wordpress Theme Design Tutorials |
  2. 60 Web Design Photoshop Layout Tutorials From 2010 « Huy Nguyen's Blog
  3. 12+ Tutoriais de Web Design
  4. 60 Web Design Photoshop Layout Tutorial |
  5. 15+ Awesome Tutorials for Creating Website Layouts in Photoshop | WebFlu.net
  6. 25 Helpful Photoshop Tutorials for Web Designers | [Re]Encoded.com
  7. Web Tasarımcıları İçin 25 Faydalı Photoshop Dersi | Tasarim8.com
  8. 25 Helpful Photoshop Tutorials for Web Designers | W3new.com
  9. 80 Fresh Photoshop Tutorials For Creating Awesome Websites | Creative Nerds
  10. Anonymous
  11. Web Tasar?mc?lar? ?çin Yararl? 25 Photoshop Dersi | Her Bi Şey var bu sitede
  12. List Of Web Design Tutorials Perfect For Beginners
  13. Best of Web Layout Design Photoshop Tutorials
  14. Fresh Website Layout Tutorials Created in 2010 | Joel's Designs

Leave a reply

.