Animating the Cal Poly ME Logo

There was a point this summer at which I decided to learn something a bit new. I had seen other people include animated GIFs in their email signatures, so I decided I wanted to animate Cal Poly's Mechanical Engineering Department Logo. Figure 1 shows the original image, taken from http://me.calpoly.edu/openhouse/.

Figure 1: Original Mechanical Engineering (Cal Poly) Logo

A gear in motion is a perfectly simple way to add a little "cool" factor to your email signature. This blog post aims to introduce you to some of the (free/open-source) tools I used to animate the logo. However, if you merely want to use the animated GIF in Figure 2, skip to the Using The Animated GIF section.

Figure 2: My Completed Attempt to Animate the Cal Poly ME Logo

Step 1: "Blending" the Animated Parts

As the title suggests, for the animated parts, I used a program call Blender. This is a free program with some powerful tools for producing animations and professional renderings. I can't at all pretend to know everything there is to know about Blender, nor will I try to convince anyone that its tools/capabilities are intuitive to use. However, there are plenty of tutorials online. I personally started with this 2-minute tutorial, and followed through with the other 6 tutorials.

In any case, with this tool in hand, I imported a simple .STL file of a gear with similar specifications to the one in the image (14-tooth spur gear). There is little need to model your own gear when they are so readily available on websites such as RushGears.com.

Once imported into Blender, I modified it by adding a keyhole, and then proceded to color it, mark my keyframes (in order to animate it), and output approximately 70 images similar to that in Figure 3. The difference in each image, of course, is that every image is slightly moved from the previous image. I only needed to produce 3 keyframes in Blender to achieve a full rotation (24 frames/second, 3 seconds/rotation), and upon output, Blender took care of the rest.

Figure 3: Single image of the gear output by Blender prior to post-processing

Now, you certainly could output a video from Blender, but I output the images only so that I could post-process them all in an attempt to achieve a similar effect to that in the original logo.

Step 2: Post-processing Images Quickly with GIMP & Python

Now that I had some 70 images, there were some artistic preferences I wanted to implement. Some of the changes I wanted to make were:

• Removed the gray background (and add an alpha channel)
• Make the top of the gear white, similar to the original
• Simplify the coloring and the shadows
• Superimpose the original text over every image

I don't have any images here to show, but I will simply point out that I relied heavily on my knowledge of Python scripting and GIMP to achieve this within a reasonable amount of time. GIMP, like Blender, is a 100% free program. I use it heavily any time I need to edit an image in place of paying for a version of PhotoShop. When installed, GIMP automatically includes something called "Python-Fu".

Using Python-Fu (in GIMP, "Filters > Python-Fu > Console") allows access to any of the tools you use in GIMP manually. I merely had to tweak the first image manually until I liked it, then research the Python-Fu Procedural Database (in GIMP's Python-Fu Console, "Browse...") until I found the appropriate tools, and implement those changes to every single image through the use of a "for" loop. Note that I figure imported all the images as layers. Note also that you can implement low level-operations on images if you like, but I found that using the database tools was much faster. The result, on a single image, is that shown in Figure 4.

Figure 4: Single image after implementing the mentioned post-processing steps (without alpha channel)

I know that the above description is a bit complex to swallow, but I'm simply not focused on describing the details of my post-processing within this post.

Step 3: Exporting GIF Animation

Once you have edited all the images, the simplest part of making the animation is outputting the animated GIF. I arranged the images in order (start at bottom, finish at top), and then exported them as a GIF (in GIMP, "File > Export..."). Whenever exporting a GIF from GIMP you are automatically shown the window concerned with animating the GIF or not.

There are a few nuances to consider, though, when outputting an animated GIF:

• There are two ways a GIF can animate
• Combine: this will not work well if you have alpha layers, as the previous images will show up in the background of the following images; however, this fact can be useful if there is no alpha layer to consider, as a GIF can be optimized to only add changing pixels. To learn about optimization and other animation tools, you may want to research some of the tools under "Filters > Animation" menu item.
• Replace: this one works best for images with alpha layers.
• There is no way to resize the animated GIF at the time of the output, so I recommend the following
• Save the orignal-sized .XCF with all its layers
• Before exporting, resize the whole image (this should resize every single layer, too)
• Now you can export the animated GIF

Step 4: Using the Animated GIF

To use the animated GIF online, you usually have to host it in some fashion. Luckily, I've done that for you on my Picasa web albums, and I'll provide the links shortly. For those who intend to use my GIF, or to host their own on Picasa, please note that when inserting into a blog or an email, if the program tries to resize it, it may botch the animation.

First, the completed animations are below (Figures 5-7):

Figure 5: Original size (you can see the defects from resizing), best viewed at original link:

Figure 6: Finished Product with 100 pixel height; original link.

Figure 7: Finished product with 50 pixel height; original link. 

I can only speak from this point forward about how to insert this into your signature if you use Gmail, though almost every email program has a method for inserting automatic signatures, and a vast majority will also let you include an image (at which point, you can either use the original links given, or save the image to your hard drive if necessary).

Gmail Signature

In Gmail, though, you would use the following: from Gmail, "Settings > General > Signature:". Remember, Gmail requires a URL so you cannot upload from your hard drive. Also, it will likely not display correctly if you resize it, so use the original size.

Zimbra Mail Signature

By request from a friend, here is where you should look to add the logo to your signature if you use the Zimbra mail client: from Zimbra, "Preferences > Signatures". From there, you should see a button that, when you hover over it, provides the tool tip "Insert image via url". You can probably figure out the rest.

I hope you enjoyed this surface-level walk-through of how to make an animated GIF (with completely free tools available for any OS)!