![]() EditingĪs with screen-capture software, tools for editing your footage abound. Make editing easier for yourself by knowing in advance what keystrokes you’ll make. Move the mouse in a direct path to its destination. When the cameras are rolling, be intentional with your actions. This approach removes a lot of the friction when you need to repeat a recording. Manual changes to a rendered web page can be time-consuming, but you can take advantage of augmented browsing tools like Greasemonkey or Tampermonkey to program DOM changes into a script. This type of DOM-hacking is possible with the help of the developer tools packaged with your browser. In our GIFs, we’ll often use live content and then modify it to refine things, simplify the color palette, or remove identifying information. For an animated GIF, this might mean seeding your app with content that reinforces the scenario you are demonstrating, but even random, realistic content is better than pasting in lorem ipsum text or names like “example for demo.” In filmmaking, this is called mise-en-scène, and it can refer to things like scenery and props. Taking time to dress your UI before recording can create a much more realistic backdrop for your animation. Capturing your project at its best, however, is less about the software recording your screen and more about presenting a rich and engaging user experience. Each has advantages in certain areas depending on the type of animation you need. ![]() We use a combination of commercial and open source software, including QuickTime Player, ScreenFlow, Kap, and LICEcap. There are lots of great tools for recording screen footage. Capturing the same footage multiple times will come in handy when editing everything, so it’s helpful to optimize for modularity and repeatability. When should the viewer see the entire screen? What action should they see up close? In addition to making your GIF more movie-like, it helps modularize your animation and prevents the stress of having to choreograph everything into one long take. Instead, challenge yourself to break the story for your animation apart into separate shots and plan out each one separately. ![]() Software demonstration and screencasting have a long history, so it’s easy to only think in terms of full-screen images and single shot animations. These differences can affect the content and overall flow of an animation, so it’s helpful to consider them up front.Īs you plan your animation, think of it in terms of telling a story about your software. For instance, GIFs on the GitHub blog will often have different dimensions and compression settings than GIFs for the same feature on Twitter. Different social media platforms have different constraints that you can use to your advantage, or at least be aware of, when creating your animation. A good first step is deciding where you want people to see it. If an animated GIF is the perfect fit, it’s time to start planning. Like so many other decisions in software development, it’s about choosing the right tool for the job. There are a handful of visual aids that can help you demonstrate your software, including annotated still images, diagrams, video walkthroughs, and yes, animated GIFs-each with its own benefits and drawbacks. Before jumping in and capturing any footage of your screen, taking the time to assess your needs can save you lots of heartache. Below you’ll find the processes and tools GitHub uses for many GIFs that appear on this blog and across social media.Ĭreating a high-quality animation takes significant time and energy. These animations can add polish and clarity to your documentation, capture the essence of a new feature, or even demonstrate how to use your software in a way that words aren’t best suited to articulate. There are many tools, tricks, and techniques that can help you produce high quality animations of your projects. They’ve evolved into an art form, a helpful way to express tone online, and, for the purposes of this post, a powerful tool for showing people the things your software can do in their hands.Īt GitHub, we get to create a lot of GIFs that showcase our work. These days, they are far more than just an efficient format for rendering rug-cutting infants or marking semi-permanent construction zones on webpages. Is it a GIF? Or is it, you know, a GIF? While there is no shortage of opinions on how to pronounce it, there is one simple truth most of us can agree on: These perpetually looping frames warm a special place in our collective hearts.įorged in Angelfire around the dawn of peanut-butter-jelly time and field-tested in various Geocities, animated GIFs continue to thrive across the internet.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |