The Class Couple
  • HOME
  • About Us
  • Blog
  • Read
  • Our Home
  • Shop

ADD A GIF TO YOUR TPT PERSONAL QUOTE

7/25/2015

7 Comments

 
Picture
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: 
qcjzdsa
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). 

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. 
Picture
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. 
Picture
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. 
Picture
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.
Picture
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:
  1. 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".
  2. 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".
Now that you have both links, you're going to need to do some coding. Here you go:
<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>
Picture

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,
Picture
Follow on Bloglovin
7 Comments
Denise Funfsinn link
7/25/2015 03:03:30 pm

Thanks so much for posting this. I'm going to try it tomorrow!

Reply
Ashlyn
7/30/2015 03:04:47 pm

I tried 3 different tutorials with little luck, this one was perfect! Thank you!!

Reply
Greg link
7/30/2015 03:24:21 pm

Ashlyn, I'm so happy it worked for you! What's your store name? I'd love to check out the final product! - Greg

Reply
Ashlyn
11/12/2015 10:00:11 pm

Greg, I was redoing my banner and came to revisit your tutorial. My store is Teaching in My Running Shoes.

CalfordMath link
5/4/2016 11:56:26 pm

This was an AMAZING CLEAR TUTORIAL. Thanks! You can see the fruit of my efforts... https://www.teacherspayteachers.com/Store/Calfordmath

Reply
CalfordMath link
5/4/2016 11:56:34 pm

This was an AMAZING CLEAR TUTORIAL. Thanks! You can see the fruit of my efforts...

Reply
The Polka Dotted Pencil
6/11/2016 02:23:53 pm

This was by far the best tutorial. I'm not a coder by any means and It was so SIMPLE and EASY to follow. Thank you! Greatly appreciate it.

Reply



Leave a Reply.

    Picture
    Picture

    Mr. & Mrs.

    We are Becky and Greg from York, PA. Becky just started her 13th year of teaching first grade. Greg is a high school social studies teacher. We love teaching and this blog is a peek into our world. 

    Picture
    Picture
    Picture
    Picture
    Picture
    Picture
    Picture
    GoNoodle Inspiration Blog
    Picture

    the library

    June 2019
    March 2019
    August 2018
    February 2018
    September 2017
    August 2017
    January 2017
    October 2016
    July 2016
    May 2016
    April 2016
    February 2016
    January 2016
    November 2015
    October 2015
    September 2015
    August 2015
    July 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    January 2015
    December 2014
    November 2014
    October 2014
    September 2014
    August 2014
    July 2014

    Picture

    tag, you're it!

    All
    Adding
    Alphabet
    Apush
    Assessments
    Authentic
    Becky
    Becky & Greg
    Cause & Effect
    Children's Literature
    Classroom
    Classroom Community
    Classroom Management
    Classroom Tour
    Columbus
    Craftivity
    Criticalthinking
    Currently
    Doubles Facts
    Fact Families
    Fire Safety
    Five For Friday
    George Washington
    GoNoodle
    Graphing
    Greater Than And Less Than
    Greg
    Halloween
    Highfrequencywords
    How To
    Instagram
    Journeys
    Makingconnections
    Math
    Movie Making
    Numbers
    Perspective
    Phonics
    Primary Sources
    Project Based Learning
    Pumpkins
    Purpose
    QR Codes
    Raise Responsibility
    Reading
    Scholastic Book Orders
    Spelling
    Summer
    Summer Prep
    Teachers Pay Teachers
    Technology
    Time
    Twitter
    Videos
    Writing

    Picture

    subscribe

    Enter your email address:

    Delivered by FeedBurner



    Blog Design by Alexis Sanchez ©
Powered by Create your own unique website with customizable templates.