Slicy: Exporting From Photoshop Was Never This Tasty (updated)

Everyone who has ever designed for the web in Photoshop appreciates its power, but will tell you tales about how time consuming it is to export portions of a design. Usually it involves a lot of copying and pasting, and at some point you need to take a frustration break or get completely lost.

It’s amazing that only recently an inconspicous utility hit the market that helps you minimize your workload significantly when exporting PSDs for the web. Teasingly named Slicy, the app adds the icing to any web design project. We’ll take a look at their recipe of success.

Editor’s Note: Slicy was formerly known as Layer Cake, but has recently been renamed. We’ve updated the article to reflect these changes. It’s still an absolutely awesome way to export layers from Photoshop!

Get Organized, Save Time

First, let’s talk quickly about what we want to achieve: we have a .psd mockup of a website and we want to export some images and slices to be used when coding the design into a finished site. While MacRabbit, the developers of Slicy, offer a neat help file including some .psd’s to get you started, I pulled up a really old mockup of mine to test the app under “real life” conditions. What I want to get are the three icons on the bottom, a slice of the background for the active menu (orange) and the large section in the middle with the rays, and the slider placeholder sans the blue background.

This is a mockup I used for testing. The arrows indicate the elements which I wanted to export.

This is a mockup I used for testing. The arrows indicate the elements which I wanted to export.

Now, if you are like me, you’ll be rather sloppy while doing the actual designing. I do name my layers and try to group them while I work, but I have to go through stuff at the end before I can hand the design to somebody to work with.

Slicy actually requires you to name and arrange your layers in a certain fashion so the app can understand what you want exported. For the icons at the bottom, I created a folder named “icon @1x”, indicating that it includes an icon at a normal resolution. If you want to export an image with the same name but at a higher resolution (a normal sized icon vs a retina sized icon, for example), you’d have to name it “@2x”.

Inside the folder resides the actual image, and I name it the way I’ll use it on my website later on. This is already enormously helpful because it eliminates all the renaming and shuffling that usually ensues after an export. Finally, take care to append a file extension to the name. You can choose between PNG, TIFF, JPG, or even ICNS. This is how my final layers look like:

I arranged and renamed my layers so Slicy would understand what I needed and what not

I arranged and renamed my layers so Slicy would understand what I needed and what not

After naming all the layers correctly, I simply dropped this entire .psd document onto Slicy. A funny animation later, it presented me with exactly what I needed!

Amazingly, Slicy picked all the right elements and exported them for me

Amazingly, Slicy picked all the right elements and exported them for me

Understanding Layer Order, Rectangles and Naming Conventions

Now, I have to admit that even my first try with Slicy was impressive, even though it didn’t immediately yield all the results I had hoped for. I got my three bottom icons fairly easily, those are set up in the original file in no time.

The slice is just a little different: You don’t need to go to the actual layer – in my case the large orange stripe in the menu – to set it up. Simply create a folder and call it “@slices” so Slicy knows that everything inside is a slice. Then use the rectangle tool to simply draw over the area you want to export. And that’s it, for real.

Tip: I am obsessive when it comes to keeping stuff neat so I set the fill color of the drawn rectangle to 0%, otherwise I would have had red stuff all across my design. It doesn’t affect Slicy; if you’d rather keep it visible, feel free to do so.

The really tricky part was figuring out just how to export the middle part but leave out the writing and the background. The rays actually reach as far as the middle of the bottom icons, so those had to go out as well.

Before, I had to either copy all those elements to a new document or create a slice and make all the other layers invisible. It was a lot of work and really annoying. Now, with Slicy, I simply put the ray-layers and the slider background layers into one folder which I called “Slider_BG.png”. Then I drew a rectangle over the area that needs exporting. A new layer was created, and I dragged the mask up onto the enclosing folder and deleted the layer.

Arranging layers and selections via rectangles.

Arranging layers and selections via rectangles.

It sounds more complicated than it was – you simply need to make sure the rectangle is assigned to the folder that holds all the background layers instead of it being assigned to a single layer. When you do it all properly, you get the perfect export without any of the hassle you’ve had before.

To save the files, either drag them from Slicy to their new destination or hit Save and choose a location.

Let Slicy Do The Work For You – Setting Up Repeats

By now, you should at least be a little impressed. But if you thought that the icing was great, wait until you’ve tasted the cherry: if you save exported files via Slicy’s “Save” dialogue, it will ask you if you want the app to repeat this action if the main Photoshop file changes.

Yeah, you’ve read right: Slicy will monitor the PSD and if you change a layer that is relevant to the exported files – make it invisible, change the color etc. – it will automatically update the exported images.

Slicy does the heavy lifting for you with repeating actions

Slicy does the heavy lifting for you with repeating actions

I’ve tried this with my mockup and while it wasn’t instantenous, the change happened within 5–10 seconds of me saving the changed PSD. Either I’m easy to impress, or this is seriously awesome.

Verdict

For everyone who works regularly with designs in Photoshop that need exporting, Slicy is a real time – and maybe even money – saver. It takes a couple of minutes until it becomes clear just how a PSD file needs to be set up, but once that’s done, the rest is a breeze, and I can’t recommend it highly enough. Additionally, the developers are working on some amazing features for the next releases which will further ease and speed up your workflow. If you earn money with your work in PSD or if you are a coder who is tired of having to manually export every tinsy tiny image manually, this is a great investment.

Addendum

Well, as it happened, we published our review of Slicy the same day MacRabbit released the update I talked about in the summary at the end of the article. We’ve been able to sneak peak at the best new feature before the official release and want to add this to our review: As of now, you can can take advantage of Magic Retina.

Behind the fancy name is the even fancier ability to export retina images (@x2) from normal resolution (@x1) images, specifically vector and layer styles. So, if you’re a developer getting your apps ready for the iPad, iPhone, or the new Retina MacBook Pro, you don’t need to go through the hassle of setting up everything twice. If you thought Slicy was awesome for designers before, it should be a serious consideration for every app developer now.


Summary

Slicy exports elements from a PSD file - much faster and easier than you could do it manually. It needs some setting up, but once you've understood the underlying principle, it's a real time saver.

9
  • Dave

    Brilliant app. I bought it the moment it came out. Found a bug… messaged the dev’s … nothing. But screw it. It’s still brilliant :D

  • http://jonathangraft.com Jonathan Graft

    At $29.99, I’m pretty sure I can deal with exporting my slices manually.

    • Dave

      Depends what you’re doing. I make iOS and Android apps and make a LOT of icons and also deal with the company website. Believe me … the sheer number of images needed sliced out make it well worth the measly price.

    • Jesus

      How much do you charge at hour? if you charge 15, with two hours you have paid it. If you think how much time per year do you spend exporting in ps….. i think the price is fair

      • Dave

        The price is insane considering the sheer number of hours you’ll save in mundane export tasks. If you’re a professional, this is not even worth thinking about. I bought it as soon as it came out.

  • Arie

    Sounds like something that needs to be built into Photoshop. OR just use Fireworks…

  • William Johnson

    Your review failed to discuss the details of how Layer Cake optimizes and generates the images. Does it use Photoshop’s routines or have its own? Does it offer any options about JPEG quality, GIF matting (background color for antialiasing), PNG alpha channels, etc? There are many options for these things. Photoshop offers some in the Save For Web dialog; other programs do it differently. That’s why the same JPEG exported from, say, Photoshop and Fireworks will have different file sizes and different characteristics no matter what “quality” you choose.

    All this review deals with is the convenience factor of Layer Cake. I can accomplish at least some of that automation using Photoshop’s Actions (macros) or, if necessary, its scripting capabilities. Please tell us about the optimization issues with Layer Cake, because at present this is less than half of a real review.

  • Tim

    I love Macrabbit software (though I wish he would bring CSSEdit back standalone or add ALL of its features to Espresso) it seems like the amount of time you spend having to set up you PSD to accommodate Layer Cake, you could slice it up yourself and have complete control of what you are slicing. Meaning, individual export settings, optimizing images. Plus, you have to set up your PSD that way Layer Cake dictates, not the way of your own workflow.
    What would be better is if there were preferences within the app where you could tell it what layer group in your PSD = @slices in Layer Cake.
    In addition, you have to go through every layer you want to save out in a PSD and name it appropriately for export including a .png, .jpg, etc extension. This can lead to a very messy layers panel with 200 layers. And I’m sure some of those layers would need to be flattened for Layer Cake to work properly.

    I’m sure it’s fine for a handful of users or companies like PSDtoHTML (YUCK!) but it doesn’t seem that useful to pros or people that take their pixel-perfect web design seriously.

    • Dave

      Well, you’re wrong :) It takes mere seconds to name a layer or group. And you don’t have to flatten anything… it’s not stumbled on me once. However, I mostly use it for iOS/Android stuff. But even so. You’re wrong. You need to try it out for a while before you can make these judgements you just made.

      • Tim

        I’m wrong about having to rename 200 layers? Prove it!

    • E.T.Cook

      I think you might be missing the point. If you build the layout or design from scratch with the naming conventions in mind, there is no need to “rename”. If you would like to use it to render elements after the fact, I can definitely see the tedium involved. :)

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow