How to create a wordpress theme in Photoshop
Hello and welcome to another tutorial here on trendyTUTS.com
For today I will create an wordpress theme which can be used for a personal blog, but in the same time for a variety of blogs such as business, showcase your product/services, etc.
In a couple of days we will integrate this design with wordpress, and we will create an wordpress theme with the psd file from this tutorial. This wordpress theme it will be available to our Premium Members.
Here is my final result:
To create this template I have used:
- Basic tools in Photoshop (Rectangle Tool, Ellipse Tool, etc)
- Some icons from our free web vector icons pack
Let’s start the tutorial. Open Photoshop, set the background color to: #dcdcdc and create a new document 1100 by 1570px.
Than using Rectangle Tool, create this shapes. For each of them I have added dimensions and colors. Please see the image bellow
Step1 – Creating the top part ~ logo and navigation
With Type Tool (T) I will write “WordPress Theme” and tagline: “design by trendyTUTS”.
For WordPress text, apply this layer styles
Having Type Tool selected, add the links on the right side:
To see my result and what kind of fonts I have used, please see the screenshot bellow
Step2- Creating Featured Area
This one is really easy to create. On the right side I will add an image with some of my layouts and on the left side with Type Tool I will add some text. Please see the screenshot bellow to see what fonts I have used and to see my result for this area
Step 3 – Creating the content area
To create the content area, I will select first Rectangle Tool and I will make this shape:
With Rectangle Tool I will create another shape. This one it will be used to create a shadow on the top of the shape created in previous step.
Then, make sure that you have this shape selected, and add a layer mask (please see the screenshot)
You should have something like this now:
Do you see what a smooth shadow we have? In the same way I will proceed for the bottom of this shape.
Next, I would like to create another cool shadow, but this time I will create it for the left corner of the shape.
First I will select Pen Tool and I will create a triangle
Then I will go to Filter>Blur>Gaussian Blur and I will apply a gaussian blur of 3.5px
I will proceed in the same way for the rest of the corners
Here is my result:
Next I will add the content. With Rectangle Tool I will create a shape. Dimensions: 291×285 and I will apply this layer styles:
Next I will select Rounded Rectangle Tool with a radius of 5px I will a button and I will apply this layer styles:
On the right side I will create the sidebar. I will create them in the same manner that I have created the blocks with content
At the bottom I will create the pagination
Step4 – Creating the footer
Well the footer is already created. With type tool I will add the text for footer.
Here is my result:
Want to Download the Source File including including the WordPress Theme (available soon)?
In order to download the source file you will need to become a Premium Member.
Already a premium member? When you click on the download link please make sure that you are logged in.
The tutorial is finished now. Soon this coded WordPress Theme it will be available for our Premium Members.
Follow us on twitter if you’d like to know when we publish new tutorials.blog comments powered by Disqus