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” data-pin-media=

Update 7/26/15 – This has been a popular request!  If you have trouble with any of the steps below, please email me! I am happy to walk you through it!   If you just don’t want to mess with it, I now offer banner creation services!  Check it out!

Update #2 6/3/16 – I have discovered a few helpful tricks to cut out some steps!!! YAY!  Updated below!

Update #3 8/1/16 – I have found an even BETTER way to do it!  Check out the second tutorial here!

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

Wait, What?!?!?

I know you have seen them – they are the latest rage on TpT. It used to be fancy to have a simple text link in your header to fFacebook or your blog or wherever. Then it was to put a picture in the header. Now we have moved to slide shows!  Still don’t get it? Visit my store and check it out!  You can see it in my other store  too!

When I opened my store, I got great feedback from a lot of very sweet people!  However, I think the biggest comment is “How did you do that?”  Well, it is easier to just write it once than to tell everyone individually! 🙂

Note: This is not for the faint of heart.  It is time consuming and if you miss a step, extremely frustrating.  I had a horrible, gigantic banner in my store for a bit before I worked it out.  I still feel bad for the two followers who started following me during that period! 🙂

When you are done with this tutorial, link up your store at the bottom! I want to see your hard work!

What You Need

  • PowerPoint or Keynote (I use Keynote)
  • Graphics Editing Program (I use Photoshop, but Sumo Paint will work too).
  • Free GIF maker (http://gifmaker.me/ or http://gifcreator.me/)  **** I now highly recommend gifcreator ****
  • Free Photo hosting – Pinterest, your blogger website, or wordpress website work fine. (Note do NOT use photobucket – this used to be an option but they now charge $400/year for this).

Step 1: Set up PowerPoint or Keynote

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

You really need to make a photo 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).  Hint: Keep a large ratio to start off for better image quality (helps it not look so grainy!).
  • Alternatively, you could use a service like PicMonkey to get the dimensions right from the get-go!

Step 2: Create Your Slides

There is not a limit to what you can put on here, though remember your buyers aren’t in your store to watch a slide show.  🙂  I have about 6 or so running in each store.  As I have time, I hope to replace them seasonally.

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.

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

Here is one of my slides:

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

Step 3: Export Images

Export your images in your desired format.  Both Keynote and PowerPoint will export images.  In PowerPoint, it is File -> Save as Pictures.  In Keynote it is  File -> Export to -> Images.  If you want your images to be clearer, you can increase the size of the slides.

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

Step 4: Resize and turn it into a gif!

Once you have all your slides, then upload them to http://gifcreator.me/.

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

In the preview pane, drag them in the order you want.  On the right side, double check your dimensions and set the animation time. I  use 3800 ms which is 3.8 seconds.  Play around with whatever looks good to you.

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

Then scroll down and click “Create Gif animation” and then download your .gif file.

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

Step 5: Upload the .gif file to hosting site of your choice

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 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 bitly 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 bitly 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 bitly 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 bit.ly

You must shorten the url because of the TpT restrictions on how many characters in your quote area.  I use bit.ly  Just paste your link and then copy the new one!  A new link might look like this now:

http://bit.ly/1bHWofw

Repeat this process for any links you use in the header section.

You must shorten the url because of the TpT restrictions on how many characters in your quote area.  I use bit.ly  Just paste your link and then copy the new one!  A new link might look like this now:

http://bit.ly/1bHWofw

Repeat this process for any links you use in the header section.

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

– 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=”LINK”><img src=”PICTURE” /></a>

*LINK –  Replace the word LINK with whatever web address you want buyers to go to if they click your picture. I use this to link my two stores.   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 PICTURE 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 looks like this:

<a href=”http://bit.ly/tptquotebanner”><img src=”http://bit.ly/2sujZOy” /></a>

Which comes out to this:

2sujZOy

Step 8: Check your store and troubleshoot!

Did it work? I hope so! 🙂 If not, go back and double check your steps. If it still doesn’t work, leave a comment or shoot me an email at [email protected].

 

 

Colorfully,

Shelley
This is Pitch Clips, the home of amazing resources for teacherprenuers who are ready for some amazing clip art and other amazing graphics! #pitchclips #tpt #teacherprenuer

Link up your store with your new banner!

141 Shares
Share
Pin
Tweet
+1