I recently decided I wanted to do something I’d seen a few months back: make an animated Google+ cover photo. I created one I really like (pictured), and thought I’d share my methods with all of you.
Some Ground Rules
The person who’s demo video I watched initially to get some insight on this, did it wrong. Her animated GIF file was 5-6MB, depending on what screen resolution you were viewing it at (Google+ loads alternate versions based on browser width, etc). That’s waaaaay too large for the web, and can take several seconds on a really fast internet connection, and 3-5 minutes on 3G mobile internet. Additionally it had way too much information and “prettiness” in it, making it hard to discern it’s purpose or the information it was intended to convey. So here’s the keys to doing it right:
- Keep the message simple.
- Keep the information presented to a minimum.
- The resulting GIF file needs to be under 250k, preferably under 100k.
- Use as few colors as possible.
- Use as few frames as possible.
Keep the Message Simple & Info to a Minimum
First you need to decide what you want in it. You need a few simple items you want to promote. Don’t make it complicated or crowded. Why? Well for one, to keep the GIF file small; but also to make it easy for the visitor to get the message you want to send. If it’s crowded and has too much info, well, they can get that from your G+ bio. In all reality if it’s complicated, they probably won’t pay much attention and it’ll do you no good.
Few Colors + Few Frames = Small File Size
Luckily for us, clean, flat design is “in” right now. So it’s not only prudent to make it simple and clean, with few colors; it’s also cool. The way GIF file format works, the fewer colors you have, the smaller each frame will be. Each frame is essentially a separate image, included in the same file, so the less frames you have, the better. As you can see from mine, it does a great job of conveying the messages I felt were important, but does it with only 3 frames, and a very few colors:
A Template For You
Here’s an example one I did, and you can download my PSD template, as a good starting point. This is the resulting GIF, which is only 18k, in spite of having dimensions of 1091 × 614 pixels (click on it to see it larger). It’s so small, if Google+ were smarter, it would just use this same image at all resolutions.
Making Your Own
As for the technical details of how to do it in Photoshop, well, it’s just a lot easier to show you. So here’s a video tutorial (fullscreen it to see details):
I’d love it if you shared your Google+ profiles, with shiny new animated cover photos, in the comments! Also let me know if this was helpful.