Converting an web page image layout to HTML

Question

A graphic designer created a web page design and I have it in PSD now.

What are the tools or techniques used to easily convert this image into HTML.

Answer 1

Use the Slice Tool to slice up the psd file into chunks of graphics that can be layed out on a web page. Then choose Save for web... to save these chunks into individual jpeg, gif or png files.

Answer 2

check http://www.bolducpress.com/tutorials/from-photoshop-to-html/ for a great tutorial about "slicing" which is one technique to "convert" a psd-file to a webpage.

Answer 3

to get the best result you need to code up the html yourself integrating the relevant graphics when needed. if you are unable to do this yourself there are quite a number of companies that will take a PSD and code it into HTML for you. One example being www.psd2html.com - do a search on google for more examples.

Answer 4

Have it sliced if you must, but better build carefully planned HTML by hand, or have it done for you.

There are slicing tools that others will be able to tell more about. I personally think there is no better way really than creating the basic HTML and CSS by hand. Because what you build now is the foundation for your entire web site, and any future extensions to it, it is really worth the effort.

If you go this route, you would pick a normal HTML editing program or platform and sketch out the basic structure according to the layout you have.

If you have little experience with HTML and need to get the job done, try out a slicer. If you have time and/or money, work it out by hand, use a high quality template as a basis, or have it done professionally.

Answer 5

Whilst I would agree with all of the comments above, if you want to do this yourself or don't have the knowledge/funds, you can do it with the likes of Dreamweaver/Fireworks, but as everyone has said, you won't get good HTML and unless you use it properly you'll have problems if you ever make changes to your page as changing sizes will break your layout.