Summer’s Fabulous Cat Life

Cat Model, Therapy Cat, and Cat Lifestyle Expert

  • Home
  • Diary
  • Kitty Wisdom
  • Catinees
  • Store
    • Cat Beds
    • Cat Stuff for Humans
      • Cat Calendars
      • Cat Gifts
      • Cat Jewelry for Humans
      • Cat Stationery
      • Cat T-Shirts
    • Cat Trees, Towers and Furniture
    • Designer Cat Collars
    • Interactive Cat Toys
    • Litterbox Furniture, Cabinets and Covers
    • Scratching Posts and Cat Scratchers
    • Special Items for Special Kittys
  • Advice
  • Book Reviews
  • About
  • Contact Summer
    • -Advertise Here!
  • Privacy Policy
  • Fan Club
You are here: Home / Kitty Wisdom / How I Did It: the Animated Gif

How I Did It: the Animated Gif

October 14, 2011 By: Sparkle Cat32 Comments

This is why I pay my human the big bucks!

A lot of you were wondering how I made that animated image that you saw on this week’s Wordless Wednesday post, so I thought I would give you a quick explanation! Step right this way….

If my human had any smarts, she would not have moved the camera!

First off, I did not actually make it myself — my human did! I just posed for the photos. There are probably several different programs that do it, but since she has Photoshop, that is what she used. As you probably already know, there were five photographs. Usually, when you are going to make one of these images — they are called “Animated Gifs” — you put the camera on a tripod and do not move it. Well, my human did not realize she was going to do that when she started taking photos, and she was just lucky that she barely moved. Even so, she had to adjust the photos to make them better conform to each other. First she had to rotate the photos slightly so they were all at the same angle.

A few bad words were said during this part!

The next part was actually the hardest: my human had to crop each photo so that it was exactly the same size — and all the furniture was in the exact same place in each photo. She did not get it 100% right; as you can see in the end result, the photos jump a little bit, but she felt it was “good enough for blogging.”

Plus the copyright - after all her work there was no way she was going to forget that!

Then she made a file that contained all the edited images, each one on a different layer.

My human had totally forgotten this was here until recently.

Now onto the fun part — the animation! So my human opened up the Animation window…

This was also the easy part!

Which opened up under the windows with the photos and layers. Using this window, you are able to determine which layers are active and how long they run. This was a very simple sequence, since it was just one photo at a time. She had each one run for 1 second, and set it to “forever,” which means it keeps running over and over again infinitely. When she was done, she saved it as a special kind of file called a “gif” (the majority of photographs are jpg, or jpeg files). That was it! And once again, here is the finished image.

It would have taken NO time if my human hadn't had to fix the photos first.

My human was making animated gifs back in the late 1990s, when she first started building websites, so it’s really a very old technique. There’s a more sophisticated version of animated gifs called cinemagraphs, and you can see some samples here. My human wants to start experimenting with that, but she needs to get the latest Photoshop upgrade first.

* * *

Subscribe to my blog posts here!

2022 Somali Cat Starring Summer Samba Calendar
2022 Somali Cat Calendar Starring Summer Samba
See all of Summer’s merch at her her Zazzle Designercat Shop
Share6
Tweet
Pin
Buffer
Pocket
Email
6 Shares

Comments

  1. Clooney says

    October 15, 2011 at 8:17 pm

    Very cool, but my Human had a similar reaction to Spitty’s! Too bad my Human can’t photoshop, we’re really missing out…(Maybe I should become Photoshop Cat???)

    Reply
  2. Natalie says

    October 14, 2011 at 9:05 pm

    The gif was so cool – I think I missed commenting on that post, but it was a great one! I have a free photoshop-like program, and I’m not sure if it does gifs, but I’m going to use your tutorial and give it a go.

    Reply
  3. Noir the Texas Tabby says

    October 14, 2011 at 8:24 pm

    WOW–you’re human did that? You’re so lucky to have a talent human! My human Tommy right after “Animated”…..can I move to California and live with you guys? Your human can do things…

    Noir

    Reply
  4. Spitty the Kitty says

    October 14, 2011 at 6:32 pm

    Make that “aFter”

    Reply
  5. Spitty the Kitty says

    October 14, 2011 at 6:31 pm

    Hi Sparkle. My Human’s brain a-sploded ater she readed one sentence but she wanted to say Hi anyway!

    Reply
  6. Abby says

    October 14, 2011 at 3:41 pm

    Sparkle
    SOOOO cool!
    purrs
    >^,,^<
    ♥Abby♥Boo♥Ping♥Jinx♥Grace♥

    Reply
  7. Daisy the Curly Cat says

    October 14, 2011 at 3:19 pm

    We make our animations in PhotoShop Elements… just click Save for Web and it gives you the options to animate.

    Reply
  8. David says

    October 14, 2011 at 3:10 pm

    nice share.. and tell your human .. it’s nice shoot over ther 😆

    Reply
  9. Mark's Mews says

    October 14, 2011 at 2:34 pm

    Thats a cool thing ta do! Unfortunately, our Photoshop Elements 6 doesnt have that animation feature…

    Reply
  10. Emma and Buster says

    October 14, 2011 at 2:12 pm

    we definitely have to strong arm mama into buying photoshop 🙂

    that is way too cool.

    Reply
  11. Kitcaboodles says

    October 14, 2011 at 2:02 pm

    Hi Sparkle, thanks for stopping by to say hello! And thank you for the tutorial too… never knew that I could do that in Photoshop – will have to give it a go =^..^=
    Those cinemagraphs had me fascinated too but I think they are beyond my skillset!! 🙂

    Reply
  12. BeadedTail says

    October 14, 2011 at 1:26 pm

    Your human is very talented Sparkle! Our mommy was lost from the beginning but that’s okay, we’ll enjoy your animations!

    Reply
  13. Fuzzy and Zoe says

    October 14, 2011 at 12:44 pm

    Your human trumps ours on so many levels. Yours takes the time to properly prepare photo shoots and photos, even making you animated gifs. Ours barely even lets us blog or visit!

    Reply
  14. Cat's Cats says

    October 14, 2011 at 11:18 am

    Holy cow Sparkle that was difficult!!! I have photoshop and can only do the most rudimentary things with it, I find it so complicated…I think I have to take a course.

    Reply
  15. Little One says

    October 14, 2011 at 10:15 am

    Wow!!! Neato and interesting on how it’s done. Human mom don’t have PhotoShop.

    Reply
  16. Cathy Keisha says

    October 14, 2011 at 9:32 am

    This is all waaaayyy over TW’s head. She just learned how to do type in PhotoShop and work with .psd’s. Maybe in the year 2525, she’ll learn it.

    Reply
  17. Penelope says

    October 14, 2011 at 9:18 am

    Thanks for sharing Sparkle! We wants our mommy to try it now.
    But she is pretty lame. How did yous get the human who rocks!
    Kisses
    Nellie

    Reply
  18. Katnip Lounge says

    October 14, 2011 at 9:07 am

    Yet another reason our Mommy is lame. NO PHOTOSHOP.

    Reply
  19. Admiral Hestorb says

    October 14, 2011 at 8:11 am

    Your mom can really REALLY make use of a great program so that we can enjoy you and your fur siblings even more. xox

    Reply
  20. Talonvaki says

    October 14, 2011 at 7:46 am

    This is one thing I never knew how to do with Photoshop! I am definitely going to have to use your tutorial and give this a shot!
    This is brilliant – thank you!!!

    Reply
  21. Fuzzy Tales says

    October 14, 2011 at 7:06 am

    We thought it was very clever! The mom doesn’t think she can do that with only PhotoShop Elements, not sure. But she probably wouldn’t have the patience to try anyway! LOL.

    So well done to your human, Sparkle!

    Reply
  22. Pricilla - Famous SpokesGoat says

    October 14, 2011 at 7:03 am

    your human is very clever indeed. My publicist is not so smart

    Reply
  23. Fui, Suey and Lishy says

    October 14, 2011 at 6:52 am

    That is so cool. It’s kind of you to share the how to 🙂

    Reply
  24. The Island Cats says

    October 14, 2011 at 5:54 am

    That was pretty cool, Sparkle! Thanks for showing us how it was done. But there’s no way our mom could ever figure it out even with your step by steps!! She’s so technologically challenged.

    Reply
  25. mariodacat says

    October 14, 2011 at 5:25 am

    Wow – you has a really talented, smart ooman. That looks like a lot of work too.

    Reply
  26. Marg says

    October 14, 2011 at 5:05 am

    That was a really good explanation. Our Mom tried to do that Photoshop but didn’t have the patience to really learn how to do it. But that sequence is so great. Good for your human Sparkle. That was fun. Have a great week end.

    Reply
  27. Father Tom says

    October 14, 2011 at 5:03 am

    That’s really cool to know and to watch! Julie can’t wait to try some of the Photoshop techniques, once she gets it, that is, hehehe!

    As always, you’re looking huggable, Sparkle!

    Tom
    xoxo

    Reply
  28. Max the Quilt Cat says

    October 14, 2011 at 4:27 am

    What a great instructional post. Love knowing how things work.

    pawhugs, Max

    Reply
  29. Simba says

    October 14, 2011 at 4:17 am

    “Good enough for blogging”. Hmm.

    Very informative, Sparkle. Thanks for the tutorial.

    Reply
  30. Brian says

    October 14, 2011 at 3:47 am

    That was way cool though and thanks for telling us the magic secret!

    Reply
  31. Hannah and Lucy says

    October 14, 2011 at 1:36 am

    We would love mum to do that for us but we don’t know if she’ll have the patience – we’ll have to see.
    Luv Hannah and Lucy xx xx

    Reply
  32. d'ArtagnanRumblepurr (@rumblepurr) says

    October 14, 2011 at 12:48 am

    I have a question, since you’re doing q&a’s… how did you get to be SO bootiful? *swoon*

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recipe Rating




This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Me Here!

  • Bloglovin
  • Facebook
  • Instagram
  • Pinterest
  • RSS
  • Twitter
  • YouTube

Our Sponsor

Get Summer’s Newsletter!

Stay up to date and get subscriber-only exclusives!

Sign Up For Summer’s Weekly Newsletter!

My Zazzle Store!

Buy from Sparkle's Zazzle Store
T-Shirts, cards, mugs and more!

Summer on Video

Tweets by @sparklecat
Powered by Dealspotr
Read my blog on Kindle
Winner Best Cat Blog Dogtime Petties 2014 Winner Best Cat Blog Dogtime Petties 2010 I won Best Blog Post!
BlogPaws 2016 Nose-to-Nose Awards Finalist badge

Copyright © 2022 ·