Today lets try to create our own wordpress design using Photoshop. It’s a very easy step to create a wordpress design. But the most difficult part is to get a thorough idea about what we need and how to design. So lets try something today. This is a model theme. You can use this tutorial for getting your own themes.

So start with a new document of size 1024 X 768. This will be the base size for a website or a wp theme. Now a days the resolution is above this. So lets make it out in this resolution.

Now pick a foreground color (#dddddd) and fill it in the whole area using the paint bucket tool. This will be the background color for our theme.

Now we have to start designing the page elements. Take the rounded rectangular tool from the tool bar and set the radius of the round to 10px.

Now draw a single rectangle using the tool as shown below. Remember there should be some space at both the sidebars. This will act as the bas for our menu bar.

You can give custome gradient effects to this menubar. For that go to the layer panel and right click on the menubar layer and select the Blending options. There you can add the gradient effects.

Now it’s the time to add some menu contents. Just give some items such as HOME, CONTACT, PORTFOLIO, ABOUT etc. Leave a space in the right side to create a search box.

You can use the rounded rectangular tool and rectangular tool to create the other part of the page such as Slide bar, content area, Side bars, Footer etc.

Now lets have some effects to the content area. Choose the content area layer from the layer panel and go to the blending options. Add a small stroke with slight grey color. Please note that the color overlay should be white. Now reduce the opacity of the stroke to 50% for more efficient look.

So now we can go for a magical touch. Go to the Eliptical marquee tool and draw an ellipse as shown below.


Make a new layer ‘Shaddow’ (Layer>>New>>Layer or Ctrl + Shift+N) fill the ellipse black color using the paint bucket.

Now with this layer selected, go to the Filter >> Blur >> Gaussian Blur and make the changes as shown in fig.

Now make the Shaddow layer below the content area layer in the layer panel. Then bring the shaddow layer to the edge of the content area so as to get a look as shown below.

You can use this methode for the sidebar also and add some rectangular block with grey color filled, it may act as a advertise here button :)

Now you can add some data to the content area as I done. Now this is how the page will look like.

Now we can make some special effects to the sidebar. Select the rounded rectangular box and draw a box as show below. Go to the layer panel and right click on the current layer and select Rasterize the layer.

Now go to the rectangular marquee tool and make a selection as shown below.

Now press delete. Now you can add some cool gradient effects to this layer. Check the image below for a refference.

You can get some custome shapes from the tool bar and make something like this.

Now add some content to the slide bar also (This portion will preview the most recent post of the blog). You can add two icons to go the next and to the previous. You can make use of the custome shapes for this. Color overlay should be white and reduce the opacity so as to get a transparent look :) Now this is the current look of our page.

Lets do something on the menubar. Draw a small rounded rectangular box and fill it with some gradient. Place this layer below the HOME text layer. This will be the active page indication of our wp theme :)

Now make a small rounded rectangular box with light black color fill in the right side of the menu bar. This will be the search area for the webpage. You can use a lence image from the custome shapes to give more attractive look to the search box.

Now you can give your Blog’s title and tag line above the Menu bar. So we are finally at the finishing touch of the webpage.

Have a look at your page and check for any changes.

This will be the final look of our webpage.

This tutorial is just for a initial purpose only. That’s for the beginners. We will bring some more good tutorial on this category soon. So see you soon. Enjoy the post.




Related posts:

  1. Create Your Own Twitter BG
  2. Create a Welcome Page for your Facebook Fan page
  3. Get the Smashing Revolution WordPress PSD Theme
  4. Top 10 Tutorials to Replace Flash With jQuery
  5. 30 Most Wanted WordPress Plugins