This is my final product:
1. CHOOSING YOUR APPLICATION
There are a lot of applications that can handle this type of process - PowerPoint, Keynote, or Photoshop, to name a few. I created the images (450 pixels x 150 pixels) in Keynote and then exported them to Photoshop. (I created it in Keynote because I have the experience and liberty to be more free with my design).
2. BACKGROUND COLOR
1. You need the background of the image to match that grayish color on TPT. You can do that by either making the background image in Keynote or PowerPoint that hue of gray OR you can extract the background in Photoshop when you put it together. The html code for that gray is #F2F2F2. If you're ever trying to match color or find the HTML code for a specific color, this is a great color wheel.
1. Click on the magnifying glass to the left of the horizontal box in the color tab. A magnifying glass will appear.
2. Select/Click the gray area on the image/screenshot you imported. The color will now appear in the horizontal box.
3. Go to your “design box” that you’re using to build your images and drag it to fill
3. BUILDING the GIF
gifmaker.me. Here's a quick tutorial.
1. Upload Images
2. Se the pixel size o match the size of the images you created (450px x 150px is suggested)
3. Set the animation speed. 1000 milliseconds equals 1 second.
4. Set the repeat times to 0.
5. (Not Pictured) Scroll down and on the right side click “Download this GIF”.
4. PHOTOBUCKET & HTML CODE
- You're going to need to shorten the PhotoBucket Direct link you just created. Copy the link and throw it in a note or side document for just a minute (be sure to label it so you don't get the links mixed up). WE WILL CALL THIS LINK: "HTTP://TINYURL.COM/GIFLINK".
- You need to decide what you want the GIF to link to. We have ours set back to the blog, but you may want it to link to a specific part of your store or even a product. Grab that original URL and put that in to TinyURL as well. Grab the shortened link and put it in the same document as #1. WE WILL CALL THIS LINK: "HTTP://TINYURL.COM/SITELINK".
<a href="http://tinyurl.com/SITELINK"><img src="http://tinyurl.com/GIFLINK" alt="GIFLINK"/></a>
<a href="http://theclasscouple.com"><img src="http://tinyurl.com/qcjzdsa" alt="qcjzdsa"/></a>
5. COPY, PASTE, & ENJOY