Tutorial: How to Make a GIF from an Illustration

How to Make a GIF from an Illustration

Hey designers, attend our all-inclusive soul-fulfilling three-day design retreat, WMC: Off-The-Grid, this October 5 – 7th. To learn more, head to wmcfest.com.

Are you interested in creating a simple animated GIF out of your illustration/vector/artwork? You’ve come to the right place! However, before I walk you through this article, if you haven’t already created an animated GIF from a video using Photoshop, that might be a good first step!

Many of the steps in both tutorials are similar, however, this process is slightly more complex. When you’re creating a GIF out of a video, you’re taking existing frames from the video and editing them down to create a GIF. However, for an illustration, you start with 0 frames, which means you need to create your own. This can get a bit more tricky, but if you stay organized, and follow my steps, you’ll get through it in a breeze!

Step 1: Select the illustration/artwork/icon you’d like to animate

For this tutorial, I will be using a vector icon to keep things nice and simple.

Step 2: Separate your artwork into layers

Import your artwork into your PSD document! There are a lot of ways to do this (i.e. importing layers from programs like Illustrator, Procreate, etc. or copy and paste layers between programs.) It’s important, however, to make sure you keep your layers separated. This will allow you to animate specific elements.

Since this is a vector icon created in Adobe Illustrator, I’ll just copy and paste my elements in one at a time.

  • Open Illustrator file containing vector artwork
  • Determine which elements you want animated, and which layers you don’t
  • Merge all of the layers together that you do NOT want to animate and copy them into your Photoshop document first.
  • Paste them in as a Smart Object (a window will pop up asking you this)
  • Then, go back and paste in the layers that you DO want to animate, one at a time
  • IMPORTANT: Copy these layers in SEPARATELY. For example, I want each of the little sparks around my icon to animate on one at a time. That means I need each little spark on its own layer.

In the above image, you’ll see I have all my artwork separated into layers. I’ve highlighted the layers I want to eventually animate in yellow, and the layers I want to stay static in orange.

Step 3: Setting up your timeline

After you have all of your layers pasted in, and everything looks good, open up the “Animation” or “Timeline” window within Photoshop (the name of this changes depending on which version of Photoshop you have).

  • Open it by clicking Window > Animation/Timeline
  • When the window pops up, hit “Create Video Timeline”
  • Then, within that same window, hit the little hamburger menu (3 horizontal lines) in the top right corner, a menu should pop out
  • Mouseover “Convert Frames” and then hit “Convert to Frame Animation”
  • After, you should have one frame in your Timeline/Animation window.

Your “timeline” should look like the above photo (I’ve also circled the “hamburger menu” in yellow if you weren’t able to find it)

Step 4:  Begin animating frames

Now that you have your document set up, you can begin animating your artwork! For my GIF, I want the little sparks around the lightbulb to flicker on one at a time. This means that I will need 1 frame for each action. And since I have 9 sparks, I will want 10 frames total. I’ve organized it in a list below:

  • Frame 1: 0 sparks visible
  • Frame 2: Only Spark 1 visible
  • Frame 3: Only Spark 1 & 2 visible
  • Frame 4: Only Spark 1, 2 & 3 visible
  • etc.

You can see from the small thumbnails in my Timeline window how the sparks are appearing one by one. You’ll also see a little “5 sec” below each thumbnail. That means each frame will be on screen for 5 seconds before moving to the next. We will fix that amount of time in the next step!

————-

ADVANCED TIP:

Although this tutorial is only showing a simple GIF animation, if you want to have actual movement across your GIF, the process works the same.

Let’s say I wanted my lightbulb to float across the screen from left to right. I would need to have my entire lightbulb on one layer, and have it visible on Frame 1.

Then I would create Frame 2 (to create a new frame, hit the icon next to the trash symbol in the Timeline/Animation window), duplicate my original lightbulb layer, nudge my new layer to the right (hold down shift, and hit the right arrow key), and hide the previous layer.

After, I would create Frame 3, duplicate my latest lightbulb layer again, nudge to the right, and once again hide my previous layers. You would repeat this process until your lightbulb makes it all the way across the screen.

————-

Step 5: Edit keyframe rates

Now that you have all your frames created, you might hit the play button and think, wow, why is it taking so long? This is where keyframe speed comes into play!

Select all of your frames within your Animation/Timeline window, hit the little arrow beside the time, and either choose one of the listed times or input your own. I typically like to use the speed .08 seconds, but that’s my own personal taste, and can change based on the project.

After you set a new keyframe rate for your animation, you’ll also want to hit the dropdown for looping options and click “Forever.” This will ensure your GIF will loop for infinity and beyond!

Above images show before and after I set my framerate/looping time

Step 6: Play and Export!

After you finish the steps above, make sure you play your GIF and like how it looks and animates! Once you’re happy, you’ll be ready for final export!

When exporting a GIF, you won’t just “Save As” like you might with a JPG. You’ll want to go to File > Export > Save for Web. Once you hit “Save for Web,” a popup should come on screen. There are a lot of different options here, but in most cases you should just be able to hit “Save” and be done!

NOTE: I go into more specifics on exporting GIFs in my tutorial on creating a GIF from a video.

And there you have it!

If your GIF didn’t turn out the way you wanted, feel free to email me with your questions at [email protected]

I should also note that there are MANY different ways to create animations in Photoshop, so I encourage you to continue exploring and learning! You can also check out another one of our GIF tutorials that shows you how to use the Tween Animation Frames button in Photoshop.

Additionally, if you are looking to do heavy animation work, I would recommend trying out Adobe AfterEffects. The best advice I can give is to experiment! Try different things, mess up, start over and see what works best for you. Good luck!!

Tutorial: How to Make a Weird and Wonderful GIF in Photoshop

How to Make a GIF in Photoshop

As you may know, GIFs are taking the world by storm, and this tutorial, “How to Make a GIF in Photoshop,” is going to teach you exactly how to stay hip with these crazy internet trends. I’m going to walk you through 7 basic steps and by the end you will have your very own GIF that you can show off to your friends, family, coworkers and random strangers on the internet.

Step 1: Obtain a video
Easy enough. You’ll ideally want to use a .mov or a .mp4. GIFs are meant to be weird and wonderful. Make sure your source material is worth watching.
I’m going to choose a video from the best conference for graphic designersCleveland graphic design firm Go Media‘s very own Weapons of Mass Creation Fest! Wait and see, it’s a good one. Also, want to use a youtube video? No problem! ClipConverter is completely safe and free, and will convert any youtube video (you just need the URL link) to any format!

Step 2:
 Open Photoshop and import video
Once you have your video, open up Photoshop and import your video by clicking:  File > Import > Video Frames To Layers
A window will then pop up with options. Set up your document as the image below displays. You will also have to select a portion of the video that you want to create a GIF out of.

IMPORTANT: GIFs aren’t movies, this should be a relatively short snip of the video that you want.

Step2_a

Step 3: Set up your document
Now that you have a portion of your video imported, your document will probably look similar to this.

Step3_a

If you don’t have your animation window open (which is shown at the bottom of my image) you’ll want to do that. You can open it up by going to Window > Animation.

Secondly, you will want to adjust your image size to 500px in width. Why? Because GIFs are meant to load quickly, and they can’t do that if they are a huge file size! Making your GIF 500 pixels will help it load quickly and run smoothly! Plus, sites like Tumblr require that your GIFs be under a certain size, so this step is essential.

Step 4: 
Edit your frames
Now that you have your document set up, and your video imported, you can start working with your frames (which will be located in your animation window). First hit play and see what you’re currently working with. Then identify the frames you want to keep, and delete all of the surrounding ones. After this step, I ended up with 14 frames which you can see below.

Step4_a

IMPORTANT: Again, remember, you want to keep your GIF short and sweet. Aim to have around 10-20 frames. Impossible? No worries! If you still have 20+ frames after cutting out the part you want of your video, select all of the even numbered frames and delete them. This will make your GIF slightly choppier and faster, but we can fix that later when you edit your frame rate!

Step 5: Create an infinite loop (Optional)
This step is completely optional, however, it’s a fun effect to add to your GIF. If you play your GIF right now, you’ll notice that there is a clear beginning and end. However, you have the ability to work with the frames and create a GIF that reverses backwards and creates an infinite loop. These kind of effects are the fun, inventive things that no other GIF program allows.

So how do you do it? Simple. Copy all of your frames, except the first and last, then paste them back into your Animation window and drag them to the far right. Then click your options panel (shown in image below) and hit “Reverse Frames.”

Step7_a

Step 6: Change your frame rates
A frame rate is the total time each frame will show! Photoshop will automatically make all your frames .03 seconds, however, this tends to be fairly fast. Your frame rate will always be a personal preference and will also depend on your particular GIF, however, I usually try to stick around .08 to .1 seconds.

You can change your frame rate by looking at your animation window, and clicking the small arrow that is displayed in each frame. Make sure you highlight ALL of your frames though before changing your frame rate.

Step8_a Step8_b

In Step 4, if you ended up deleting all of your even numbered frames, you’re GIF will automatically be faster than originally, so you’ll probably have to make your frame rate around .1 to .2 seconds.

IMPORTANT: Don’t 100% trust the speed of your GIF in Photoshop. You won’t be able to truly tell how fast it is until after you export it (which will be shown in the next step)

Step 7: Export!
Now that your GIF is beautifully and personally constructed, you’re ready to create an actual file of it!
To do this click:  File > Save for Web & Devices, and then follow the image below for what to fill in.

Step11_ab

IMPORTANT: Like I stressed above, it’s important that your GIF file size is small. As displayed, my GIF is 1005K. You’ll definitely want to make sure your GIF is under 2 MB. If not, many sites may not be able to load your GIF.

If your GIF is over 2 MB, you’ll want to either cut out more frames, or you can adjust the colors, dither and lossy in this panel. Any of these will decrease the quality of your GIF, but if done in small amounts, it can sometimes be barely noticed.

And here is my final product!
1

CONGRATS!
You have created your very first GIF. Time to celebrate.

(Remember to watch the footage from the best design conference in the entire world, Weapons of Mass Creation Fest! Check out the full WMC Fest video here and buy tickets to Weapons of Mass Creation fest – coming up this summer at downtown Cleveland’s Allen Theatre.)

9