Compressing .GIFS Like A Boss

1. What Makes A Great GIF?: Hey, I'm Jake Bartlett and this is compressing GIFS like a boss. In this quick class, I'm going to show you my top three ways of compressing GIFS to share on the internet. Part one, GIF or JIF. Let's just get this out of the way. The inventor of the GIF says JIF. The majority of the planet says GIF. I'm included in the GIF camp so that's how I'm going to pronounce it. Part two, what works best? GIFS definitely have a very specific use. To know when to use a GIF over a video. Just remember the three S's; short, simple and small. GIFS need to be short and the longer they are, the larger the file size. The GIFS should be simple. A lot of GIFS work as a loops. If you're rendering a bunch of super-complicated 3D graphics or you're incorporating photos or videos into your work, a GIF is most likely not going to be your best bet because it's going to compress your images so much that your hard work isn't going look that great. Simple animations, with clean vector art, work great for GIFS. Having a smaller color palette really helps keep the file size down. That's not to say you can't have a lot of colors and add things like textures and shading, but the simpler it is, the better your GIF is going to look in the end. Small, there are two main goals when compressing a GIF. Keeping the file size small and the quality high. Keeping your export resolution small will help both of those goals. Most of my GIFS end up on dribble and dribble only accepts two resolutions, 400 by 300 and 800 by 600 so generally I don't export a GIF any higher than 800 by 600. If you want to compress specifically for Skillshare, the width of a project item is 580 pixels. Now, those are all export resolutions. I recommend that you work at a higher resolution like 1920 by 1080 or 1440 by 1080 for 4 by 3. Part three, compress like a boss. 2. Method 1: Gifgun: There are three methods I recommend for compressing GIFs, and each has their own advantage and disadvantage. Method one, GIF Gun. GIF gun is by far the simplest method for compressing GIFs from After Effects. It is $30. But I can guarantee that if exploiting gifts from after effects is something you do regularly, it's the best $30 you can spend. Over here in After Effects I have a bunch of my patterns from my title graphic all set up ready to compress. This comp is 1920 by 1080 at 24 frames per second. I'm going to come up to window and go down to GIF Gun, and you can see it's this tiny little panel, just two buttons, and I could even dock this into my panels over here, so that I always have access to it, and the two buttons are make GIF and settings. The way that it works is that just like rendering a video out of After Effects, it's set up to render whatever your work area is set to. Each one of these layers is already trimmed to be a seamless loop. If I go to the first frame and set my ink by pressing B on the keyboard, press O to jump to the up of that layer and press N to set my array point. I'll press 0 on the number pad to render, and you see that it's seamless loop. Since I know this is set up correctly, I can then set up my export. Now if I were to click make GIF now, it will compress the GIF at the resolution of my comp, which is full ten ADP, and like we already discussed, that's much higher than I want it to be. I'll go into my settings and I have a few options. The first is to choose where I wanted to export. I've just change it to be on the desktop. Then we have the option to resize the width and it will proportionately scale the height. I don't want it to be 1920 wide. I'll click the resize to width check mark and 800 pixels is how we'd like that exported. The next option is to choose the maximum number of colors, and as you can see on the tool tip right here, more colors means larger GIFs, and by larger they mean the file size. If I click this drop down, you see that we have a few preset options. Now this particular animation only has three colors. Really I can knock this maximum colors down to eight and it'll probably look just fine. But generally, I'll leave this at 128 and it's just fine. If the quality is not high enough at that point, I'll bump it up to 256, we can control the frame rate. Right now it's set to be the comps frame rate, so 24 frames per second, but I can drop this to 12 if I want to cut the number of frames and half to save on file size. I'm going to leave that for now because I want it to be the full frame rate, and then finally, we have the option to save a video copy. Which I don't need to do, and the last option is to make sure that your GIF loops. I want mine the loop, I'll leave that checked and click Done. Then it's as simple as clicking, make GIF. After Effects exports a video. GIF Gun gives me a little status. It tells me that the GIF is compressing and automatically opens up the file where you're export the GIF on my desktop, and sure enough, there's my looping GIF. Now, if you're looking at this video in full screen, you can probably tell that the edges of my artwork look really crunchy. That's because I limited my color pattern to eight colors. You would think that because my artwork only has three colors, eight would be more than enough. But if I zoom in here really close at the edges of these two colors, you can see that it's not just this purple and this red. There's what's called anti-aliasing that's happening between the two graphics to make the edges smoother, and the same thing is true for the yellow and the purple. If I zoom back out to fit, I'm going to go into my settings, change the maximum colors up to 128 just to make sure that super smooth click Done and then make GIF again, and here we go. We have our second GIF, preview that. You can see that it is much cleaner than this. This is our original, which is limited to eight colors, and this is our second compression with a 128. Now the file size difference is pretty significant. The first is only 388 kilobytes, and the second is one megabyte. My goal is to usually keep my GIFs around two megabytes or less, because skill share limits your file size upload to two megabytes. Now if keeping my gift to two megabytes or under is really lowering the quality, then I'll definitely increase the file size and then just handle posting the GIF a different way, but we'll get to that later. For now, I'm perfectly happy with that GIF, and that is by far the simplest way to export a GIF from After Effects. As I'm recording this class, GIF Gun is a very new plug-in and they're still working on developing more features. It could be an even more valuable purchase in the future. 3. Method 2: Photoshop: The second method for compressing GIFs is using Photoshop. If you have after-effects, chances are you have Photoshop to. How do we get from after-effects to Photoshop? Well, let me jump over to my second GIF. I'll set the work area and I'm going to export this as a video file. We'll go up the Composition, Add to Render Queue and your output modules likely set to lossless, and that's fine. I don't really want to compress it from after-effects to Photoshop. Then I'll just tell it to go on my desktop and click Render. Then I'll come over to Photoshop, go to File, open, go to my desktop, and right here's my QuickTime file. I'll just double-click on it. Photoshop will process, read the video format, which might take a little bit of time depending on how big your file is, and there we have it. I can play this back inside Photoshop. It might not playback in real-time at first, but it at least lets me see that the animation is working. Now, if Photoshop isn't letting you open up the QuickTime file directly, then you need to come up to File, Import, Video Frames to Layers. Then select your video, leave the range set From Beginning To End and have Make Frame Animation checked and click OK. That'll bring up a little different looking timeline, but it basically works the same way. I'm going to close this one out and come back to here. The next step is go up to File, Export, Save for Web (Legacy). Now, I'm using Photoshop CC 2015. Any previous versions would have safer web listed rate up here by Save and Save As. Go on to Save for Web. That opens up this dialogue which allows us to compress for web. First thing I'll do is come up to the Preset, click on the dropdown, and come up to GIF 128 Dithered. Now, this is just a preset and we have lots and lots of controls for how this GIF is going to export. First thing I want to do is resize the image. It's still set to 1920 by 1080. I'm going to double-click on the width and type in 800, and that'll take a second to resize. Now, we're getting a live preview of what our GIF is going to look like once it's compressed. Down here in the bottom left corner, you can see that it's telling us the resulting GIF will be 1.1 megabytes. That's perfectly acceptable. One of the nice things that Photoshop lets you see is what colors it's using to compress your GIF. Just like using GIF gun, I can increase or decrease the number of colors used. If I drop this down to 8, you can see that we've got these crunchy edges again. If I actually type in 3, since there are only three, we actually lose that paint color. If I increase it to 4, it would probably bring that back because one of the colors is actually transparency. But that's probably way more technical than you even need to worry about. My rule of thumb is 128 colors, and if that doesn't look good enough, pump it up to 256. That didn't even increased the file size all that much, but 128 is just fine. Since it's a smaller file size, I'm going to go ahead and leave it there. Since I'm happy with the way this looks, the last thing I need to do is change my Looping Options from Once to Forever. Sometimes, Photoshop likes to change this back to Once if you've set it and then come back up and change your Compression settings, I have no idea why. Sometimes, it just does. The last thing I always do before I hit Save is make sure that my Looping is set to Forever. Then I'll click Save, put it on my desktop, call it Photoshop so we can keep these organized. There we have it, it exported it. If I go to my desktop, here it is, Photoshop preview. We've got a looping GIF. Here's the title graphic to my Rock out with character animation course. As you can see, I've got a textured Vignette around the corners, there's shading on the text, and it's quite a bit longer than the looping patterns I've already had. Now, this grainy texture that I added is a design choice, but it's also something that helps with compressing GIFs. If I were to open up this video without the noise in the background, and try to compress this as a GIF, because my color palette is limited to a 128, we get all this ugly banding that happens because of the compression. Without the compression, there are so many different shades of this orange color going to be yellow. But because a GIF is such a highly compressed format, it's super noticeable. Now, I could increase the colors to try and fix that. But even at the max of 256, it still doesn't look very good. I could try turning up my dither all the way and that smooth it out a little bit more. But you can still clearly see that banding. That's where this grainy texture comes in handy. If I turn that back on, the banding has completely disappeared, even at 128 colors. That grain allows Photoshop to generate this gradient in a way that eliminates all the banding. Now, if I go forward toward the text comes in, you see that the shading isn't showing up on that. If we look at our color table, there's really only two different shades of red, and that's why we've lost all that. I'm still going to increase this to 256 colors, and there you go. Now, the shading shows back up because we have many more shades of red. Now, our file size is 2.7 megabytes, it's too big for skill share. But maybe if I change the width down to 580, that'll help compress the image even more. Perfect, that dropped down to 1.4 megabytes and equality looks great. Now that everything is set, my Looping is set to Forever. I can click Save, choose a desktop. I'll call this Rock Out Title Photoshop. I can go to my desktop. Here it is. Great. That's how you use Photoshop to compress GIFs. 4. Method 3: Giphy.com: The last method is using an online website to convert your video to a GIF for you. Now there are lots of websites that you can do this with. The one I'm going to show you is called Giphy. But in this case, I guess it would make more sense if you pronounced it Giphy. Back in after effects, I'm going to export this as a video file, but this time I'm going to compress it so that my upload doesn't take a lot of time. I'm going to go to Composition, Add to Render Queue, and instead of ProRes, I'm going to make sure that my format set to QuickTime, change my format options. Change the video codec to H.264. Quality set to 100. I'm going to limit my data rate to 15,000 kilobits per second click "Okay", everything else is set. I'll click "Okay". Make sure this is exporting to my desktop. I'll name it, pattern upload, and then "Render". Then I'll come over to Giphy dot-com. Right up at the top, I'll click on the "Upload" button, click on "Browse". Pattern upload is my QuickTime file. I'll preview it, you can see that it's full quality. Click on "Open". If you plan on sharing your animation on Giphy, you have options to add tags to make it searchable. I don't need to do that, so I'll click on "Upload GIFs", and that'll take a minute to upload that file. Once that's finished, it'll automatically open up your animation. As you can see, the quality is not that great. Unfortunately, there's no real way to control the quality of your upload to websites like Giphy or Imager. If I scroll down, it gives us Embed code, which is great. We can open up more options and there's all kinds of sharing settings. But if I go into advanced, we have a Giphy link which will go straight to this page, or if you want a direct URL to this animation, that's what the GIF download link is for. So, if I copy this and paste it into a new tab, you see that links directly to it. Now this might be perfectly acceptable for what you need, but I can definitely tell the quality is lower, and it looks like it even dropped my frame rate. Now, like I said, uploading to a website like Giphy, you have no control over those settings, but it is fast and it automatically host your image, so it's not an option that you should rule out. 5. Posting a GIF to Skillshare: So those are my top three ways of compressing GIFs for the web. Once you have your GIF, you can create a class project and share it to the class project page. When you actually go to upload your project to Skillshare, make sure you don't upload it as your cover photo. This is just to generate a thumbnail on the class project page and to basically have a header for your class project. Now, Skillshare says that GIF is an acceptable format, and it is, but it will not animate. Instead, come down to your project workspace, click on upload photo, choose your GIF, as long as it's under two megabytes, you can upload it, and that will upload the image directly in your project workspace. There it is. Now, I still have my link copied from my Jiffy upload, say that that GIF was too large to upload directly to Skillshare. Well, then I would click on the Image button, paste that URL into the source, and click Okay. That automatically displays the image from the URL that hosted on Jiffy. So that's how you post a GIF that's too large to be on Skillshare, and that's all there is to compressing GIFS like a boss. I hope you enjoyed this quick class. I would love it if you left me a review. Make some awesome animations, compress those GIFs and upload them to your project page, tag me on social media @jakeinmotion , if you share any of your work. As always, ask any questions you have in the ask me anything discussion on the Community page. Thanks again, and I'll see you next time.