It's been ages since I've written a blog post, mainly because I haven't done enough that's been public enough to talk about (and what I have done isn't as interesting as I'd like!). Today, though, I've got another small code snippet of something I just finished to make my life a little bit easier.
I've alluded to in the past, I'm sure, that my day job involves a lot of legacy and mission-critical code, and with that comes by nature a lot of tech debt. That tech debt obviously impacts my day to day, but it's not just my engineering team that feels the effects. In this case, I'm talking about our team of excellent designers. Whenever we rebrand a game, by definition, the branding must change, and that means a lot of images on our websites. The images were originally put in place at various times, and as such, the file naming, sizes, and formats aren't often ones that can be reused in more than one location, creating a mess of a matrix that has to be followed for each game.
Our designers tried our best to work around these limitations with their artboard exports from Photoshop, but each of these rebrands still required a lot of manual work to fix the filetypes and names on various files so they could be put in place over the originals, committed to git, and uploaded to our CDN via our build jobs. That manual work was a drain on our engineering team, especially since branding might need a few iterations to get exactly right, and it couldn't be shifted elsewhere - at least not without a lot of guilt - so we needed a new solution.
My solution to bridge the gap until we can fully address our tech debt was a full script in ExtendScript/JavaScript for Photoshop CC. Since the designers' artboard can be trusted to output the images exactly the same way every time the job is run, when we receive the files we know that the filenames and formats will always match a pattern. We'll also know before we start which images need to be converted to other formats, and how. With all that information, writing a script was just a matter of a day's worth of trial and error and digging through Adobe's developer guides.
Here's what it does:
- Allows the user to pick the source and destination folders, with the source folder typically being a download from Google Drive and the destination being an engineer's working copy of our image repo for our CDN.
- Allows the user to determine the common identifier in the source file names, as well as the desired output variables to be used in the final variable names (our images generally contain one of two machine names or IDs in the final file name, but there isn't much rhyme or reason to which is used where).
- Reads the desired file information from a JSON object in the script that has all the necessary information for translating the source to the destination.
- Picks each file out individually from the source using the JSON data, performs the conversions using a JavaScript interface to ExtendScript, and saves the results, file by file, in the output folder.
At the end of all of this, an engineer using a git GUI with the ability to diff images visually - I use Sourcetree, personally - will have a changeset of all the images that can be visually inspected and committed, and then pushed to origin so that the images can be deployed using our existing deployment jobs. I estimate that this will take no more than ten minutes of engineering time for a task that most recently took me about an hour and a half to do fully manually. When we're talking about having to do this a dozen times or more over the course of 2020, that's a pretty big win and I got to learn a lot about Adobe scripting along the way that might help me with my own Photoshop work in the future. Obviously, the perfect solution would be to modify the artboard in a way that could do most of this work without post-hoc involvement, but again, it's not fair to shift the impact of cobbled-together legacy code onto another team, so this stopgap solution is a great middle ground.
I've uploaded an anonymized version of the script to Bitbucket that can be downloaded and forked if you need it. Hope it helps someone!
- Log in to post comments
