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 Layer Cake, the app adds the icing to any web design project. We’ll take a look at their recipe of success.
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 Layer Cake, 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.
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.
Layer Cake 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 Layer Cake would understand what I needed and what not
After naming all the layers correctly, I simply dropped this entire .psd document onto Layer Cake. A funny animation later, it presented me with exactly what I needed!
Amazingly, Layer Cake 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 Layer Cake 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 Layer Cake 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 Layer Cake; 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 Layer Cake, 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.
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 Layer Cake to their new destination or hit Save and choose a location.
Let Layer Cake 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 Layer Cake’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: Layer Cake 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.
Layer Cake 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, Layer Cake 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.