Have a Slicy with your Espresso
Slicy is another very well designed application by MacRabbit, founded in my home turf Belgium. Besides the great web editor tool Espresso, which I use myself for all my coding work, there is now Slicy, an indispensable tool for every web/UX designer. Yes, indispensable indeed… because once you've tried it out, you'll know I'm right ;) The look of the application icon is already very inviting…
The beautiful Slicy application icon in full size. Absolutely drool dripping! I would eat it if I could.
How does it work?
It's very simple. Just drag & drop your Photoshop file on the Slicy window when you have launched the application, and your files are automatically exported. The only thing you need to do is tell Slicy which layers, or layer groups, you want to be exported. You do this by giving your layers, or layer groups, the filename you want them to be saved as, including the file extension.
I need to export 116 icons!
First time I tried out Slicy was for the design of Fab's new iPad app (which is at the time of writing still in development). The example screen below shows a fragment of the Browse & Search feature. After tapping the magnifying icon in the top bar, you'll end up here on this screen where you'll be able to choose between browsing per category, color or price. This feature has 26 category icons in place in 2 different states, 'default' and 'tapped'. Then there are also the 3 menu icons in both default and selected state. In total we have about 58 icons to export. Oh, and we need them in Retina optimized format also! So we end up with 116 icons in total. Imagine if you had to export these 'manually' one by one…
A preview of the 'Browse & Search' screen of Fab's new iPad application.
Method 1: via layer naming
With Slicy it's really simple, all you need to do is name the layers or layer groups you want to export, using the extension of the file format you want them to be exported with. So I named all the category icons in a similar structure: "cat-icon-categoryname.png" (see image below).
Method 2: define the boundaries via @bounds layer
Another way to export files using Slicy is to create a hidden layer with a rectangle shape named @bounds inside your layer group in the preferred size of the exported file. In the example below I'm showing a Photoshop file with the design of a few badges. Here I want Slicy to export them all at the dimension of 100x100 pixels. Each icon consists of a few different layers, which are all located inside a layer group. So here I added a Shape Layer inside each layer group that has the dimension of 100x100, with a 50% opacity, which I named @bounds. Then I hide that layer. The important thing is to place it inside this group. In my screenshot below I opened one of the layer groups, and switched the eye on the @bounds Shape Layer just for demo purpose. As you can see, each layer group has the filename with proper extension. Slicy will also know that only the layers inside each group should be exported. So no need to switch off the background layer to hide for export.
1 2 3… done!
Once you have dropped your Photoshop file into the Slicy window, you watch the magic happening in just a few seconds. Below is a screenshot of some of the icons, that were exported from the Fab iPad screen as shown before. As you'll notice, each icon has been exported in 2 sizes. I 'told' Slicy to export all icons for the Retina display too. I'll explain in a bit how this is done.
There are 2 ways how you can easily export all files automatically for the Retina display. One way is to add +@2x at the end of your layer or layer group name, before the file extension. Another way is to add a(n empty) layer and name it 'lc-auto-2x = on'. This way Slicy knows that all files in the document you drop into the window, also need to be exported for the Retina display. Slicy will do the scaling for you.
This also works the reverse way, meaning, if your original Photoshop design is in Retina display dimension, you can add a layer 'lc-auto-1x = on' to have your files also exported for non-retina displays. Slicy will automatically do the downscaling for you. Notice the ' = on' at the end. If you don't want automatic downscaling, while you have already named all your layers/layer groups with @2x at the end, you can add a layer 'lc-auto-1x = off' instead of starting to rename each one of them.
What's also super handy is the automatic update feature. Once you have clicked the save button in the Slicy window to save all the exported files, you'll get a message with the option to automatically update the files as soon as you update the design. If you choose 'Repeat Automatically', then Slicy will re-export/update all files that have been modified after you hit save in Photoshop. This all happens in the background.
I fell in love with its look as soon as I laid my eyes on it, but I couldn't really grasp its value at first. It's an application that you need to try out and see for yourself. Once you do, I'm sure you'll be sold just like I am. This application is not only simple and practical, it's also absolutely beautiful. Its super slick look and the fun animation make it complete. I have tried it out, and I'm totally sold. Download the free demo and experience the magic yourself!