- General Best Practices
While GIF images used to have a bad reputation for their bright, flashy nature that cluttered websites , they've made quite the comeback over the past couple of years thanks to sites like Buzzfeed, Tumblr, and Mashable, who used them to bring personality into their posts, accidentally creating an Internet craze.
GIF images by definition are simply compressed static or moving images — yet they hold the potential to convey reactions, illustrate a concept, and turn a normally-boring static image into something with so much more personality.
It's why I love using them in emails. And on our website. And in PowerPoints.
And basically anywhere I can slip them in. (Like right now?!)
For schools, GIFs are great for your blogs, emails, news announcements, PagePops, and tweets.
And the best part is that you can create them in under 10 minutes. All you need is a camera — either a professional grade one or your smartphone or tablet — and Adobe Photoshop.
Here is your step-by-step guide:
The Ultimate Guide to Better Email Marketing
Step 1: Take your video.
Keep the video itself under 10 seconds. If you have multiple takes, be sure they are each a different file. You won't want to work with large video files in Photoshop, as it bogs down your computer speed.
If your video is longer than 10 seconds (like this one is), you can edit it as you bring it into Photoshop, or in a video editing software of your choice.
Step 2: Import your video to Photoshop.
Once you've imported your video files to your laptop, go through them one-by-one and decide which video clip you'd like to use for your GIF.
Once you know which video you plan on using, in your Photoshop menu, go to File > Import > Video Frames to Layers. This option will bring in each frame of your video as a separate layer.
Upon importing, you have the option to bring in your entire video clip, or select a range. If your video has extra footage at the beginning and end you don't want in your GIF image, drag the keyframe markers to where you want your import to begin and end.
Be sure the "Make Frame Animation" box is checked.
If your video is longer than 10 seconds, I highly recommend limiting your import to every 2 frames. This decreases the file size, but won't impact how your GIF animates.
Step 3: Editing Your GIF
Once in Photoshop, you can continue to edit your GIF — but keep in mind, each frame is a separate layer. To edit your GIF, you will need to open up the Timeline, by going to Window > Timeline in your Photoshop menu.
Here, you will see all your layers in a row that together make your moving image. The Timeline has two display options. Toggle the "Timeline View" option in the bottom left corner to bring your Timeline to the vertical layout as displayed here:
Take note: a 3-second video will render about 60 layers. If you imported parts of your video clip you no longer wish to use, simply select the clips in the timeline, and click the trashcan to delete them.
You can also decide whether you want your GIF to play once, or loop forever (the most common). Simply select "Forever" from the dropdown menu in the bottom left corner.
Step 4: Exporting your GIF
Once you have your GIF ready, it's time to export. If you're using Photoshop Creative Cloud, you'll need to go to File > Export > Save for Web (Legacy). All other Photoshop versions, you will need to go to File > Save for Web.
Once in the "Save for Web" window, it's important to optimize your GIF image to render the best possible quality. "No Dither" and 256 colors will render the best quality, but also the largest file. Because GIFs are most commonly used in email and social media, keep the mobile user in mind and strive for GIF images under 1mb.
The settings for the best possible export include:
- Image kind: GIF
- No Dither
- Colors: 256
- Image Size: 600px or less
- Looping options: Forever
To play around with file size, you can also adjust the "Web Snap" and "Lossy" options to decrease file size and quality. In this situation, play around with the setting that work best for your purpose — every time you export it may be slightly different depending on the quality and length of the GIF.
For a simpler comparison, I like to use the "4-Up" display to see how my GIF would look if I changed these settings.
Step 5: Use your GIF in your Marketing
A winning goal, fans cheering, students learning, and faculty teaching — they all have the opportunity to be a fun GIF used in your marketing. Grab 3-10 second clips that would convey emotion better as a GIF then a still image. And remember to always have fun with it! We certainly do here at HQ.
Remember: if everything is bold, nothing is bold. Use GIFs to make a statement. If you start using them all the time, they won't have the same impact. Imagine the potential of fans cheering at game, the winning goal, or a personable faculty member being brought to life with a GIF image, rather than a static image.
Email headers, blog posts, and tweets are my favorite places to use them. I wouldn't recommend using them on your website, unless it is meant to draw attention to an event — like we do for FinalsiteU.
Want to learn more awesome ways to use Photoshop to improve your school's marketing?
Join me for a hands-on Photoshop session at 3:15 on Monday and Senior Brand Manager Nicole Montano on Wednesday during this year's FinalsiteU!
ABOUT THE AUTHOR
As Finalsite's Content Marketing Manager, Mia plans and executes a variety of inbound marketing and digital content strategies. As a former TV and news reporter, freelance cinematographer and certified inbound marketer, Mia specializes in helping schools find new ways to share their stories online through web design, social media, copywriting, photography and videography. She is the author of numerous blogs, and Finalsite's popular eBook, The Website Redesign Playbook.
- Email Marketing