Things I use: Slicy

This is the first post under “Things I use” — which detail tools and techniques I use to enhance my workflow.


Photoshop 5.0

When I first started creating (very awful looking) websites, like many, my go-to design tool was the same then as it is now: Photoshop. However, when I started using Photoshop was back in the dark ages of web design, when things like “slices” didn’t exist and table was the dominant tag of choice. Welcome to 1998 and Photoshop 5.0.

Being young and eager, I set forth ambitiously with my table structure and image spacer gifs1 in hand to create something I would be proud of. This process wasn’t easy and involved manual cropping of my PSD files and many repeated clicks to the file menu, then “save as”. If you screwed up on your crop, you had to use the history palette and start again. Frequently, I was usually off by one pixel with my slicing.

Then along came something that would solve all my problems. Well, not really, but it was an attempt on Adobe’s part to recognize that Photoshop was more than a tool for photo editing. It was a glorious design tool for manipulating pixels. And so from the bowels of Adobe came Photoshop 5.5 — a revolution in web design! Or so I wished it could be.

An awful mess

Let’s just say, Photoshop 5.5 didn’t actually solve this problem, but rather ImageReady did. You had to switch back and forth between Photoshop and ImageReady while designing for the web. Inside ImageReady, you would set up your PSD with slices as a means of setting up how you want ImageReady to crop your design into separate files. This workflow was cumbersome and if you were really lucky, you’d get some handy file corruption along the way. Good times.

Since that time, not much has changed regarding Photoshop’s web export capabilities. ImageReady’s web features were merged into Photoshop CS3, but the web has since moved on from the table-based layouts of yesteryear. We’ve evolved to the vastly superior CSS for our layout needs, which left slices a somewhat useless feature. Sure, you could design an awesome website, but that graphic button you want in your website? Either drag that into an empty Photoshop file, or create an entirely new Photoshop file with all your assets and add slices. Piece of cake right?

If you’ve ever had to do what I’ve just described you understand pain. If you are still doing what I described, this post is for you.

Slicy Icon

Welcome to 2012 and Slicy (formally known as Layer Cake2)

Where do I begin? Before I was using Slicy, I felt like I was in hell. After, well, you know… complete and utter bliss. Slicy is AMAZING … Okay, let me try to explain.

Let’s say you’ve just finished designing your next greatest design. It could be for the web, or for a mobile app. So here’s the design:

This is what 5 minutes in photoshop gives you

But, how do you get this awesome thing onto a webpage? You already know HTML5/CSS/UIKit/etc, but you just want to extract the useful parts of that design into separate PNGs or JPEGs. Instead of tearing this thing apart, fire up Slicy and drag that PSD onto the Slicy window.

Slicy

Slicy parses the PSD and scans all the layers looking for relevant keywords you’ve set up. But since you haven’t done that, nothing happens. What gives? The solution lies in Photoshop. Here’s the brilliance of Slicy’s design: all you need to do is go through your layers and rename the appropriate layers to the filename you want exported.

Want a retina graphic included? Easy, just append on +@2x to the filename: logo.png+@2x

Or if you’re working on a retina design, put @2x before the file extension: logo@2x.png

Save that bad-boy and command+tab over to Slicy. As if by magic, Slicy watched your PSD and noticed the file had changed. It scanned again for appropriate layers and started processing each graphic. The really amazing thing that Slicy did though was export your graphic without any layers above or below it. It simply took your layer and exported it completely trimmed as a single item.

Exported images

Go ahead and drag the extracted images out of the Slicy window and into the appropriate folder. Slapping that image onto the webpage is child’s play.

So, what if you want a hover graphic, easy: Hover state technique

Or you want a slice, like what Photoshop gives you, add a “@slices” group to your layers pane and use a vector rectangle to mask out the area you want exported:

Slicing

Really, this is the best application I have ever used when I design. Whenever I update and save my PSD, Slicy auto-loads the changes and can even re-save the exported graphics for me.

I use the heck out of Slicy. I use it for all my web design work AND all my iOS development. It’s a fantastic piece of software I’ve been waiting more than a decade for and I can’t say enough about it.

The only funky thing I’ve found while using Slicy has to do with retina graphics. When you’re designing a layout in 1x and planning to upscale to 2x using the +@2x, some of your graphics (smart-objects, text) may not be scaled up correctly, possibly due to a limitation in the PSD file format. The way around this issue is to design everything with 2x scaling to begin with, then use the downscaling method.

I recommend that you check out Slicy’s help page, which covers more than I have here in this post: http://macrabbit.com/slicy/help/

If you are a serious UI designer and implement graphics into UI, you aren’t doing yourself any favors by not using this. It will seriously shed hours of time from your work-day.

So that’s it! Slicy. I love it. You’ll love it.

Buy it right now from the Mac App Store, or you can download a free demo from Mac Rabbit’s Slicy website: http://macrabbit.com/slicy/


  1. Yes, we actually had to insert a 1x1 transparent GIF file into our table to help it maintain its structure. Otherwise, things get out of hand, quickly. See here for more information. 

  2. Apparently “Layer Cake” had some trademark issues https://twitter.com/macrabbits/status/231411939287371776