Mind Blown. Seriously.
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
- 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.
- 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!
For the TpT Quote Banner:
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).
Step 2: Export Your Video
KEYNOTE
- After you have finished timing your keynote animations, go to File -> Export as Quicktime Video.
- Adjust your slide speeds (I use 1 and 1).
- Under Format, I choose the highest resolution possible. (1080HD)
**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
- 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! 🙂
- Go to Movie, Resize and resize it to 450 by 150. (If your movie was not already sized appropriately).
- 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 🙂 )
- Now go to settings and click the “calculate frame count and delay.”
- Minimum of frames per second 12.
- Under Gif color optimization, I do none.
- Preview your GIF if desired.
- 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.
- Save your GIF on your computer.
Check out my process here:
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
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 three options: Pinterest, WordPress, and Blogger.
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 the link shortener in the next step.
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.
1. Go to your media library (on lefthand side of your dashboard). Drag and drop you image to the screen or click upload and upload your gif.
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!).
1. Open the blogger blog and create a draft post. Go to html view and click upload image.
2. When it asks, click original size, doesn't matter on alignment.
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 5: Shorten your link with a link shortener.
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.
Step 6: Go to your store profile on TpT and put your link there
– 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:
Thank you so much for this easy to follow tutorial!!!
You are welcome!!
Thank you so much!!!!!!! This is awesome!!!
You are so welcome! Banner looks great!!
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!!!
Oh yay!! I am so glad you figured it out! Glad to help, Andrea! 🙂