It's impossible to separate the art of animation from the art of illustration. Just ask Dan Covert and Andre Andreev of Dress Code, the award-winning design agency specializing in motion graphics, video production and stop-motion animation. Since establishing Dress Code in 2007, Dan and Andre have worked across nearly all creative disciplines, from web and print to video and animation. These days, the studio focuses exclusively on motion graphics and live action video and has been busy turning out great work for clients such as Herman Miller, Martha Stewart and Nike, to name only a few. No matter the project, outstanding illustration has been—and continues to be—the constant, whether the team is drawing by hand, in a sketchbook or on a computer.
For the Dress Code team, the first step in any motion graphics project is to determine the style of animation, which ultimately depends on the client's goals. For inspiration, the team turns to every tool they have on hand, including perusing old design books and searching online for ideas in blogs and on Pinterest, Tumblr and Vimeo. Also helpful are the obsessively categorized folders on the company's servers. Eventually, all the input comes together to help the team identify a style to best communicate a concept.
Illustration is the next critical step in their process. Drawings are key to communicating concepts to clients, and they form the backbone of the studio's 2D animation work. The team draws sketches by hand, creates big style frames in Illustrator, or develops a look frame-by-frame in Flash Professional. Typically, Dress Code will develop three to five style frames to sell an idea to new clients. For existing clients, one or two frames and some sketches are often enough. However, many factors come into play in the presentation process, including timelines and any established ways a particular client likes to work. For example, the team may present two or three dramatically different looks or a singular, more fully-developed look.
Once the client has signed off, motion tests are where the designers have real freedom to enhance the animation style. They add shading, establish a look for characters and pair up frames to bring the sketched concepts to life. Throughout the process, team members often sketch ideas to quickly communicate with each other or to work through challenges.
With their zest for exploring new animation and illustration techniques, a lot of teamwork is devoted to experimenting with software to figure out the best way to execute a concept. For example, the pixelated look of the Open Technology Fund animation was achieved by drawing out characters and images in Illustrator and then using a mosaic filter in After Effects. The result was a more complex animation than could have been achieved working pixel by pixel and frame by frame.
In a project for Firefox, the agency's team set out to introduce the new Firefox operating system at a recent mobile conference. Dress Code designers initially tried drawing frame-by-frame in Illustrator, but later found that Flash Professional and its onion skinning feature, with the ability to view multiple frames at one time, allowed them to work faster and more accurately.
A favorite project for client SAPPI Paper involved character animations created in Flash Professional. When doing cel animation, the entire piece is redrawn in Flash Professional every two frames.
Today, Dress Code is balancing its success as a design company with its growing reputation as a leading production company. Yet the company's roots in illustration are integral to the its continued evolution. For an agency with a history of embracing new ideas, styles and media, this suits the team just fine and gives them the freedom to grow with new people, clients they might not have considered and new projects that not only stretch their creativity, but also enhance their business.
Create a Core77 Account
Already have an account? Sign In
By creating a Core77 account you confirm that you accept the Terms of Use
Please enter your email and we will send an email to reset your password.