Animated Typeface – League Spartan

It’s that time again where students in Term 3 at VFS Digital Design get to work on the Animated Typeface project. Recap: It is a collaborative class initiative where each student makes a second long animated sequence for 3 – 4 glyphs. This time League Spartan was used and this typeface was created by Tyler Finck, Micah Rich, and Caroline Hadilaksono.

These sequences needed to be 25 frames long using three or fewer of the chosen colours. It has been amazing to see the incredible work.

To view the full project, please check out:

League Spartan Animated Typeface

Here is what some students have to share about their experience:

Lawrence Teng

Lawrence Animated Type Screenshot

With a background in animation, it caught me by surprise how challenging the animated typeface project really is. This project is also what finally “defined” motion graphics for me, as opposed to character animation. The main challenge here is not how to make it pretty or even the animation per se, but rather the short amount of time (about twenty frames or so) that is allowed to make something readable. Also in a 500 x 600 frame size, we can’t make things too complicated or it will be hard to see.

I cautiously took on just three letters in beginning (s, 6, i), not really sure how I would fare on this. I did take on more once I got the hang of it. I looked at each letter, and try to make out things that have potentially similar shapes (e.g. the water drop and the letter “i”). I was not confident enough to restrict myself to things that begin with the letter (e.g. “i” for igloo). I do have a background in biology, so quite a few of the typefaces were inspiration from animals and nature. I work in stages, starting with the bare minimum to just morph the letters into their respective “alter-egos”. I figured, worse scenario, the letters will all be done at least. Once the set is complete, I went about adding more things like the background, and using more colours from our palette.

My favourite one is the “t”" for Tiki. I can’t believe my luck when this letter came up for grabs. This is the time where I focused on words that begin with “t”, even if I had to force the shape out of it. I can work on Tiki’s forever, which I did for this particular one. The details of the turning Tiki was loosely based on stop motion references of my real Tiki mugs, and then with drawn facial animation on top of that. It is one of those rare moments when I’m really proud that I have OCD tendencies. Furthermore, the tacky overloaded nature of Tiki’s means that I will have to add some secondary elements to the piece as well (backgrounds, other props), which also led me to do the same for the other letters to keep my batch consistent. Yes OCD is cool…sometimes.

 

Daniel Gutierrez

Daniel Animated Type Screenshot

This was one of the most interesting projects I had.

I like to doodle everything before actually touching the computer. The way I planned the process for each letter was, start thinking of how to relate the single letter with something that looked similar, then stretch/distort the shape until it fits in what I believe is an harmonic balance between the story behind the image, and the letter.

Frame by frame animation is definitely a strong, and useful technique to apply in motion. There is some great magic that just caught me since day one of this class.

Daniel Animated Type Screenshot

 

Zora Zhao

Zora Animated Type Screenshot

Here are some snippets of the inspirations for the following typefaces I did. The shape of “f,” looks like a submarine tube, therefore, I expanded on this concept a little more by adding the water and seagulls. The “M” idea the expression of the cat saying ‘meow’. I was inspired by the countdown of the old film opening sequences. I used some camera shaking, and glitch effect to present the “old film” feeling.

 

Karina Contreras

Karina Animated Type Screenshot

Animated typeface was such a good experience for learning tools, and concept to tell a story, which is challenging. With each letter I had some troubles, and in some cases they turned into something totally different from the first idea. Also, we were restricted to use a specific colour palette, which was really important but sometimes frustrating when you are applying it.

I`m really into geometry so I felt really comfortable doing the “z” (kiss) using symmetry. The other letters uses simple shapes, with a cheesy concept. “w” was based on pop artist “Lichtenstein,” and “q,” the silly parrot, was so much fun to do. I even created emotions to this cute character, and it made me laugh a lot during the process when the timing the swing, and his eyes.

In general, this was an awesome experience to be part of, since each member of the class has other letters, and the feedback in class was really helpful. It helped redefine your sense of timing and observations.

 

Ana Maria Posada Arias

Ana Animated Type Screenshot

Well, originally my letter “c” was to be an ear, but I decided to change it to a magnet because “c” would make a classic magnet. It could be the kind of magnet that appeared in the cartoons, and I thought that I can do something cool with that. I remember when I was a kid, I used to play with magnets, and the paper clips under the supervision of my mother. I wanted to show in my animation, the law of attraction with the paper clips. I made all my drawings in Adobe Illustrator and then animated in Adobe After Effects. When I saw the final result, I felt happy.

Ana Animated Type Screenshot

For my number “8,” I was inspired by fishes because my father is a Marine Biologist, and works with ornamental fishes. I was thinking of how to transform my number eight into a fish, and I discovered that the best way to do this was through Illustrator, and After Effects. The challenge for me was making the animation in 25 frames, and in just one second. In the first rough cut, the fish movement didn’t look very soft, but after some feedback from the class and teacher, I went to improve my fish, and make a better animation. For the background I decided to put some marine environment and bubbles.

 

Saida Saetgareeva

Saida Animated Type Screenshot

I really enjoyed the animated typeface project that we worked on during 3rd semester. It provoked creative concepts, and excellent metaphors in our class. During the project, I worked on letters a, J, C, K, 3.

For the letter “C”, I created an image in Illustrator and used After effects to animate it. The animation techniques were mainly based on revealing masks, key framing the major movements, and opacity. Initially the illustration was a watermelon with flowers stemming from it, however, after the critique session, it was simplified into a bite.

For the letter  “J”, I also created illustrations of imitated handgun-shots inside After Effects. I used puppet tool for finger movements, masks, and basic shape animation for the dark flash. Throughout the process, I refined timing several times, as well as the position of the hand.

 

Kelly Kurtz

Kelly Animated Type Screenshot

I initially wanted to do a karate chopping kangaroo with this letter, but after spelling some words that started with the letter “k” out on the page, I discovered the word Kermit the Frog. So, really who doesn’t love Kermit! So I found a good reference and sketched him out attempting to pre-visualize the animation as to how I would get from the letter “k” to Kermit. My original thought process was that the “k” folded end to end into Kermit, but once I got into After Effects, it worked better to split the letter ,and animate each half independently. Feedback from my classmates revealed the lower half looks like his collar, and that could rotate, and morph into it. I decided to add the bounce with his eye balls after the rough cut, to make it a bit more dynamic. It is like classic squish, and stretch ball bounce theories. The stem of the “k” morphs into his head, and the angled part of the “k” rotates and morphs into his collar. The colours we were given were easy to work with when it came to Kermit as he is green! But, a little more challenging with other letters.

Kelly Animated Type Screenshot

This letter didn’t start off as the Cookie Monster, it originally looked like a van pulling along the screen as shown in the first sketch. I watched some tutorials, and played with some techniques for the rough cut; the first draft was more of a liquid draining effect. When my classmates gave feedback on my work, they said it looks like someone taking a bite out of the 4, and the cookie monster idea was born. I found some good references, and worked with the colour palette a few different ways. I ended up using a solid background with Cookie Monster due to his eyes being white, and not wanting to use an outline around them as I did with Kermit the Frog. I used frame by frame animation inside of Photoshop for Cookie Monster because I felt like I had more control over the sharp bites required out of the number “4.”

 

Julia Stein

Julia Animated Type Screenshot

This project was really interesting to discover and play around with. I still would like to use frame-by-frame in the future, but for these typefaces, I went for vector drawings since it is what I love and feel comfortable in.

For my letter “D,” I got inspiration for my passion with dinosaurs, and the “J” instantly reminded my of an umbrella, so that’s what I went for. I worked in Illustrator for both letters, but with different techniques. In the dinosaur, I just used simple tools in After Effects, like rotation, scale, and did several layers of different drawing positions in Illustrator. For the umbrella, I just did a simple base in Illustrator, and used it as a guide in After Effects to play around with the mask tool. It was the most interesting thing for me since it reminds me of a vector, yet gives you much more freedom to do the animation directly. After many redoes and feedback from my classmates/instructor, I achieved a great result, so I thank them for that.

 

YJ Lee

YJ Animated Type Screenshot

During this project, I wanted to apply different skills. After I received letters, I started to think about the concept of my letters. The challenge was that we had limited colours, and limited frames. I targeted the letters to have similar shapes with objects, and the letter had to be containing the story inside the animated typeface.

The letter “F” represents fear with shadow play, and the shape of letter is similar to the shape of the hand. After I got an idea, I started to find the references, but it was hard to find the reference that I wanted to animate, so I used my hand as reference while I drew the hands frame by frame. After I drew all the images, I put it into After Effects, and made it sharper using the masking tool.

I got an inspiration from previous student while I was making the “N” typeface. It was my biggest challenge because it was so hard to achieve all the goals that I wanted. I compressed my goals, and came to reality; it should be fun for other people viewing the animation without sacrificing my experimentation. This letter was made with roughen edge in After Effects.

 

Gallery of Animations:

 

Leave Comments