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!
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!
Step 1: Set up PowerPoint or Keynote
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). I also like keeping a large ration 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!
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).
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).
Here is one of my slides:
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.
Step 4: Recolor images (only if you did not set the color correctly in the previous steps)
*******Use the following ONLY if you did NOT set your background color in PowerPoint: ********
If you are a photoshop user, then set up a batch process to open each picture and replace the background color with color #F1F1F1. This will save you significant time. (I also resize in this step but we will talk about this in the next step).
If you are NOT a photoshop user, then use the graphics editing software of your choice to set the background color #F1F1F1. I have used SumoPaint with great success, though know it will take some time to do each photo.
Open your image in SumoPaint and select the color #F1F1F1 on the left hand side, bottom. Then use the fill tool to recolor your background. Don’t forget to color in the circle letters like O and P! 🙂
Choose color f1f1f1
Use the paint tool to color the background. Notice my O in “of” is not colored yet! Make sure you fill these spaces in!
Step 5: Resize Images
*********** If you use GifCreator in the next steps, this step is NOT necessary!! ************
If you are a photoshop user, then include a “resize image” command in the batch processing along with the previous step.
If you are NOT a photoshop user and are using SumoPaint, then you will want to go to Image -> Image Size and set to 450 by 150.
There are thousands of apps and ways to resize your image. It doesn’t matter which program you use to set the size, but make sure it is 450 by 150.
Step 6: Turn it into a gif!
Once you have all your slides, then upload them to http://gifcreator.me/.
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.
Then scroll down and click “Create Gif animation” and then download your .gif file.
Step 7: Upload the .gif file to Photobucket
The next step is to upload you gif to Photobucket or other photo hosting site. Do NOT mess with the image size in Photobucket because it will break your gif (the slide show aspect of it). I know this from experience! After you upload it, get the direct link to your gif on the right hand side.
Choose the “Direct” link and use in the next step.
Step 8: Shorten the Photobucket 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:
Repeat this process for any links you use in the header section.
Step 9: 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.
My banner code looks like this:
<a href=”http://bitly.com/1ASaQMm”><img src=”http://bit.ly/1bHWofw” /></a>
Which comes out to this:
Step 10: 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] Remember I teach full time so I might need a day or two to get back to you!