Section 1 – Designing a WordPress theme in Photoshop
Designing a theme for WordPress in Photoshop is straightforward. In our example today, we will create a simple two column fixed width theme. Before we start, we need to decide what the width of our theme will be. I chose a 980-pixel sixe because it will fit on most screens without the need to scroll form side to side, as most screens today are at least 1024 pixels wide.
To get started create a rectangle that is 1024px x 768px. This will serve as our background for the theme. You can color your backgrounds or even add an image. For our tutorial, we will color the background blue.
Next, we will layout the theme container. Later this will be defined in the web pages we create, but now let’s add a white rectangle 980pxx768px. This represents the themes overall width and the container that will hold our theme.
Now that we have the basic layout done let’s look at the different sections we will be creating. Our theme will have four basic sections:
- Header
- Content
- Sidebar
- Foote
We will add each section to our theme layout starting with the header. For this tutorial, I have decided to create a header that is 175px tall and I will add 13px above the header also. To do this I will create a box that is 188px x 980px aligned with the top of the page.
I now have the basic header shape in place. Remember I added 13px for a border at the top so I want to represent that in my design. If you have an image for your header, you can now format it to the right dimensions and paste it into the PSD like this.
I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.
I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.
That is it, we have a design we can now transfer to a theme. Before we start coding, let’s look at some of the basics of a WordPress theme. [Read more...]
