Make an animated Google+ GIF Banner in Adobe CS5

Ever seen those fancy pants animated GIFs on Google+ pages (e.g. Red Bull’s Page: http://bit.ly/rEG9bj)? Ever wanted to do one yourself? Me too.

Thus I tried. I failed. I tried again. I succeeded! Here is how I did it:

Start a new Flash Document

Modify the document dimensions to match 827px x 150px (at 24 Frames Per Second).

Make your animation

Remember the animation needs to loop, and the elements need to stay low in file size. To make your animation effective, conceptualise something that plays on the idea of having 5 windows.

Export your movie

Once you have completed your movie, export it is a Quicktime movie (.mov) by going to Export > Movie…

Import it into Photoshop

Now go into Photoshop (Windows Users IMPORTANT: you have to have 32bit Photoshop for the next bit!) and go to File > Import > Video Frames To Layers. When the dialogue box pops up, ensure the frame animation tick-box is checked.

Hoorah. You’re flash movie should now be separated by keyframe as individual layers. What a godsend! Now, test the animation in the animation pane (Window > Animation) and see if its as you want it. Play around with the pause times between layers if you choose (Hold shift on the animation frames if you want to modify them together).

Set guides on your document

Next, we separate our document into 150px X 150px boxes (they have to be these exact dimensions for the GIFs to work in Google) . To do this, click the selection tool, and change the style in the top toolbar to ‘Fixed Size’. Set the size to 150px x 150px. Click on the end of the document for the selection to appear.

Ensure your Guides and Rulers are on and drag a guide to the end of your box.

The separator space between the boxes is 18px in width. Change the width of your selection box to match this, and drag another guide to the end of it. Repeat this until you reach the end.

Crop your document

Now you have all your guides in place, you can simply click a fixed sized selection box (150px X 150px again) and crop the document (Image > Crop) to the size.

Save your cropped GIF

Next, go to ‘Save for Web and Devices’ or Ctrl + Alt/Cmd + Shift + S.

Save your cropped image as an Animated GIF, go back to your Photoshop image and immediately Undo (Ctrl + Z) to get to the stage before your previous crop.

Repeat the process

Repeat the process with the other boxes until your get 5 separate gifs. Try and ensure all of your gif file sizes are relatively the same (this will determine the likeliness of them loading in sync on the Google page).

Import to you Google+ Page

Go to your page in Google and edit your profile. Add your photos in chronological order (Far left being 1, Far right being 5). Save and refresh your page.

Your all done! Refresh again if your gifs aren’t yet in sync, sometimes it takes a few page loads for the browser to catch up on itself.

Have a look at our Google Page as an example: http://bit.ly/w0YFMh