Monthly Archives: December 2010

Script to Convert PSD Files to HTML Templates

For a while now I’ve been tinkering with this GIMP Plugin that converts PSD files to HTML templates. There’s been some recent interest in it, so I’ve decided to work on it some more and get a usable release out.

Download psd2html-gimp-plug-in

How do I install/use it?
The project page will have current installation and usage instructions.

What does it do?
The script detects which layers are on top of other layers and what their size and relative positions to each other are. This data is used to arrange the layers into a hierarchy, which can then be expressed as HTML nodes. Each layer is expressed as a <div> element with a unique id based on the layer name, and that id is used to specify the size and position of that element using CSS. Text layers are saved as text within the HTML file, and image layers are extracted to the <template_name>_files/ directory, relative to your PSD file.

Can you port this to Adobe Photoshop?
I think it would be possible to write a similar plugin for Photoshop, but for a large variety of reasons it’s not very practical. Reasons include: GIMP is FOSS and Photoshop is proprietary; GIMP plugins can be written in Python and I think Photoshop plugins have to be in written in C, C++, or Flash/Flex; based on what I’ve read on Adobe’s website I’d need to get their permission; and I don’t have Photoshop. Plus, Photoshop and the development tools I’d need only run on Mac and Windows, and I switched to Ubuntu almost 2 years ago.
I know lots of people prefer Photoshop and hate GIMP. If so you can always do your work in Photoshop and just use GIMP for PSD conversion.