Thursday, April 23, 2015

How to Make a Personalized GIF

Today I wanted to talk about GIFS and how to utilize them on your blog. We all know about the fun GIFs of hopping bunnies or the kind that feed the fandoms.

 

Those are awesome and I love them. However, I've always been interested in the GIFs that act as a design element of a blog. These GIFs are the ones that are personalized to you and your blog. I've see them combining book haul pictures, as an animation of the blogger, and used as blog banners. the options are endless once you know how to make one of these sorta-picture-sorta-videos. Here's an example of a personalized GIF that I made for my "About Me" page:

This REALLY needs to be updated! 
I think that personalized GIFs are a design element that are under-used, because people don't know how to make them. So my goal for this post is to provide a fairly simple tutorial that doesn't require any fancy software. I will admit that I made that GIF above using Photoshop Elements. HOWEVER! It can be done without PSE. 
The first step to creating your GIF is to think about the different layers or "slides" you want to have in it. I've narrowed the different styles down to three options:

1. Animation style
These are the stop-motion GIFs that are more commonly seen. Here's an example of one I made of my sister:
This isn't the smoothest GIF, but you get the idea.
Images used in the GIF above.
This GIF was made up of aprox. twenty pictures that I took one after the other as she walked across. You don't necessarily need as many pictures as I used, especially if you're just doing a simple hand-waving animation; that might only require two or three pictures. If your camera doesn't shoot in rapid bursts, you can just have you subject move very slowly or pause the action while the camera gets set up for another shot. To get a smoother animation try to keep the framing the same. I moved my camera to follow my sister in my GIF above which is why it looks a bit choppy. 

This type of GIF is fairly easy to make, since it doesn't require any post-production work. You just have to plan out the photos when you're taking them with your camera. 

2. Slideshow style
This style is essentially a speed-up, automatic slideshow. Here's an example of one I made for a book haul last year: 
Images used in the GIF above. 
This method is perfect if you have a lot of pictures to share and don't want to clog up your post with them. I tend to lean towards this type of GIF if I don't want each individual picture to be studied. When making this type of GIF you need to make sure that all your photo dimensions are the same (e.g. all shot landscape or portrait style). I also like to have similar looking photos, but you can experiment with what photos look good together. 

Again, this is a super easy method of GIF making since you only have to pick the pictures then upload them to the GIF making software. 

3. Single Picture Development Style
I know that name is a mouthful, but I was struggling to come up with something, tehe.
This is the most involved way of making a GIF, but has some very neat results. It's perfect for banners. The basic idea is that you have one picture as your base and then in each layer you add text or graphics. Here's a example of one that I made for a blog series I do with my sister:
Images used in the GIF above (but in reverse order).
I used picmonkey.com to edit these pictures. I recommend creating a rough draft of what you want the final "slide" to look like, so you can make sure all the pieces will fit properly. 

First, start with your base picture and add the first word. Save the picture, duplicate it and open the duplicated file and add the next word; keep doing this until you have everything you want in your final picture. It's important that you make sure to use the duplicate file to add the next word, so that everything stays lined up and gives the illusion that you're just adding another word and not an entirely new "slide". 

Assembling your GIF:
Now you know how to structure a GIF, you have to make it into an actual GIF. There's lots of different websites that will do this, but I had the best luck with gifmaker.me. It was user-friendly and didn't require me to make an account. You can use the sliders to change the speed of the animation and the size of the file. Experiment with different speeds until you find what works best for your GIF. Fair warning, the GIF downloads with a funky name, but you can easily change that. 

Here's a graphic that explains how to use this website:


Once you know how to make a GIF, you can customize it to fit anything you'd like. However, I would be wary with how many you use, and where you place them on your blog, because they can be distracting and hard on the eyes for some people. I think if personalized GIFs are used correctly they can add an extra flare to any blog!

Let me know in the comments what your experience is with GIF making and GIFs in general. I'm really curious to know if people like them or hate them. Feel free to let loose about all the GIF related topics!

Reading: The Magicians by Lev Grossman
Listening: Grammy nominees from 2013 and 2014
Watching: Person of Interest
Previously on A Splash of Photography: My Grandmother's Floral

19 comments:

  1. Thank you! I'll make sure to try this out on a post one day ;)

    ReplyDelete
    Replies
    1. Your welcome! I hope it works out for you:)

      Delete
  2. Ooooh, this is awesome and useful! I've never made a GIF before, but this looks incredibly useful for future reference!

    (However, the only GIF I really want is my favorite Iron Man Quote ever.)

    ReplyDelete
    Replies
    1. I'm so glad that you find it useful! I struggled to explain it concisely and clearly in some places.

      And yes, Iron Man GIFs are awesome, haha.

      Delete
  3. I usually use Photoshop animation to make GIF's and often use it for visual effects in my comics :)
    I love using GIF's in my posts.
    This is easier than how I do it,Thanks for the tutorial :)

    Neal Kind
    Daily Diaries

    ReplyDelete
    Replies
    1. I've used Photoshop as well, and you're right, this is quite a bit simpler! GIFs must look super cool in your comics. What a great idea:)

      Your welcome! Thanks for commenting.

      Delete
  4. I've always wondered how you made that gif in your about me page. I didn't actually realise it was a gif. I thought it was a slideshow with javascript or something...
    This is such a useful post. Thank you! I've never made a gif before, it looks like a lot of hard work but the end result is fantastic. I think I'll give it a go! ^_^

    ReplyDelete
    Replies
    1. Haha, you gave me more credit than I deserved with that About Me GIF.

      Good luck with your GIF making! It takes a bit of experimentation, but you're totally right when you said the end result was great!

      Delete
  5. I am amazed at all the free resources available for image making these days!

    ReplyDelete
  6. Man, this brings me back. I used to make gifs all the time for ... Dare I say it? ... Neopets guilds. *shifty eyes* The tool you suggested, gifmaker.me, looks way more advanced (or at least user friendly) than what I was using back in the early 2000s. I wish I could remember what it was ... Thanks for the tutorial! :D

    ~ Liza @ Classy Cat Books

    ReplyDelete
    Replies
    1. Neopets! I totally had one of those. I wonder whatever happened to that...
      That is too funny! I'm glad that I could update your GIF making skills, haha.

      Delete
  7. This is so handy! I've wanted to know how to do this for so long! Thank you so so much! :D

    Stori Tori's Blog

    ReplyDelete
    Replies
    1. You're welcome! I'm glad that I could be of service. I figured that there'd be people out there who were wondering:)

      Delete
  8. Wow, I absolutely love this GIF-making style - I must admit I've only seen the stop motion type of GIF, but this is so creative and fun. (And by the way, your "about" graphic is lovely!) This is a great post - thank you so much for sharing. x

    ReplyDelete
    Replies
    1. Thanks! I had only seen the stop motion GIFs as well, but then I started to see a few of the other kinds popping up and it got me all inspired to make one of my own.

      Good luck in your future GIF making adventures and thanks for visiting SOI!

      Delete
  9. That's a really good idea, thanks for the tutorial! :)

    ReplyDelete
  10. Hmmm... (*Evil plotting genius emerging*) Thank you for sharing your wisdom. lol! :) Might need to try this out...

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...