?
Solved

how to get from .PSD to wordpress theme

Posted on 2011-02-19
3
Medium Priority
?
772 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: 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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
Suggested Courses
Course of the Month10 days, 18 hours left to enroll

770 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