Exporting Retina designs from Photoshop with Slicy

10 Jul 2012

The term 'slicing' makes me think about the early days of the web, but it's basically what we still do today, only in a different way. Sometimes we need to export a whole bunch of icons to png or jpeg. Wouldn't it be great if we could export, 50 or more icons, or other images, all at once in a matter of seconds? Now, that would save a lot of time! Thanks to Slicy we can…

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).

Naming your layers correctly, so Slicy can export them for you like you want it to.

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.

Using a hidden @bounds layer with the desired dimensions

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.

All icons are previewed after dropping the Photoshop file into the Slicy window

Magic Retina

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.

Automatic downscaling

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.

Repeat automatically

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.

Automatically Repeat

Conclusion

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!

Comments

  1. 1 Pascale Vanbutsele 10 Jul 2012

    Top tip. As an aspiring designer it’s a privilege to learn from the master ;-)
    And you are right, the application icon is irresistible.

  2. 2 Giancarlo Gomez 10 Jul 2012

    Wow, another amazing product from Mac Rabbit! I can’t control the impulse purchase!!! Thanks!

  3. 3 Jeff Hawkins 11 Jul 2012

    Brilliant app. I bought it as soon as it came out.

  4. 4 Seth Meranda 11 Jul 2012

    Each of the features look very promising, it’s worth checking out. Thanks for the instructions.

    A few features that I don’t see mentioned are transforming the output into a sprite sheet and PNG crushing. Any options in the app for these?

  5. 5 Tim 11 Jul 2012

    I just wish you could control the export settings for JPG compression, etc.

  6. 6 Luke 12 Jul 2012

    Fireworks does this already, and builds sprite sheets (with a free js add-on). Photoshop is great, I use both Photoshop and Illustrator where appropriate. But there’s the key - where appropriate. There are better tools for the job, but I guess if your stuck with just photoshop then Slicy is cheaper than getting the rest of the appropriate creative suite.

  7. 7 saha 17 Jul 2012

    Nice sharing… Some detailed tips. Very well explained. Thanks for the article.

  8. 8 Daniel 28 Jul 2012

    Very neat! Apps like this make me want to get a mac.

  9. 9 Samanta 01 Aug 2012

    Hey, I went on to check it out but it’s temporally unavailable and it looks like they are inviting everyone to update their blog posts because they are renaming the app to Slicy. “Due to a legal dispute, we’re rebranding to Slicy.”

  10. 10 Veerle Pieters 02 Aug 2012

    @Samanta

    “Due to a legal dispute, we’re rebranding to Slicy.”

    I’ve updated the post & you can download the demo of the application again. Have fun using it :)

The Deck

Ads via The Deck