Generate A Comp Of Thumbnail Stills From Your Animation


When it comes to video games, it's a common technique to store all the frames of an animation in one image and shift the UV coordinates instead of having to load a bunch of images, which is heavier on the graphics card/processor. Knowing this, I thought, "What if you made an animation and wanted to show it to someone who wouldn't take the time to look at an entire video... but would be willing to have a glance at one single picture which contains poses?"

So I've put together a few fairly simple expressions and made them a little more complex by adding sliders for parameters such as: X-repeat, custom width and height and skip frames (displays every other, every 3rd etc. frame). This tutorial contains a lot of stuff the fresh and eager expression writer needs to practice. Lets jump in!


Download Tutorial .mp4

File size: 124.1 MB

Related Posts
  • Computer Skills
    How to Add Videos to Your PowerPoint PresentationsPowerpoint and video
    Videos are a tad harder to add to your PowerPoint presentations than it'd seem at first glance. In this detailed tutorial, you'll learn step-by-step how to add local and online videos to your presentations, and get them to play back the way you want.Read More…
  • Code
    JavaScript & AJAX
    Using CreateJS - EaselJSCreatejs retina preview
    In this tutorial we will be exploring the CreateJS suite of libraries. CreateJS is suite of JavaScript libraries and tools for building rich, interactive experiences with HTML5. The CreateJS suite is divided into four libraries.Read More…
  • Code
    JavaScript & AJAX
    JavaScript Animation That Works (Part 1 of 4)Spriting icon large
    HTML is the language that the web is built in and it's kind of a strange beast. Although it was originally intended as a way to easily share academic information across the Internet, it has been slowly transformed to accommodate the media-rich environment we know and love. Because of the haphazard nature of HTML (and JavaScript, the programming language that manipulates elements in HTML and makes them interactive), sometimes we have to think outside the box a bit. In this tutorial series, I will show you how to do cross-browser animation using a method called spriting. And, because this is a learning opportunity, we will be doing it all without any external libraries (like jQuery).Read More…
  • Design & Illustration
    Tools & Tips
    10 Ways to Optimize an Animated GIF FileTop10 gif preview retina
    GIF is the standard format for compressing images with large areas of solid colors and crisp details like those in line art, logos, or type. Being an 8 bit-depth image format it would have disappeared from the web after the introduction of the JPEG and PNG file formats, but GIF is still a favored web file format thanks to its frame animation feature. In this tutorial, we will have a close look at all the available options to convert a video to a GIF animation, and how to optimize its file size. Let's get started!Read More…
  • Photography
    How to Shoot Images for a Stop Motion Animated GIFBatchsequence preview retina
    GIFs have a bit of a low brow reputation from being deployed on silly websites in the 90s, but they can be used for more sophisticated purposes. Our GIF will show the unwrapping of a gift, and could be used in an online ad. After I show you how to set up the shoot and capture the necessary images, one of our resident Photoshop experts will teach you the process of animating the image sequence into a GIF.Read More…
  • Game Development
    An Introduction to Spritesheet AnimationKandi preview 400px
    Spritesheets have been used in games for a long time. Classic games such as Legend of Zelda: A Link to the Past and even modern games like Cut the Rope have used them. In this article, we'll talk about what spritesheet animation is and how to code it, and we'll also demonstrate how they can be used in a small game. I'll be using JavaScript for the code, but you should be able to follow along in any language.Read More…