This site is being built out in the open
Check out the changelog
Editorial illustration of Chezie for In the Works

Burton Bag Check 2015

Bag Check's a fun way to home in on the right bag for your next adventure. The spring/summer 2015 iteration was illustrated and designed by John Brown. I helped out by animating his lettering. 

blog_bagcheckwanderon.gif
<img src="https://images.squarespace-cdn.com/content/v1/55c89454e4b02a74ffe3076a/1439226981593-0T9H8KOAD5AU6ESSQ8AG/blog_bagcheckwanderon.gif" alt="blog_bagcheckwanderon.gif" />

blog_bagcheckscreen.jpg
<img src="https://images.squarespace-cdn.com/content/v1/55c89454e4b02a74ffe3076a/1439226981704-XAM8185JWYVXA8RVIVNW/blog_bagcheckscreen.jpg" alt="blog_bagcheckscreen.jpg" />

Using After Effects and a few great tools on the web, we managed to create clean, lightweight PNG sequences to be animated with CSS. Once we exported each frame out of After Effects, we used a simple web tool called Instant Sprite to create a film-strip-like PNG.

<img src="https://images.squarespace-cdn.com/content/v1/55c89454e4b02a74ffe3076a/1442422101296-6TF4TX2HG4FXLV0JN3EN/image-asset.png" alt="" />

<img src="https://images.squarespace-cdn.com/content/v1/55c89454e4b02a74ffe3076a/1442422123217-CO7QUUTTD1WV4NOKJJYG/image-asset.png" alt="" />

<img src="https://images.squarespace-cdn.com/content/v1/55c89454e4b02a74ffe3076a/1442422207649-OE8Z6ZNUKGG8ZSLPFJYV/image-asset.png" alt="" />

 From there, we ran the film-strip PNGs through TinyPNG to keep load times practical. Everything else is thanks to our developer comrades who made the project sing.