[FREE TUTORIAL] DIY Animated GIF - Liz Theresa
CONTACT LIZ  
I help you launch and build
online businesses you love.

[FREE TUTORIAL] DIY Animated GIF

I may receive a commission if you purchase something mentioned in this post. Read the disclaimer for more info.

So, today, in a matter of 5 minutes, I made this:

Freaking awesome, am I right?

To make a GIF, you don’t need to…

  • Be a professional designer
  • Learn Photoshop
  • Have a million dollars

You just need to have an idea for a GIF and then go forth and create!

#1 – The first thing to know about GIFs is to think about the way cartoons are animated. Every movement requires a frame – or, in the case of a GIF, an image file.

So, for today’s newsletter, I happened to use the unicorn as a metaphor for how impossible it seems to find the right information to learn to monetize your blog. Because I didn’t want to devote a ton of time, I decided the part I wanted to animate would be the text! That indicated 3 frames or images:

  1. The unicorn alone
  2. The word blog on top of the unicorn
  3. The words blog monetization on top of the unicorn

#2 – The second thing you need is a concept. GIFs are made for fun or to illustrate a point or idea. Once you have a concept, you need to find an image to use as the foundation.

This is where I stop you and say, “No – you can’t just Google for photos and use whatever shows up.”

A common belief is that you can Google for images and use them – and it’s so irresponsible and wrong. Images are copyrighted by people who own them. And to be honest, there are so many resources that give you free vectors and images – free for commercial use – that not using those libraries makes you look lazy, negligent, and ignorant. So, if you wanna check out those libraries, I have a post that has my top resources here for commercial-use stock photos and vectors. Bookmark it!

#3 – Once you select the foundational image (this is the first frame in the GIF), save it as a JPG or PNG. Then, I want you to toss it into Canva or Picmonkey to continue working there.

Pick whichever ones of those you like to use! If you’re doing a simple text animation like me, Picmonkey is perfectly simple to use.

If you’re doing text or might want to do some kind of vector or shape overlays (getting more fancy), use Canva.

Frame #1

#4 – Decide what you want to animate and how you want to animate it.

I like animating text because it’s crazy easy, but if you wanna try to illustrate something using Canva, be my guest! Your approach 100% depends on your concept.

#5 – Create your remaining frames! For me, it was to overlay the word BLOG first, and then saving the image. Then, adding the word MONETIZATION, and saving that image. This created frames 2 and 3.

Frame #2
Frame #3

Step #6 – Use an online GIF maker to generate the animated file!

I used IMGFlip – it’s a free service that does it in a matter of seconds. And as long as you don’t care it leaves a small watermark, I suggest using it. (I don’t care about that sort of thing – because I care more about effectively communicating the idea.)

Click the big button that says UPLOAD IMAGES and then upload all your frames.

After doing that, the service will automatically generate the GIF.

If your frames were in the incorrect order, you can adjust the order right there on the same page. (See screencap below.)

When you hover on the frames, your cursor changes to the move cursor (the four arrow one) and you’re able to rearrange them.

If you accidentally uploaded a rogue photo or image that doesn’t belong, you can see above how to remove them.

#7 – When you’re all done re-arranging, click the blue GENERATE GIF button – and you’re done!

The service will give you the ability to download it or share it on social media.

Like this post?

3 gifts in 3 days! Fill out the form below to download (1) my free Bonafide Website Guide, (2) a list of the tools I use to totally rock at business, and (3) a look at some of the best content I have ever created. You will also receive fresh new emails weekly from me to help you be totally BOSS at being a boss.