As Mile High Pixl is growing I was given the chance to talk to a group of fellow designers about using both Slicy and DevRocket within your workflow. They both have their ups and downs with fairly obvious differences and strengths.
I figured I would go over the two here briefly (this is by no means an in-depth review of either program/plug-in.
Slicy has a very clear purpose, at $29 from MacRabbit you should be certain it will be of use to you. At first when I bought it back when it was “Layer Cake” I was rather upset that I wasted the money, my how that has changed. Slicy does just what the name suggests, it SLICES your Photoshop files for you. You probably wonder how it does this and if it does it well.
Demands a clean and specific layer structure:
When I say that the layers require a specific and clean structure the above is what I mean. As you see the folders and given elements are made with an “@2x.png” this tells Slicy what folders to extract and how to name them. Now one of the awesome parts with this is the fact that I am calling these given files Retina assets, what Slicy will do is save a standard @1x version for you automatically. This is awesome but at the same time this is where I caution that having it do the resize for you doesn’t always bring the best results, so watch for those fuzzy pixels!
Drag and Drop Extraction
It really is that easy. Once you have your layers and groups within the Photoshop file named right you just drop the PSD within the Slicy window and it pulls out each asset for your viewing pleasure. You can see the standard and @2x next to one another with the file names. The best part in my opinion is the repeat action feature.
You can select an option that allows the user to have Slicy automatically update assets when the PSD is changed. So let’s say you want to change that red button to blue, once you hit save in Photoshop, Slicy will update the asset in the folder for you.
DevRocket is extremely easy to use and very helpful if you spend a vast majority of your time in the world of iOS. At $10 from UIParade it’s worth the look. When you install it you will see a nice little rocket in your panel, once opened it is a matter a few very simple and easy to use clicks to open anything from an iPhone canvas with standard UI components included, even iOS icon creation, with just one click. No more pulling over assets from a GUI, they are placed for you and organized in wonderful folders.
From this view you can select the canvas, add the guides, icons, and create app icons. Not to mention you have the ability to select Retina Display or Standard view. You can also with one click save out a specific UI element and even a quick action to save out @2x assets.
Above you can see what two clicks gets me. You get standard elements (Status, nav, and tab bars) along with guides. Now the one thing I wish I could do is adjust what the guides are defaulted at. But for the sake of a starting point I think this is great and more often than not I remove the styles fromt he different standard elements just to have them there for the sizes.
UI Snips & Retina Easy Save
When you snip an asset you are pulled into a new psd file so you don’t have to worry about the master file, you also keep all layer styles and folder structure for that given asset. This is really nice for sizing, as you can down size the asset yourself and adjust all of the styles right here. I would call this a slight advantage over Slicy. In this view I’m also showing the dialogue that comes up from the Retina Easy Save. As you see it creates a .png file with the @2x.png extension. Don’t mind the extra @2x (I had left that from the Slicy demo — oops!)
My Thoughts Overall
Again, this is a very down and dirty review of both Slicy and DevRocket. What I have seen is using DevRocket for the setup of my iOS files is the way to go, quick and easy. However now that Slicy has been updated from the original launch as Layer Cake I will be using that for my asset creation step in my workflow. I don’t know if I will continue to roll the dice with their downsizing from @2x to standard but I will at least use it for the @2x graphics. Imagine having a file that has a few hundred assets within it… it literally takes a matter of seconds to extract them all. You could never be that fast doing them by hand. Yes, yes it’s a pain naming the layers, however this forces you to have a consistant and extremely clean layer structure within your Photoshop files. I would say for team use this is fantastic. If I were to create my file and save it out in the Slicy way and hand it over to a co-worker they would know exactly how to handle the current layers and create new ones. Remember, a clean Photoshop file is a happy Photoshop file! If you feel these will save you time I would suggest taking a look, combined you’re looking at $4o, that’s nothing in my opinion for the time saved.
UI Kit in Demo (courtesy Jesse Spencer Design)