Tuesday, December 15, 2015

New Tech Tip: Animated Letter/Word GIFs

I'll be adding this to the Tech Tips over at the class wiki later, but one thing I want to use this blog is as a place to collect new Tech Tips. That way, students who want to see what tips are new can check here! Today's tip is inspired by #HumanMOOC and the Week 1 activities for that class.

Letter by Letter (or Word by Word) Animated GIF

One of the fun things you can do with animations is use them to bring out the text in an image, building the text letter by letter or word by word. You can also do multilingual texts (for examples of that, see these Greek-Latin-English proverbs).

For this GIF, I'm going to focus on letter-by-letter and word-by-word animations. Here's an example of a letter by letter image, and you'll find a word by word image at the bottom of the post (I'm doing this at Christmas time, as you can see). I've set this top one to run just one time so it won't drive you crazy; the bottom one is set on infinite loop.



These text animations are easy to make! The idea is to make multiple versions of your image, starting with the full text, and then removing one letter or one word at a time. Here's a step-by-step guide using Cheezburger to make the images and GIFMaker.me to make the animation.

1. Choose your image maker. For this example, I'll use Cheezburger. Start with the full text you want, and then remove letter by letter (or word by word) to work backwards to the starting point, the image no text.

Hint: Number the image files as you save them so you know what order they go in, starting with 01, 02, and on up to however many images you save; just right mouse-click and select "Save-File-As," naming the files as you go. It's a good idea to save them in a new folder on your desktop so you don't lose track of any of them!

Also, you might change the Cheezburger default of jpeg to jpg, since some programs take jpg only. So that would be: 01.jpg, 02.jpg, etc.

For example, here is the starting file for my "Hi There" cat which has the full text that I will then remove letter by letter (and exclamation mark by exclamation mark). I saved the file as 01.jpg


I work my way down to the final file, the image with no text left at all. I saved this file as 11.jpg



2. Choose your GIF maker. There are all kinds of animated gif tools online; if you have one you already like, use that one. For this example, I'm using GIFMaker.me.

3. Upload images. Follow the instructions for your GIF maker tool to upload the images. If you want a kind of "pause" at the beginning or at the end of the animation upload that first (or last) image a few times to give the animation a longer display there before starting up again.

4. Special options. Depending on the tool you use, you may be given special options, like adjusting the speed of the animation or choosing how many times the image loops. For letter by letter animations, you might try a 500 millisecond (half-second) delay, and for word by word images you might want to go slower, like 1000 milliseconds (one second) between images. Each GIF maker tool will offer its own range of options.

If you are using GifMaker, you will have the option to view your gif and then to download it. You are now an animator! If you don't have an animated gif in your Introduction post already, you might want to add this animated gif to your Introduction. You can also put the animated image in a new post; you can decide what suits your blog best! Include a link to the tools you used for the image information part of the post. Maybe you will inspire others to make their own animations!



And here's the infinitely looping version of the "Hi There" cat image:


1 comment: