Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Diane Houghton
Diane Houghton
5,773 Points

convert .psd file to wordpress theme

Is there a tutorial on converting a .psd file to a wordpress theme?

5 Answers

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Thanks, I'm actually looking for a teamtreehouse tutorial, so I can learn how to do it.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> I'm actually looking for a teamtreehouse tutorial

There isn't a tutorial like that on Treehouse and to find out why check out Nick Pettit's article psd to html is dead over on the Treehouse blog.

Diane Houghton
Diane Houghton
5,773 Points

Thank you, this article makes sense as far as using a psd design as a blueprint for HTML and CSS. Then I would follow the tutorial on creating a wordpress theme from scratch? Or would I use a theme like blankslate?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'd suggest following the with Wordpress Development track.

Diane Houghton
Diane Houghton
5,773 Points

Thanks, James, that's what I'll do. I'm going to do some php tutorials first, and then follow the wordpress development track. Thanks for your help.

Brian Pirouet
PLUS
Brian Pirouet
Courses Plus Student 1,653 Points
Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

there are many tutorials out there, how complex is your theme?

First, you will want to convert your PSD to HTML then you take your HTML & CSS files and add those to your WordPress PHP files.

Can you post a screenshot of your PSD so i can see how complex it is, if it is not too complex i would be willing to do it for you, for free of course.

It gives me more practice and also lets me try out my coding skills more.

Brian Pirouet
PLUS
Brian Pirouet
Courses Plus Student 1,653 Points
Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

not a problem, don't think TeamTreehouse has one for doing this though. good luck all the same, post in here if you get stuck with anything, i can help out :)

I would recommend learning to convert PSD to HTML first as you won't be able to convert to WordPress without this method in the first place.

Once done have a look here:

http://teamtreehouse.com/library/how-to-build-a-wordpress-theme

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Thanks!

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

There's no real learning process to it. A PSD is just a picture at the end of the day. Imagine you'd hand drawn the design.

All you go to do is start with the biggest things in the design and work down to the smallest as everything is layered upon one another. The advantage to having a PSD is that you can use the marquee tool to get spacing and sizing spot on as the designer intended. Be it 1:1 ratio or working out the scale of the sizes etc.

This is where the skill and the point of a developer comes in. Knowing how to take something visual and turn it into code to reproduce that visual concept exactly. The only way to do this is to practice, find what works best for you and get to work.

Don't forget, use as little code as possible. The less code there is, the simpler the page is to load and the quicker it is. It also makes coming back to it to edit much easier. If you have a tonne of code to do something seemingly simple, then you're probably "hacking" your way to a solution and it's going to break or be a nightmare to work with in the long run.