Recently here at Uncorked we’ve been looking at ways to optimize and improve our processes, and in reflecting on how we do things here at Uncorked, I brought up the number of times I’ve been standing over a designers shoulder and been telling them to “just press F5”. A blank stare always ensues, huh? While I’ve been using this export action for forever myself, I’ve never shared it. Shame on me. So I’ve shared it with everyone here at Uncorked and figured I’d share it with everyone else as well. I know there are lots of “cut-up” asset production helpers out there, but feel free to give this one a shot and see if it’s as useful for you as it has been for me.
Provided here is an action set containing two actions:
- Layer Export (F5)
- Layer Export Retina (F6)
After downloading and unzipping, go to your Actions palette in Photoshop and from its options pulldown, select “Load Actions...” and choose the unzipped file. You’ll now see the action set in your list. Double click on each of them and assign a keyboard shortcut to each of them. I have them assigned to F5 and F6, that’s my personal preference, you can assign the keyboard shortcut to whatever you want.
So what do they do?
Select any layer in your photoshop document. It can be an individual layer, a folder, and smart object, or anything, it doesn’t matter. Then run the action. What you’ll then get is the “Save for Web & Devices” export dialog popped open, defaulted to a 32-bit PNG (24-bit with transparency). Just hit enter and name your file. After save it closes and you are left right back at you Photoshop document just as you were... ready to select another layer.
The “retina” version will actually prompt you a second time to save an asset. The first one is your larger retina asset, so name it with an @2x suffix. After the first save is complete, the action resizes to 50% and prompts you again to save, giving you your regular 1x asset.
So what’s it doing under the hood?
- It duplicates your layer into a new document
- Nests the layer into a group
- Flattens the group
- Trims the canvas to only the necessary pixels
- Pops the export dialogue
- Closes the duplicate document
The stuff about the group nesting and flattening is very relevant and the missing key to many other people's attempts at this same thing. If you have effects on your layers, and you do the trim, photoshop is notoriously horrible about over-trimming and giving you a clipped edge on your stroke or drop shadow, or whatever the effect is. The same is true for smart objects. So nesting and flattening as a fast and accurate means of effectively “rendering” your layer. At that point the trim actually calculates correctly giving you what you wanted.
What you get is clean PNGs (you can switch to jpegs or whatever you want in the export dialogue) that are trimmed down and include only what was in the specific layer you chose.
The Retina specific variant of the action is obviously focused on iOS devices, but I’ve used the regular one when prepping assets for Web, HD-DVD, Blu-ray, Android, Windows Phone... anything and everything.
Download the action set: UncorkedStudiosExportHelpers.atn
Hope you find it helpful.
scott: Hey Matt, It’s actually a downfall of being an “Action”... Adobe doesn’t give the control necessary to achieve that. I too have wanted that ability as well. However, a “script” can actually achieve what we want. I talked it over with Gaston here at Uncorked who has been writing a few photoshop scripts to double check that it would all be do-able from a script instead of an action and yes indeed we should be able to carry the name of the layer forward into the output. If we build that, I’ll be sure to comment back again with a link to get it. _scott
Matt: Hi Scott, Great action, I’ve been using it successfully for a while now, but I was wondering how I could update it so it uses the layer name as the file name so I don’t have to type it in every single time. Any thoughts?
Johnathan Curry: Thank you for the Photoshop action. That alone was worth the visit :)