Solved

how to get from .PSD to wordpress theme

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

I want to start by talking about the use of plug-ins for WordPress. I started a web-site for a company I was working for a few years ago; I had extremely basic knowledge of HTML. I am a Graphic Designer by trade so I invited the opportunity as a cha…
Transferring a wordpress site from a host or local dev server to another host can be a pain. So I've included my steps on how I have accomplished this task. Steps include an assumption that you have Cpanel access or Ftp access.. If you do not hav…
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.
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…

856 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