Donate a Life- Kinetic Typography

I was asked to do a kinetic typography for the organization Gift of Life.  For this project I was given an infographic and was asked to make an animated version of it. I worked with Mr. Netterville on this project to make sure it looked well enough to show at their keynote speakings. 

Starting the Project

Scripting

Before anything, I needed to type a script so I'd know how I wanted to animate the text. The script can take the place of a storyboard, as its easier to visualize text there and take notes. They did not want audio, so I didn't have to have a voice script. While I did type it, I printed the script so that I could take notes and write in changes.

Setting Up

After scripting, I needed to find the proper font they use in the into slide, as well as pick colors that fit together and made the proper things stick out. Going through the script, I found things I wanted to have visuals for, so I went into photoshop and made the proper graphics. We also contacted the one asking for the animation and got a few different copies of the logo that I could use in the end slides

Animating 

Animating took up the most time in this project, as expected. All of my animation was done in Adobe After Effects. I broke this into a few compositions so the harder animations would look simpler on the main composition.

Separate Compositions

The fade in and out at the beginning and end of the "LIFESAVERS" on a red solid is a separate composition placed in the main for simply the purpose of having a few layers less. All I did in the composition was edit the opacity so it could fade correctly.

One of my favorite compositions in this animation is the number flip. It is used in the beginning statistics, and changes with different facts. You have to manually enter the coding in one of the portions of the transform on the layer to get it to move, but then its very easy to get the numbers to change. You only use keyframes and slide the numbers to change. The rest is a matter of timing with the animation on the main composition.

Magnifying Glass

Another favorite part of the composition was the magnifying glass that goes over the "Get Clued In" text right after the intro animation. Mr. Netterville did a lot of the work to get it to magnify the text, so shout out to him.

Originally I made the glass three colors, and the center where the glass is was a semi-transparent blue color. After modifying the colors in the animation we changed the magnifying glass to black, and I made the center glass a very transparent white-ish grey. For a while, it just scrolled over the text without magnifying the text at all.

When final details were being done on the animation Netterville wanted to make the glass actually magnify the text. Its done with an adjustment layer over the circle of the magnifying glass that literally magnifies the layers its going over. It took a bit of messing around to get it to follow the text and magnify it properly, but it ended up working out!

Word Scrolling

One of the most tedious parts was the scrolling of the different organs and tissues you can donate. It was originally its own composition but with aligning troubles, we threw all the text onto the same layer to get it to align better.

Having all the text on one layer made it hard to both move the text and be able to work up close to the composition. We had to constantly zoom out to make sure the text moved by evenly on the screen and not down at all. It was also hard to set and change keyframes with the giant layer of text we had.

Ending + Final Thoughts

The animation had to be rendered a few times, most for new edits in the animation, and one because for some reason the original render did not work for the client. After rendering on After Effects as a Quick Time (.mov) I had to take it over and convert the .mov to an H.264 in Adobe Media Encoder.

Final Thoughts

I enjoyed creating and sharing this project with my client. It was a challenge to jump from the typographies I have previously done to this one, but I do think I have grown and gotten quite a bit better in this skill set. As Netterville said, to be able to do kinetic typography, you have to think like a graphic designer. That didn't challenge me too much, but it helped to try and consciously think of that. The most challenging part of this animation was probably the timing. Even though there was no audio to time it too, you still have to make sure nothing is too fast or too slow. In the future I'd love to use more graphics to illustrate the text and make the animation more lively if I was given the time.

Final Animation

End of Year Final

This year I was able to grow as an animator and develop more skills with new equipment available to me. I received a tablet, and was taught how to use the light box. My projects this year consisted of a kinetic typography, a stop motion animation, a character animation, and a small story animation. 

Typography

You can read the blog about my typography here.
I decided to do a kinetic typography at the beginning of the year because in my mind it was relatively simple, they weren't common, and I loved the idea of it. I was wrong about the simple part. I believe we did our first typography freshmen year, and I posted mine here. You can see my improvement from that one to my 7 Nation Army typography. One way I improved was keeping a constant style, and using one font that fits the style of the song. While I know I need improvement, I am extremely proud of this animation. I'm glad I started with this project this year, because it helped me get used to After Effects again.

Stop Motion

I do not have access to the stop motion animation.
My second project of the year was the stop motion animation, which I did with Hanna Brady, Hannah Fails, Jessica Love, and Maddison Redmond. We actually combined the stop motion with our own digital animations. We had to collaborate a lot on this project and put in a lot of extra time to be able to get a finished project worth sharing. I am happy with the outcome, and wish I had it to share.

Character Animation

You can watch my character animation here
During the pre-Emagine work time I had to come up with a project to enter, and I didn't want to enter my typography. I made a very short frame by frame character animation with my drawing tablet and Photoshop. This was done in a few days, and started with a basic character sketch that I wanted to play with. I didn't win anything, nor did I expect to with the amount & quality of the other entries.

Story Animation

At the time of this blog I am still working on the animation, but you can watch the storyboard here
This is my final animation for the class this year, which I probably overshot time wise. I should have managed time better, but I'm happy with what I have, and I think it will make good. I learned a lot with this animation, including how to jerry rig the hardware on your tablet to get it to work correctly, and why you should always have tape when you have a cracked tablet pen :)

Final Thoughts

I think the biggest thing I've learned this year is time management. It is very important.

An old video I'm posting for the sake of watching.

I Don't Have Enough Money For Photoshop Alternatives

Photoshop is a very nice utility to have, whether you are an animator, graphic designer, photographer, among many other professions! Sadly, a lot of people are unable to get access to this program to practice and grow their skill, or even learn they have it.  Little known to some people, there are a few programs that work almost as well as Photoshop that you can get for free. All programs are ones I have used and would recommend.

The brushes!

Fire Alpaca is a Japanese art program you can download and use on your desktop. This program is for both mac and windows! It's interface is really only made for art and drawing. 

It has quite a few types of brushes and filling tools, The latest update has included the ability to download and create your own brushes! All the default brushes (-fire alpaca brush) including Blur, smudge, and both erasers, work with pen pressure if you use a drawing tablet. I haven't seen anyone who's had a problem with it. For the fill tool, you must have closed lines- even one pixel can screw you up. For the gradient, make sure you have utilized both your foreground and background colors, as those are what will be used in the gradient (ex; i used black and brown.) Before you fill the gradient you have to fill in the shape with a solid color, then turn protect alpha on that layer, otherwise the gradient will fill the entire canvas.  

Another new feature added in the latest update is a comic book selection! You can create your own templates, or use ones already given to create panels like in a comic book.

The only file type Fire Alpaca can save and open with layers intact is a .mpd. It can save .jpg, .png, and .bmp. If you draw on this program, but want to move it with layers to Photoshop, another program called Medibang Paint Pro can open both .mpd and .psd files, and is able to change .mpds to ,psds. Link to Fire Alpaca main page (translate from Japanese) 

As you mess around, you can find a lot of different things on Fire Alpaca. Using command/control T for freetransforming a layer is a thing, as well as selection tools & rotation. Over all, though, Fire Alpaca is a pretty basic tool, and I don't use it often.

Online Image Editor is a web editor. I use it for editing gifs, mostly. For your canvas you can upload an image from your computer or url, or create a blank canvas. It does have transparency, and automatically saves as what ever file type you upload it as. Be careful, because you can only have one file open at a time (even if you try to multi-tab.)

selecting a frame for your gif or photo.

OIE is pretty basic, but very helpful for what I use it with! The most basic tools which I use frequently is re-size and crop. These tools work almost the same as they would any other program, except you can preview what it would look like before you apply it. There is also a basic type tool, but it doesn't have many fonts to pick from. There's lots of fancy tools that I don't think anyone uses because lets face it. Glitter text is cheesy looking. My favorite tool to use is the shape cutting tool. I use it when I am making gif avatars for myself or others on forum websites, along side the re-size. There are quite a few frames you can pick from. I generally use the square or the large circle, but I do sometimes go to the fun frames if they fit with the theme or if someone requests it. Before applying the frame, you can re-size the photo and/or frame, move the frame around, and edit the "fuzz factor", which is really just the blur or fade on the edges of the photo. Mostly I just re-size the frame and move it around so that the photo fits. If I do have to re-size the photo, I make sure not to re-size it enough to make it all pixelated.
When you want to save your photo, you have the option to save it straight to the downloads on your computer (you cannot name it before hand, you will have to go in and move and rename it), or uploading it to Facebook or a webapp called Picassa. Here's my finished photo if you'd like to see!
I really enjoy OIE for my forum coding purposes. I often use it in pair with Pixlr, as they do well with creating, cropping, and re-sizing images to fit my forum formats. I've created a lot of cool stuff using both programs, which I'm sure I'll blog about in the future! Link to OIE main page

Pixlr Editor is one of my favorite free programs to use to date, as it is super close to Photoshop in both interface & tools. You can use Pixlr through its web app or download it to your desktop, though I prefer the web app because it has all the same capabilities and is quick to access. Pixlr is by autodesk!!! Through the web app, you can open a photo from your computer, a url, or from any sort of library (Pixlr photo library, Facebook, ect.) 

I made the background
transparent and added the bars

In this image I fixed the
transparency and added the card
to the background

I use Pixlr for a lot of graphics for my forum posts, and I edit a lot of images on it. Lots of times I take the color schemes and make things with them such as borders. The tools I use most are the shape tool (line), the color picker tool, and when removing backgrounds from images, the select tools. I don't actually have much to say about this program, because its so much like Photoshop, but I have a few items I've made to show what you can do on the program! link to pixlr main page.

Coding Using work from OIE and Pixlr paired

All the images were coded (via bbc) into a forum. I may have made the silhouettes on photoshop, but i dont recall. This was made way before I realized those pixels in the gifs were bad. 

Emagine 3: Chipwrecked

Ok, this is NOT my third time going to Emagine. Its probably my seventh-- but this WAS my third time going as a student in the e-Comm program!


Before the event, I went out with some friends to dinner at Hoolihans, then we took a bunt of photos at the Horticulture Center (It's too pretty not to take photos at!)

The Actual Event: Electric Boogaloo 

I've gotten to go to Emagine a lot, due to my brothers being in e-Comm, and because of that I have gotten to see as the event grows and becomes more popular with other schools attending. I remember it always being crowded, and having quite a few entries, but watching quality grow and more people being involved it always great!

This year, quite a few of my friends entries got in top five, and most of those got in the top three! It was very exciting to see their works up there and hear people cheer and clap for it. I am very proud of Hanna Brady and Jessica Love for getting pixels! A few of my favorite works in the animation categories were Running Girl, Generic Dragon, and of course Gummy Bear.

The consistencies I noticed in top three entries are all things you should notice in all animations, simple things like smoothness, consistency/ continuity, among other things.

My Entries

I entered two animations this year, rivaling my previous zero. My first entry was in the character animation category, and you can read my blog post about it HERE. My second entry was with a group, Maddison Redmond, Hanna Brady, Hannah Fails, Jessica Love, and myself, and we entered our stop motion animation into the story category. 

Chikari Transformation Cycle 

A short animation of my character Chikari transforming into a magical girl for the eMagine Media Festival. I have entered it into the character animation section. I am happy with how it came out, but I may take spare time to clean it up and add more frames for a smoother transition.

Character Design

The character, Chikari, was not something I had planned to animate at all when I started. To be honest I was just messing around when I was drawing, but decided I really liked her. I was messing with some old prisma color markers when I decided the two colors of her hair. A majority of the design happened on photoshop, but her outline and reference were all in my sketchbook. I asked a few people for the colors they preferred on the hair, but did end up going with my original idea. The hair style changed a little from my original drawing. Her magical girl form just kind of happened. I never had a plan for it before hand, but I think it turned out well. I tried shading the side photo a little. I am really happy with how she turned out design wise.

Animating in Photoshop

My initial animation was done in photoshop. The animation has a total of 45 unique layers and 5 video groups; the side image has multiple layers on top of each other set inside a folder. The hardest part of the animation was making sure I was on the right layer, and in the right video group. For each frame I copied the lines from the layer before and edited them to fit the next action, then copied the color from the previous frame and fixed it so they fit the lines.

The things you need to click to use a double
workspace.

Working with two veiws

For a lot of the drawing, I would usually have to find myself zooming out to see it full size and the character reference to the art on the left. Instead, I went to the window tab on Photoshop and clicked "open another tab of chikari.psd" then arranged the workspace so that both of the same file were placed next to each other. They work as two different files in some ways. You have to click over if you want a color pick from the full image or anything; but the files do save as one, and when you do something to one side, while it takes a second, it shows on the other. Its very useful when doing frame by frames and working with fine details.

Two-view workspace!

7 Nation Typography

The Kinetic Typography; A Scarce Resource.

Danielle Sleigh

_____________________________________________________________________

Summary

I've created a kinetic typography for 7 Nation Army by The White Stripes. The character I used in this animation is named Hitomi Shiga, and the animation is about her struggle through her job. I fit the color scheme of the video with the character. 

Story Boarding

Because of the story requiring lots of text, I typed out the lyrics on a word document, and just put them in the video section under the visuals. Also, instead of drawing everything out, I labeled each visual image I used with a letter and put said letter on the story board instead of a drawing. Some of the visuals had two parts, and some were used more than once. Untimely, this was not how I made my animation, but it was nice to have a point of reference. My goal was to get a good looking typography, and a steady verse animated. I think I was able to do that.

Making The Visuals

To start out, I sketched the visuals I planned to use, and labeled them for the purpose of my story board. I think the image I spend the most time on was the first visual. I used a few references to figure out how to draw a person from the back. After I got everything drawn out, I scanned them in the computer so I could make them on Photoshop. I made them as vector graphics, using the pen tool. Originally, I made the letter A image with the band connected to the rest of the image, but I changed something in my animation to make it visual that the band was getting ripped off her arm, so I took the band off her arm in the graphic by cutting it from the image and adding what was missing from the arm. I cut a few of the images because I did change the story board, and they could be a little hard to do as a vector graphic. I tried to keep simplistic, because I enjoy the look, and it would also look better in theanimation and with the font. The font I used is called Red Out. As a part of the visuals, it looks sleek and fits with the visuals and the song. The hardest part of making the visuals was the hat, I think. Both front and back had to be shown at one point. I had to use a few references; they were actually kind of hard to find. I based the character’s color scheme off of a school uniform with a coat. The band represents a disciplinary committee band to prove she is in fact in said committee.

Setting up the Project

I made this on After Effects, which is ideal for 2d animations, including typography, and also piecing together already done video or animated clips. I had to create a new project, then I had to get all my graphics into the project, as well as the music. I made a new composition in the project, and originally I made it too small, and I set the background as white, which contrasted with my moon and just did not look good in general. Tip: Always make sure you are animating in the animation workspace!

Animation time!

Getting to know After Effects and Your Workspace

There are a few things not already mentioned that help a lot to know about when using after effects. The first is your tool bar. The things I use on my toolbar for the typography are the regular pointer arrow, which lets you move around your text and images, the hand which lets you pan, a magazine glass which is your zoom tool, the object tool that… makes objects, the pen tool, which also works as a key frame manipulator, and finally, the all-important text tool, which has a rather obvious purpose. Next, for creating effects on your text, you have the effect control drop down on your main drop down bar. I use the text manipulation the most, but that can also be accessed through the layer editor. You also have key frames. Those signify a change to the object, it moving, changing opacity, ect. Not counting key frames, I think the tool I most used was the guides and rulers. They are a very nice thing to have. I used them to line up all the text, and make sure there was even space between words. They were also good if you needed a perfect line for a movement key frame. A basic tool that you don’t notice you use is the time line. It is pretty self-explanatory.  You use it to tell where you are in the song, in frames, and it really helps when lining up key frames.

Your Best Friend is the Hide Button

Almost every single word is its own layer, which adds up to a lot BEFORE factoring in the objects, images, and the music you have to add in. When not working with a set of words, objects, and images, you can click a little button that looks like a guy at a table to represent the layers you want to hide. It helped a lot when I needed to match to the audio waves.

Syncing Text to Audio

When you are messing with the text (making it move, warp, ect.) you create key frames to signify change. A very simple way to make sure you have text synced with the song is to listen. You want your word to be fully visible and finished changing by the time they finish saying the word in the music or speech. When it comes to music, if you have text that is not sung, then you want to line it up to a beat. You can open up your audio wavelengths really simply. Line up your scrubber with the major bumps in the audio, which is where you will find a consistent beat that works to sync your words to.

The Finished Product

After about 120 hours give or take, I finished my typography. The biggest challenge was not getting the music or putting things in, but the timing and just the appearance of the next and its alignment. I really enjoyed making this typography, even with the stress it caused. It was really fun to tell the story through words, and play with the way words could come in. The most annoying thing about the typography was listening to the song 20 times an hour. If you are going to make a typography, keep that in mind.

Pixel Effect Review

Yes. I am going to critically analyze the movie Pixels, directed by Chris Columbus. This movie is mostly live action, but it relies a lot on 3D effects and other animation. Without that, Pixels would not have worked out the way it did. They used the pixel aspect a lot, meaning they made things pixelated like an 80's video game would.

I would like to point out the application of the pixelation to real life people and objects. In the beginning an army base is attacked, they are shot and the building pixelates and falls into little glowing boxes that are in fact animated. 

The second time they used this was when scientists in the lab were looking at one of the pixels to see what it was like, and what they could use to destroy it or break it up. They use light guns, which are also animated. 

In the scene where they were fighting Pac Man, they used this effect multiple times. The creator of Pac Man went up to the alien Pac Man and reached out to him, but Pac Man bit him, and his arm pixelated like they did with objects in the past, which was probably very complicated. During the same sequence, Pac Man is destroying the city like seen here, causing more pixels.                                                                              Multiple times in the movie, the aliens abduct people, and in the abduction guess what? They turn into pixels, and reformed inside the ship.           The animation of the movie was very good, and, disregard all the acting and plot holes, I would give it an 8/10. There were minor glitches a trained eye could notice, but nothing causing too much problems. It was just pretty mediocre.

Lions are the Best

For the final project, I worked with Katie Arpin and Jessica Love. We had to make a product box that has a second function. Our product was stuffed animals, and we named it Cirque de Lecture (cirk dry lector). We made a circus/zoo kind of line, and the box would double as a train car or a showing cage for the stuffed animals. We each decided on an animal, a lion, fox, and wolf. My part of this project was to make the template, 3D revolve, and marketing plans. I also helped with color scheming because I love to do that stuff. I really enjoyed working with my group. I think we did well. Our biggest problem was creating the die line. We had forgotten how, but I managed to fix it and make the box look great!Our target audience is children, or anyone who loves stuffed animals. They are based on zoo/ wild animals, so they will be directed at those who like things such as lions, wolves, foxes, ect. Being a train, it could also go to people who like trains.

Cirque de Lector is a series of stuffed animals you would find in a zoo or circus setting. They will be animals children like, find cute, or based on animals that sell well to children. Our box design is a train. When you take your animal out of the box, it will be removed from the back like the door of a circus train car. The box will have holes like cage bars, as if you could reach in and pet the animal. You can reuse this box, and make chains to link it to the other animals boxes. Inside of the box, other than the animal, will be a set of links to connect the box, or “train car”, to others.

Glitter BOX

box template

Armstrong Seal of Approval

The product I picked for this project was Glitter Box. Originally, It was going to be a box that sprayed glitter when you opened it, but then I found out about edible glitter. So instead, it is pills of glitter you can put in your drinks, put in cake mixes, or just eat as the tablet its self. I had a lot of fun designing the box. It's colors reflect the happiness and upbeat emotions of glitter. The design and font is all simple. The font is called Manga Temple. I used it for the logo font (both the text and initials), and on the testimonies. For the seal of approval I used Myrad Pro, trying to match the labels on the back. The right side has a seal that says "Armstrong Approved." It is to show that the glitter does in fact sparkle to the best of its standards.  I tried to make the bottle label simple. I wanted the entire bottle to be the same color, so the label blends into it. The yellow was made as the label color because it seems like more of a pill or medication associated color. I only put the glitter box logo on because I didn't want it to be over complicated. Because the bottle comes in the box, I didn't feel it needed the bar code. I'm all about simplicity.

Label

3d revolve

My 3d revolve was fun, but gave me the most problems. I had trouble getting the box to be pink and mask the yellow to make just the sides yellow. The bottle was also hard, because in order to make it look good, you had to get the proportions exact. After I made the box and bottle, I decided to make the pill itself, which was easy. The only problem with that is that, due to its texture, it does not look 3d. I do still like it and would not change that part. My logo design was my favorite part. I went through a lot of concepts and enjoyed each and every one of them. I had to design the icon, font, and initials at different times to see what looked best, then I could put my favorites together to see that. A lot of my fonts were customs I found online. In the end I did decide on one that worked for both my full text and initials. I was trying to decide between upper and lower case for them.

font ideas

icon

initials ideas

glitter pill texture.

more font stuff

logo ideas

final logo design

Summer Wars movie poster

 

Art thingies

On my own, I'be been playing with shading and skin coloring. Actually pretty happy with how the first one turned out nice. The only problem I have with the second one is proportions. I don't usually draw even/ full faces with realism, so it did turn out well considering that.