So, how do you pronounce GIF? Is it GIF with a hard G or "JIF" like the peanut butter brand? Actually, it's the latter. Earlier this summer, Becky showed me a few TPT stores that replaced their personal quotes with PNG/JPG files with a GIF. After finding a few tutorials, I decided I could tackle the job!
This is my final product:
This is my final product:
I'm super excited that I handled everything - from Photoshop to the HTML code. It wasn't easy, but here are a few things I learned from my project.
1. CHOOSING YOUR APPLICATION
Becky and I had a long discussion about what to highlight in our GIF. Obviously, each store owner can choose several things that you want to reinforce to your customers. Selecting two or three products with general comments for several slides will build a concise snapshot of what your store has to offer.
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).
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
Here are a few notes about the image creation:
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. 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.
Unfortunately, I couldn't choose a color based on the HTML code in Keynote. SO, you can save the image above OR take a screenshot of the personal quote from your TPT store. Throw the image/screenshot in to PPT or Keynote and do a color match.
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
that box.
And then there is always Photoshop. You can extract the background color. This is the best option, but not everyone has Photoshop.
3. BUILDING the GIF
I have an older version of Photoshop (CS3). There are plenty of video tutorials available for creating a GIF, but this is the best one that I found for my version. (If you're searching for other tutorials, just make sure you know the "instructor" is speaking about your version of Photoshop.)
If you want to create a GIF for your store, but don't have Photoshop - no worries. Here's an alternative -
gifmaker.me. Here's a quick tutorial.
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
Photobucket is the easiest way to upload your GIF to the web and get a source code. They offer a wide variety of links for different reasons, but the "DIRECT" link is the one you'll need for this job.
Once you copy the link to your GIF, you'll need to jump over to TinyURL.com. There are two links you're going to need to shorten:
- 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>
If you want to test the code to make sure it works, you need to do the Tryit Editor! Feel free to play around with our GIF code:
<a href="http://theclasscouple.com"><img src="http://tinyurl.com/qcjzdsa" alt="qcjzdsa"/></a>
5. COPY, PASTE, & ENJOY
Once you played around with the code and it's ready to go, simply copy and paste it in to your "personal quote" under your profile in TPT. Best of luck and if you need any help, just let me know!
Best,
Best,
