PSD to HTML

0amanda

New Member
Hi all, I'm new to web design. I wanna do a new theme for my blog (powered by wordpress) and I've finished the design with photoshop. Now I wonder how to convert the PSD to HTML? Any help?:(
 

suz

New Member
You could try to find a free wordpress theme with similar layout to the one you designed and substitute their images with your images.
 

lookgood_cool

New Member
after designing in photoshop you slice it in photoshop with slice tool and save it in save for web option. with slicing you could cut the images into pieces and you use dreamweavour software to convert into html coding - either use table layout or AP DIVS.
CSS also best method make layout
 

Lally Nettie

New Member
you got to slice your images up and then insert them into a <td> or <div> tag to make it appear in a html file, also these images have to be converted to a gif, png or jpeg.
 

inline853

New Member
there is no simple way to do this. you cant use Save for Web in ImageReady cause you need to code it in CSS for the WordPress theme.

Heres a quick guide of how to do this:
Learn CSS
Learn how to slice PSD
Slice up the layout.
Learn how to create WordPress theme.
Put slices in approriate divs
Voila! You're done.

All sarcasm aside there is no easy way to do this. Hire a wordpress designer to slice it up and code it for you. Be prepared to pay upwards of $1500 for a good designer
 

PixelPusher

Super Moderator
Staff member
Like many have said, you need to cut up your PSD image/design with the slice tool. One method I have found to work very well, is using the guides to set up your slice cutting. Meaning drag out guides from the ruler on the left and top of your window and set them to the areas you will cut with the slice tool. Using the "Snap" feature will also make the cutting easier as the slices will snap to the guides. Try to cut slices in area where say two colors meet, or any other logical/visual border exists. Ideally you want to use as little images as possible, not meaning make large slices, but use HTML to for text (unless it is an elaborate font) and large flat color areas. There is no point making your site larger with images that can be created the same with code.

W3 schools would be a great training place and there are many others, like this:

http://www.metacafe.com/watch/564070/tutorial_photoshop_slice_tool/.


If you are using pre-CS3 version of PS you will have Image Ready and that will help will the HTML setup. However I prefer to gather all my slices and then build it in DW (dreamweaver).
 

conor

New Member
wordpress themes are tough for beginners. they include a lot of php, i recommend just geting the standard kubrick theme and editing it to your needs. Try to not touch the php code unless you know what your doing - or else you could mess something up.
 

Mirronto

New Member
one more way - simply use one of the so-called psd-to-html or psd-to-wordpress services.

Good luck
 
Last edited by a moderator:

Phreaddee

Super Moderator
Staff member
in fact contrary to what has been said here, using psd slices is poor technique and creates useless unusable css. it either places it as a table or AP elements both of which are not the preferred way of doing things.

I know it'll hurt, but you simply must use css and steer clear of ANY program that claims to be able to do it for you.

put it this way, you've just spent hours slicing a really complicated psd. then your boss says he wants it green instead of blue? what do you do? start again and reslice all those images with green now instead of blue.
or edit a few lines in your css changing the appropriate elements from green to blue?
if anyone needs any help with this I'd be more than happy to show you the CORRECT way, just a straight cut, slice, auto div creation and bam theres your webpage does not do you or your company any professional service. it shows only one thing - that you do not understand css, and you are behind the eight ball, coding in an archaic way. you'll lose the job to someone who can actually take a psd and create a webpage from it. not just slice it.
 

Kat- EtherClear

New Member
If you can format the images into functioning HTML, it's simple enough to slot in the PHP code to turn it into WordPress. You just need to make the right files for page.php, single.php, index.php etc, as in the default WordPress theme's files, and copy in the basic code, such as the if and else codes to show the posts.

It's simple enough once you've studied WordPress for a bit. I got up to making a theme from scratch but was a list of words with no CSS, but if you've got that, it's easy to slot the PHP in.

Good luck!
 
Top