Creating a WordPress Theme (Part 1): Photoshop

In these series of posts I’ll explain how I created my blog’s theme. I’ll start with the basics and in the future will come up with more complicated stuff. Please leave your comment. I’ll be happy to hear from you!

In this post – Part 1 – we’ll start with the design in Photoshop. We’ll start with the basic – inspiration – and go through the entire process of building our design. I’m more a developer than a designer, but I hope I’m able to explain everything properly.

Looking for inspiration

Our first step in the process of creating a new theme is to find out what we want and how we want. If you have a customer, with a quick discussion you’ll be able to find out where to start. In my case, as this is my personal blog, I’ll be the customer. So I’ll start with something I like, nature. From that we can think about green color.

From that we can start looking for inspiration in the web. Google it. Try searching for nature images and, specially, websites that uses the green color. Just try searching “green websites”. You’ll get lots of relevant results with listings that will help you find some inspiration. Another thing that will be interesting is trying one of those color scheme websites, like http://colorschemedesigner.com/. In this website you’re able to select you preferred color and check what color scheme would be good for your. I got this result:

Color Scheme Designer

Color Scheme Designer Result

The colors are #002c00, #0d330d, #004400, #28A228 and #49A249. I’ll use this as a starting point, but I’ll probably change some colors.

The next step, sketching, isn’t mandatory (neither the Photoshop design). But making a manual draft quickly helps to get the ideas flowing. Trying it a few times is a great way to create a concept of your design. Here is my sketch:

Design Sketch

Design Sketch

As you can see, some things turned out differently from the sketch.

You can use the 960 Grid System paper template when you do your sketch. Or any other, check out this selection:Useful (Offline) Utensils and Toolkits for Designers.

Photoshop

Now we’re going to Photoshop. I divided this part in Background, Structure, Texts, Sidebar and Icons and Buttons. To start our design we’ll use the Photoshop file that comes with the 960 Grid System (http://960.gs/). We’ll use 8 columns, 620 px, for the main area and 4 columns, 300 px, for the sidebar.

960 Grid System Template

960 Grid System Template

Background

I decided to use a dark green for the background. Over that, in the header, I’ll add a radial gradient with a light green. This will add a nice effect to the header.

    1. Select the color #002c00.
Background color

Background color

    1. Select the Paint Bucket Tool (G).
    2. Select the Background layer, already available in the template.
Apply the Paint Bucket Tool in the Background layer

Apply the Paint Bucket Tool in the Background layer

  1. Click in the document to paint the entire background.

Now let’s add the gradient, which will provide us the header effect.

    1. Copy the Background layer creating a new layer that can be called Background too.
Create a new Background layer

Create a new Background layer

    1. Right-click in this layer and select Blending Options. Add this:
Gradient settings

Gradient settings

  1. Try to position the gradient center near the top of the design. Otherwise the blog contents will be over the gradient and we’ll not be able to see any effect.

Structure

Lets start with the structure definition from the biggest parts and detail it as we go. First let’s do the content area and the sidebar border.

    1. Select the Round Rectangle Tool (U), with the following settings:
Round Rectangle Settings

Round Rectangle Settings

    1. Select the white color (#ffffff).
    2. Create a new layer (name it Content).
    3. Draw a rectangle from the end of the gradient to the end of the document (use the guides to align at the left and right – start in the first guide and end it in the last one).
    4. Right-click this layer, select Blending Options and add a stroke with the following settings:
Content layer Stroke

Content layer Stroke

If you haven’t done it yet, it’s interesting to remove the template’s rectangles. To do that just hide the 12 Col Grid layer.

Next, we’ll create the menu and the sidebar. For the menu:

  1. Create a new layer and name it Menu.
  2. Select the Round Rectangle Tool (U) (with the same settings used before).
  3. Draw the menu starting in the second column with the length of 6 columns.
  4. Right-click the Menu layer, select Blending Options and add the following:
Menu gradient

Menu gradient

Menu stroke

Menu stroke

Now the sidebar:

  1. Let’s create another layer, named Sidebar.
  2. Select the white color (#ffffff).
  3. Draw the sidebar in the last 4 columns of the model.
  4. Go to the Blending Options and add a stroke with 2 pixels and color #008800 (the same way we did the Content layer.
Result after Structure

Result after Structure

Texts

Now let’s add the texts, starting with the title.

  1. Select the Horizontal Type Tool (U), color #00d500, font-face Verdana and size 48pt.
  2. Type the blog’s name in the header.
  3. In the next line, with the same color and font-face, but with a size of 24pt, type the blog’s description.
  4. Place everything in the left side of the header.
  5. Select the Horizontal Type Tool (U), black color (#000000), font-face Verdana and size 24pt.
  6. In the white area, the blog’s content area, add the post title.
  7. In the next line, let’s add the post info using Italic, size 12pt.
  8. In the post info you can add also the comment number, using underline and color #008800, indicating a link.

In the post body (after the title and info), we’ll add the text and the post thumbnail.

  1. Create a new layer.
  2. Select the color #d2d2d2.
  3. Add a round rectangle (usando o Round Rectangle Tool (U)).
  4. Select the white color (#ffffff).
  5. Add another round rectangle, inside the previous one (step 3).
  6. Now add any text with font size 14pt.
  7. In the end, add another line with more spacing, with the text “Read more…”.
  8. Also add a line to separate different posts. It should be 2px with color #008800.

Here is the result so far:

After adding the texts

After adding the texts

Sidebar

In the sidebar, let’s add only two items. Later you could add more if you want, but I think this is enough for the design.

  1. Create a new layer where we’ll add the sidebar titles.
  2. Select the color #006600.
  3. Select the Rectangle Tool (U).
  4. Draw a rectangle with the same width as the sidebar and enough height for the title text.
  5. After some black space, add another rectangle. Same way you did the previous one.
  6. Now let’s add a Stroke of 2 px using the color #008800 (the same way we did with the Content layer). It will look like this:
Sidebar and Stroke settings

Sidebar and Stroke settings

The only missing thing in the sidebar are the texts, so let’s add them.

  1. Select the Horizontal Type Tool (U), white color (#ffffff), font-face Verdana, size 24pt and bold.
  2. Type a title over both rectangles.
  3. Select Horizontal Type Tool (U) again, now with black color (#000000), font-face Verdana and size 14pt.
  4. Type any text in each section.
  5. Remember to use underline and color #008800 for the links.

Result:

Finished Sidebar

Finished Sidebar

Icons and Buttons

To finish our design, we’re going to add the menu buttons and the icons. Let’s start with the menu:

    1. Add the “Home” text with a size of 24pt and yellow color (#ffff00).
    2. Create another layer and name it Selected menu.
    3. Place this layer behind the layer with the text Home:
Layer order for the Menu

Layer order for the Menu

    1. Draw a round rectangle (using Round Rectangle Tool (T)) with any color behind the Home text.
    2. Copy the style from the menu bar. To do that right-click in the Menu layer and select Copy Layer Style. Then go to the recently created layer Selected menu, right-click it and select Paste Layer Style.
    3. Go to the Blending Options and reverse the gradient:
Blending Options Settings

Blending Options Settings

    1. Now do the same steps (from 1 to 6) to create another button next to the Home button, but use the text “About” in green color (#00d500) without reversing the gradient.
    2. The last step is drawing a rectangle with the Rectangle Tool (U) and remove the round borders where it’s not necessary. It should look like this:
The Menu, so far

The Menu, so far

We’re still going to add some things to the menu. Let’s create 3 more layers, copying and pasting part of the existing layers.

    1. Select the Menu layer.
    2. Using the Rectangular Marquee Tool (M), select the upper half of the layer.
    3. Copy and paste the selection. Place it in the correct position over the menu.
    4. Right-click and select Blending Options. Use this settings:
Blending Options - Opacity

Blending Options – Opacity

Blending Options - Color Overlay

Blending Options – Color Overlay

  1. Now select the Selected menu layer.
  2. Using the Rectangular Marquee Tool (M), select the bottom half of the Home button.
  3. Copy and paste the selection. Place it in the correct position over the button.
  4. Repeat step 4 for this layer, but with the Opacity of 15%.
  5. Select the Additional menu layer.
  6. Using the Rectangular Marquee Tool (M), select the upper half of the About me button.
  7. Copy and paste the selection. Place it in the correct position over the button.
  8. Repeat step 4 for this layer, but with the Opacity of 15%.

Result:

Final Menu

Final Menu

Our next step are the icons. First we need to download them somewhere. I usually use the http://www.iconfinder.com/. Download the png files.

  1. Open each file individually.
  2. Select the icon with the Rectangular Marquee Tool (M).
  3. Copy and paste in your design document.
  4. Place them next to each other like this:
Icons placed

Icons placed

To finish it, let’s do the search form.

  1. Create a new layer named Search.
  2. Select the white color (#ffffff).
  3. With the Rectangle Tool (U) draw a rectangle at the right side of the menu bar.
  4. Then select the Horizontal Type Tool (T), with the Verdana font-face, 14pt and black color.
  5. Type “search” inside the white box.

And here is the final result of our design:

Final Result

Final Result

Conclusion

Now we reached the end of this post. We went through the process of creating a Photoshop design from scratch. As you could notice, I made some changes since I created the Photoshop file. As I’m used more to develop than to design, some changes are much easier to be done inside the code. I think each person has to find his balance between doing a more detailed design or fine tuning it directly in the code.

Well, I hope it has been useful. Thanks for the visit!

To download the final file in Photoshop format click here.