Transcripts
1. Introduction: Do you love to draw? Have you ever wanted if there was something you could do to make your illustrations come to life? Hi everyone, my name is Lucy, and I'm a designer and illustrator living in the Netherlands. This class is called GIFit. Animating cute characters on your iPad. GIF, however you pronounce it it's something that everyone knows and loves. In this class, I'll be showing you how you can make your own characters come to life, to create whimsical GIFs that can add sparkle and magic to anyone's day. With a focus on creating characters inspired by the environment, this class is suitable for illustrators and designers of all levels who want to know how to go one step further to make their characters come to life via animation. There are many ways to create animations on your computer, but I wanted to find a way to streamline the whole process so it can be done using just the iPad. This makes the entire process of illustrating and animating a lot more convenient as it can be done on the go, walking in a café, while traveling anywhere where inspiration strikes. As an illustrator, I enjoy using my drawings to celebrate everyday life in the environment. Having come from a tropical country and experiencing that seasonal changes for the first time, I wanted to find a way to celebrate the warmth of summer and spread the cheer of good weather. In this future class, I invite you to join me in this celebration of the season or weather where you live. If you're as excited as I am, click on the next video and let's get started.
2. The Project: For this class's assignment, you will be creating a corrector inspired by the season where you live. Then we will be using three different methods to add some movement to the illustration. If your country doesn't have seasons, you could look at the weather instead for inspiration. In a brainstorming part of the lesson, I will guide you through how you can do that. I will be walking you through the entire process from getting ideas to exporting a GIF. Along the way, we will also be doing some sketches, choosing one of them to refine and polish and animating its facial expression, adding background effects and animate the text. The deliverable for the class is to have a GIF file that you can Upload and share via GIPHY. During the course of this class, you are encouraged to share your sketches and what's in progress so that I can give you some feedback and suggestions. I'll also be glad to help if you find yourself getting stuck in any part of the process. Also, do be sure to upload your final GIF on the gallery so that we can all see it and enjoy it. It will be like a giant celebratory GIF party in the gallery. You can also choose to do the project in parts or all at one go. It's definitely doable if you have a few hours to spare. I personally can`t wait to see what you will come up with, so let's go get started.
3. Tools and Apps: For this class, all you need is an iPad and a compatible stylus. I'm using the iPad Pro and an Apple pencil. We will be using Procreate to illustrate our drawings. It costs 9.99 USD on the App Store and it's an incredibly powerful drawing tool. If you are interested in drawing more digitally, it's definitely worth your investment. For the making of our animation, we will be using an app called ImgPlay, I-M-G-P-L-A-Y. There are two options available; a free one and a paid one. For the purpose of this class, the free one is powerful enough, and that's all you need. Once the apps are installed, you can click on the next video to get started.
4. Lets Sketch: Let's begin our brainstorming by gathering some visual inspiration. On top of my own photos, I like to look online for images to build up a springboard of colors and shapes. Open up your web browser. I like to start off with a generic keyword to get the ideas flowing. It's summer where I am, so that would be my search term. Scroll through the images and see what catches your eye. If you're not sure where to begin, I find that food and plants are great keywords to start with as they're seasonal, and naturally reflect the spirit of the season. If you're from a tropical country with no seasons, you can use the weather as an inspiration instead. For example, in Singapore where I'm from, it's usually either hot and humid, or very cold and dreary because of the monsoon season. In that case, you can think about your favorite drink to have to beat the humidity, or maybe certain incidents that could happen because of the unpredictable monsoon storms. Take all the time that you need to absorb the visual inspiration. You do not have to save all the images. In fact, you shouldn't do that because that would be too overwhelming, but I find that just scrolling through the images and looking and letting these colors and shapes go through your mind and sink in, helps a lot because it helps to give you some visual guideline as to the mood that you're trying to replicate. For example, now that I'm looking at all the flowers and seeing certain colors, like the bright yellows, saturated oranges and reds. As mentioned earlier, produce is a wonderful way to reflect the season. Now that I'm looking at summer fruits, I realize the colors that the flowers represented are so similar. Bright reds, yellows, and oranges, and very vibrant greens. These are the colors that I would definitely be wanting to use where I create my illustration later. It's also helpful to look at such terms that are not entirely representational. For instance, the idea of summer fun. It's very interesting to see how similar colors and shapes are used, even though they are created by different people for different purposes. To recap, while looking for visual inspiration, you may start by looking at tangible items that are related to your subject matter. For instance, fruits, flowers, and produce, paying particular attention to the colors and shapes that you see. You may also lookup abstract concepts to reinforce and build up the visual vocabulary. Select about three to five images at most to serve as your visual inspiration and you can start with the sketching phase. To create a new document, click on the plus icon and type in your canvas size. I'm going with a square as I plan to share it on Instagram. Remember to set the PPI to 300 for high-resolution output. To insert an image, click on the "Arrange tool" in the first button. Select insert a photo and choose your image reference. Repeat this for however many images you may have. You see on the Layers panel that each image is on a separate layer. Select and arrange them on your canvas such that you have a clear working space to sketch on. You can group all the images together by clicking on each layer and swiping it to the right, and then selecting the top right-hand corner button. You'll need the references to be very big as they're meant to serve as a work board at the inside of the canvas space. I enjoy the textures of traditional media so I will be using the apps 6B Pencil, which you can find in the sketching section. You can play around till you find a brush that you like. Remember to set the eraser brush to 6B as well so that when you erase, you'll retain that textural look. If not, it might look awkward and strange for our very hard edge to be with soft edges. Create a new layer to begin your sketching. I'm now just roughly making sketches of shapes that have stuck in my mind from the search process and also from the inspiration at a site. I really liked the idea of watermelon because it just brings to mind the idea of something so sweet and juicy and thirst-quenching. It can be dull joining the characters, just standing around so it helps to think about what they might be doing. I find it a little funny when I think about the summer collection, having summer activities as well. Maybe a watermelon, eating a watermelon. Feel free to rearrange your sketches to make space if you run out of space to draw. Remember, this is just sketching phase for your ideation. Do not be too worried about composition or messy lines, just have fun and let go. This entire process is very organic and you can go back and forth to find new photos or new inspiration whenever you like. I keep finding myself thinking about watermelon, so I think I'm going to go with a watermelon character. You can spend as much time as you like at this stage. I usually go back and forth between the ideas, trying on different visual expressions and mixing up the images. It sounds a little silly, but when I find myself smiling back at a drawing, I know that's when I'm ready to move on to the next phase.
5. Refining and Colouring: Tidy up your layers panel by grouping the different sketches together. Then select a character that you want to develop and copy it out onto its own layer. Select magnetics and resize the sketch to the size that you want your final art work to be. I know I want my final liner to be pink. I'm going to change the color of my sketch layer to be something that is in contrast. To create a new layer and this is where we will begin drawing our final line art. To draw straight lines, you can drag and hold and the line will snap into place. For your GIF, you will need to decide what you want to keep static and what you want to animate. Whatever that you want to animate, will need to be drawn on a separate layer. In this case, I know what I want to make the hand and the flower move, so I will draw that on a separate layer. Rename your layers as to go along to help keep things organized and minimize confusion. The liner is done. At this point, I will usually take a break. This is to put some distance between myself and the art work, so that I can take a look again with fresh eyes and maybe make some adjustments if I need to. When you have rested and ready, you can move on to coloring. Create a new layer under the line art to begin with your coloring. This method of coloring is slower, but I can create wonderful textures depending on your pen pressure and stroke direction. You can also use the Lasso tool to make a selection and drag the color in for quick fill. Remember to color the part you want to animate on a separate layer. For me, I'll be coloring by hand and flower on a new layer. To change the color of your line art, you can select the thumbnail and select alpha lock. With this, you can only add color to areas that have previously been drawn. I like the color of my line art to match what I'm drawing, as I find that it helps to add a little pop of color. Take your the time to adjust to get the colors that feel right to you. Remember if you feel frustrated or stuck, just take a break and come back again. Once you are happy with the colors, we may begin with the animation. At this point, you may also save and upload your file to the class gallery for feedback. Now, it's onto the fun type animating your character.
6. Lets Animate! Eyes: Now let's begin with the animation. Before we begin, please do check that your light art and colors are on separately layers. Group up all the other layers that you do need under a new group, and label it as backup. The method of animation that we are using is stop motion. This is done by drawing keyframes with subtle differences. I will now show you a quick example of what you'll be doing. We are going to make this tiny face blink. Duplicate the layer by swiping to the left, then turn off the visibility of the first layer and start making your modifications. I will erase a part of the eye to make it look like it's squinting, duplicate it again. Now, modify it further so that the eyes are now thin slants. There we have it; a basic tree frame stop motion. When I turned the visibility of the layers on and off, you should be able to see the little face blinking and opening the eyes. Now let's begin animating the actual artwork. Duplicate your line art body. Now you can begin to make the subtle changes. I will erase the eyes to make it look like a squinting, but keeping the width of the eyes consistent. Now make a copy of this layer and erase the eyes so that it looks like thin lines. We can now do a quick check on if the animation works by toggling the visibility of the tree layers. Remember to rename each layer with one, two, and three in the turn order of the animation. This will help greatly when we are saving and exporting our [inaudible]. We have just completed making the first part of the animation. To recap, the method that we have just used with the modification technique where we duplicate a drawing layer, and modify slightly bit by bit so that it creates the illusion of something that is moving. This method is particularly effective for animating subtle changes, such as the blinking of the eye. Because you do not want the position of the object to be moving. In the next video, we will take a look at how to make animation where we want the position of the item to move.
7. Bonus: Lets Animate! Movement: This is a bonus video to show you how you can make parts of your animation move. For my animation, I want Mr. watermelon to be waving the sunflower from left to right. This means I will need three copies of the sunflower, with the one that is already drawn being number 2 in the sequence. I will start off by grouping line art and color layers of the sunflower in one group. Remember that this is the second one in the movement sequence. Duplicate the entire group and click on the one that you've just created. Click on the Selection tool, which is the arrow icon, and you will see a dotted border around the entire object. Very carefully, use two fingers at the corners of the selection to rotate it. Select Magnetics when repeating your selection to avoid the resizing of your object. Now that I'm happy with the angle of the rotation, I will carefully align the [inaudible] of the drawing, which is the head. Rename the group to be the first one in your sequence and duplicate the second group again. With the same method, rotate the new group slightly towards right. Adjust it so that [inaudible] neatly aligns with the other two groups. You will notice that the variation between each group is very subtle. This will ensure that our animation will be a smooth one as slight variations will make it chalky. This is a quick preview of how the animation will look like. You find GIF will not have the ghost effect as we'll be exporting, each group has its own image. To recap. In this lesson, you have learned how to isolate a pan of the image to animate. The most crucial part of this technique is to ensure that the isolated segment is drawn on a separate layer. The movement can then be created by either rotating a segment and or then changing position. In the next video, you will learn how to activate the background by adding sparkle and blink.
8. Lets Animate! Background Sparkles: I will first show you how to animate a basic sparkle. Start by drawing a diamond shape. Again, this will be the second one in our sequence. Create a new layer below it and draw a smaller diamond. Create a new layer on top and draw a bigger diamond. Toggling between layers, you now see that the diamond is growing from big to small. Now, I will create the opposite effect by drawing another diamond and having a bigger one on layer 1 and a smaller one on layer 3. In this quick review, you will now see that the diamonds as sparkling in opposing sizes. This helps to create variety in the animation and keeps things interesting. You may now start to draw your diamond shape and sparkles around a mean corrector. I like to use the same colors that are already existing to create a unified look. When you are happy with the composition, rename the layer as Sparkles number 2. Create a new layer below this and name this Sparkles number 1, lower the opacity of Sparkles number 2 by clicking on the icon next to the checkbox. With that to serve as a guide, you can now start to draw the new sparkles on Sparkles 1. Remember to alternate between drawing the bigger and smaller shapes to create variety in the movement. Now create a first buffer layer. What we want to draw on this layer is to create the sparkles going into opposite size of what we had on the first layer. If the diamond shape is going smaller on layer 1, you want the diamond to be going bigger on layer 3. Adjust opacity of sparkle layer 2 back to a 100 percent. Organize your layers by grouping the sparkle layer with the line art. Again, you can toggle the visibility of the layers on and off for a quick review of how the animation will look. To recap, in this lesson, you have learned how to create those sparkles by drawing alternative variations in opposing sizes. Lowering the opacity of the original layer is helpful for it to serve as a guide as you draw the UV radiations. The beauty of this technique is that you don't have to be too precise, yet it still creates a very dynamic movement. This makes it a very good technique to create things like sparkles , confetti, and punctuation marks for edit expressiveness. In the last lesson, we will be using a similar method to add animated texts throughout illustration.
9. Lets Animate! Wobbly Text: We will now finish off by adding some animated text. Remember to do this on a new layer. To maximize the readability of your illustration keep your message short and sweet. Similar to the previous method, we will be decreasing the opacity of this layer. On a new layer, trace over your text. Don't worry about having to get it exactly the same as it is there's slight variations that will create the effect be one. Create a new layer, and turn off the visibility of the first layer. Then turn down the opacity of the layer you have just drawn. This would now be our new guide. In the layer you have just created, trace over the text again. Rename the layers as text 1, 2, and 3, and move them to the same groups as the liner in this buckles. This is what the animation looks like. To recap in this lesson, you have learned how to use the tracing better, to create very, very subtle slips that results in a wobbly effect. The subtle inaccuracies make the entire look a bit more rustic ahead drawn, and results in acute animation, and you are done. In the last video, we will learn how to export the images and bring them into image page to create our animations.
10. Export and Share: I will show you a few different options for saving the GIF. First, we will go with a white background. Ensure that both the group ones are checked, and then click on the wrench icon, share and select your file format. I will be using PNG for the animation. Click on save image to export your file. Now, hide the visibility of both the first groups and turn on the visibility of the second groups. Repeat the steps to export your image as a PNG file. Now, hide both the group twos and turn on the visibility for both the group threes and again, repeat the steps to export your PNG file. Open up your Image Play app. Select the three images you have just exported. You will see that the illustration is already animated. You may adjust the speed of the animation by adjusting the scroll bar at the bottom. If you look closely, you will notice that animation is a little jerky as it shifts from one, two, three and back to one. To resolve this issue, click on the chocolate bar looking icon at the top right hand corner, and then click on the plus sign at the bottom. Then select your second image to edit to the sequence so that it is now one, two, three, two. Your animation should now be smooth and no longer choppy. Play around to get the speed that you like. I generally find that it works well between the speed of 0.15 seconds to 0.25. For this GIF, I will be using the speed of 0.20 seconds. When you're happy of the speed, click on the next icon at the top right-hand corner. Here save the file as a GIF, and select forever to make it loop endlessly. You can also save it as a high-quality video. This is the format that you want if you want to send it to your friends via WhatsApp or post it on Instagram. Select "repeat ten times" for an animation loop that is longer. You can now find both the GIF file and the video file in your photo album. Congratulations, you have just finished the 3D and animated corrector entirely on your iPad. I will now show you how you can save your file as a transparent GIF. Turn off the visibility of the background color layer. There you have it. The image is now transparent as indicated by the grid that can be seen through. Follow the same steps to export your images. Once again, import the images into Image Play. Do remember to edit an additional image number two to ensure that the animation will be smooth. Export your GIF and video files with the same method as before. From your photo album, you can see that the GIF file is transparent when you click on the white area and it turns black. Similarly, the video file is also transparent. Lastly, I will show you how you can make a colored background GIF. Scroll down and select your background color layer. From here, you can change the background color to anything you wish. You might find that you will need to recolor some parts of the image to ensure that it is due legible. In my case, I will be recoloring the text to white. This can be done easily and quickly by ensuring the text layers are all in ever lock. When you're happy with the colors, simply export your new images and bring them into Image Play for animation. Don't forget to add an additional second image to ensure that the animation is smooth. With that you're done. Giphy is a good platform for you to upload your GIF files for sharing. Simply browse through your files and select the one that you want to upload. Select "copy link" for a list of links that you can use to share your GIF file. Copy the short link and you can use this link to share your GIF file onto the class gallery. To share your GIF file on Instagram, you will have to use the video file. Unfortunately, the quality does get a little compressed once it's uploaded. That's all. You have completed illustrating, animating, exporting and sharing your animated illustrated GIF. I'm really looking forward to see all your works. So please do remember to share on the class gallery.
11. Thank You: That's it. You have just made an Illustrator animation entirely on your iPad. Do remember to share your final artwork on the gallery, so that we can all take a look. I really love to see what you do, so please remember to tag me @tzetze if you share any of our work on Instagram. I'm planning on making more Skillshare classes on Illustration, and Animation, and working with the iPad. So if you have any feedback or suggestions, or maybe ideas for classes, please let me know. I hope you have enjoyed the class and learned some interesting ways to illustrate and animate on your iPad. See you next time.
