Adding Life to Your Brand with Cinemagraphs and GIFs
In a digital, visual world, adding interest to your designs is critical. Cinemagraphs and GIFs are perfect for designers to add life and movement to a brand, to a social media post, or to a website as hero images, not to mention they’re a fun way for brands to relate to their audiences.
Unlike SVG animation, which requires coding and is not always easily integrated into every platform, GIFs and cinemagraphs are compressed files that present themselves in a small repeated motion sequence. This compression makes the files easily sharable, loop continuously, and it doesn’t require you to “press play” to begin the animation.
Don’t let Cinemagraphs and GIFs intimidate you. With a few easy steps and hints from designer Hayden Davis and cinemagraph co-creator Kevin Burg, you’ll find they are not only fun to create but also an extremely valuable tool for adding dimension to your work. Used as a website hero image or background, you can add eye-catching animation to an otherwise static experience.
Incorporating GIFs Into Your Work
Multimedia artist and designer Hayden Davis uses GIFs to easily add subtle motion to his work. “Making an image into a GIF can give it a touch of motion without making a completely separate video file that would take forever to load,” he says. “I think adding just a small movement makes things more realistic, and adds a hint of whimsy. A small addition can bring typography to life or highlight accents.”
Davis particularly likes incorporating GIFs to bring his typography and illustrations to life. He will often create three similar versions of something, then morph it into a GIF to add a quirky touch.
Hayden is currently the designer at Tattly Temporary Tattoos, where he works on a small creative team to create GIFs that help their brand not only sell their quality product, but also entertain and awe their viewers. “We have noticed the power of a GIF not only in the way it delights and inspires, but in its ability to tell a story,” Davis says. “It is quite literally eight images compounded into one experience, that in itself makes it eight times more interesting than a static image.”
It is this power of storytelling and unassuming movement that make GIFs ideal for website hero images and backgrounds. “The subtle animation of GIFs can convert a striking image into a charming encounter which will help viewers understand the brand experience,” says Davis. “Also, let us not forget the appeal of a tease. A GIF is the perfect way to show that there is much more to be seen. A small tease of something good to come can be a large draw to website visitors.”
Hayden’s number one rule for creating GIFs is that the GIF should be something that looks natural in a loop. “Make edges meet back up and work to make things that come back around and connect in a circle,” he says. Then focus on the details. Even adding slight movement to some type or adding shine to something will bring dimension and interest to a design. To make your movement feel authentic and add a touch of reality, Davis says, “Timing is essential. Make an effort to ensure each motion is correctly paced.”
This can be done with great precision in Adobe Photoshop. “I create an image for each step of the sequence. Often drawing versions of the same image to add variety,” Davis says. “I prefer using the timeline to cut and hide each layer for pacing.”
Use this method with a step-by-step tutorial for creating GIFs here.
The Art of Cinemagraphs
Although they are similar to GIFs, cinemagraphs take the concept to another level. In 2010, Kevin Burg and his partner Jamie Beck saw the resurgence of the GIF as an opportunity. “The cinemagraph came from experimentation combined with a desire to tell a story in a single frame,” Burg says. “To pack more motion into a single image, you can freeze certain areas and only show motion where it’s important. Once the medium began to take shape we were discovering new things every day, and it felt like everything on Earth could be seen in a totally new way.”
From its humble beginnings as a 512k GIF on Tumblr, the cinemagraph has now infiltrated social media, website design, and even large scale interactive digital billboards in 4K. “One of the first responses we ever heard after publishing a cinemagraph was ‘I can’t stop staring.’” Kevin says. “We knew it had great potential in advertising or anywhere you want to capture people’s eyeballs.”
This advertising potential has made the cinemagraph ideal for website hero images. In fact, the first commercial application of the cinemagraph was as a website hero image in 2011. Burg says, “The cinemagraphs work well as a hero image or background because the motion is eye-catching when the image is displayed large. The way we detect motion is heightened when we see a small amount of movement within a larger, still space — so as a viewer, this grabs your attention. As a designer, you can know exactly where someone will be looking when they see the cinemagraph. And if it’s done well, they’ll be looking for a lot longer than if it were a still photo.”
Cinemagraphs can seem daunting if you’ve never designed one before, but Kevin Burg has a list of practices to help create a successful cinemagraph with ease:
1. Use motion wisely. We try to make the moving part of a cinemagraph also be the center of interest, but if not, it should lend something meaningful to the frame.
2. Lock down your camera. A tripod will make your life 10x easier in the editing phase.
3. Think in terms of traditional photography. A cinemagraph feels special when it’s conceptually a photo that adds motion rather than a video.
4. Pay attention to file compression. Whether your final file is a GIF or mp4, it’s best to reduce dithering on a GIF and minimize compression artifacts in the mp4 so your cinemagraph reads as close to a still image as possible. Some video encoders like Handbrake have a tuning setting for “still image,” which reduces that ugly blocking look you see on compressed videos.
If your final output is GIF you can plan ahead by limiting the color palette in your image. The GIF will look better if the 256 colors are used to define only a handful of colors ranges. (To get an extreme idea of this see how low you can get the color count in a greyscale GIF and still keep it looking good.)
5. Find natural loops. Cinemagraphs are the most pleasing when the loop is something that naturally loops in real life rather than a looping action that is performed just for the cinemagraph.
6. Beware the “uncanny valley.” Cinemagraphs with people can get real creepy, real fast. For example: In a photograph ,we don’t expect the person to blink, but in a cinemagraph if they’re moving elsewhere and looking at you with an unblinking eye it can be disturbing. I always shoot many alternate takes when the motion involves a person just in case.
Kevin uses Adobe After Effects to create his cinemagraphs. Since cinemagraphs are essentially the intersection of photo and video, he thinks of After Effects as Photoshop with a timeline, which makes it perfect for cinemagraphs. He then exports it as an uncompressed .mov file so a final GIF or mp4 from Photoshop will be as clean as possible.
You can also create cinemagraphs in Photoshop. This 5-step tutorial can help you create a concept and test it out using Photoshop, your image, and stock footage.
With a few extra steps in Photoshop and After Effects, GIFs, and cinemagraphs can breathe new life and refreshing ideas into your designs making them an ideal way to add life to your brand.