Slicy is a small application that converts Photoshop layer groups and layers into a file format for use on the Web, or into a Mac icon resource (ICNS) file. It’s an app without user guide, without Help file, with no menus, only one button and one icon. And while it’s unbelievable, it actually works equally well as exporting to a Web format from Adobe Fireworks.
Slicy’s developer is MacRabbit, the same developer who created CSSEdit and Espresso. CSSEdit was the love and joy of many a web designer. Espresso 1 was less well received, although Espresso 2 can’t do much wrong in my eyes. I find it performing on par with Panic’s Coda. When a developer releases a product with a tagline that reads “Bye bye, “Save for Web/Devices”, however, I become intrigued and sceptical.
IT Enquirer rating
Price (approx.): €15.00
The reason for my scepticism is that I find Photoshop’s Save for Web/Devices export less performing than Fireworks’ (both CS4, unfortunately). Fireworks somehow manages to squeeze images dry more than Photoshop — usually only by a couple of bytes, but every byte counts when it comes to web page loading, as we all know.
Even if Slicy were to work well, I still expected it to create big files, like monstrous. I asked Jan, the CEO, for a license and I started experimenting. First of all: in order to create Photoshop files that Slicy can work with, you’ll need a copy of Photoshop CS4 or higher. You’ll need to “tag” layers and/or layer groups (tagging, in this sense is actually naming the layers according to a simple naming scheme).
MacRabbit doesn’t offer a user guide with the app and the Help file redirects users to a web page with very little information, but everywhere you look there’s a short sentence screaming out that you can download example files. I guessed they must be screaming for a reason so I downloaded the examples.
It turns out the examples is a collection of Photoshop files and Slicy results. By just opening the Photoshop files, looking at the layers, the naming convention and how they’re organised, and then comparing with the Slicy results, you can figure out what to do in under 15 minutes.
How it works
Here’s how it works:
- Create a Photoshop document. This can be a screenshot saved as PSD, a composition, an imported Illustrator files — whatever.
- If you want to create a web compatible image of the whole image, just rename the layer to something useful, adding the “dot extension” to the name. So, for example, if you have a screenshot and want to save that screenshot to a PNG called “shot.png”, just enter that in the Layer name field.
- If in addition, you want to crop your screenshot so it shows only a window or part of a window, copy the layer to a new one, and rename it as above (but use a unique name, of course). Now, create a layer group (optionally rename it to anything you like) and drag the new layer inside. Now create a layer with a vector mask or a bitmap mask right above this layer and rename it to “@slices”.
- Create your mask so that only those elements are visible that you would have cropped to in a ‘normal’ workflow. Optionally, give your mask a colour (but if you do, turn off the layer’s visibility)
- Save the file as a Photoshop file.
Open Slicy, drag the Photoshop file into its window and it will extract your layers and show them each with its layer name and the “.png” extension. Click the Save button and you’re done. Your layers are saved to PNGs; the one with the mask — the cropped on, using the “@slices” layer name — will show exactly the part that you would otherwise have cropped to.
The result of Slicy’s actions is reason enough to be slightly thrown out of balance, but it becomes better. The cynic that I am, I was convinced the PNG file must be bigger than what I can squeeze out of Fireworks. It turned out I’m wrong. With very small images of under 5K, the file size is about 2% bigger than what Fireworks manages to spit out. With anything above that, file size is either identical or slightly smaller even.
Visually, the Slicy result is just as good as Fireworks’, if not slightly better.
This was reason to perform a dance, because here is an app that has a tiny footprint, capable of converting one Photoshop file into multiple Web-ready images, in under a minute for three images (= layers) and without having to go through any dialogue. But it’s not done yet.
So what if you aren’t using this with screenshots, but with art and you want to go back to Photoshop a dozen times, every time exporting to a PNG to see how the design looks on a web page?
There’s an icon for that, called “Recents + Repeat”. This icon hides a history and lets you activate a repeat mechanism. It works like this: you dropped that Photoshop file on Slicy the first time you converted into PNGs or JPEGs. From that moment on, Slicy keeps its eye on that file. Activating the Repeat functionality allows you to bypass the drag-and-drop altogether. Every time you change the Photoshop file, Slicy will automatically churn out fresh versions of your web image.
What else can Slicy do? It can create PNGs, JPEGs and icon resource files (ICNS, not ICO unfortunately).
A time saver, this little gem!