PSD to HTML conversion

What is PSD to HTML or PSD2HTML conversion and how is it performed?

PSD conversion or PSD2HTML or HTML/CSS conversion or PSD into HTML with other words means a conversion of the web template or a conversion of the web design. The web templates or the determination of the front-end look are usually performed by the web designer. Then he saves the final template in a form of some image file (PNG, JPG, GIF, BMP ...). Mostly it is a Photoshop PSD file. From this image files of images we than have to cut individual pieces (thumbnails) and program the site with HTML, CSS and if needed with JavaScript code. The HTML code is more a framework of the website. In the CSS code we determine the colour of the text, background colour, font size, where a particular element (text, image ...) should be shown on the page, how high should it be, how long etc. JavaScript is more used for this, what happens after a click on a particular element, what when the mouse goes over, basically it makes the page more lively. We also can use different JavaScript libraries like for instance jQuery, mootools, prototype etc, which make JavaScript programming easier and faster.

Who can perform a PSD conversion?

A PSD conversion can perform everyone, who knows Photoshop, HTML, CSS and possibly JavaScript. For a good conversion it is also necessary to know the troubles of browsers, as much as possible simplify the code, write it semantically, write it simultaneously for SEO, comment it, close it right, write it in a way that additional work (CMS integration) will be as simple as possible, use the right request on the right spot, be very consistent and accurate, make CSS sprites, reduce the number of HTTP requests and then test everything in at least 8 browsers on Windows operational system and at least in the Apples Safari browser on OS X.

What happens after the PSD conversion?

After the conversion the files can be loaded onto a server and the page is done. Larger sites and sites, which content is often changing, are usually made with a CMS. This enables the user to edit and add content to the site online without any kind of programming knowledge, in an editor, similar to Microsoft Word. The final conversion is therefore mostly integrated in some kind of CMS like Wordpress or Drupal.

Where do we follow new technologies, new standards and news on the front-end?

Some read the news on facebook.com, some the paper New york Times and we sift through Smashing Magazine, Nettuts, CSS Tricks and a lot other similar magazines. From these we gain a lot of information and therefore keep step with new technologies and standards.

Do you have any default template, which you start the work with, so that you don’t always start from scratch?

Yes. We designed our own template for HTML, CSS and JavaScript, which we usually start to work with. It is made after HTML5 boilerplate standards. You can look at it, use it or even change it as you wish. You can download it HERE.