My animation process toolset: grouped layer PSD export
TL;DR
- I am using the Photoshop-Export-Layers-to-Files-Fast jsx script to export PNG files in folders by group.
- I am exporting them without trimming (i.e. they are all the same size as the whole image).
- The whole image needs to be within the stage area or it gets chopped off.
- I am adding the rotation coordinates at the end of the group and layer names, and just measuring them with the info tool in Photoshop.
Ok so I got the first element of my toolset — the mouse movement recorder — working pretty much exactly as I wanted it yesterday. There are a few more features I could add, but I need to resist doing that for now and do the next tool in the process.
The intention is to hand-draw all the different elements in an animation and then cut them into parts, colour them with Procreate (which exports in PSD format) and put them into named layers and groups. Then I need a process to convert all the components into individual PNG files with transparency ( and I also want to retain all the layer and grouping information, because it would be very tedious to have to reposition everything. The grouping information is important because I want to be able to move groups of objects, and objects within those groups (think of a moon going around a planet going round a star — the moon and planet form a group rotating around the star, but the moon has it’s own rotation path around the planet). On and one other thing I need — an easy way to define the origin points of individual elements. Think about the movement of an arm — the arm doesn’t rotate around the center point, or even an edge point, but the central point of the joint. A fairly simple way to do this would be to use the rectangle select tool in Photoshop to find the x,y coordinates of the rotation point, and then add that to the name of the layer or group. And then I need a way to get that data out of Photoshop. There are a couple of different ways I can think of doing this. Let’s explore:
Exporting layer and group information from Photoshop
Photoshop does have functionality to export layers as PNGs automatically, but group and layer information is not retained. An interesting option would be to use Photoshop ExtendScript, which is a type of JavaScript, within Photoshop, do both export the PNGs and the layer metadata as JSON. ChatGPT has written a little script for me to do this, which I’m not hopeful will work because it’s not a common use case and ExtendScript is a bit obscure, but let’s see…
Nope, the script ChatGPT wrote didn’t work — the PNG layers were not trimmed (although that may not matter?) and the JSON export threw an error. Of course a bit of fiddling might fix these issues, but also may not and I risk wasting time trying to make this work when there is another good option (processing the PSD file with Python) which I think may be more likely to work. Before I give up on it I’m going to do a quick search to see if anyone has written something that does exactly what I want…
An interesting finding is that Adobe’s own script for exporting PNG files (Export Layers To Files.jsx) is easy to copy and edit. But it looks like it’s not been updated since 2007… One possibility is that I could edit that script just add the group name as a prefix to the exported PNG files. That could work.
Here’s another option — someone has written a better layer exporter that puts layers into folders by group. That could work. In fact it may be a good option:
https://github.com/antipalindrome/Photoshop-Export-Layers-to-Files-Fast
That works! Very nicely. It’s quick too. If you don’t select trim then every later is exported at height at width of the parent, but is that really a problem? I tend to be a bit obsessive about optimizing things to keep file sizes small, but of course in this case we only want to do that in the final export (GIF or MP4 or whatever), the file sizes really don’t matter during the animation. A bit advantage with keeping all the images the same size is that the center point of all elements can be measured from the same origin, so I can just use the coordinates of the cursor in the image to make measurements. There is no way to automate the finding of the rotation points, that has to be done by hand. So keeping that simple is good. I can just add the center point to the layer and group names (of course groups also need center points…)
I think I may have found a good process. It’s simple and works. The only disadvantage I guess is that it requires Photoshop, so if in the future I decide I no longer want to pay for that they I’ll have to update the process. But that’s a problem for future me. I’ll probably have moved on to other things by then.
But anyway, just out of interest, let’s have a quick look at the other option — processing the PSD with Python.
Processing the PSD with Python
So this involves using a package called psd-tools:
https://github.com/psd-tools/psd-tools
It looks well supported and active, and has good documentation. One thing I hadn’t thought about is things like font rendering, which this doesn’t support. I probably won’t use that but I expect the Photoshop script method will support it, and other types of rendering (smart layers?) so may be better. Also PNG processing doesn’t work out of the box and it looks like someone has created a fork to address that issue.
Ok I’m not going to experiment with this option, Photoshop-Export-Layers-to-Files-Fast looks like a simple and good option so I’m going with that.
Creating a test file
Ok so I’ve decided on my tool, let’s create a Photoshop document to test it with. I’ve decided to go with an animation of a planet and moon going around a star, because it’s simple and incorporates all the functionality I need to test:
- Grouping of layers.
- Defining rotation points.
This screenshot shows the contents of the file. Note the numbers after the layer and group names — those are the rotation points.
Let’s use Photoshop-Export-Layers-to-Files-Fast to see if it exports all the data I need.
./Solar system 3000,3000
./Solar system 3000,3000/Planet and moon 954,527
./Solar system 3000,3000/Planet and moon 954,527/moon-593,413.png
./Solar system 3000,3000/Planet and moon 954,527/planet-593,413.png
./Solar system 3000,3000/Sun-954,527.png
./stars-0,0.png
3 directories, 4 filesYay! That looks good.