February 7, 2012
Having worked for HTMLcut for a year as a marketing manager assistant, I’ve read and learned a lot about PSD to HTML conversion. Usually my position doesn’t imply too deep immersion in technical details of coding and design processes. But I have always been curious 
.
When I was looking through How to convert PSD to HTML – The best option, I had a question that have probably occurred to every reader of this article: “If there are free services, why pay money for the conversion?” I can assume that they might be not the best quality ever, though it might be completely enough to launch a simple website for such a non-techie gal like me. So, maybe it is reasonable to use free PSD to HTML converters and then just “proofread” resulting files for mistakes?
The question was pushed to the back burner for the time. But then HTMLcut published another article What is the best PSD to HTML conversion tool? The 6 standpoints, where this theme was touched again. This time I couldn’t calm down my curiosity and decided to try out free PSD to HTML conversion tools to finally find out whether it is possible to get a good markup being almost a total newbie in the web design field.
Naturally, after one year of work for HTMLcut my technical level has enhanced a bit, and I started my experiment with the following background knowledge:
- HTML (basics) and CSS (very-very basics)
- PSD to HTML conversion process (mainly learned from our articles)
- Can test a markup for quality: Cross-browser compatibility (everyone can run a website in different browsers, just download and install them) and W3C validation (with the help of online validators)
I asked the HTMLcut managers to give me a design which was usually used as a standard test for applicants for HTML/CSS coder positions. The requirements to its conversion were as follows:
- Fixed website width
- Horizontal alignment – center; vertical one – top
- Use dynamic blocks for content
- Standard fonts
- Valid and readable code
- Table-less .css in a separate file
- Cross-browser compatible with: IE6-8, Firefox, Opera, Safari, Chrome
Experiment: Day 1
When googling for “free psd to html” I’ve got… No free online services at all! (except of the one that should be downloaded on my computer and another showing only a preview of a markup for free). But lots of step by step tutorials and PSD to HTML companies (prices on their services vary from 39 to 150 USD and more). I quit on the third page. Damn, fiasco 
Experiment: Day 2
OK, why not use a tutorial? Really, there are a lot of them on the Internet. At first glance almost all are free. Obviously, there should be people out there who learn from the tutorials. I’m not a complete dummy, I can learn fast too .
.
But my enthusiasm was also crashed by the reality. I spent 2+ hours searching for the most easy to understand tutorial to start my learning curve with.
What was found:
- Tutorials intended for total newbies are still for money and only previews are available
- Free tutorials assume much more basic knowledge than I have
- To convert PSD to HTML I would need special software to be installed, consequently, I would need to learn how to use the software properly
Conclusion: I don’t have that much time. Not my option .
.Experiment: Day 3
This time I searched for “free psd to html converters”. Strange, I guessed there would be lots of automated PSD to HTML conversion tools. Nope. I found only two really free online converters, and a few services where you can choose and download an archive with a ready-made template.
Nevertheless, today I have a promising result: two .zip archives from free online converters within 2-4 minutes and the downloaded archive with an e-commerce website template. By the way, I was not asked for any requirements to the markup and on the website you wouldn’t find a line about what standards will be applied to it. But I was welcomed to leave my response, so they would enhance their service quality. Nice, anyway .
.
Truth be told, I’m not competent enough to test correspondence of the requirements to the final markup. So, I sent the archives with the automatically converted PSD to HTML markups to the HTMLcut’s coders asking to give me a quick answer (I understood that they could be more or less biased so I thought that the lesser time they would analyze it, the better) to the following questions:
- How do the markups correspond to the requirements?
- What is done really good?
- What is done bad?
- How much time is needed to fix them (if necessary)?
- Can the markup be used to launch a website?
Technical Reference
Unfortunately… Frankly, I didn’t want to start this paragraph with that word and tried to stay optimistic to the end. But… Unfortunately, the reference from the technical staff was negative!
It is a known fact that coders would rather bite themselves than praise someone others code. That is why I decided to disregard all emotional comments regarding automated PSD to HTML converters and wrote down only facts.
Considering results
As you remember, we had two markups and one e-commerce website template.
Converter #1
- To use this service, the design should be simpler or prepared with the thought in mind that the converter doesn’t work well with layers
- Problems with color recognition. The background color of some blocks became black instead of blue, some had lost it at all
- Textual blocks are added as images
- The converter couldn’t recognize where there is a menu, a header, or a link
- Not search engine optimized at all
- The markup size is 1.42 Mb, which is ten times more against the hand-coded version!
The verdict: It cannot be used even as a static website.
Converter #2
It is not a joke: the .zip archive didn’t contain any files . Looks like the converter simply doesn’t work.
. Looks like the converter simply doesn’t work.Free e-сommerce website template
It turned out to be a trite installer like WordPress has.
Conclusion
When starting my experiment, I believed in much better results. I personally use a lot of free online services, and their quality is rather high. Automated PSD to HTML conversion turned out to be a hard task for the scarce number of available online resources.
Personal summary. Trite but true: One should deal with things he or she is pro in. Being a technical layman, it is almost impossible to launch a website without money investments in design and PSD to HTML conversion (or time investments to learn from scratch). On the other hand, we don’t launch websites every day, so it would be a one time capital expenditure in the business.
Have you ever tried free PSD to HTML conversion tools or services? Share your experience in comments.
About the AuthorValerie Watts: I’m a working mom with a beautiful 2.5-year son on the board. It isn’t easy to combine work and family, though it is great when you can improve your skills both in business and cooking
.
- No problems with colors. Photoshop layers’ styles need not to be rasterized.
- It converts text to texts, not to images. Moreover, it preserves all the text styles. Even text shadows.
- It converts underlined texts as links automatically. Also it recognizes email links.
- You can create menus using special tags in the layers names.
- You can create h1..h6 headers, you just need to mark them with special tags in layer names.
- It even makes some SEO optimization for you. It extracts title, description and keywords from the PSD file and inserts it in the resulting HTML.