Animated Icons

For this assignment I made animated icons to represent the classes I’m taking this semester. I’m actually also taking Discrete Math but I couldn’t think of a way to represent that visually. I made a sketch first to get an idea of the color scheme, style, and the ways it could move.

I decided to go with a greyscale color theme because I thought the black would contrast well with my yellow blog. I already knew when I started sketching these that I wanted to use them to liven up my blog’s home page.

I created by icons in Illustrator using 200x200px guides to keep them all around the same size. In Illustrator I realized I was going to need a lot of separate layers, especially for the sound icon. I ended up having to separate every single little square into its own layer.

After importing the file to After Effects, I decided to stagger the animations so that you could see how each icon moves at different times. The motion icon was, ironically, just a simple rotation with easy ease. The form icon was a bit more interesting. I wanted to see how a horizontal flip would look, so I made it a 3D object in order to rotate it across the y axis. I also made it dip around the x axis, and was pleased with the result. I added a mask for the gear so that only the top half of it showed while it rotated. I wanted to try using the overshoot technique, so I did this when the gear moved back to its original place. I had to move the anchor point for the pen in the text icon so that it would rotate more smoothly as it followed the path. I didn’t need to draw this path because it was only a straight line, so it was easy enough to simply adjust the position. The sound icon was the hardest to animate. Organizing the columns by color certainly helped me navigate the bars changing in value. The squares had to be quickly adjusted in opacity and stay consistent with the sequence. I also spent some extra time on the object icon after I changed my mind about the order in which the wires appeared and receded from the gear hub.

I love the look of my icons and I wanted to make sure I could use them in my blog and possibly elsewhere. I figured the best format to do this was to create separate compositions for each icon and turn them into gifs. I looked up the best way to do this and found a complicated workaround after a little experimentation. Because my driver does not support MOV files, I typically render my videos using H.264 which creates an MP4. However, doing this would not allow me to include alpha channels, and I wanted my icons to have transparent backgrounds for more seamless integration in my blog. Adobe Media Encoder still let me render an MOV file, even if I couldn’t play it. I decided to try using an Apple Pro Res 422 which included alpha channels. I was able to right click on those MOV files and open them in Photoshop, and from there it was easy to use Save for Web to export those files as GIFS. I now have 5 beautiful gifs gracing my blog’s home page, but I also have included them here.

For some reason the gifs did not convert the color white very well. Fortunately I think the lighter gray still looks OK. The original video file was uploaded to Vimeo.