Create Your Own Hand-Drawn Animated GIF

1. Animated GIF Introduction: Throughout this class, I'll take you to record a short video of your pet. Had to convert that footage to a series of hand-drawn frames and reassemble them in Photoshop. You'll then use these skills to create your own hand-drawn animated GIF of your faithful four-legged companion. Hi, I'm Simon. My background is in art and design, an independent visual artist designer based in Melbourne, Australia. I've been involved in the creative arts industry for trying to use and tertiary education for ten years. I currently manage my time between technical support for an illustration degree and drawing cage if a florist three students, and freelancing in the arts, entertainment, and events industry. This class is aimed at anyone who loves to draw. It has a basic working knowledge of Adobe software. To take part, you'll need access to a mobile smart device capable of recording a short video, a laptop that can run Photoshop and access to a printer, scanner and light box, or substitute a light box for a window and some sunshine. It's ideal for all those illustration enthusiasts who always wanted to test the waters of animation. Unlike me, sometimes struggled to find the inspiration. You can easily find yourself inspired to take the project further by tackling a bigger project, by breaking up a longer form story into more achievable, many episodes are exploring the animation of abstract shapes useful for projection. Either way, being able to create your own moving images is the first step into the amazing world of shareable digital content. By the end of this class, you'll have shorter, short video of your peers. And with some help from Photoshop, you'll have created an animated GIF in the style of a digital flip book that pays tribute to your faithful very companion. The first step in a new chapter of your creative journey. 2. Class Project Outline: This project is about recording a short video of your pet. In my case, it's a Shetland sheepdogs Nelson. Using the footage, we're going to create an animated GIF in the style of the digital flip. Why did I choose this project? Because for me, it demonstrates that you can find creative inspiration in the everyday. Once you start looking around for it. Also, a part of me wants to pay tribute to my faithful four-legged companion for his blind faith and unconditional devotion. Each time I lose focus during the boring parts of my creative projects. And look down from my desk, these faithfully lying, they're really just bring to attention, well, almost 3D. Ideally, when choosing a location to shoot your video, aim to have a plane or contrasting background. I chose our hallway because he had the least clutter up with any room in our house. Lots of natural light and plain light colored walls, which worked well with the dark coloring of our dog. Avoid using DMM or poorly lit location. As this can result in grainy images that lack detail. And you really want to be able to see those defining details that let you know is the faithful four-legged friend that you've come to know and love. If it's your first time attempting this project, try to avoid over complicated actions for it to perform. It can be hard to capture effectively and sometimes difficult to draw. Having said all that remnant, this project is all about capturing the true character of your pins. So be sure to have fun as well. Apart from an Adobe Creative Cloud subscription. To get started on this project, you'll need your mobile smart device with plenty of storage space. A method of downloading your 42, your laptop. And of course the star of the show, Your pit. So grab your mobile smart device, you're faithful companion. And let's go scouting for locations. 3. Lesson 1: Choose Your Moment: To demonstrate this project, I use my phone to record the short video of my pit, and I am terrane, 10 to 12 seconds shorter is fine. For the record. The fan I'm currently using, because an Apple iPhone, I know it doesn't really matter. Just as long as whatever you're using is capable of recording and downloading video content. If you remember back to the previous lesson, I talked about choosing a location for filming. If it's pouring rain or do we need, it's best to try and find somewhere inside. Otherwise, it doesn't really matter. As long as your location is welded and has a background that contrasts with your pet. I found it helped to get close and position yourself down to pits level. That way they become the main focus of the frame and there's less chance of including unnecessary distractions that can make your pits position unclear when it comes time to trace individual poses. Once you've recorded your putting, trying to decide which videos the best for the final can be tricky. I recommend allowing yourself enough time and space to do as many takes as you need to catch that perfect moment. You can even try different locations over different days. That really depends on how far you want to take it. And remember, sometimes even the best of the sneer little time to warm up and get in the zone. As I said in the previous lesson, the aim is to have fun with your pit and capture a little of that character that makes them so special. And lastly, for whatever reason, if recording video footage of your pit is just not going to happen at the moment or gets a bit too overwhelming. Don't despair. You can find a backup file in the resources section. I'll place a copy there of the file footings are used throughout the class of my dog Nelson. Once you've selected the footage you want to use for this project, It's time to send it to the laptop. In the next lesson, I'll show you how to import it into Photoshop. 4. Lesson 2: Re-Shuffle: Okay, so now we've got our footage when it, and download it to the laptop. In this lesson, I'll explain how to download your footage from your device, important as layers into Photoshop and edit those layers into a proof sheet of final poses for the animation. To download the video footage from your device. I recommend wireless sharing if available on your device. Alternatively, you can do a direct connection with the USB cable. Because I'm sharing from a mobile Apple device to Apple based laptop, I chose to use the wireless file-sharing option included in Apple's operating system. An important tip to remember when first sharing files with this option is to make sure you give both devices permission to share with each other. Once they can detect each other, the process is fairly simple. If you're sharing from or to non-Apple devices, you can find easy helpful links by doing a basic Internet search. If you get really stuck, then you may need to ask a tech savvy friend or a professional for some assistance. Once you've loaded your video file, checked the file information, and take note of the dimensions that the file is recorded at. You can see here that mine was recorded at 1920 by 1080 pixels. Once we were able to access the file on your laptop, it's time to open Photoshop and import the video footage. Once photoshop is open, you should see a screen like this. From here we select Create new, which should bring up a new document dialog box. Select the Film and Video tab from the top of this dialog box, and select the dimensions that max the file you're importing. You can leave all the other settings, default and select Create. It's important to note here you can choose smaller dimensions than your file size, but it's best practice not to choose larger than your file, as this will detract from the image quality of your video footage. Now that you have a new file open, move your cursor up to File and navigate down to import and select the video frames, two layers. Once you have selected to file, this will bring up the frames to layers dialog box. You can then choose either from beginning to end if you want to use all of the footage or selected range, if you have a particular part of the footage that has an action, you want to isolate it. The next input requires us to sit the frame linen, which specifies the number of frames to skip. This keeps the amount of layers down to a manageable quantity. If I lift this unchecked, my 12 second video at around 30 frames per second would make 360 layers, which is way too many for this project. So I'm going to specify every 10 frames, which will give me around 36 frames in total. Lastly, make sure make frame animation is checked and select. Okay. This demonstrates one of the key aspects of the animation process. It separates video footage, an individual frame. And animation is based on creating the illusion of movement through the adjustment of individual consecutive frames. Now that we've separated the individual frames from the footage into layers, it's time to choose what wants to keep their final or keyframes. Keeping in mind that we're going to handle each frame. So we want to reduce the number of frames. Ideally, we want our finished animation to have an old school style flip book look. So we'll need to get rid of any frame lines that are unnecessary will just repeat the same tones. Once you've done that, press play to check the look of the animation. If it looks good, then we can move on to the next step, organizing the layers into printable proof sheet that we'll use to trace their finished frame poses to organize the image layers into a photographic style proof, she takes several simple steps. First, we need to navigate up to file in the main menu bar, and down to export loans to files, and choose the destination where you want to save them. Then we need to rename the files so they're placed in the right order when we create the proof sheets. Next, locate the files in your file browser, select and rename using the format option. Then go back into Photoshop, backup to the main menu, and select File, Automate contact sheet to specify the dimensions of the documents you want to create. I would have printed a four. So I need to enter a four-dimensional choose three rows and two columns. This sits the number of images per page. Browse to select the files are just exported. Then select Create Contact Sheet. What I like to call photographic style proof should. This will take a little time to process. But in the end, you should have several individual page files containing your numbered image files, which we are going to print out and trace to create an individual frames. Now save each page as a file. Coming up in the next lesson, it's time to stop the printer with paper and compare to send files to be printed. 5. Lesson 3: Print, Trace, Scan: In this lesson, I'll be explaining how to print the image proof sheet k. Suppose for each frame of the gift and digitally scan your hand-drawn frames, ready for the next step of assembling your images into a GIF style animation. To print your proof sheet, open Photoshop and open h of the image proof sheet files that we saved in the previous lesson. For this project, we want the image to be high contrast because this is going to make it easier to see and trace the details of each pose. So for these images, I'm just going to do some general image adjustments using the adjustments available in the image menu. But the main toolbar, once you're happy with how the images look, send them to print the size specified in the previous lesson. In my case, it was a for working with one treat of printed images at a time. Place each sheet on a light box or backlit glass surface, such as a window and cover with a blank sheet of paper. Trace and fill the poses from the proof sheet using a black fine liner pen, including as much or as little detail as you like. It will also help if we number an outline each pose frame. Now we have our hand-drawn poses. We need to get them back into the computer. We can do this by either taking separate photos of each pose on your phone and downloading the files to your laptop or using a scanner. Scanner gives the better result. So I've chosen to demonstrate that method to scan them, placed the sheets with your hand-drawn images face down on the scanner. Close the lead and open your scanning software. Once the scanning software is open, draw a marquee box around the first pose. Scan and save as a separate file at around 300 dpi. Jpeg or PNG file type is fine. Just be sure to name each fall consecutively. Repeat this process for each pose and save ready to reassemble in Photoshop as a frame animation. In the next lesson, we'll go back into Photoshop and I'll show you how to import the files to create an animated GIF. 6. Lesson 4: Showtime: It's finally Showtime. In this lesson, we'll go back into Photoshop for the final part of the process, collating the individual hand-drawn poses that we scanned in the previous lesson to create our final GIF style animation. This will use many of the same commands that we use to import the original video footage, to import the new hand-drawn images of each pose, open Photoshop, and select Create New. This will bring up the new document dialog box. Select the Film and Video tab again from the top of the dialog box, and choose the same dimensions as when we imported the video footage before. Leave the other settings default and select Create. Move your cursor up to File and navigate, damped a script and select load files into stack. Choose browse, and navigate to the hand-drawn files. Select them and choose Open. Then before selecting okay. A handy tip is to make sure sought by filenames chipped. This makes sure your hand-drawn pose files are imported in the correct order. Then select Okay. And wait for Photoshop to bring all the files into the document. Kick that. You have the Timeline Menu open. If not, go up to window in the main menu bar and select timeline. Now we're ready to create a frame based animation with the first frame selected in the layers panel. Move the cursor down to the middle of the animation menu and click Create, Frame Animation. Then move your cursor to the right of the screen and click on the four lines to the side of the timeline window to access the timeline menu. From this menu, choose make frames from layers. All your images from the layers panel should now appear in the timeline. If you need to reverse the order, go back to the timeline menu and select reverse order. All we need to do now is check the timing to see if it needs adjusting. And then we're ready to export as a GIF file. Press Play and see how it runs. I'm thinking out to this or too fast. So I'm going to adjust the timing. This can be done at the bottom of each individual frame. When you're happy with how it runs. And it's time to export. To export your file as an animated GIF. Move your cursor up to file in the main menu bar and select Export. Move across and select Save for Web Legacy. This pop-up window can seem daunting at first. Most of it can be lifted. Default settings. Just go up to the top right-hand corner and check the GIF file type is selected 128, Good, That is fun. Now go down and select Save. Name your file and choose where to save it. Great work and congratulations for making it to the end. All that's left is to show your masterpiece in the project gallery. Let's go and celebrate. 7. Goodnight But Not Goodbye: Congratulations. You've made it to the end of your project and created your own hand-drawn animated GIF of your favorite fall a good companion. Are dreaming up. See what you came up with. Because for me, that's the base part of sharing methods and techniques, seeing what other people come up with. So now it's time to have your own red carpet moment and share your work in the project gallery. I'd like to take this opportunity to thank you for letting me be part of your creative journey. And say, good night, hopefully not. Good boy.