Archives

Slicing PSD Designs With Slicy

May 26, 2012

While on the whole I find designing and developing websites extremely enjoyable, there will always be some aspects that are tedious and time consuming. For me slicing a design in photoshop is probably the worst. Its the annoying middle ground between having an excellent Photoshop mockup and finished functional site, where you have to painstakingly name and organise hundreds of images. With all this taken into account, you can imagine why I was pretty excited when today I stumbled across a little App called Slicy that  supposedly automates a lot of this process! “Too good to be true!” I hear you say. Well that’s what I thought as well, but read on to find out.

Ok a little bit of background first. Slicy is made by MacRabbit, the same people behind the popular text editor Expresso. It can currently be found in the Mac App Store for $19.99, but that is set to rise to $29.99 at some point. Is it worth it? Well after having a short play I would say it almost definitely is. I can see this app shaving hours and hours off projects, and here is how with a quick tutorial on using Slicy:

Setting Up Your Photoshop Designs

Naming-layers-for-layer-cakeWhen designing in Photoshop it is important to label and group your layers logically. If you are not already doing this you really should start, and you are going to need to if you want to use Slicy. Slicy works by saving layers & groups of layers marked with .png or .jpg in their name. Its as simple as that! You probably already have groups so instead of having a group called “button”, you would simply need to change it to “button.png” and Slicy will automatically handle any flattening and cropping outputting the finished sliced graphic. Now this is pretty sweet as the only extra bit of effort it takes is adding the file extension to the layers and groups that you should have named appropriately anyway.

Layer-cake-@slices

What about repeating backgrounds and textures where you don’t want the whole image saved? Well MacRabbit have come up with a simple solution to that too. All you need to do is create a folder called “@slices” within the folder you want the slice to come from, and then use the rectangle tool to create a new layer over the area you want to save. Name this rectangle layer with a png or jpg file extension and you are done. A neat solution.

Let Slicy Do The Hard Work

So you have your nicely set up Photoshop file, and now it is time to let Slicy do all the heavy lifting. Drag your PSD onto the Slicy app. You’ll be treated to a nice animation and within a few seconds your sliced images will be there for your inspection before saving. Wow that was a lot quicker than the manual equivalent!

Another cool feature is that Slicy will now continuously monitor the PSD for changes and automatically create any new images you define in the PSD. Very slick.

the-layer-cake-output

The Slicy Output

The Bad

Like with any relatively new program, Slicy does come with some flaws. For me the biggest downfall is its lack of quality settings. There are no options for setting jpg compression etc, and this results in the images created being a fair bit larger than the equivalent images if saved using “Save for web and devices” in Photoshop. Of course this isn’t much of an issue if you then run all the images through a service like Yahoo’s smushit, but even still it is an unnecessary extra step that will hopefully be removed in future updates.

Overall I can see Slicy shaving hours off my standard development time, and can’t believe I have only just come across this program. Definitely one to watch!