Design A WordPress Theme, Part 2: Slice a PSD

This is the second part in a series called “Design a WordPress Theme“. Here is a list of all the parts in this series.

1. Design a WordPress Theme: Designing the Layout
2. Design a WordPress Theme: Slice the PSD (currently reading)
3. Design a WordPress Theme: HTML/CSS
4. Design a WordPress Theme: Convert HTML/CSS to a WordPress Theme
5. Design a WordPress Theme: Advanced Code

Now that we have our layout ready lets get it sliced up so that we can create the HTML/CSS with the images (that’s Part 3).

Since the design of the theme does not rely heavily on imagery the slicing part of this project will be very easy. This is something which I would actually recommend to a lot of new web designers. Go easy on the imagery, once you have mastered your HTML and CSS you can then take your design, and markup, skills to the next level.

To Sprite or Not to Sprite?

A lot of professionals out there swear by sprites, I use them as well, just not every. single. time. Plus, when it comes time to update your theme, or do customizations, editing your sprite can at times be a royal pain.

So I tend to go half and half on this one.

Use sprites for images that are not intended to repeat and slice the others as you normally would. Of course, you can do it any which way you like. In the end, what should matter is that you have done everything to make your theme as user friendly (i.e. load faster) as possible and for it to be easily customizable by anyone else.

Slice and Dice

The main areas that need to be sliced for this theme are the navigation and tab gradients. The inner post pages will be using some social media icons that go into a sprite and that’s pretty much it. See how simple it can be if you plan a step ahead to try and rely mostly on CSS to make your design look pretty?!

The easiest way to get your gradients sliced is to merge the layer that it is on with a new/empty layer. Then select the whole new layer, create a new document and save it. That’s it. Confused a bit? Here’s a step by step:

• Select the layer that needs to be sliced

• Create a new layer, and select it too.

• Merge both the layers with CTRL + E (CMD + E on Mac I believe)

Now select the whole layer with CTRL + A and create a new PSD document.

You will notice that the width is very large, in my case it was 960px, since I don’t want the gradient image to be that wide (as we can use CSS to repeat the image) I’m going to change the new document width to 1px.

Now paste your image in the new document and you have your sliced navigation image. In my case it’s 1px by 40px.

<- That’s it right there.

You can just as well use the slice tool but I get by faster with this method. There are many who will disagree with my method and I’m fine with that, in the end it matters what works for you.

Simply repeat this step for other gradient type images, in my theme’s case it was a total of 3 gradient images.

Creating a sprite

Now let’s create a sprite for our social icons. For my theme I used these icons from KomodoMedia.com.

The icons are 16px X 16px. So I created a new PSD document 16px wide and 146px high, to accommodate more icons below each other for my sprite.

Now all you have to do is place the icons below each other, don’t forget the spacing in between which was 16 pixels in this case, and save your social icon sprite.

It should now look like this -

Cool! Now we’re done!

That’s about it for this theme, the rest of the magic happens with CSS. Which will be posted in Part 3, Writing the HTML/CSS. (subscribe up to my RSS feed for updates)

• Published: January 6, 2010
• Posted in Blog
• 2 Comments »