Bringing Your Webcomic to Life: Create an Animated Comic!

1. Hello again!: Hello again everyone. I'm Sarah Anderson from the web comic Sarah Scribbles, and I've taught two previous classes on Skillshare. One on creating a web comic and one on coloring. Today, I am going to teach you how to make an animated comic by creating a GIF. The use of GIFs in comics is growing more and more popular within the web comics community. Many well-known cartoonists use them, including Jane Zei at the Pigeon Gazette and the extremely popular Cyanide & Happiness. I personally used them in the past for my longer format articles for College Humor. Just one animated panel can really make your comic standout. Furthermore, GIFs don't have to be limited to panels. GIF making is a skill that comes in handy all the time for artists. For example, you can create an animated icon like the artists behind the web comic Lae's Life. Another example is the illustrator Matt Rockefeller, who used these beautiful little GIFs on his website as clickable links. GIFs just have a way of adding a special touch to your work. In this class, we'll be making a comic together and I'll be walking you through every step of the process. We'll go from sketching, to a test run, to finalizing and uploading. By the end of this class, you'll have learned a skill that can improve you as a cartoonist and artist as a whole. If you're ready to get your comic moving, go to the next video to get started. 2. Your Assignment: Your assignment is going to be to create a comic that has at least one animated aspect. Animated aspects can be as simple as a blink to as complicated as the squid wiggling around. You can experiment with different levels of difficulty. For this project, I'll be working and demonstrating in Photoshop CC, although the steps are fairly basic, so older versions of Photoshop will be compatible. Since I'll be focusing on animation in this tutorial, you should already be comfortable setting up a simple comic on your own. If you need some help, you can refer to my previous classes. Here's the comic I'll be working on and I'll be making a gift of my character dancing in the final panel. If you need a prompt for the comic, try making something based on your own personal experiences. Think about funny things that happen in your own life that would be fun to see in motion. I'll be talking more about what parts of your comic are best to animate in the next video, so move ahead if you're ready. 3. What to Animate?: Before you start creating your GIF, you should think of your comic idea and try to determine what aspect would work best animated. An animated element should either work to bring the comic to life or it should help deliver a punchline. Although you can choose to make a GIF as complex or as simple as you want, oftentimes, cartoonist use relatively simple animations. Background elements like the shower water in this comic from the series Boumeries, are really nice way to bring life to your comic. I love to use this kinds of GIFs as minor embellishments, like in the title of this article I made for College Humor, and then the quick blink right here. In a lot of webcomics that use GIFs, the final panel is animated. The final panel is often the most important to the joke and adding a GIF element makes the punchline even funnier. I love this example from the webcomic, The Pigeon Gazette. You can see that she used a bit more of a complicated movement which is really helping to make this comic funny. Here's another example that I love from the series, According to Devin. It's a simple animation but the GIF makes the punchline perfect. When you're planning what to animate, make sure you're choosing to animate something that will really work in favor of your comic. GIF making is a little tedious, so make the effort worth your time. We're on to the next video and I'll show you how it all works. 4. Demo: I'm now going to show you how to set up your animation. First, I'm going to set up my file, and since this is a demo and not a comic, I'm just using a basic five-by-five frame at 300 pixels per inch. Now, I'm going to make sure that I'm in motion mode. When you select this, your animation timeline should pop up. If it didn't, you can access it by going to Window, Timeline. On older versions of Photoshop, it'll be Window, Animation. Go to your Timeline and hit "Create Frame Animation". We're doing a frame-by-frame animation and this is where you will organize your keyframes. You'll be doing your actual drawing over here in the layers panel. Sometimes putting Photoshop and motion mode gets rid of your layers, so if you need to see them again, just hit F7. I'm going to demonstrate how to set up your layers with a super-simple drawing first and then later, I'm going to show you how I use this technique in my comic. Now, I have a white background and I'm going to create my first layer by clicking here. I'm going to name every layer by order of animation to keep myself organized. Let's start with this face, which I want to make blink. Now that I've got this first face drawn, I want to draw the first step in blinking, so I'm going to duplicate this layer by hitting Control, Duplicate Layer, and then I'm going to shut the original off by clicking the eye button beside it. Now, I'm going to draw the eyes half-closed. Next, I'm repeating the same steps as before and drawing the final layer where her eyes are shut. We've got three simple steps: open, mid blink, and eye shut. One, two, three. Next, I'm going to set up my frames. In my timeline and in my first frame, I'm going to go to my layers and make sure I have my first layer turned on via the eye button. Everything else besides the background should be shut off. Now, I'm going to create a new frame by clicking here, and I'm turning on the second layer. Again, everything but this layer should be turned off. Finally, I'm adding the third frame. Her eyes need to open back up after this, so I am creating another frame and going back to layer 2. Finally, back to eyes open. Before we test it, let's just walk through these frames one more time. One, two, three, and then back again. Let's see how it looks. Press the "Play" button to test it out. Now, we just saw my character blink. But just for a second, if you want to see your animation repeat itself, go here where it says "once" and change it to "forever". You can also alter the speed of your animation by changing the delay time between frames. Those are all the basic steps for making a GIF. Move on to the next video to watch me create a GIF specifically for a comic. 5. Comic Application: I'm now moving onto my comic which has a more difficult animation in it. As you can see, I've already got my comic pre drawn out with the exception of the final figure. The steps I'll be following are the same steps I used in the previous video. Only I'll be using more layers and frames to create the more complex motion. I'm also going to be sketching in pink so I can do a test run first and then later I'm going to go over and ink it. A complicated movement like dancing always looks better and smoother when it has more frames. But it can be difficult to figure out what to draw frame after frame. That's why for this animation, I'm going to use a technique called onion skinning. I'm going to start by drawing my first layer. Then I'm going to turn down the opacity of that layer. Next, I'm going to draw the final frame where I want her to end up. I'm also naming those layers accordingly. That layer's opacity gets turned down as well. You can see why this technique is called onion skinning. Now it's easier for me to draw what comes in between those movements. I'm going to take two layers and draw in between my final and first layer. Now that I've got the first set of movements, I'm going in and flipping everything, so she moves to the other side as well. Once I've got that done, I'm testing that I've got everything in order and of course, I'm renaming my layers to keep them organized. Finally, I'm going to go in and set everything off of my timeline and then watch the test sketch. Hit Play to test. So this is my first version and there quite a few things I actually want to change. For one, I don't want her arm to move up and down and I want to add more frames to make her movement smoother. I also want to add some musical notes in the background. This is why I like to have a test before I go in and ink. There's always at least one thing I need to tweak. So I'm going to go ahead and make those changes, reorganize my timeline and then show you the final sketch. Okay, jumping forward to the edits and this is the gift sketch that I like. I think it's much better and runs a lot more smoothly. I now feel comfortable moving on to finalize it. For me, I'm keeping this comic simple and just doing minor. So what I'm doing is going to every sketch layer, creating a new layer on top of it and doing my layer right there. Then I'm going back to my sketch layer and deleting the sketch and merging the layers by hitting Command E. I did all this while my timeline was still up, but there's a problem with this. The new layers that you've drawn will continue to show up in your other frames. So you'll manually have to go through and shut them off, which is a nuisance. So if you want to avoid this issue, just delete your frames in the timeline, create your line art layers and then go back after and recreate your timeline. After I've got everything finalized, I'm just going to add a few final touches, like drawing a background and drawing my signature. There we have it. Now all that's left is saving and uploading. Move on to the next video and I'll show you how. 6. Finalizing and Uploading: Time to save. GIFs have to be saved a certain way to function online. First, you need to make sure you bring down your resolution to 72 dpi to make sure it's compatible for web viewing. You can do this by going to Image, Image Size, and then typing it in. Next, go to File, Save for Web, and make sure your upper right corner set to GIF. Now, you can go ahead and save. Now, let's go ahead and upload it to the project gallery. So now, you have yourself an animated web comic. Remember to upload it to the project gallery so we can take a look and leave feedback. Remember, GIF making is a skill that can go beyond your web comic and embellish other aspects of your art. You can create animated icons and banners to improve your site or you can just make them for fun. I hope you enjoyed the class. See you next time.