What is a GIF?
GIF, which stands for Graphics Interchange Format, is an persona format developed by CompuServe in 1987. Due to wide support across browsers and electronic mail clients, GIFs have been a popular image format since the early days of the internet.
More importantly, though, GIFs can be animated. exchangeable to how a flipbook works, GIFs quickly display a series of images to produce the illusion of motion. In the internet ’ s early years, GIFs ( and the pavilion and blink tags ) were the primary method acting of adding movement to a web foliate. A lot has changed since the 1990s. Animated GIFs are enjoying a renaissance both on the web and in electronic mail market. While there is distillery some consider as to how you actually pronounce “ GIF, ” most will agree that GIFs can be an excellent commercialize tool .
The benefits of animated GIFs in email
Whether you prefer a difficult “ G ” or like to rhyme GIF with a sealed mark of peanut butter, let ’ s front at why GIFs are indeed useful in emails .
Grab your subscribers’ attention
Adding gesture to your electronic mail with a GIF is a great way to grab your subscribers ’ attention, point them toward an action you want them to take, or keep them scrolling to make certain they get your hale message. Google uses a cute GIF to celebrate their subscribers. Grammarly uses a subtle liveliness to draw even more attention to their offer. Xfinity places their GIF foster down in the electronic mail to draw their subscribers in and encourage them to scroll . We used a fake video GIF to draw attention to our television and get subscribers concerned in clicking to see more .
Show off your products and services
You know your intersection is capital. Make indisputable your subscribers know it, besides. There ’ s nothing like an enliven GIF to show off how your merchandise or service works. ILIA Beauty showcases their merchandise in action with real people. Webflow shows their merchandise in military action so subscribers know what to expect . Magic Spoon shows off their different flavors and amazing package design .
Simplify a complex idea
If a picture is worth a thousand words, then an enliven picture is probably worth even more. Use an inspire GIF to illustrate a complex idea or show your subscribers that things are flush easier than they think. Baggu took simpleton clean directions to the future level by animating them. By making four different animations, the subscribers have to scroll to see the whole history . Finding your calm sounds simple. But over the past year, we ’ ve all realized how difficult it can be. Headspace shows you how to find your calm with a GIF better than anyone could explain with words .
Tease something new or coming soon
Do you have some new content or product you ’ re about to release ? Have a great offer coming out soon ? Use an enliven GIF to create awareness or sake in your product—and have subscribers looking out for your following electronic mail. Apple teases an extend Black Friday sale and urges subscribers to “ save the dates ” for shopping indeed they don ’ thymine miss out on deals . Linus ’ electric bicycle is barely hinted at in the shadows in this e-mail. Subscribers will have to click through to see the actual product . tinker teases both a Black Friday sale vitamin a well as a limited edition watch with this animize GIF to keep subscribers looking out for the future e-mail with more information .
The downsides of animated GIFs
a fantastic as animate GIFs are, they aren ’ thyroxine without their faults .
Lack of accessibility
Animated GIFs can pose a problem in terms of approachability for a kind of reasons. capacity flashing rates between 2 Hz and 55 Hz can harm users with light-sensitive epilepsy. In addition, users who are visually impaired may have trouble read or reviewing content on a GIF before the vivification changes. so, ensure your enliven GIFs either have smooth transitions or don ’ thyroxine enliven from one frame to the future at a high pace. And, since GIFs are prototype files, you should constantly include appropriate alternative textbook for users who rely on assistive engineering like screen readers. Images are inherently inaccessible for a fortune of people, therefore providing copy and context allows them to understand your message more distinctly .
|Create accessible, inclusive emails for all your subscribers Get the insights and bit-by-bit advice you need to write, design, and code emails that can be enjoyed by anyone—regardless of their ability. Learn how →|
Poor background transparency
If you need to bring more color or some background transparency to your animated content, then an animated GIF may not be the way to go. GIFs are not elegant when it comes to transparent backgrounds. But fear not, you can bring an animize alternative to email in the form of an animize PNG ( APNG ). Be sure to take note of the same compressions tips and tricks we contribution future since APNGs besides like to pile on the kilobytes ( KB ). And if you ’ ra looking for so far another alternate to animated GIFs, you might want to explore CSS animations .
How to make an animated GIF for email
GIF creation can be done a number of ways. You can use on-line makers that allow you to animate a choice of photos or turn a video into an animize GIF. Or you can use software such as Adobe Photoshop or Adobe Animate to make customs designs move. My prefer way of creating animated GIFs is to work within Adobe Animate. This is born out of years of working in Flash back in the day. As Flash got retired, Adobe Animate took over, retaining some of Flash ’ s features while bringing in more output options such as HTML5, television, and animated GIF. so I ’ ll prima donna into how to make an inspire GIF in Adobe Animate .
Creating with Adobe Animate
Step 1: Create a new file and input dimensions
To make a GIF in Adobe Animate, first gear create a fresh file and input the dimensions you would like this to be. Pro tip : Create your vivification at twice the size for retina display, barely as you might for inactive imagination .
Step 2: Import the graphics to be animated
You can design your animation directly onto the canvas, using the software ’ second shape and draw tools, creating a layer for each element. If you created the design for your animation in Adobe Illustrator, you can plainly copy and paste your vector graphics onto your canvas. differently, you can import graphics into Adobe Animate by going to file > significance > spell to stage. Or if you ’ re importing a graphic that will be reused multiple times, you can “ meaning to library. ”
Step 3: Create your animation
now you can use the timeline to create your animation. There are a distribute of possibilities with software like this, and it would be difficult to touch on all of these in a one web log post. however, there ’ s a wealth of resources out there with many helpful guides on YouTube, in Adobe ’ s on-line tutorials, and within the software itself. I would recommend paying particular attention to content around symbols, tweening, and ease. With these three functions alone, you can create highly engaging vivification that helps grab attention, push your message, and delight your consultation. All while bringing buckets of stigmatize personality to your emails .
A symbol is a graphic, release, or movie snip that you create once and then re-use by selecting it from the library. once you ’ ve created a symbol, you can re-use it within your animation—this is called an case. If you were to edit your symbol, such as change the color, that change would be made across all instances ( exchangeable to email partials ). But if you were to edit an exemplify, your change would alone apply to that one example. For animated GIFs, I suggest only converting your plan elements to graphic symbols. Both movie clips and buttons have their own timeline attached to them, so you can animate them independently of the independent timeline. however, as any animations created outside of the main timeline aren ’ t honored when you export your animation as a GIF, it makes sense to stick with graphic symbols which lone animate on the main timeline .
Tweening is how you animate from one state to another. You can use either supreme headquarters allied powers europe, motion, or classical tweens. A shape tween can lone be used with shapes or elements that you ’ ve draw on to either the canvass or vectors imported using AI importer preferences ( preferably than as a bitmap ). This is because a human body tween enables you to alter the form of an object. For model : You could add a circle to one keyframe on your timeline, add a squarely on another, then morph your circle into your square with the determine tween. Motion tweens are used to create animation movements by specifying different values between the first and the last frames. With this kind of tween, you can alter an aim ’ second properties—including position, size, color, effects, filters, and rotation .
Classic tween is very alike to apparent motion tweening. It was carried over from Flash and is retained within Animate as an extra option. This is my favored way to apply motion tweening, as easing techniques ( discussed below ) are a little more square to apply .
ease goes hand in hand with tweening. If moving an aim from one position to another using the timeline is the cake, then easing is the frost ! Using Animate ’ s still functionality, you can make the tween accelerate or decelerate at the begin or goal. Or add a short bounce when the tween completes. This very helps bring some personality to your liveliness. The relief applied to this tween starts the animation promptly and slows at the end. here I have applied a bounce-in rest to my tween. For information on how to apply easing check out this television on YouTube .
Step 4: Export your animated GIF
Saving your animation out of Adobe Animate as a GIF is courteous and simple. just head to File > Export > Export Animated GIF .
Keeping your file size down
careless of how you create your animate GIF—either with Adobe Animate or something else— keeping your file size down is crucial for e-mail. There are a few things deserving considering to help you keep your animations a light as potential .
Tools like Animate and Photoshop have limited compaction options for GIFs ; it ’ second much better to use external software rather for compaction. I recommend ImageOptim, which is free to download, or EZgif, a spare on-line GIF optimizing cock, to get your file size down to its optimum weight. personally, I like to keep mine below 1 megabyte ( MB ), but the optimum charge size will vary and depends on electronic mail load prison term which we discuss late in this web log station .
Including photography or gradients in your animation adds weight due to the amount of colors and shades these contain. A GIF can merely contain 256 colors—compared to a JPEG which can include upwards of 16 million —which much results in the quality taking a strike. So keeping things simple is key .
The shorter the animation, the better. Each frame your liveliness contains adds weight to the GIF. Since an animation should truly be about complimenting your copy, it makes sense to limit how long your vivification plays and encourage readers to move down the e-mail.
Read more: Wollongong – Wikipedia
If you find that your GIF is carrying a little excessively much system of weights after saving and compressing, you can remove frames using Photoshop or EZgif .
Proofing your animated GIF
now that you ’ ve completed your GIF, you may want to get feedback or blessing before placing it within your electronic mail. With a real-time collaboration tool like Litmus Proof, you can centralize everyone ’ sulfur comments and approvals .
Implementing animated GIFs in email
once you have your GIF ready to go, you can include it in your e-mail much the same way you would add any other double file :