Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

how to get from .PSD to wordpress theme

Posted on 2011-02-19
3
Medium Priority
?
780 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 1000 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 1000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
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…
Suggested Courses

578 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