convert PSD to website

Question

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

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 2

There are a number of automated services that convert PSDs for you:

• http://converxy.com
• http://psd2htmlconverter.com/en/
• http://www.psdtoweb.de/
• http://csshat.com/

However, you might also want to consider a service-based approach as well. There is a thriving community of professional slicers out there (just google "psd to html" and you'll see what I mean).

You might also try to redesign from a program or framework such as:

• http://html.adobe.com/edge/reflow/
• https://webflow.com/
• http://www.ekomobi.com/en/home.html
• http://macaw.co/
• http://foundation.zurb.com/
• http://getbootstrap.com/
• http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

It really depends on your budget, your timelines and your skillset.

I'm a big proponent of understanding something really well before trying to automate it. So, like the other posters have said, slicing by scratch (handcoding) is very valuable, especially if you don't already understand it well. However, you might just not care to invest the time needed to achieve a good understanding of the subject. And, that's perfectly okay too.

I think that ad the end of the day, there is no "correct" solution. Different people have different requirements which will change the choice.

Answer 3

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 4

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.