Making Animated GIFs: UX Interactions & More | Noah Levin | Skillshare

Making Animated GIFs: UX Interactions & More

Noah Levin, Product Designer / Prototyping Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (33m)
    • 1. Free Lesson: Perspective + After Effects

      10:01
    • 2. Introduction

      1:33
    • 3. Exercise 1: LICEcap

      2:47
    • 4. Exercise 2: Record iPhone + Photoshop

      7:47
    • 5. Exercise 3: Perspective + After Effects

      10:01
    • 6. Wrapping Up

      0:22

About This Class

This fun, 25-minute class walks you through how to design beautiful, simple animated GIFs for your UX interactions and animations. Product Designer Noah Levin teaches you how to use simple tools for GIF making including LiceCap, Quicktime, Photoshop, and After Effects.

Through 3 different exercises, we'll cover a range of techniques for making GIFs. You'll learn how to record interactions directly from your iPhone, how to add perspective, balance colors properly, and some tricks to keep file sizes down for uploading to sites like Skillshare or Dribbble. Making GIFs is a straightforward and useful skill to have for presenting, sharing your work, or just for fun.

No prior knowledge is needed for this class. Dive in, and have fun!

Transcripts

1. Free Lesson: Perspective + After Effects: okay for this final exercise, What we're gonna do is take a framer prototype like this one. You were going to record a video of it using quick time, and then we're gonna drop that into after effects into a phone that's angled using perspective. And so what we want to do first is find the phone that we want to drop it into. I recommend just searching dribble for an iPhone six template and then clicking on whatever when you like, And I think this first will do just fine. So go ahead and download it whenever you get the chance. And then let's open it up in photo shop and this one, it looks like there are a bunch of layers, and the first thing we want to do is isolate the layers that we need, which would be nice if we had a reflections layer like this one that was kept separate so that we can place it on top of the video. That way, when it's sandwiched between, it looks even more realistic with the glare. And so first, let's save out that reflection as it is, And then let's do the same thing for just the phone itself. Then let's open after effects. We're going to start a new composition and we're going to make it 800 by 600 with a white background 60 frames per second. We're gonna drop the reflection in the phone that we just made onto the after effects. It's gonna show up here in the project on the side and let's drop it right into the composition so we can start moving it around to place it as we like. It looks like this is a little bit too zoomed in for my taste. So what you can do is when you've selected both of them, you can press s to show scale and start to scale it down into your happy. That looks pretty good. It also looks like our reflection is placed beneath the phone we actually wanted on top. There we go. So now what we want to dio is now that we're kind of ready to drop in the movie, let's make the quick movie. So opening up, framer with the prototype that you'd like to record let's go ahead and get quick time open . Start a new screen according and what we want to do is make sure that we're getting the highest resolution possible. So what I like to do is go up into the zoom level and make it a little bit bigger. So instead of fitting to the size that it's in, I'm putting it at 50% here. I think that looks good. So it's click record. It's drag about the size you want. It doesn't matter if you're not too precise here. We can fix it later if you want, but try to get as close as you can. It's okay if you leave the black frame on the side and then start. According that should be pretty good and see how it turned out. Next, Pretty smith. So it save this out and let's get it into after effects. So it's open up aftereffects and dragged the movie file right into the project. You put it onto the composition. Here we go, getting closer now. What we need to do is we need to take this video and fit it onto the phone. There's a quick trick for that. You just goto effect distort corner pin that allows us to start dragging the corners exactly where we want them. Which in this case, we match the top left to the top, right top. Left the top right to the top. Right. And we can't see the bottom. So why don't we just zoom out a little bit? Um, here we go. Bottom right to the bottom rate and bottom left about life. Okay, lets see how we did. We might want to zoom in just a bit so we can see things a little bit better. It looks like the top right could be a little bit better. So what you want to do is you want to go under the drop down and look under effects corner pin, and when you click it, it'll let you move things around again. So I think we want to just bring the top right in a little bit and the top left as well. That's looking pretty good to me. Um, maybe the top left just a bit more. Okay, So what you can do now is check the length of your video. Let's move this timeline up a little bit and make sure that toy story is beneath. The reflection here is that the reflection shows up on top. This controls the length of your video. We wanted to match the length of the recording and we can hit space bar to preview it and check it out if you want. And it's looking pretty good. So what you want to do now is start to export it. To do that, you go toe composition, add to render queue, then under here under lossless and the output module. You can change this. We're gonna go to the format options. We're gonna switch it over to H 264 which plays really nicely with photo shop. We're gonna hit okay and go ahead and render it. Okay, Now that it's rendered, we can go ahead and take this movie file and bring it into photo shop. So we learned last time that it's likely that a video at this length at this size is probably gonna be way bigger than we want. So let's go ahead and already assume that we can switch the frame right down from 60 to something like 20 and let's see where that puts us. It's likely we're gonna need to shrink a few more things, So go to file export safer Web Now we're under the dribble limit, which is actually pretty good. But we do want to make sure that the colors look a little bit richer if we can afford to. So let's bring that up to 256. If it wasn't already, we're still under eight, which is great, so you can go ahead and switch the loop options to forever save it out. Now, when you post a skill share again, it's gonna have to be under two megabytes. So you want to likely shrink the image size quite a bit and play with it then and see what it looks like. Let's go ahead and see how that turned out. It's really nice. And now we're even at two X resolution. We could even shrink it down to 400 if we wanted to and see what that looks like. You can also as the last tip, if you like in after effects, you could always go to composition, and if you go to the settings, you can change the background color. So if you wanted, like a you know, some kind of different background of it and white, you could do that and see what that looks like. Finally, I wanted to show you one last setting that can affect also how your composition turns out. Eso it's drink this down now. What you can do if you want is notice how the grays are coming off a little bit odd, and the clouds are looking a little bit. I don't know to gray, what you can do is take this eyedropper. Bring it over to the color that you want to correct. In this case, this great here. Double click it on the right hand side on the color table wherever it selected. And in this case, we want this to be full white. So it's bringing up there and hit OK, much better. There's still some colors that could be probably be improved. Some of these greys down here look a little bit dark. You can just try to find them and do the same thing I found. Sometimes it takes quite a bit of tweaking until you're happy. Kind of depends on the image and what types of colors are showing up? Try a few more. It's looking a little bit better. You can go over to the looping options, which it over to forever. Go ahead and save it out. Let's take a look and see how it turned out. So go ahead and open a new tab. Drag twist re on. Take a look and see how it looks. Awesome. Looks pretty good. Now, if you would like to try this on your own, please do and upload it as an exercise to your project. In that way, we can talk about it and look through. If you have any questions, make sure to add them to the discussion board and 2. Introduction: animated GIFs have become incredibly popular in the design industry. There's even an entire section dedicated to them and dribble now. And it's It's become kind of an interesting thing to express your designs with a little bit more detail than when they're shown just kind of statically. But unless someone has walked you through it, it's not necessarily straightforward how to create them. But it's not too bad, either. And so what this class is about is showing you how to take something that you've already animated, whether in a prototype, whether an actual app on your phone that you wanted to screen record or even something you've made in after effects and using that Teoh turn it into a gift that you can use to share with either co workers share on skill share or on dribble or whatever. And so there's a couple of things you're gonna need to get. Um, if you want just the straightforward, simple way of creating gifts, there's an app called lice cap that I recommend. Uh, you can look it up on Google and download it. It's a very simple one. We're gonna walk through how to do that, But if you want to create ones that give you a little bit more flexibility, you're gonna need, um, likely something like after effects and more importantly, Photoshopped, which allows you to kind of have a little bit more control over the frame rate of your gifts and the size and the color choices and so on. And this is the method that I used to post to Andrews sketch Skill share class for this to do app, for example, and that's actually what we're gonna walk through today. 3. Exercise 1: LICEcap: So for this first exercise, what we're gonna do is taken already finished prototype in this case, a to do list that you can swipe away to remove the item and you can click to be back and we're gonna turn it into a looping GIF. And in this 1st 1 we're gonna use the easy method. And after this exercise, I'll show you how to do it with a little bit more flexibility in control. So for this one, are you gonna do is download the app called lice cap and open it up. And when it opens, you'll notice it's just a window that shows you where the frame in which it's going to record it's placed. And for that you also congest write it by hand. So if you wanted, for example, to make it the size of a dribble shot, you could do that or really, whatever size you want just by dragging the windows. And in this case, let's just go for this rectangle, and let's place it somewhere where we think it will make for a nice gift right around here . Then you click record, and it's gonna give you a couple options first. you name it and you can do things like have the gift only repeat a few number of times or at a title frame or so on. But for this case, we're gonna keep it simple. And when we had save, it's going to count down from three. And we're going to start recording the prototype. Let's give it a shot. I'm gonna bring my cursor into the window. I'm gonna drag just a little bit to display the interaction, swipe it away, bring it back and then stop it. So in the background, it's gone ahead and added the gift to my desktop to do dot gif. So why don't we take a look at it and browser and see what it looks like? So the cursor comes in, drags it away, swipes off, we repeat it, and then it just loops over and over again. And now most sites were you choose to upload a GIF are probably gonna have some kind of a limit. And the great thing about lace cap is it does while it sacrifices quality a little bit. The end result here is just 240 kilobytes, which is tiny. So you can imagine. It's a pretty powerful tool that lets you get gifts up to maybe 10 or 20 seconds, but again at a little bit of the sacrifice and quality. And that's pretty much all you need for this exercise. So why don't you go ahead and take a animated either you can do it from a movie. You can do it from the framer example that I've given you. You can do it really from anything, um, and use lies cap to create a GIF. And why don't you added to your project? It will take a look Thanks. 4. Exercise 2: Record iPhone + Photoshop: what we're gonna do in this exercise is taken app on your phone and record ourselves using an interaction using quick time, and then we're gonna turn that into a nice quality gift. So to start, make sure your phone is plugged in with your lightning cable to your computer and open up quick time. Go over to file and start a new movie recording your webcam. But you want to actually change it using the drop down to your iPhone. In this case, I have Pinterest open and we're gonna record an interaction Pinterest, where when you long press an item like that, you can basically choose from one of shortcuts and let it go. And so what we're gonna do is record ourselves doing that interaction, and then we're gonna turn into the gifts. So to start when you're ready, hit the record button and record. However, long of the interaction you'd like to show in the gift and we can clip it if you get too long, that's OK, but go ahead and try it. Okay, Okay. Let's play it back and see if it worked. Looking good. Pretty cool. All right. So go ahead and save it. And once it's on your desktop, drag it an open Photoshopped. You can also right click and open and Photoshopped however you want. Just make sure it's been Photoshopped, and you'll notice when you do that, there's a timeline at the bottom. If you don't see that, go ahead over the window and click on timeline. So if you look at it, the image is a pretty big size. Right now, we're looking at 750 pixels wide and 1334 pixels high and quite a long gift. And I think if we were to try to save this right now, we can give it a shot. It's gonna look pretty pretty big. It might not even show us the amount in the preview, but if you go to file export safer Web, we can find out how long. Okay, so there's a lot of things to look at on the screen, and I think we learned our lesson that with a really big file that's really, really long, it's better to go ahead and assume it's gonna be pretty big and shrink it a bit before you start to save it. otherwise you'll be sitting there for a while. So this file happens to be so big you can't even see the size of it, and you'll notice that it caps at 500 frames. And that's because gifts don't allow more than that. And so this actually isn't even representing the entire animation that we've recorded. Um, a couple of different things to point out on this window, though on the way left, we've got our tool panel, and you can use this to, for example, shrink. If you hold option the preview, which is helpful. Um, and there's also a set of options. We can change around colors, but we won't really mess with that now because it's clearly so big. We have to do other things first. So for now, let's cancel. So what we want to do is we have two main knobs that are worth playing with when it comes to shrinking your image. The first is its size, which is an easy one to make smaller. So in this case, let's go ahead and try something like, I don't know, 300. It's gonna ask if you want to convert it. That's totally fine, doesn't change a thing. The next thing you want to play with is clicking this little icon here on the right of your timeline panel. Click on set timeline frame rate and you'll notice that it's at 60 frames, which is really, really fast. It's really nice, but at the same time, we don't necessarily need it to be that smooth when it comes to making a gift, because we're gonna need to realistically get this under eight megabytes anyway. So why don't we try something smaller and see how it affects it? Let's try 30 so you can already see that the time was cut in half. So now when I export it file Export Safe Web. Let's see if it's able to at least recommend a size. Okay, so it looks like we're not quite under eight megabytes, which is what I would recommend for most cases and often even smaller if you can. But the good news is we are under 500 frames total, so it is showing the entirety of the animation, so we can even go ahead and save this out just to see what it looks like. I recommend switching to forever so that it loops over and over again, and this doesn't actually affect your file size. It might take a second to save out. Let's go ahead and open this in a browser to preview it. That's where I like reviewing my gifts the most. So taking a look. It's pretty smooth, actually, and it's a decent size, but unfortunately, this is previewed locally. If someone was trying to download this gift with about nine megabytes, it could take him a little while. So let's get a little smaller. So again we have two knobs, image, size and frame rate. That's play with both of them. I often times honestly just play back and forth until I'm happy with the way that it looks in the file size. So there's not really much of a science to it have been kind of guessing. So I'll go ahead, given that we're already at night and I want to cut that almost in half. Let's get even lower. That's track 12 frames and let's get the wits around 2 50 Dude, that does good export. Safer Web. All right, we're at three megabytes, so that is much, much, much better. It's not quite the size that we would need for skill share yet, but it is actually still a pretty performance. GIF. I would say so, given that we want to be able to post these projects to skill share, let's go ahead and get that under two. So in this case, I'm comfortable dropping some more frame rate. I don't really like going lower than eight, to be honest. And as far as the size, I think it actually is probably pretty good, and I think this might get under anyway. But I'll shrink it a little bit, see what happens just about and now. One last little thing we can do is change the amount of colors. We can drop it down to 1 28 if we want, and that definitely drops him under. But we'll see if you're happy with how it looks before you post it. So again, I like to open it in chrome. See how it looks. So I think this type of resolution, even though it is a little choppy and a little bit low fidelity, it's probably just fine when it comes to showing, you know, if you had a library of animated GIFs, where you were trying to describe a bunch of different animation patterns. I don't think this is so bad, you know, depending on the length of your recording, obviously you might have to sacrifice even more different types of, you know, frame rate or image size. It's really up to you. And one thing to note is, it's not necessarily just length. It also has to do with how many colors and the complexity of the animation that you're looking at so sometimes you might be able to get a very long gift that looks really smooth at Only just has a few colors because it's a lot simpler to show over time. So why don't you go ahead and take a video upload from your phone if you can? If you have an iPhone, if you can't, that's fine. Just take any movie from the Internet Dragon in a photo shop, play around some settings, and why don't you post it as the second exercise in this project for the animated GIFs. Good luck 5. Exercise 3: Perspective + After Effects: okay for this final exercise, What we're gonna do is take a framer prototype like this one. You were going to record a video of it using quick time, and then we're gonna drop that into after effects into a phone that's angled using perspective. And so what we want to do first is find the phone that we want to drop it into. I recommend just searching dribble for an iPhone six template and then clicking on whatever when you like, And I think this first will do just fine. So go ahead and download it whenever you get the chance. And then let's open it up in photo shop and this one, it looks like there are a bunch of layers, and the first thing we want to do is isolate the layers that we need, which would be nice if we had a reflections layer like this one that was kept separate so that we can place it on top of the video. That way, when it's sandwiched between, it looks even more realistic with the glare. And so first, let's save out that reflection as it is, And then let's do the same thing for just the phone itself. Then let's open after effects. We're going to start a new composition and we're going to make it 800 by 600 with a white background 60 frames per second. We're gonna drop the reflection in the phone that we just made onto the after effects. It's gonna show up here in the project on the side and let's drop it right into the composition so we can start moving it around to place it as we like. It looks like this is a little bit too zoomed in for my taste. So what you can do is when you've selected both of them, you can press s to show scale and start to scale it down into your happy. That looks pretty good. It also looks like our reflection is placed beneath the phone we actually wanted on top. There we go. So now what we want to dio is now that we're kind of ready to drop in the movie, let's make the quick movie. So opening up, framer with the prototype that you'd like to record let's go ahead and get quick time open . Start a new screen according and what we want to do is make sure that we're getting the highest resolution possible. So what I like to do is go up into the zoom level and make it a little bit bigger. So instead of fitting to the size that it's in, I'm putting it at 50% here. I think that looks good. So it's click record. It's drag about the size you want. It doesn't matter if you're not too precise here. We can fix it later if you want, but try to get as close as you can. It's okay if you leave the black frame on the side and then start. According that should be pretty good and see how it turned out. Next, Pretty smith. So it save this out and let's get it into after effects. So it's open up aftereffects and dragged the movie file right into the project. You put it onto the composition. Here we go, getting closer now. What we need to do is we need to take this video and fit it onto the phone. There's a quick trick for that. You just goto effect distort corner pin that allows us to start dragging the corners exactly where we want them. Which in this case, we match the top left to the top, right top. Left the top right to the top. Right. And we can't see the bottom. So why don't we just zoom out a little bit? Um, here we go. Bottom right to the bottom rate and bottom left about life. Okay, lets see how we did. We might want to zoom in just a bit so we can see things a little bit better. It looks like the top right could be a little bit better. So what you want to do is you want to go under the drop down and look under effects corner pin, and when you click it, it'll let you move things around again. So I think we want to just bring the top right in a little bit and the top left as well. That's looking pretty good to me. Um, maybe the top left just a bit more. Okay, So what you can do now is check the length of your video. Let's move this timeline up a little bit and make sure that toy story is beneath. The reflection here is that the reflection shows up on top. This controls the length of your video. We wanted to match the length of the recording and we can hit space bar to preview it and check it out if you want. And it's looking pretty good. So what you want to do now is start to export it. To do that, you go toe composition, add to render queue, then under here under lossless and the output module. You can change this. We're gonna go to the format options. We're gonna switch it over to H 264 which plays really nicely with photo shop. We're gonna hit okay and go ahead and render it. Okay, Now that it's rendered, we can go ahead and take this movie file and bring it into photo shop. So we learned last time that it's likely that a video at this length at this size is probably gonna be way bigger than we want. So let's go ahead and already assume that we can switch the frame right down from 60 to something like 20 and let's see where that puts us. It's likely we're gonna need to shrink a few more things, So go to file export safer Web Now we're under the dribble limit, which is actually pretty good. But we do want to make sure that the colors look a little bit richer if we can afford to. So let's bring that up to 256. If it wasn't already, we're still under eight, which is great, so you can go ahead and switch the loop options to forever save it out. Now, when you post a skill share again, it's gonna have to be under two megabytes. So you want to likely shrink the image size quite a bit and play with it then and see what it looks like. Let's go ahead and see how that turned out. It's really nice. And now we're even at two X resolution. We could even shrink it down to 400 if we wanted to and see what that looks like. You can also as the last tip, if you like in after effects, you could always go to composition, and if you go to the settings, you can change the background color. So if you wanted, like a you know, some kind of different background of it and white, you could do that and see what that looks like. Finally, I wanted to show you one last setting that can affect also how your composition turns out. Eso it's drink this down now. What you can do if you want is notice how the grays are coming off a little bit odd, and the clouds are looking a little bit. I don't know to gray, what you can do is take this eyedropper. Bring it over to the color that you want to correct. In this case, this great here. Double click it on the right hand side on the color table wherever it selected. And in this case, we want this to be full white. So it's bringing up there and hit OK, much better. There's still some colors that could be probably be improved. Some of these greys down here look a little bit dark. You can just try to find them and do the same thing I found. Sometimes it takes quite a bit of tweaking until you're happy. Kind of depends on the image and what types of colors are showing up? Try a few more. It's looking a little bit better. You can go over to the looping options, which it over to forever. Go ahead and save it out. Let's take a look and see how it turned out. So go ahead and open a new tab. Drag twist re on. Take a look and see how it looks. Awesome. Looks pretty good. Now, if you would like to try this on your own, please do and upload it as an exercise to your project. In that way, we can talk about it and look through. If you have any questions, make sure to add them to the discussion board and 6. Wrapping Up: thanks for taking a class on how to create animated GIFs. I hope you found it useful for whatever you might be making gifts for. Definitely. If you haven't already, please upload and exercise as many or as little as you'd like as a project on skill shares that we could talk about it. And if you have any questions, I'm here. Just post them to discussion board, and I hope you have an awesome time.