Easytech blog

Graphic designers, when creating websites, will often give programmers the Photoshop (PSD) files of the screens and, if they have enough experience designing for the web, they will ’slice’ the design. Basically what they’ll do is mark a rectangular region (a ’slice’) of the image that will then be used in the HTML of the page. Often a single page is composed of many such slices. When the designer is happy with his work he will save in one shot all the slices and provide the programmer with the slices and PSD files in case he needs to modify anything later on. If you buy templates from templating sites such as Template Monster you will receive the HTML, slices and PSD files.

Here in Easytech we mostly use The Gimp to read and modify PSD files. The Gimp can read and write PSD files with no problem, preserving layout information, etc. Unfortunately, it has no slice support and completely ignores all slice information stored on the PSD file. After looking a while for an alternative I was disapointed I couldn’t find one. What I did find is a little document which describes an old PSD file format and a C# parser which understands the Slices section of the PSD file. With this information and a hex editor and some sample PSD files I was able to write a little PHP script which basically outputs a list of convert statements which can be used to slice an image.

To use the script:

1. Download the script by clicking HERE.
2. Open the PSD file with The Gimp and save it as a PNG
3. Run this script on the PSD file
4. Run the resulting converts on the PNG file to slice it up

This code is quite simple and was written over a weekend so its quite rudimentary. It has almost no error checking and is more a proof of principle. If later on I need something more sophisticated this code will provide a good starting point.

The first thing I should probably do is split the program into two smaller programs: one to write an XML document describing the slices and a second program that processes this document and writes the convert statements. In addition I should probably create a couple of Classes to make the code more re-usable. Maybe later… for the moment have fun with it!

This entry was posted on Monday, January 14th, 2008 at 1:08 am and is filed under PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.