Create a Hand-Drawn . GIF in Adobe Photoshop

1. Introduction: Want to spice up your blog or website with cute animated GIFs? Have you ever needed the perfect reaction GIF for that one menial love? We've all been there. Take this class to learn how you can make one yourself. I'll take you through the entire process of animating hand-drawn characters and lettering in Photoshop. From sketching to exporting. It's a lot easier than you might think. Soon you'll be showing off your GIFs on your blog or Instagram. So let's get started and make some GIFs. 2. Preparing Your Hand-Lettered GIF: The project for this class is to create a hand-drawn GIF with at least one animated aspect. It can be as simple as a character winking or doodle style hand-lettering. I'm pretty fond of this bouncing text effect that I used in my intro video, and it's actually really easy to do. So I'm going to go ahead and demonstrate that first. First, draw your word or phrase, then create a new layer and drop the opacity of the first layer so that it's easier to trace. Don't worry about the trace being perfect. The point is for each tracing to be slightly different from the last. Repeat this two or three more times. I think it's a good idea to make three to five layers. You could also do this step traditionally with pen and tracing paper and then scan it in if you want to. Once you're done with your five tracings, be sure to bump the opacity of all of your layers back up to 100 percent. The easiest way to change the color of your lettering on all layers is to create a gradient map. Go to adjustments, gradient map and make sure the layer is at the top. Then click the gradient bar, and with these color pickers on the write and left sides, you can double-click them and choose a color. Because this layer is on top, it will apply to all of the layers below it. Each layer represents a frame of the animation. So for the sake of organization, be sure to keep them numbered in the order you want them to play. Now that I've finished my layers, I'm ready to animate. 3. Animating Your Lettering: So you'll want to make sure your timeline is visible. Go to Window > Timeline. In some versions of Photoshop, it comes up with the drop-down menu here in the center, that has a couple of different timeline display options. You'll just want to make sure that you choose Create Frame Animation. This is where you'll organize your key frames and test your animation. The first frame shows all of your layers that are set to visible. You want to turn off the visibility of all layers you don't want to show up. Because we just want layer one to show up in the first frame, make sure that layers two through five are invisible. Before moving on to frame two, you'll want to change the timing by clicking on this drop-down arrow. You can always alter the speed by changing the delay times of you frames later on if you want to, but generally I think 0.2 seconds per frame works well for GIFs. So when you make a new frame by clicking this symbol right hear on the timeline, that new frame will replicate the settings from the first frame. That's why I had you change the delay time because then it will just automatically apply that delay time to the next frames that you make. So anyway, you just have to make sure that layer two is the only layer that's visible in frame two and layer three is the only layer that's visible in frame three and so on and so fourth for the other two frames. Down here there's a drop-down menu that has the option to play Once, Three Times, or Forever, and you'll want to choose Forever since we want it to loop. Push play and there you go. I think it looks pretty good. Pretty happy with that. I'll show you guys how to export it later on. 4. Animating A Character: This is where it gets a little more tricky depending on the complexity of both your character and the animation itself. The actual frame by frame animation process is pretty much the same as it is with text, but you'll want to test your rough animation before cleaning up your drawings. So I'm going to make this little girl wave. I don't necessarily need to do this, but for the sake of demonstration, I'm going to use a technique called Onion Skinning, where you draw your first frame and your last frame where you want the animation to end before all of the frames in between. Since I already have my first frame drawn, I'm going to lower the opacity, make a new layer, and draw my last frame. Now that that's done, it's easier to see what needs to happen in between. This is an especially useful technique for more complicated animations like running or dancing. Be sure to stay fairly loose with your drawings at this stage if you are doing something more complicated like that. Don't get hung up on cleaning them up, because you want to make sure your animation runs smoothly first before spending the time to make them look pretty. This is an animation that I did a couple of years ago. It's a test moveset for a game. But anyway, as you can see, it's a lot more complicated. I had to use reference and really spent some time on it. So it'd be something like this that you'd want to use onion skinning with. If you're just making your character do something simple like wink or wave, you don't necessarily need to do this. Whatever works for you, really. So anyway, now that I have my layers, I'm transferring them to my timeline so I can test my animation. I'm not going to bother cleaning this up because I like how it looks, but if you do clean your rough sketches by doing clean line art on separate layers, all of your new layers will mess up your animation. It's easiest to just recreate your timeline with your new line art. Otherwise, you'd have to go back in and mess with all the visibility settings of each layer on each key frame. 5. Exporting GIFs and Videos: Here's my finished GIF. Exporting a GIF is pretty simple. If you have a version of Photoshop from, I believe 2015 and back, the Save for Web option is in a different place. In my version, it's right here under Save As. But for older versions you're going to need to go to File > Export > Save for Web. Anyway, click Save for Web. Make sure everything looks good. The file size should be relatively small and the repeat should be set to Forever. I changed mine to 600 by 600 pixels and then clicked Enter because it looked a little big. That looks good. Save it to your desktop and there you go. If you want to post your GIF to Instagram, you're going to need to export it as a video because Instagram doesn't support GIFs. The video has to be at least five seconds long, so then you need to lengthen your GIF. Because my frames are set to 0.2 seconds, that means I'll need at least 25 frames. But keep in mind that you may need more or less if you've chosen a different amount of time for each frame to last. Anyway, you just copy and paste your layers by highlighting all of them, and then holding down Option (or Alt on PC) and dragging it. Then highlight them again, hold down Option and drag and drop. There you go. I now have 30 frames, so that should be plenty of time. Then all you do after that is go to File > Export > Render Video. It'll take a couple of seconds to load. Change the name if you need to, and be sure to save it to your desktop. Then press Render. Now you can preview it. You can put it on your phone by dropping it in your Dropbox, or if you have an iPhone, putting it in a folder and then sinking that folder to your phone through iTunes. That's that! If you post your GIF on Instagram, please feel free to tag me @melissaleedesign. I'd love to see them there or on the class project page. Thank you so much for taking my class. I'd love it if you'd leave me a review, and please don't hesitate to ask me any questions you may have in Discussions. See you next time!