Solved

how to get from .PSD to wordpress theme

Posted on 2011-02-19
3
719 Views
Last Modified: 2012-08-14
Hi there,

What is the best way to get a psd file converted into a WordPress theme? I know there are many different services available but I'd rather try and do it myself.

Any help would be greatly appreciated.
Thanks.
0
Comment
Question by:ftg-web
3 Comments
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 250 total points
ID: 34932576
There isn't an easy way. The best way is to slice the images up. Then use <div> tags to define certain areas (wrapper, body, header, logo, menu, post, sidebar, footer). Then create an HTML theme out of it. You can then download a WordPress blank framework like:
http://speckyboy.com/2010/03/22/10-blanknaked-wordpress-themes-perfect-for-development/

The next step is to notice the name of the divs in the blank theme and make sure your divs are the same name and in the same position. If not re-arrange them. This is an extremely basic description. This isn't an easy process when you are just learning WordPress. There are a few good tutorials on the subject that will give you a head start though,here is one of them:
http://www.pearltrees.com/#/N-s=1_2548513&N-f=1_2548513&N-p=18511167&N-play=1&N-u=1_250293&N-fa=2548513

A PSD to WordPress Tutorial:
http://net.tutsplus.com/articles/news/the-best-psd-to-html-to-wordpress-video-series-available-new-plus-tutorial/
0
 
LVL 26

Accepted Solution

by:
David Brugge earned 250 total points
ID: 34935478
As an alternative method, download a theme that you like and locate the images folder. Now do a screen grab of the wordpress site with the theme loaded.

Using this screengrab as a background, add the images from your images folder. As you drag an image onto its own layer, give that layer the same name as the image that it contains.
If an image is a repeating tile, you may want to duplicate that layer and drag and copy it so that you can visualize the repeating pattern.

Now, arrange the images to match the screen grab.

With this structure in place, alter the images to suit your needs.

Finally, copy the modified image on each layer and save it using the layer name.

In the case of tiled images, make the layer with the single tile active and use the magic wand to select the empty space. With the selection marquee still active, make the layer with the duplicated tiles that you modified active and delete the part in the marquee. This will leave you with a tile slice that is the same size as the original.

You should end up with a wordpress theme with all of the code in place to place your images in the exact location that they need to be.

You can then finish up by adjusting any CSS colors necessary to match your artwork.
0
 

Author Closing Comment

by:ftg-web
ID: 34965187
Thanks Guys! I appreciate the help and guidance.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now