Tips from Pitch Clips: Turn your video into an animated GIF!

Mind Blown. Seriously.

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!

Step 1: Make Your Video/Transitions

There are several ways to do this.

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!

*Note: make sure you set the dimensions of your keynote or PowerPoint to the desired size for your project.

For the TpT Quote Banner:

Canvas size Size

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!

If you want the images to “blend” with the grey header space on TpT, then you need to set the background color to #F1F1F1. You can format the background of your slide (directions below) or insert a rectangle shape and recolor the shape (put it behind all your other content).

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).

Step 2: Export Your Video

In the video below, I exported at a lower resolution. However since making this video, I now export at a high resolution and then use the gifmaker program to resize.

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)

POWERPOINT – Office 2016 (365 Subscription) on WINDOWS ONLY
**Note: If you have PowerPoint for Mac, You can NOT export directly to a movie. However you can get around this by doing a screen capture movie using Quicktime (included with mac) or Screencastomatic. One of the many, many reasons I love Keynote! ***

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!

Step 3: Turn Your Video into a Gif

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:

If you want an awesome overview of this program, watch this video:

(Step 5 instead of 4): ALTERNATIVES TO GIF BREWERY 3

I know some of you don’t want to pay 4.99 for this program OR you might be on a PC. Here are some alternatives for you:

• 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

Step 4: Upload the .gif file to Image Hosting Service

The next step is to upload your gif to the third party hosting of your choice.  Third party hosting just means that you will use a link on TpT to point to an image somewhere else on the internet as TpT will not allow you to upload the image directly.

Do NOT use Photobucket.com anymore (this used to be the #1 option).  Photobucket now charges $400 year for the this service.

I will cover five options: Pinterest, WordPress, Blogger, Dropbox, and Weebly. I am hosting many of my smaller ones on Weebly now and larger on Dropbox.

Pinterest

You can use a secret board or a public board for this.  Though I have not done it for my store, others have very successfully. Note: Your gif file cannot be over 10mb.  I do not use Pinterest because many of my banners are pretty big.

1.  Upload a pin as you normally would.  If you are on a secret board, do not worry about where it points to or what the description is.  No one is pinning it!  But if you want to display it on TpT, then why not actually pin it too?

2.  Go to that pin.  Right-click and click Copy Image Address.  This is the link you will paste into a link shortener in the next step.  Note: Some people are reporting that Pinterest is not working right.  But if you want to try to use Pinterest, go for it!

WordPress Blog

f your blog is hosted on WordPress, you can upload your gif to your media section.  You do not have to put it in a blog post.

Blogger Blog

I used an old blogger blog I use for testing when I am coding for clients.  I created a draft post (you don’t ever have to post it!). Note: I am getting some reports of blogger having issues! Use with caution!

4.  Save your draft (you do NOT have to publish, but do save it!)

Note: I am having issues where Blogger is showing a triangle with ! for really large gifs. You will need to choose another option if you face this.

Dropbox

You can upload your gif to Dropbox. Get the link and then change the end to 1. So if you have

https://www.dropbox.com/s/5y7c4bc467k05nl/Linda%20Gif%20GenEd.gif?dl=0

Change it to

https://www.dropbox.com/s/5y7c4bc467k05nl/Linda%20Gif%20GenEd.gif?dl=1

Weebly

1. I created a free weebly.com website.
2. Then I added an image, and published it.
3. Go to your published site, right click and copy image address.

Step 5: Upload the .gif file to hosting site of your choice (OR skip to step 8 to upload directly to TpT!)

The next step is to upload your gif to the third-party hosting of your choice.  Third-party hosting just means that you will use a link on TpT to point to an image somewhere else on the internet.

Alternatively, if your gif is below 5MB in size, you can upload it directly to TpT!

Do NOT use Photobucket.com anymore (this used to be the #1 option).  Photobucket now charges $400 a year for this service.

I will cover three options: Pinterest, WordPress, and Blogger.

Pinterest

You can use a secret board or a public board for this.  Though I have not done it for my store, others have very successfully. Note: Your gif file cannot be over 10mb.  I do not use Pinterest because many of my banners are pretty big.

1.  Upload a pin as you normally would.  If you are on a secret board, do not worry about where it points to or what the description is.  No one is pinning it!  But if you want to display it on TpT, then why not actually pin it too?

2.  Go to that pin.  Right-click and click Copy Image Address.  This is the link you will paste into a link shortener in the next step.  Note: Some people are reporting that Pinterest is not working right.  But if you want to try to use Pinterest, go for it!

WordPress Blog

If your blog is hosted on WordPress, you can upload your gif to your media section.  You do not have to put it in a blog post.

Blogger Blog

I used an old blogger blog I use for testing when I am coding for clients.  I created a draft post (you don’t ever have to post it!). Note: I am getting some reports of blogger having issues! Use with caution!

4.  Save your draft (you do NOT have to publish, but do save it!)

Step 6: Shorten your image link with a link shortener.

You must shorten the url because of the TpT restrictions on how many characters in your quote area.

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. 

Step 7: Go to your store profile on TpT and put in your link

1. Login to TpT.  Go to “My Account.”  Then go to  “Profile.”
2. You must use this code EXACTLY in your profile or it WILL NOT WORK!!  This goes in the “quote” section and choose “Text” to input.

<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=”http://tinyurl.com/tptquotebanner”><img src=”http://tinyurl.com/2sujZOy” /></a>

Which comes out to:

Step 8: Upload directly to TpT (alternative to steps 5-7 IF your gif is under 5MB)

Step 9: Check your store and troubleshoot!

Step 10: Submit your store and look at some examples!

[ninja_form id=7]

Pinterest Example

I used this process to make a quick pin for this post. (Feel free to re-pin it 😉 ). Note: pins only animate when uploaded to Pinterest or repinned from Pinterest. Pinning from a website does not allow for animation.

Here are a few examples of some amazing stores that have used this tutorial!

Wordpress and Website Information You Need!

Get all the latest website, WordPress, and Teacherpeneur tips right in your inbox!

SUBSCRIBE!

You have Successfully Subscribed!