Mac app review: Slicy

Slicy from Macrabbit. I’ve mentioned it before (more often back when it was Layercake), but it’s worth a more meaningful mention. If you create graphics in Photoshop for web or app UI and you don’t use it yet, read on.

Slicy lets you use some basic naming conventions to “tag” layers and groups. When you save the PSD file, you can just drag it onto Slicy and it will create (or “slice”) all of the individual pieces out of your file and save them as ready-to-use web/UI graphics. It can even do automatic up/downscaling of @2x graphics, smoothly converting shape layers and styles between normal and Retina versions.

Before I go too far, I want to mention that Gus Mueller recently added a similar feature to Acorn. If you’re using Acorn, be sure to check that out (it’s called Smart Export).

Back to Slicy. You can set the format of the output files by giving layers names such as “mainimage.png” (to create a PNG file). Add “@2x” before the extension and Slicy will output a half-scale image named without the @2x in addition to the full-size export.

If you name a layer group in this fashion, it will flatten the group and export it. You can add a mask to the layer folder and it will be applied to the exported image. Add a subgroup called “@slices” and fill it with shape layers named for their exported versions and, yep, Slicy will export multiple files from the group based on the shapes in the @slices folder.

Aside from the amazing time savings you’ll get from the slicing tools, one of the best features of Slicy is that it will watch files it’s previously exported and automatically update the exported files when the source file changes.

I added a keyword panel to Marked for the next version. I redesigned it completely yesterday, and built the whole thing in a PSD with Slicy tags. With the file watcher active, I could compile the app, see how things looked, make adjustments in Photoshop and hit save. Compile the app again and everything’s updated. It’s as close as you’ll ever get to being able to edit graphic elements in an app live.

• 
• 

For web design, if you use something like LiveReload (review) or CodeKit, you can have your web page refresh every time Slicy updates your images. Save a Photoshop file, Slicy picks it up and updates the assets, LiveReload or CodeKit picks up those changes and boom, instant preview of web graphics as you design them¹.

So, there it is. A rambling review of an app that made me very happy today. I don’t often offer endorsements of this magnitude, but this app is a gem. Slicy is $29 US. Check it out at Macrabbit’s site.