As you scroll through Rebecca Mock’s website, the motion in some of her animated GIFs is immediately apparent—like the darkened Italian villa shaking with the first tremors of an earthquake. Others contain subtler movements that you might overlook at first glance—like the flick of a dog’s tail, a cat’s paw emerging from a gift box, or a bit of steam wafting out of a teapot. But as soon as you notice motion in a few illustrations, you start looking for it everywhere.
This GIF is from a series of animations Mock created for the BBC series Clique—later in the article, she explains her process.
Not that you’ll always find it: “Sometimes people will look at my portfolio, see a few pieces, and then say, ‘Wait a minute, this one isn’t a GIF!’ says Mock. “And they get a little mad at me, because they’ve been staring at it for a while. I love the opportunity to create that sort of mystery, that challenge, where you have to sit and wait to see if there’s an element that’s animated.”
Mock knew she wanted to pursue a creative career before she’d even left elementary school, so she enrolled in an arts-intensive middle school when she was 11 years old. She attended Maryland Institute College of Art in Baltimore and then moved to Brooklyn in 2011, for a six-month freelance gig at Rockstar games. There, she illustrated backgrounds featured in Max Payne, Grand Theft Auto, and other series while learning the finer points of Adobe Photoshop—a tool that, up to that point, she’d used only to color in her sketches, similar to many of her heroes in the world of manga and anime.
As a kid, Mock was fascinated by those images created on the opposite side of the globe. She stayed up all night downloading “scanlations”—Japanese comics scanned and translated into English—and followed Clamp, a group of female manga artists formed in the 1980s. “I spent all of my allowance on manga—I had bookshelves and bookshelves full of it. Even now, my parents have huge boxes of my manga collection in their house in Florida. And now that I’m a full-time artist, it’s a business expense—which makes it a real problem,” she says, laughing.
INSPIRED BY MANGA—THEN AND NOW
That obsession with animation helped her earn one of her first paid gigs. An early user of Tumblr, Mock had followed accounts devoted to some of her favorite television shows, where fans turned video clips into animated GIFs. After watching a few online tutorials and generating several GIFs from footage from the TV show Supernatural, she decided to incorporate her own illustrations.
This animation accompanied an article about an Italian earthquake. Mock based the movements on CCTV footage of a Mexican department store during a quake.
Mock combined her video-game background with her knowledge of Photoshop’s Timeline feature; then she posted the results online and shared them with art directors. She got her first big break from the New York Times, which asked her to illustrate an essay by a Cleveland Heights landlord struggling to rent out a storefront on Main Street. “My animation skills definitely saved my then-nonexistent career,” she says. “My portfolio wasn’t all that impressive, but I had a skill that I’d figured out on my own, and it all came from my interest in anime, as a fan.”
EDITORIAL ILLUSTRATIONS THAT MOVE
Art directors at the New Yorker asked Mock to create a GIF for Colin Barrett’s short story Anhedonia, Here I Come, about an aspiring poet in a small Irish town. To illustrate a scene where the protagonist buys weed from a group of teen schoolgirls, Mock used Google Streetview to find a shopping center in a small Irish town; then she filled in the remaining details herself.
It’s a bleak landscape: A beige sky and beige buildings frame a seemingly lifeless beige parking lot. Then small details come to life: a rat scurrying beneath a car, pieces of trash blowing in the wind, a trail of exhaust from an idling car, a flickering neon sign, and a group of school girls just discernible in the distance.
The editors of Matter magazine needed an illustration for “The Aftershocks,” a true account of Italian scientists convicted of manslaughter after minimizing the threat of an earthquake that ultimately claimed 309 lives (a ruling that would be overturned years later). Mock was tasked with creating a GIF that illustrated the earliest tremors in a darkened home; she struggled to find video references but eventually found footage from a Mexican department store with shaking lights and swaying shelves to inform her work, reminiscent of a horror film.
Mock recently created a series of GIFS for Clique, a BBC thriller about a group of glamourous interns in Edinburgh. Each GIF captures one or two young women in an intimate moment, with subtle but very evocative movements—the motion of a dangling earring, the consoling touch of a friend, and the simple blink of an eye.
USING PHOTOSHOP’S TIMELINE FEATURE
For the Clique GIFs, Mock started with reference video, which she used to create sketches for the client to review, with notes explaining the movements to be animated. The client selected three of the five sketches, and Mock created illustrations from them (she notes that she primarily used Kyle T. Webster brushes in Photoshop).
From initial sketch to first-draft illustration, and then on to final animation—Mock created this GIF in Photoshop. To learn more about creating GIFs using Photoshop’s Timeline feature, check out this tutorial.
Then she focused on the individual components to be animated—by duplicating layers and introducing incremental subtle changes on each, and then then converting those layers into animation frames. (To do this, go to Window > Timeline to open the Timeline panel; then click on Create Frame Animation, and select Make Frames From Layers from the Timeline menu. The Timeline feature lets you preview your animation before exporting (Export > Save For Web).
For the Clique GIFs, Mock used 30 to 60 frames. A swaying strand of hair is relatively simple, whereas the motion of a finger has a dozen moving parts, and a blinking eye requires redrawing the eyelid six times and playing with reflections for the full effect.
See the original clip that inspired the Clique series or learn more about Mock’s work on Aftershocks in this video profile for Intel, featured on Uproxx. You can follow Rebecca Mock on Twitter or Instagram.
