Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers

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

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!!

FINAL UPDATE – This post is retired as TpT has grown and changed how their store functions. I am leaving this post up as a remembrance to days gone by 🙂

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

PC

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!

This is a great post from Pitch Clips showing how to make an animated gif banner for your teachers pay teachers store!
Keynote
This is a great post from Pitch Clips showing how to make an animated gif banner for your teachers pay teachers store!
PowerPoint

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

This is a great post from Pitch Clips showing how to make an animated gif banner for your teachers pay teachers store!

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!

Pinterest

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.

Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
1. Go to your media library (on the lefthand side of your dashboard).  Drag and drop your image to the screen or click upload and upload your gif.
Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
2) Click on your gif to make it pop up and then copy the image url.  You will paste this into the link shortener in the next step.

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!

Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
1. Open the blogger blog and create a draft post.  Go to html view and click upload image.
Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
2.  When it asks, click original size, doesn’t matter on alignment.
Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
3.  Find the full link for the image and copy between the quotes as pictured. You will use this to create the shortened link in the next step.

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.

Blogger Issue

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.
Weebly1
Weebly2

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!

Pinterest

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.

Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
1. Go to your media library (on the lefthand side of your dashboard).  Drag and drop your image to the screen or click upload and upload your gif.
Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
2) Click on your gif to make it pop up and then copy the image url.  You will paste this into the link shortener in the next step.

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!

Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
1. Open the blogger blog and create a draft post.  Go to html view and click upload image.
Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
2.  When it asks, click original size, doesn’t matter on alignment.
Are you looking to upgrade the look of your TpT store? I wrote a GREAT tutorial on how to do the rotating GIF banner for your quote area on TpT. You CAN do this! Check it out! #pitchclips #tpt #teacherspayteachers
3.  Find the full link for the image and copy between the quotes as pictured. You will use this to create the shortened link in the next step.

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.
Choose Text TpT Quote
<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:
PC TpT Quote Banner

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

TpT Banner My Account
1. Go to Name, My Account.
TpT Banner Profile
2. Go to Store Profile, Edit.
Choose Image TpT Quote
3. Choose Image/Link. Upload your GIf. Save.

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.

Pin%2BSample

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

A smiling woman named Shelley Tomich with long, straight hair, wearing a sleeveless navy top, is photographed outdoors with greenery in the background; she exudes confidence as a successful teacherpreneur.

Find it Fast

Categories

Connect

Services

8 Responses

  1. THANK YOU!!!!! I spent over an hour trying to do this and could not figure it out!! I knew you had a tutorial and having the code here was extremely helpful! I had respaced stuff on mine and completely messed it up! I cut/pasted yours exactly how you had it and just swapped out my product/GIF and it worked!! Thank you again!!!

Leave a Reply

Your email address will not be published. Required fields are marked *