Creating Your Own Animated GIF

PowerPoint Hacks  Part 1   Part 2   Part 3   Part 4

Getting your graphic to stand out is harder now than ever. This blog post will show you how to spiff up your cover image, wine label, or twitter post using a few easy tools. Okay, I’ll admit I’m not a graphic designer and I have the color sense of a basset hound. That said, I’ve found a few easy hacks to turn your static image into an eye-catching animated gif. Our secret weapon is the much-maligned MS PowerPoint. Okay, save the brick-bats and vegetables until you try it. PowerPoint has some surprising graphics capabilities.... if you know how to use them. To start with, let’s walk through creating this simple gif animation:

The Highlights

If you are already a Master PowerPointer, here’s the short version:

• Import your cover, illustrations, titles... whatnot into PowerPoint. 
• Use the animation tab to create one animated slide. Fuss with the composition and animation timing until you like it (hint, keep things simple). When you're happy with your creation, be sure to save.
• Okay, here's the trick that not too many know: Do a "Save-As," select File Type: MPG4 and save your PowerPoint animation as a video.
• Now upload your masterpiece to Giphy.com and let it create a cool animated gif for use with twitter, blogs, emails and general promotion as you see fit.

Step-by-Step Instructions

For this more detailed explanation, I am assuming that you seldom (never?) use PowerPoint, so forgive the step-by-step minutia. Additionally, I am using the Microsoft Office 365 version of PowerPoint for this example. Earlier versions will work, but you’ll have to hunt out the equivalent menu commands.

Open a new MS PowerPoint document and delete any text boxes or other extraneous elements from the slide. Then go to menu item “Design,” select “Slide Size/Custom Slide Size,” and set your project to 11 inches wide by 17 inches high, portrait orientation. When it asks, select “Maximize.” Since PowerPoint resolution is fixed at 150 pixels per inch, using a big canvas like this makes your final graphic nice and sharp. However, you can set the slide to whatever size best suits your image.

 Now import your book cover into the slide. Generally, you will get the best resolution if you use the “Insert” tab, select “Pictures,” and choose a cover graphics file from your computer. Select the biggest file you have; you’ll resize it in the next step. You can also do a screen-grab and paste it directly into your slide. Now, right-click the picture and select “Format Picture” at the bottom of the menu. This will bring up a side bar with four icons at the top. Select the dimensioned square icon, de-select “Lock Aspect Ratio,” and set the size of your image to 11 inches wide by 17 inches high.

This shouldn’t distort things too much if your cover is a standard book size. Otherwise, you can reset the slide size to exactly match your image proportions. One last thing is needed to prepare your image: Ctl+X to cut it, right click the empty slide and select the “Paste Options/Picture” (empty clipboard on the right). This ensures that the picture is in a format that PowerPoint likes (it’s Microsoft after all) and that you get the full 150 ppi resolution.

Close the “Format Picture” side bar, hit the “View” tab, and open the “Selection Pane.” There should be only one item, your cover image. Chances are, it will be named “Picture 2.” You can click on the text and rename it. There’s also a handy little ‘eye’ icon that will turn the selected item on and off. As you get more items on the slide, the selection pane can be used to re-order them.

 Now the stars. Hit the “Home” tab, go to “Drawing” and hit the little barred triangle that reveals all of the shapes (oh look, a smiley face… nah). Select the five pointed star and place it on your cover image. Drag it to the right size and then use the little yellow ‘handle’ to make it skinny (yellow square just inside the star). Now right click your star and you’ll see a handy little sub-menu with “Style,” “Fill,” and “Outline.” Set “Outline” to “No Outline,” and select a “Fill” color of your choice.

So you’ve got your cover and a star. Now’s the fun part, leave your selection pane open, hit the “Animations” tab, and open the “Animation Pane.” Then select your star, open the “Advanced Animation/Add Animation” tab, and select “Entrance/Zoom.” Missed it? Click “Play” in the Animation Pane to see it again. The little green bar shows that the entrance effect will take 0.5 seconds. Click on the right edge of the bar and you can drag it out to extend the entrance time as long as you would like. You can also delay the start, or drag the entire bar earlier or later. At the bottom is your timeline where you can see the entire animation timing sequence by scrolling back and forth.

 To add the “Exit.” Open “Advanced Animations/Add Animation,” select “Exit/Float Out,” then click “Effect Options” and hit the ‘Up-Arrow.’ Now, almost done with the star. Click ‘5-Point Star’ on the “Selection Pane” to highlight both entrance and exit animations, then hit “Timing/Start” and select “With Previous.” To view the full effect, go to the orange bar on the bottom of your screen and hit the icon that looks kinda like a little projection screen (or maybe an Alien from Planet Booblob, go ask Microsoft). If a star appears, and then floats up while fading away, you’ve got it.

More stars? Easy. Select your star, CTL+C then CTL+V for about ten duplicates. Select each one and drag it around on your image to get the effect you want. Now set the first star to appear with about a 0.5 delay and stagger the remainder so that each one starts a little after the previous. You can drag the timing bars about to vary the durations, but the best effect is obtained by starting the “Entrance” and “Exit” actions at the same time. Note that a second is a long time in an animation like this and my overall duration is only 6.0 seconds. Take a look at the screen-shot below to see how the sequence should work.

Hit the little Alien dude to play it. Then mess with positions, timing, and whatnot until you like the results. There, done… just about. Save. Then open the “File” tab, hit “Save As,” select your folder, then open the “Save as type:” menu to select “MPEG-4 Video (*.mp4)” and “Save.” You can open the video in your computer’s mp4 player to check it out. Good? Then open Giphy.com in your browser and follow the directions. Be sure to set the start at 0.00 and the end time to match your animation (<10 seconds). Save your masterpiece and voilà!

There’s a lot more you can do with the PowerPoint Animation tools. Part 2 shows how to use "Remove Background"  and "Path" to create an animation like this one: