Slicy by MacRabbit Review

If you use Photoshop for creating your web graphics and Save for Web… is your usual method of exporting files, take a look at Slicy by MacRabbit and you might well be converted.

From the makers of my favourite code editor, Espresso comes a new way of exporting web graphics, retina images and Mac icons out of Photoshop. If you have a workflow that involves creating slices, or repeatedly cropping your file and saving out your images using Save for Web… then picking a file format and optimising before hitting the Save button, Slicy could save you loads of time.

Slicy (name changed from Layer Cake), costs just $29 and brings a way of quickly exporting a bunch of individual files in a single magical moment! With a deceptively-simple interface and a great little animation, simply drag your .psd onto the panel and watch your .psd turn into the files you need.

You can export files in the following formats: .png, .tiff, .jpg or .icns and anything else (.gif) will just be ignored during the extraction process.

With Slicy open, when you are working in Photoshop a menu bar icon appears:

If you click the icon, you can start the extraction by opening the file directly from here while it is still open. This makes it easy to rename or change layers and perform repeat exports.

To get started, MacRabbit (a very helpful bunch) have some sample files that you can download and learn the naming conventions you will use. To use Slicy, all you need to do is name (or tag) your Photoshop layers or layer groups the same as the images you want to export.

If you need to create graphics for retina devices and don’t want the chore of manually resizing before you save, Slicy helps out here too. In MacRabbit’s own words:

You design at 1x, but need high-res artwork? One annotation, and Slicy magically enlarges your vectors and layer styles to build a high-quality 2x version. For 2x designs, it fills in missing 1x versions by scaling down. Making Retina graphics is now easier than ever.

How smart is that!

Slicy in Action

You can also designate specific output sizes for your graphics by setting @bounds. The idea is that you can effectively save out single or multiple slices by using rectangular vector objects and masks. Here is an example:

File in Photoshop with bitmap and vector mask

Add bitmap or vector masks to layers, or include a vector in a layer group with @bounds for your slice.

Masks on layers

Drag the saved file on to Slicy – and voilà!

My sliced files

In the preferences, there is a single slider for setting .jpg output quality and an option to have @1x images automatically created:

In Summary – Buy It!

To find out just how easy Slicy is to use, MacRabbit have a 1 minute video online, so hop over to MacRabbit, watch the video and spend one of the best $29 this month.

This is one of those apps that really will save you a lot of time and work, and if you are creating web graphics on a regular basis this is a no-brainer!

other page