Real Mart, Real Art Design Group's foray into the world of online artisan consignment boutiques, flung open its digital doors this week. To help announce this to the world, Andy Nick and I were charged with making it a feature on the Real Art homepage. The aesthetic of the store is made up of many hand-drawn elements, so we shot a hand drawing the "Grand Opening" type onto the screen.
Ordinarily, it may have been possible to simply film a hand drawing on paper. However, Real Art's website has a fluid layout, so the wrinkled paper background had to repeat infinitely. This single fact dramatically altered our approach to the problem. I suggested that perhaps we could try drawing on a glass surface, with a green screen below it. That way, we could composite the drawing footage on top of a repeating background in Flash.
The set
We built our set on the floor of our in-house studio. It was basically a couple of sawhorses with two long boards running across them to support the glass tabletop. We used a special tripod that can be aimed straight down, and attached two of its legs to the sawhorses. We laid a green sheet on the floor under the whole rig.
Screen test
Since this was uncharted territory, we decided to do a screen test before wasting an illustrator's time. Shooting the test went smoothly, but not perfectly. Luckily, a screen test is a much better venue for mistakes than the final shoot. The test proved the approach was valid and we moved forward.
Andy wiggles his hand around for the screen test, before doodling on the glass.
The shoot
The most exciting part of the process, of course, was the actual shoot. We got our newest co-worker, Lindsey Kellis, to draw/act for us and she clearly did an awesome job. She repeatedly drew words on the glass with a big Sharpie. The speed at which she drew wasn't a huge concern because we knew the footage would be sped up later.
Lindsey draws the word "GRAND".
Because of how we set up the camera, we actually shot all the footage upside-down.
Post-production
Post-production on this was a little tricky. Our green screen set was far from perfect, and there was a lot of extra masking to do on the footage. Additionally, Andy had to do some special editing to speed up the footage without it looking too weird.
Some preliminary masking.
Here, the footage is fully keyed (green color is removed) and rotoscoped (detailed masking). It's ready to be composited with the other footage.
The final step was bringing the footage into Flash to make a swf and add the interactive button that links to the Real Mart website.
Final product
This was a great opportunity to try a new technique on a fun internal project. It also turned out pretty similar to what I originally imagined, which I assume is a good sign.Of course, you don't have to take my word for it. You can check out Real Art's homepage to see it for yourself (for a limited time).
While you're at it, why not shop around at Real Mart?
Thanks to Andy Nick for photos from the shoot and stills of the in-progress files. To see full credits, check out the Vimeo page.
