How to Make an Animated Google+ Cover Photo in Photoshop

Tevya's animated G+ profile

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. tevya-empty-inbox-productivity-wordpress

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. google-plus-MLH-animated-cover-photo

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.

The following two tabs change content below.

Tevya Washburn

Website Creator at FiddlerStudios
Designer & creator of Mormon Life Hacker. Tevya keeps a personal blog, & another called Sacred Symbolic, about learning the Gospel through symbolism. Currently serving as: YM Secretary.

2 comments on “How to Make an Animated Google+ Cover Photo in Photoshop

  1. This is amazing. I didn’t know Google+ allowed .gifs. (thats probably because I don’t use Google+ though)

  2. Morgan says:

    I didn’t even know you could do an animated Google cover photo. Thanks for the tutorial!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>