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.
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:
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!
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.
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.
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.
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.
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.