What Are the Best Tips for HTML to PSD Conversion?

Many website designers used Adobe® Photoshop® to create fast mockups of a website before committing the design to a HyperText Markup Language (HTML) file, and there are many programs that can convert a Photoshop® document (PSD) into an HTML document, but there are very few utilities that convert HTML to PSD. One important tip when making the conversion is to ensure that any dynamic content — such as applets, animations or multimedia content — either has a static display or has been converted to a placeholder image so it will convert properly. There are some tricks that can be used to convert HTML to PSD, such as using the print-to-file functionality in most web browsers to create a portable document format (PDF) file that then can be opened in Photoshop®. No matter what method is used to convert HTML to PSD, the resulting page ultimately will require some editing, such as isolating and moving elements of a page to different layers or sharpening the text on the page to remove aliasing that naturally occurs during the conversion, to be acceptable.

Photoshop® PSD documents innately contain rasterized images, so they mostly are stored as a collection of pixels. HTML is a language designed to provide formatting and layout instructions that are closer to vector-based graphics like those used by Adobe® Illustrator®. Converting HTML to PSD involves finding a way to convert the pixels that were rendered in the web browser to an image file format that Photoshop® can read.

There are two simple ways to effectively convert HTML to PSD. The first is to use a screen-capture program, capturing each viewable segment of the website and then stitching them together inside Photoshop®. This has the benefit of accurately capturing what is seen on the screen, so animations and other dynamic content do not have to be removed, but it has the drawback of being a fairly messy process. Additionally, screen captures of a website will have a set pixel resolution, and the image might appear differently on separate monitors, because there is no color correction.

A second way to convert HTML to PSD is to use the built-in print command that most web browsers implement. This will create a file — sometimes an image, sometimes a PDF — that Photoshop® will be able to open and edit. When using this method, dynamic content, applets, animations and images generated through scripts might not print properly, and complex formatting or frames on a document might appear as disconnected areas within the PSD document. Replacing dynamic content with placeholder images of the same size or scale can fix some of these problems, although complex formatting with cascading style sheets (CSS) and frames still might cause problems.

When using a raster graphics program such as Photoshop®, some editing work will have to be done on the image that results from an HTML to PSD conversion. The text generally becomes highly aliased, and there sometimes are visual artifacts such as small, faint borders around elements or small graphics that vanish because of scaling. For a highly complex website with multiple elements, using other programs — such as Adobe® Illustrator or Adobe® InDesign® — might be a better choice and could save time.