Solved

how to get from .PSD to wordpress theme

Posted on 2011-02-19
3
743 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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

803 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