Note: This is an update to the original tutorial for slides that are not animated.  You can read that here.

Updated 7/16: More instructions for my PC friends!

Updated #2 7/1/2017 – Photobucket is NOT an option for hosting anymore! See bottom of post for new options!

Updated #3 6/15/2018 – Bitly is not an option for link shortening! It is marking image links as spam!

You can make a video, and turn it into a GIF with all sorts of fancy transitions, pictures, etc. The sky is the limit! (Though remember no sound on GIFs!). You can use this for your quote area, for custom pins, for promo pics, anything!!

When I figured this out while working on someone’s custom pin for Pinterest, I literally stood up at my desk and yelled for joy! (Yes, I really did).

First, this process is an update to the first tutorial I wrote on making Gifs. If you just want a simple rotating GIF, this still works great! Everything used is FREE and EASY!!!  Now to the nitty gritty of the new process. I am showing you how to use this to make a new quote box image for Teachers Pay Teachers, but you could make promo images, custom pins, etc. with this!

Materials Needed

Mac

• Keynote
• A GIF program. https://gfycat.com/gifbrewery has worked consistently for me!
• A link shortener.

PC

• Powerpoint.
• A GIF program. http://image.online-convert.com/convert-to-gif has worked consistently for me!
• A link shortener.

Also, I tested Instagiffer on the Mac and it worked, so I assume that it would work similarly on the PC. Some people also suggested GIF Animator. I have not tested either of these on the PC. Please report back if you do!

1. Make a video in iMovie, Premiere, or any other movie making software you want. I haven’t done this yet for this process because I haven’t had the need, but I imagine the following steps would be very similar.
2. Make a PowerPoint or Keynote presentation, complete with transitions, fancy text effects, etc. Be sure to set up the actual timings of any of your slides that you want set to something custom. If you want all your slides to move evenly (like 3 seconds each), then you can just set that later.

Here is a quick video of adding some animations to the custom pin for this blog post!

You really need to make a document with the dimensions of 150 pixels by 450 pixels; PowerPoint and Keynote will not go this small so I doubled the ratio and will resize later.

• Keynote: Document size: 300 pixels by 900 pixels.
• PowerPoint: In inches, you need a 3:1 ratio. For example, 3 inches by 1 inch. Also, 6 inches by 2 inches. You get the idea! (This can be changed in File -> Page Setup). I also like keeping a large ratio to start off the images with a larger ppi (helps it not look so grainy!).

Alternatively, you could use a service like PicMonkey to get the dimensions right from the get-go!

Powerpoint:
1. Format -> Slide Background.
2. Click Color.
3. Click more colors.
3. Click on the slider Picture and then select “RGB Sliders”
4. Type in 241, 241, 241 in the settings or F1F1F1 in the Hex code.
5. Hit Apply.

You can now skip step 4 below if you want to!

(Same process in Keynote, just use the format, slide background).

KEYNOTE

1. After you have finished timing your keynote animations, go to File -> Export as Quicktime Video.
2. Adjust your slide speeds (I use 1 and 1).
3. Under Format, I choose the highest resolution possible. (1080HD)

I found a great tutorial on how to export to video on Powerpoint for windows! 🙂  I have not tried this myself, but I hear it works great!

1. Open GifBrewery 3 and open your video. For a couple of my videos I could not actually see the preview in the pane. Don’t worry – it’s still there! 🙂
2. Go to Movie, Resize and resize it to 450 by 150.  (If your movie was not already sized appropriately).
3. Drag the green handle at the bottom all the way to the left. Drag the red handle at the bottom all the way to the right. They were intended to take a snippet of a longer video, but you want the whole video!  (Or adjust to your desired stop and start 🙂 )
4. Now go to settings and click the “calculate frame count and delay.”
5. Minimum of frames per second 12.
6. Under Gif color optimization, I do none.
7. Preview your GIF if desired.
8. Render your GIF (top left button).  You might get a warning that your Gif is big.  No worries!  Click go and it will take awhile to render.
9. Save your GIF on your computer.

Check out my process here:

• GIF Animator – I have not tried this but it came recommended (PC) – FREE
• Instagiffer – I did download and try this one. It works, but not as easily as Gif Brewery. (Mac and PC) – FREE
• *** My new favorite!!*** Run it through this site and make sure you put to resize to 450 by 150 🙂 http://image.online-convert.com/convert-to-gif

NOTE: DO NOT USE Bit.ly!  Bitly has started marking these images as SPAM and will not show it in your TpT store!  Try one of these two things:

1.  Tiny Url.  Just paste your link and then copy the new one!  A new link might look like this now:

https://tinyurl.com/123adfd5

Repeat this process for both the destination link and image link.

2. Pretty Links.  If you are on wordpress, install the plugin Pretty Links and you can shorten your links using your custom domain.  This is the option I now use.

– Login to TpT.  Go to “My Account.”  Then go to  “Profile.”

– You must use this code EXACTLY in your profile or it WILL NOT WORK!!  This goes in the “quote” section:

<a href=”DestinationLink”><img src=”ImageLink” /></a>

*DestinationLink –  Replace the word DestinationLink with whatever web address you want buyers to go to if they click your picture. TpT has now asked that we only link to links on TpT.

Note: You CANNOT put more than one link. I would love to link to each product, but we are limited to one link.

*PICTURE – Replace the word ImageLink with the link to your Gif.

*WIERD BUG – MANY people have had trouble with the correct code and the banner still not working.  Turns out pasted quotes ( ” ) are having trouble rendering.  So paste your code, then manually delete and retype each ” – this fixes the problem 90% of the time!  (It has something to do with formatted code if you care, lol).

My banner code would look like this:

 <a href=”https://pcgmanage.com/PCV2G”><img src=”https://pcgmanage.com/PCPIN” /></a>

Which comes out to this: