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.

Kirimia

Photoshop is not an appropriate tool for creating a web design. It assumes things about print that no longer work for web. – Twentyfourmo

Oh, and by the way: using gif nowadays is just a really bad idea. Use png instead. (Some restrictions apply – but in most cases, png is the way to go.) – Floreneflorentia

According to the Stack Overflow FAQ (stackoverflow.com/faq) you should ask things like this in Doctype (doctype.com). – Darra

@Joel: Its fine for creating the composite to serve as the basis for the graphics - and when most people who arent already in the industry think "web design" they think of the graphic design side more than the code side. Photoshop is the industry standard tool for the graphics side of it - much to my chigrin as i much prefer fireworks for making composites. In my opinion Photoshop is and always will be a "photo editor" not suited for layout whether print or web. It should always be used in conjunction with InDesign/Quark, Illustrator or Fireworks - but never as the acutal layout application. – Ashia

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.

Ashia

Answer 2

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/

Gist

Thank you, i'm gonna watch these links. – Kirimia

+1: Thank you; I was going to post a question about "How can I convert a PSD, sliced-up or otherwise, to an idiomatic webpage that is not table-smell-centric and doesn't use e.g. "display: table-cell" to simulate tables with DIV's. I might still ask a question, but I think the second link provides a top link that answers my question. – Leslileslie

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.

Jealous

Answer 4

This may help you, it walks you through the process.

Astronautics

Answer 5

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.

Brynne