Written by Steve Utting

The robots are taking over, and we’re happy about it!

Automation is a helpful tool regardless of discipline. Creating autonomous tools rather than relying on constant repetition of tasks is key to keeping momentum within personal progression (and general sanity). It’s also imperative to time-efficient development.

Specifically within the digital advertising production realm in which Super natural resides, there can be a lot of repetitive tasks, i.e. resizes and/or suites of ads, each with a large amount of shared components. This is why our process is so master-asset centric; it allows us to spend the time on each brief’s creative application while relying on a solid foundation and process to quickly and efficiently diversify it into all the appropriate versions

Once this master is confirmed, we have created for ourselves very niche and as such ideal tools to create high quality, internally and externally consistent creatives for our clients. All of this with a fast (thanks to automation) turnaround time.

We automate three main things during any particular campaign (at least on the development side). These are static asset creation, multimedia asset creation and code distillation.

Static asset creation:
This is the generation of any images and text. For the former, we have a custom script that loops through visible layers in a Photoshop document and exports them to our internal spec (so a correctly formatted PS file is paramount). The latter utilises our FontForge API build command line script ‘’ to minimise fonts to only the characters used.


Then HTML live text, through JavaScript injection based on a global “config” object, takes care of the rest.

Multimedia asset creation:
By “multimedia” assets in this context, I am referring specifically to video and animated image assets such as GIFs and ‘SuperLoops’. For videos, we convert initial assets into web-ready formats through command-line ffmpeg. For the animated images, we use a pre-release version of our first Mac application, SuperLoop (watch this space!).


Our core build files are also orientated to make all the above generation simply plug-and-play.

Code distillation:
Now the interesting bit… the code! Initially we were using the well known JavaScript task runner, Grunt. This was an amazing introduction to the scripted automation world that I would recommend to anybody thinking of trying it. It took care of CSS and JS concatenation, path-rerouting and minification. It also optimises images and flattens the folder structure, zipping up the result for supply to client. Not only that, one of the final major updates to the process was to keep the ‘core’ Gruntfile.js in a central location which would read project variables from a JSON file in each build. For a full list of mods and plugins to our grunt commands, have a look at our GitHub.


Recently however, we have switched to Gulp. The migration was more out of professional interest than for any particular need to swap. However, after headaches over dependent streams executing asynchronously, the switch has become permanent. This may simply be due to rewriting a script for better results, and as such has no reflection on Grunt. However the asynchronous streams of Gulp have been a sure upgrade over writing and amending physical files through Grunt.

In fact we’ve taken it a few steps further; where we previously needed separate Grunt scripts for separate traffickers, this is now a variable found in the creative-specific JSON file mentioned earlier (also integrated into the Gulp process). We have also adopted build folder queueing which allows for mass-automation, helping to ensure the most up-to-date creatives are supplied. For a look at our current Gulp scripts, check them out here.

So minus the tech-jargon, our development process begins with a button in Photoshop which will export all the assets from our design team to the format we need. The media files are put through their paces to become web-ready and then a master build can begin with a tried and tested suite of scripts, all the assets prepared, and the time to dedicate to an interesting and bespoke animation treatment or functionality. Once complete and signed off, we can simply update the creative’s Gulp option’s JSON file, run the associated campaign Gulp command and we have an optimised build ready for upload to an ad-server or direct supply.

Automation has evolved over the last few years at Super natural to intelligently assist with our production process and keep our work to a reliably high standard. These processes will of course continue to change and upgrade over time as we are constantly searching for methods or technologies to further them. If you have any thoughts or ideas surrounding our current automation processes or would like to know more, please do get in touch!