Download Layer Export Action for Photoshop
Photoshop action to export both retina and normal size layer content.
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.
Best Photoshop Export Action Ever
…bold statement, I know. For me anyways, this action(s) has been my go-to for the past decade. I’ve been using this action to speed up my asset production for 10 years now when exporting assets for any platform I have ever worked on.
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.
flare.png
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 Free After Effects Templates