A still from motion graphics artist Joash Berkeley’s TED-Ed video, How Do Brain Scans Work?

The Surprising Beauty of Brain Scans

By Brendan Seibel

An EEG reads electrical activity in the brain. fMRI measures the oxygen consumption of brain cells. PET uses a radioactive tracer to monitor the brain's chemical activity. All three technologies communicate complex ideas visually so doctors can comprehend what's happening beneath the skull. The new animated TED-Ed video How Do Brain Scans Work? explains these sophisticated neuroimaging techniques in an easy-to-understand way.

Click to watch the video.

When Joash Berkeley, the director of the video, first became interested in art and design, he was fascinated that something so seemingly simple as a logo can convey so much. “Then I realized that motion graphics takes simple ideas and adds a different level of emotion to it,” he says. “It blends already beautiful visuals with how something is paced, how something moves, how something sounds. All those things tie in to create a compelling message. I love that.”

But actually directing an animated video is no easy task. The 23-year-old cut his teeth sitting in on client calls with Emmy-nominee Andy Williams at Imaginary Forces and interning at Apple while a Savannah College of Art and Design (SCAD) student. That background helps when developing a concept with a client like TED. It also helps when leading a team through the complicated steps of movie making.

SEEING THE BIG PICTURE

Berkeley grew up watching cartoons just like every other kid, but color is his greatest inspiration. He was immersed in the vibrant hues of the local arts and crafts as a child in Trinidad. In the case of the How Do Brain Scans Work? graphics, Berkeley was immersed in the colors of fMRI scans. They became the project’s color palette.

Choosing colors is just one aspect of art direction. Berkeley’s ideas evolved as he created storyboards based on the script and a ton of neuroimaging reading material. He worked especially closely with the TED instructors behind the script to ensure that the scanning techniques were accurately portrayed. The final storyboard included more than sixty panels of key frames and transitions pegged to the voiceover.

Berkeley used Adobe Photoshop CC for the project's storyboards. "I primarily used Photoshop's preset round brush with pressure sensitivity off and with the smoothness set to between 40% and 60%. This allowed for smooth and consistent lines for the storyboards. For shading, I used Kyle’s Charcoal and Dust brushes." (Kyle Webster’s brushes are now included with Photoshop.) Another tool Berkeley relied on heavily during the early stages of the project were layers. “I create a board of six frames all scattered onto this one board, and I use a ton of layers, “he says. “Layering line work and layering colors and fills, layering gradients to get depth. That way, if I need to make any edits later on I know which layer I need to edit.”

After weeks of bouncing ideas back and forth with TED, after countless sketches were refined and finally approved, it was time to draw the artwork for the animation. “That was probably the most enjoyable part, just playing with different styles during that process,” he says. “Figuring out what works, what the client likes, using really interesting colors to trace what the viewer’s looking at in the frame. All of that was done in Adobe Illustrator CC. I made gradients, which I think was an iconic feature of the film, to create a sense of depth of different elements.”

MAKING THINGS MOVE

Three animators came in to set the artwork in motion. In Adobe After Effects CC, Berkeley animated several sequences himself to illustrate the overall look and feel for the crew, including one of eyes blinking. “That was really fun to work on,” he says. “I had to record myself doing the actual movement and I used my own face as a reference for animating it so that it was more realistic.”

Since everyone was working remotely, they relied on directional videos to keep a unified aesthetic and style. Berkeley says, “I made QuickTime videos of me talking and showing them where things are in the After Effects file, as well as creative direction: the goal for a shot, or how to make things move, breaking down both the technical and conceptual aspect of the shot so they had something to run with.”

Artwork was imported directly from Illustrator using the Overlord plugin by Battle Axe. Each animator was assigned shots that Berkley thought they would enjoy working on, but also ones that played to their individual strengths: one is good with minimalist animation; another has a knack for nuance; the third is good with geometric animation.

“We created these images in Illustrator,” he says. “They are colored shapes with lines and gradients to create depth. We brought the these layered shapes into After Effects, where we could pose and morph things. So, if I wanted to animate a character’s eye, like a blink, I moved an eyelid shape down, and then moved it back up. Those micro-animations, layered with a ton more things, created the story. In After Effects, I key-framed different poses for every shape, and then added more expressiveness using the Graph Editor Tool. That’s very important because it really shows the level of realism in the animation.”

The graphics and animation of How Do Brain Scans Work? are more complex than previous videos Berkeley worked on. “The TED one has a lot more gradients involved, and lights and highlights and shadows. Light would move over time on the shape while animating it, so that was a whole other layer of things to think about.” And as with any large, complex project, the team had to get creative when things didn’t work out according to plan. They discovered that Color Channel Blur smooths out pixilation resulting from aliasing, and that Grain Effects can compensate for color banding caused by heavy layers of gradient.

For the sake of workflow, not to mention avoiding any possible disasters resulting from two people working simultaneously, every shot was its own After Effects file. When all of the animation was completed, Berkeley collected the fragments, stitched them together, rendered the movie, and shipped the final product to TED as an MP4. It was the end of a very long, very complicated, project. “For concept and storyboards, about 15 hours,” he says. “Design was about 60 hours. Animation about 80 to 100 hours.”

MOVING FORWARD

Berkeley appreciates how much creative freedom he was afforded, something he tried to pass along to his team. After all, he’s been an animator working with someone else’s storyboard before. “It taught me to be more attentive to what I offer someone I’m working with,” he says. “Not just, follow what I say, but have the opportunity to find their creative voice inside of it, too. That’s an important thing I want to continue to do—understand what they want out of it and provide the right tools for them to do their best.”

The future isn't sketched out yet, but the path forward is taking shape. In the past, Berkeley felt constrained by expectations of the surrounding culture. He originally studied to be an accountant and had to convince his parents that he not only wanted to study art instead, but to study art abroad. He enrolled in architecture at SCAD thinking that it would be a good career, then switched to motion graphics when passion overcame pragmatism. Upon graduation, he thought he wanted to work in a studio and accepted an internship with a creative firm in California. But the move west was first and foremost based on the fact that a branch of his church is in Long Beach, and he immediately ran into a work/life imbalance. “Although I loved working for the firm, I wanted to have the flexibility to work on the projects that I care about, with brands that I care about, as well as with artists that I would never get in contact with if I was in a staff position. But mainly because I wanted the time flexibility to fully plug into the church community.”

Going freelance has been another leap of faith, and while it makes his parents nervous, they’re supportive. Berkeley wants to establish himself as a director by knocking out a few more commissions, then focus on a personal project. The day before speaking with me, he bought a camera with hopes of shooting live action, a medium that brings spontaneity and happy accidents into the mix. It will be a relief from the meticulous planning and organization that animation requires, just as books and drives along the Pacific Coast Highway are nice breaks from his hours of screen time.

But in the end, it doesn’t matter if it’s animation or live action, personal or professional. “I want to be a director who tells great stories and creates positive messages for people,” he says. “In any medium, I want to tell stories. I think that’s the job title, tell stories.”

That’s a complex idea made so simple you don’t need to use neuroimaging to understand it.