Wednesday, July 29, 2015

How to Make a Rotating Banner for TPT using Powerpoint

rotating-banner
If you're a TPT seller, you've probably heard the hype of putting a rotating banner on your storefront page. It's time to take down the link to your blog, and showcase what your store has to offer.  A rotating banner will do just that, but it will take some time and patience to figure this out.

First, let me begin by saying, I read several blogs with tips on how to fill the TPT quote box with a rotating banner, but I felt the most helpful was Pitch Clips.  Her tutorial addresses PowerPoint and KeyNote users. Using PowerPoint, I ran into just a few issues.  Through trial and error, I eventually got it.  Here are the exact steps that worked for me. If you are not using PowerPoint, then these directions will not work for you.

rotating-banner

1. Set the Size for Your Banner

  • Open PowerPoint
  • Click Design > Page Setup 
  • Change the measurements.  After several tries, I found 6" x 2" to fit just right.




2.  Adjust the Background Color 
      You will want to set your background to match the light gray quote box on your TPT storefront.  Here is where I ran into problems following the other tutorials.  I would follow step-by-step, hit apply all, and it kept resetting itself to white.  If you right click and format background to match the color codes below, and it works...awesome!  If not, this is what I had to do:
  • Go to Insert > Shapes
  • Choose the basic rectangle
  • Span it across to fit the ENTIRE slide. 
  • Right click > format shape > fill > solid fill > color > more colors > custom
  • Enter 241 in all three boxes > ok





The format shape box should still be open.  (If not, right click > format shape)

  • Click on Line Color.  If you want a line bordering your banner, click Solid Line, and choose the color you want. If you do not want a line, and wish for it to be flush with the quote box on TPT, choose No Line. 
  • Close the formatting box. 


You now have a blank gray rectangular slide.  
In the left hand column on your PowerPoint presentation: 

  • Right Click the blank slide that you have just created. 
  • Duplicate slide 
  • Repeat until you have as many slides as you want in your banner. (I choose 5)


3.  Design Your Slides
You are showcasing what your store has to offer.  Make it catchy.

  • Insert photo thumbnails from your products.
  • Insert > Text Box
  • Drag the text box where you want the wording to be.
  • Type and format the text to go along with your slide. 
  • Do the same process for all of your slides.
Here are a couple samples from my slide. 




4.  Save as JPEG
     After designing all of the slides you want in the banner.  

  • Click Save As > Other Formats > Save as type > scroll down until you find JPEG > 
  • Save > Every slide

 


5.  Resize Your Images
     Pitch Clips recommended using PhotoShop or SumoPaint.  I chose SumoPaint.  



  •  Click HERE to open Sumo Paint in a new window. 
  • Try Online > File > Open from My Computer  
  • Select one of your slide images (JPEG) that you saved earlier. 
  • Image > Image Size
  • Set to 450 (width) by 150 (height)  
  •                                 
  • File > Save to My Computer > JPG
  • Once saved, x out of the picture you just formatted.  
  • Repeat that process for each of our slides. 

6.  Create a GIF Animation

  • Go to gifmaker
  • Upload Images
  • Once uploaded, drag them in the order you want them to appear. 
  • Over to the right, check to make sure your size reads 100 x 450 x 150.
  • Set your animation speed.  Pitch Clips suggested 3800 ms, and I think it's a good transition time.  It allows viewers enough time to read the banners.  
  •  Click "Create GIF Animation"   It will seem like nothing happens, but it does.  
  •  Click "Download this GIF" 


7.  PhotoBucket
     Almost done.  Next, you will need to upload this file and get the Direct code from PhotoBucket. (You can use another photo hosting site if you prefer.  I only know the steps for photobucket.)

  • Go to PhotoBucket
  • Log in or sign up if you don't already have an account.  
  • Upload the .gif file that you just created.  The sizing won't look right.  DON'T CHANGE IT.  Everything will work out!
  • Once uploaded, click on it, and you will see a list of links off to the right.
  • Copy the DIRECT code. 
     



8.  Shorten the Link 
TPT limits the characters used in their header coding, so you need to shorten the link you just copied from photobucket. 

  • Go to Bit.ly    
  • Paste the Direct code/link in the top right box > shorten
  • Your shortened code will come up. 
  • Leave this page open 
9.  Time for TPT 
  • In a new tab, open your TPT page> My Account > Store Profile > Edit
  • Personal Quote - delete anything you already have typed in this box
  • Copy and paste the following code: (it has to be exact to work) 
              <a href="LINK"><img src="PICTURE" /></a>
  • Go back to your Bit.ly tab. Copy your shortened code.  
  • On the TPT tab, replace the word PICTURE with the shortened code you just copied.
  • Replace the word LINK with the url address you want to direct your viewers to if they click on the banner.  (For example, I chose to put in the url to my Illustrated Word Cards in my store.)
  • If you click save, and it says TPT only allows x amount of characters, then yours is still too long.   
  •  The URL that you entered to replace the word link needs to be shortened.  Cut what you originally typed in there.
  • Open the Bitly tab > Paste the URL > Shorten > Copy and paste back in the LINK section of the code you entered on TPT
 
Here is what my completed code looks like:
<a href="http://bit.ly/1ewR8Ng"><img src="http://bit.ly/1fErHKF" alt="1KvkqKC" /></a>

Whew!  Hopefully you now have a rotating banner on your TPT storefront. :-)  It is definitely a lot of work, but worth it in the long run.
Did this work for you? I'd love to hear from you.