convert PSD to website

Question

Hi there' I'm learning web dev and I am already stucked at some point..

How do I convert a PSD template to a html/css website ?

I've cropped all part of the image and saved them in .gif separately, but then ? Do I have to manually place them in a dreamweaver empty template ? I thought there was an automated way to do so..

Also, I've tried "Save for web and devices.." but when saving, it creates a .html file and a single image which contains every element ?! I expected several images so that I could rearrange them in dreamweaver.

Answer 1

Yea, web design doesn't work by magic. The proper way to do is to manually write the actual code that positions the elements, not just smack them in place in Dreamweaver. There's plenty of good tutorials out there, check these out for example:

• http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/
• http://www.devwebpro.com/creating-css-layouts-the-best-tutorials-on-converting-psd-to-xhtml/

Answer 2

1. While certain applications advertise/provide automation of the "conversion" process from composite graphic to web layout you want to avoid using those features. they will cause you more trouble than they are worth. Especially if you are going to use CSS for layout (which i strongly encourage). Thats not to say those features dont have some limited valid usages (more on this in point 2) it just that they arent going to magically generate your site from a graphic.
2. In order to use "Save for Web..." you need to use the Slice tool to slice down the image into the different images you need for layout. Then when you do save for web and deices with html it will export the html/css and the images. Again this isnt magic and chances are youre going to have to completely redo most of what its done for you - making it useless for anything more than slicing a certain area of the layout (say a single menu).

There isnt a fully automated way to do this, generally speaking because depending on what you need the layout to do you have to go about laying things out in different ways and while its theoretcially possible to account for all the possible potential requirements in a nice little export GUI its not really feasible.

The bottom line is to do this you have to learn HTML/CSS. And the more you learn the more you will hate Dreamweaver (at least in "layout view"). Garaunteed.

Answer 3

Welcome to reality.

You'll have to slice and dice yourself (well, slice and dice the image yourself, but don't slice yourself no matter how much you want to), and then place each individual part in your HTML or template.

Answer 4

This may help you, this walks you through the process:

From PSD to HTML http://www.bolducpress.com/tutorials/from-psd-to-html/