If you’re a busy person, here’s the short version: we at MacRabbit just released an awesome new app called Slicy that is absolutely essential for anyone who ever needs to export an image from Photoshop. Go check it out now.

The short story is pretty boring, isn’t it? Thought so. Here’s the long version:

Since moving from doing web development to being the guy who does whatever needs doing at MacRabbit (mostly involving Espresso plugins and customer support), I haven’t been using Photoshop as often. However, I do still need it from time to time; Photoshop is always central when it comes time to redesign one of my sites, and I crafted all of the UI for TapNote and my upcoming iOS app TapWatch in Photoshop (there was a brief stint where I spent a huge amount of time and pain trying to do the same thing in other apps, but it wasn’t remotely worth it).

But there’s one aspect of using Photoshop I always dread: slicing and exporting my images. It sucks. A lot. Always. I can spend almost as much time rearranging and slicing a file in order to get the right transparency and backgrounds as I spend designing the darn thing.

And what particularly sucks is that after I’ve painstakingly sliced my document and created a total mishmash that looks nothing like the original mockup, I inevitably discover that some small thing doesn’t work. Perhaps a button needs to be just a little bigger, or I want to change the color palette slightly.

This wouldn’t be a big deal, except that I no longer have a working mockup. I have my original mockup, and then I have the sliced-up mess that I have to use to actually generate my site files. Trying to move changes between these two versions is soul-destroying.

If you use Photoshop with any regularity to prepare graphics for apps, the web, or just about anywhere that necessitates the “save for web” dialog, you know what I mean.

Time to cue the heavenly light and choir, though, because our savior has arrived and its name is Slicy:

Using Slicy is ridiculously simple: in your Photoshop file you name your layer or layer groups the same as the file you want to output, then drop the PSD on Slicy and watch it work its magic.

For instance, I recently had to design an iOS app icon for TapWatch, which thanks to the sheer number of iOS device resolutions meant I was actually designing five versions of the same icon. When it came time to export my various icons, I simply named the appropriate layer groups “icon.png”, “[email protected]”, and so forth, then dropped the PSD on Slicy to export all of them without needing to hide or remove the background layers that provided me context for the icons (or do any other configuration). When it was done, Slicy asked me if I wanted it to watch that particular file for updates and automatically do the same export whenever it changed. I checked “yes”, and now as long as Slicy is running I can make a minor change to my TapWatch icons and export them all simply by hitting command-S.

It’s a completely different way of working, and I wish that it had been around when I was doing web work. There were so many times when the graphic designer wanted to change some small thing, and sent the change over in their original mockup, which I then had to re-translate into my sliced version (and just hope that I noticed all the changes). With Slicy, I could have renamed the layers appropriately, sent the mockup back, and they would be able to make their changes right in the same file. Once they were done, all I’d need to do would be to toss the file in Slicy once more and go.

At this point, the people who are regular users of Photoshop have probably already bought Slicy, but in the interest of helping people get the most out of it, here are some additional fun things to know:

• If you need to define a specific region for your image to live in, just add a square vector or layer mask to the tagged layer group. Slicy will base the dimensions of the final image off the mask instead of auto-generating them based on the surrounding transparency (this also works to explicitly define the image area if Slicy is missing an outer stroke or shadow, which occasionally happens in v1.0). If for some reason you don’t want to add a layer mask, you can stick a square vector shape layer named @bounds inside of the layer group, and Slicy will use it to calculate the boundaries of the image instead.
• As you would expect, layers do not need to be visible for Slicy to export them (or even completely contained in the canvas, for really large vector images and so forth).
• If you name multiple layers identically with an .icns extension, Slicy will automatically combine them all into a single Mac icon file.
• If you need to slice something like you would traditionally in Photoshop (so that the background layers are visible and so forth), add a group called @slices, and populate it with square vector shapes named after the images you want to export. Slicy will calculate the size and position of the images, and include everything in the group that contains the @slices group (which could be the entire PSD, if you place it at the root level).

Slicy is still a 1.0 product, so it doesn’t support everything (notable exceptions are CMYK documents and advanced filters), but MacRabbit will of course continue to improve it to try and address the edge scenarios. If you would like to buy it, you can find it here, and if you would like to see a Photoshop file formatted for use in Slicy there are several examples on the Slicy website.