Kinetic Typography

I am working with Adobe After Effects in the motion graphics class. One of the popular uses of this software I’ve seen in putting type into motion – sometimes known as ‘kinetic typography.’ This week I’m looking at examples of this kind of work. I’m using this post to collect the examples so I can refer back to them. Maybe someone else can find them useful as well.

I found a post of 34 ‘Must See’ examples of kinetic typography, so I watched them all. I’m sharing some with comments below:

The Hush Sound – Lion’s Roar by Mig Reyes

We watched this one in class, and it is pretty flawless. The only thing I see that could improve it is doing the entire song. I seem to see a flickering effect, that simulates what you would sometimes see if you watched a movie through a film projector. I also like how things seem to zoom in and out. Everything is not on a 2-D plane, things appear to get closer and farther away as well.

Shine A Light by Bait

This one was amazing. One there are lots of textures and vibrant colors. I really like the simulated 3D effect. There is something like confetti floating around a rotating pyramid in the background. That would take a lot of work to create in AfterEffects. I wonder if some other form of 3D software was used instead?

You Are Not So Smart

This is a great book, and a great piece of kinetic typography. I really like how certain words are emphasized by using a different font or style of type. I also liked how words appear horizontally, but sometimes rotate for emphasis.


This one strikes me as more of an animation than what we would consider ‘kinetic typeography’ but I include it nevertheless.

Shop Vac


This one is really fun. Probably my favorite so far! We lead off on a simulated highway scene, with the text moving down the road in perspective. I’m blown away by the use of textures. Everything fits. For example, when the bathroom is mentioned, we see a fuzzy bathroom rug or towel background. I also liked how certain corporate logo motifs were used. The words appear, popping open like bubbles or something. Lots of graphics. Yes, this is my favorite so far.





This one makes me seasick. And I’m an ex-sailor. Who never got seasick.

Make It Better


I like the sound effects in this one. I wonder if I can somehow use sound effects like this in the piece I am planning?

Back to the Future


I like this one mainly for its simplicity.

Wouldn’t it be Nice


This one uses a lot of cute graphical elements in the classic Beach Boys song.

Ira Glass – Storytelling

I liked Ira’s message more than the typography on this one. While I appreciate simplicity, this one was too simple. I don’t think the type really added anything to the message.

Ok, I think that is enough for now. Now I need to move on to thinking about my own piece I’m planning. More on that soon…

Like a Champion

KC Royals Win the Pennant
KC Royals Win the Pennant

In 1985, I missed the magical baseball season of the Kansas City Royals. I entered the US Navy in June of that year, graduating recruit training in September. There was no television watching in boot camp, even if your baseball team was heading for the World Series. By the time October rolled around, I was still getting my bearings as a new USN sailor in training. I didn’t watch a game that year.

It’s not like we watched a lot of baseball on television growing up anyway. I mostly enjoyed listening secretly to Royals games on my transistor radio after bedtime. I remember having a Royals poster on my wall, way back in the earlier days of the franchise. It had players like Cookie Rojas, Darrell Porter and of course George Brett.

For much of my life, I haven’t really followed Major League Baseball. But several years ago, probably because of a lack of anything good on TV to watch, my wife Wendy got us started watching the Royals games. Not too long after we began following the team, they acquired a pair of rookies called Eric Hosmer and Mike Moustakas. You could tell by watching those two that this team was going to be something special.

Every year they played, they got better and the team got better. Last year they came close, oh so close, losing in the final game of the World Series to the San Francisco Giants. After an incredible season, the Royals will get another chance in the World Series this year. The thing that is most admirable about this team is that they never give up.

I think persistence is a character trait that is becoming less common. We live in a world of instant, easy access. At the click of a button, we can download digital items instantly. Even physical things can be delivered to our door overnight. Sometimes it seems as though we have lost our willingness to delay gratification and to stick to our goals for the long haul.

I know many times my students are inclined to give up when things get too tough. While it is always a temptation, it giving up isn’t how you accomplish great things. Most of the time, anything worth doing is going to take some time and some persistence. That’s why seeing the KC Royals returning to the World Series for the second year running is such a cool thing. It is like they have unfinished business to attend to from coming up short last year. Time will tell if they will be successful, or if they will have to keep on working.

Seeing those young men celebrate their victory last night after working so hard for so long reminded me of my own recent personal victory that I will share with you in another post. But I do wonder how often do we, as parents or teachers of young people, intentionally create achievable situations that can’t be finished without great effort and persistence for our kids?

I have a number of assignments that I give in classes that I teach that can’t be successfully completed in one sitting, such as a video term paper research project or even the pumpkin carving project we will be finishing up next week. These assignments have mile-marker achievements built in, so the students can know they are on track towards finishing a big project that they can look back on with satisfaction knowing they worked hard on something worthwhile.

Persistence is a good thing. It is a required ingredient of being successful. So what are we doing to encourage persistence for our youth in a world that tells us we shouldn’t ever have to wait or endure any obstacles to achieve our dreams?

Woman Without a Phone

This image from the Boston Globe is going viral because one woman in a crowd of onlookers is the only one actually watching and not recording the event.

Grandma No Phone

I do this all of the time. Sometimes I regret not having a picture because I only watched. But there are many more times that I did record an event with video or photographs that I don’t even recollect experiencing. I was recording, but I wasn’t there. This woman was there. And now I am there as well, when I choose to be.

This past weekend was a perfect example. I brought a camera along to Emily’s softball tournament. I took some (quite a few, actually) photos. But most of the time, I was watching the game, and not having a care in the world about whether or not I captured a perfect photo.  Because they played multiple games, I was able to both enjoy taking photographs, but also spend most of the time watching my daughter play ball. It was magnificent.

Be intentional people, not mindless in your use of technology. It is a better way to live.

PS – Here are some softball pics. Her team got 3rd place.


Layer Tennis Part 2

A second layer tennis match happened while @DangerRanger11b and I were going at it on the other court.  This one was between @a_merrymary and @fenderbendr1994. @a_merrymary served this picture:

and @fenderbendr1994 returned with this:

then @a_merrymary quickly slammed this one back:

which was responded to with this:

Following a new line of thought was @a_merrymary

to which @fenderbendr1994 dinked this:

and @a_merrymary slammed home this surprise ending:

Well played, you two!

Layers Tennis Match 1

Yesterday, my students and I played a round of “layers” tennis. Originally conceived as “photoshop” tennis, the name was changed to acknowledge that software used to play the game extends beyond Adobe Photoshop, and also I’m sure to keep Adobe, Inc. content by not using one of its trademarked product names. I first heard about the concept from Jim Coudal of Coudal Partners when I heard him speaking about creativity, and he mentioned Layer Tennis being played by professional designers. I’ve always kept the idea around in the back of my mind, and yesterday was the day to bring it out.

My students are doing a digital storytelling course DS106, which incidentally is open to anyone who wants to join. I submitted the Layers Tennis assignment to the DS106 Assignment Bank, and we decided to play a match.

Since there are only three students in the Salina class, I decided to play so we could have two matches going on. Like a game of tennis, one player serves a photograph or image to the other player. Then, the receiving player modifies the image using graphics software like Photoshop, keeping some element(s) from the original. Then the new image is sent back to the first player for further modification. We used Twitter to send the images back and forth, so others could see the game too. In our version of the game, each player made three images each, for a total of six images in the game. Below you can see how our two matches progressed:

The first was myself (@billgx) vs @DangerRanger11b

I served this image I found on Flicker Creative Commons:

DangerRanger11b replied with:

For round two I sent back:

and received back this shot:

At which point, I nearly lost it. I don’t know how to compete with that, I thought. So I gave him a thumbs down.

Undaunted, he put my image on a TV screen with a family enjoying some popcorn:

At which point I became desperate. I didn’t know how to respond. Then I thought about what it might look like if they were looking out the window of a Star Wars ship or something. Then I remembered the asteroid field from the Millennium Falcon. Then I thought the chicken heads would make good asteroids. Then I thought they should be animated. Shoot, I can’t remember how to do animations in Photoshop. But I’ve been doing some After Effects, maybe I can do it in that. Yes, I can make a movie in AE, then import it back into PS to make an animated gif. And this is the result…


It was the end of a hard fought battle against a worthy opponent. Go to the next post to see the other match.

Napoleon Dynamite Quotes

Here is a little After Effects project I’ve been working on with the Motion Graphics class at K-State. Starting with some source video (I chose Napoleon Dynamite) we exported still frames and made drawings from them on tracing paper. Then we scanned and imported the drawings, and added a track matte effect that allows the drawing to appear like it is being drawn. I also decided to add some text and sound effects from the scenes. Finally, I selected some funky music that would underly everything. I thought about adding some colorization, but I’ve already spent a lot of time putting this together.

Personal Horror Story

For this DS106 Visual Assignment, I want you to tell a true story of horror. If you’ve never had anything horrible happen in your life, you won’t be able to do this. If you have and you dare to share it, do the following:

Search the Flickr photo archives for five images that when arranged in the correct sequence can tell the viewer your true story of horror. For this assignment, I want you to use only Creative Commons tagged photos. After entering your search terms, change the search result settings from “Any Licence” to “All Creative Commons” so you will only see images that the author grants you permission to use.

Download your five images using the small format (240 x 180) option. Using photo editing software, create a single image that will contain all five of your small images, reading them in sequence from left to right. Save as a single JPG image and upload to Flickr.

Here is mine:

One Cannot Forget
Personal Horror Story

Image Credits:
Frank Müller Devastated/Am Boden zerstört
Luigi de Guzman ambulance
Jason O’Halloran Lindsay crying
Steve Holmes Night prayer in silhouette
Schristia Dark Matters (IMG_5941R)

Bathroom On The Right

When I was a kid, most of the music we listened to came to us from the radio. There was no internet and no album jackets with song lyrics, we just relied completely on our ears. When I got older and started buying records and tapes, I was finally able read the words to the songs I listened to. Now, with the internet, almost any song’s lyrics are just a Google search away.

One thing that sometimes happened to me when I listened to music is that I would mis-hear (and mis-sing along with) favorite songs. Evidently I am not the only one this has happened to, because there is a website called Kiss This Guy. Kiss This Guy is named after a famous mis-heard lyric from the Jimi Hendrix song. The actual lyric is ‘Scuse me while I kiss the sky, but plenty of people heard ‘Scuse me while I kiss this guy.

So, without further adieu, here is my favorite misheard lyric: There’s a Bathroom on the Right, by Creedence Clearwater Revival.


I recorded the song Bad Moon Rising off of an old CCR cassette tape into Audacity. I edited the song down to just include the intro and the refrain. I recorded my daughter & I singing the misheard lyrics, “there’s a bathroom on the right.” Then we edited the two tracks together. I saved to an MP3 and published the piece on Soundcloud.

Napoleon Gifs

Pull me to town Tina you fat lard

Tonight, I did the Say It Like Peanut Butter assignment on DS106. I used to make a lot of animated gifs, but have gotten away from the practice. But apparently, ,the tools have gotten a lot better. I used Photoshop CS6 to do mine. I actually have Photoshop CS5 and CC on my Macbook, but either of these gave me an error saying that video import was not supported on Mac. For some reason, the CS6 version was happy to import a video clip.

For my 2 gifs, I chose scenes from Napoleon Dynamite. My kids & I love this movie, but my wife, and plenty of other people just don’t “get” it. To me, it is a lot like a non-sensical Monty Python film, but come to think of it, my wife doesn’t care for those either. It takes a special brand of humor, I think.

As for my process, since it’s been a while, I googled for an animated gif tutorial and found this one that told me what I needed to know.

*** Edit – Ok, I looked at this and decided I could tell you a bit more about the process I used. I was in a hurry and wanted to get this post made, but I’ll tell you more here.

I used Handbrake to rip the movie DVD. Handbrake is hands-down the best tool I’ve used to make a video file from a DVD. It’s free, and simple to use. It works on Mac, Windows and Linux.

Once I got the entire film into a digital file, I brought it into my favorite editor for quick video projects, Camtasia. It is $179 with an education discount, but really powerful andwell worth it if you make a lot of video projects. It is best known for screen capture, but also has a really nice, simple-to-use editor. If I needed to, I could have skipped the Handbrake step and just recorded the scenes I wanted directly from the DVD in Camtasia.

But I already had the fully ripped film so I brought it into Camtasia, and edited it down to the scenes I wanted to use. I rendered to a new file a smaller video that had only these scenes. Once I had this digital file, I imported it into Photoshop using the “import as layers” command. After it was in Photoshop, under the “Window” menu, I selected “Timeline” so the video frames were visible. From there, I deleted any frames I didn’t want, and used “File -> Save For Web” to save the project as an animated GIF.