Posts with google

Our team was building a landing page to announce a new feature: Posts with Google. My job was to quickly make and localize 3 animations, that showcase the new Google features, across 13 different languages.

banner-img

Problem

We wanted to do html animations, but were constrained by time. Even as gifs, it would take 120 hours to manually localize 3 animations across 13 languages. Another obstacle was that the gifs had to be high resolution, but under a specific file size. Luckily using javascript and Photoshop actions, I was able to boil the process down in to 3 stages, that could each be automated and completed in less than 40 hours.

1. Normalize Screenshots

The goal here was to capture each screen of the new UX, in each language, by taking screenshots while using the sample interface. This process had to be the well defined so it could be repeated across all languages, normalized (meaning cropped and named/organized), and programmed into the templates.

A. Capture screenshots

All screenshots needed to be taken from mobile mode in Delevoper Tools at 150%. This had to be done manually. However I could write a script to normalize the screenshots so they could be easily dropped into the animation templates.

B. Normalize screenshots

The Photoshop, javascript script cycled through a directory of png screenshots, then called on a Photoshop action to crop each screen. Then the javascript named each file based on the date/time each screenshot was taken. This allowed for the screens to be organized, replaced, and easily accesible for another script to build the localized aniamtions.

2. Build Localized Compositions

Now that we had all the screenshots cropped and organized, we needed to build all 39 animations in After Effects.

A. Create localization object for each country

Using object-oriented-programming, the script creates a localization object for each country that can be used to create each localized composition.

B. Duplicate template composition

From there, a method takes that object, finds and duplicates the template composition, then names it based on the country + template.

C. Replace masked layers

Lastly, this script went in to the new composition then replaced all the layers with with localized screen shots.

3. Export animations

After creating all the compositions, the next step was to render out all the animations. Once that was completed, the challenge was to convert all the .MOV files to .GIFs.

A. Convert .MOVs to .GIFs

Normally, this can be very time consuming (creating GIFs from MOVs). This is because it takes a while for Photoshop to load an mov file, expecially if it's high quality. Then when you need to select specific settings, like # of colors, specific colors, dither, color mode, etc, the sotware can become really clunky. Luckily I created a script to cycle through a directory of MOV files, and convert them to gifs. You can select specefic attributes before the script executes. This script was my most useful script at Firewood and saved me the most time, and I used it to export thousands of gifs.

B. Normalize screenshots

Also I had to modify this script to execute some photoshop actions. These actions made the gifs only loop twice, and used specific color pallettes in the gif. The script would determine which Photoshop actions to run based on the name.

End Result

Using javascript and Photoshop actions, I was able to boil this project, that was scoped to take 120 hours to complete, down in to 40 hours.

banner-img

< BACK