Written by: Jeffrey Powers - @geekazine
on February 21, 2012.

---

Image via Wikipedia

Six months ago, when Google Plus (aka Google+) came out, those on the new social network got innundated with animated GIFs. This is an older technology that turned a picture into a moving image. They used to be a staple with GeoCities, and some MySpace pages used Glitter graphics to make a page sparkle.

Now, after a few months, people have been starting a new trend that is kinda cool. They have been taking their Profile page and putting these animated gifs in there to create a little presentation. Just like I did on my about page.

These animated GIF files are easy to make. All you need is Photoshop. Here is how you can turn images to gif:

1. Get the Google Plus Animated GIF Template

download this image: Scapbook Frames Template - This is by Scott Horwath. It’s a standard .tif file, and will import into Photoshop just fine. This is going to give you the spacing you need for your images.

2. Get your Images Ready to make a gif in minutes

Depending on which version of Photoshop you have, you can import images and video (CS3, CS4, CS5). Older versions (CS, CS2) can only import images, so you will have to be a little creative with your design, but it still can be done. These images should be Layers above the Scrapbook Frames Template.

3. Make a Clipping Mask

First, you must move the PanoClippingMask file out of the PanoTemplate folder and put it under your pictures. Once that is done, we can create the Clipping Mask.

In the Layers box (to the lower-right), secondary-click (or control-click for Mac users) the layer of your first picture, then choose “Clipping Mask”. Your image will take the shape of your mask, with the appropriate spaces needed for Google+.

You do this for all your images involved.

4. Get Ready to Animate the Image

Under “Window“, choose “Animation“. A small bar will appear on the bottom. For anyone using CS or CS2, the bar is a frame-by frame animation. For those using CS3 or above, you can choose between this or timeline view, which mimics that of Flash animation software. For this example, we will use the frame view.

The first image is already a frame. There is a “0 sec.” underneath the frame. This is your framerate. You can keep on that frame for .00 seconds, to any custom time. A film usually goes at 24 frames per second, so having each frame at .04 should give you a smooth flow. Keep in mind, 24 frames means a lot of work, and a larger file in the end.

 5. Animate!

Once you’ve set framerate and the images are in place, press the duplicate key (this looks like a page with the corner bent up, It’s on the bottom next to the trash can, and the icon is a bit small).

You have just duplicated your first image in the chain. Now, you can go to the second image, reset the framerate (if needed), make changes and do it again.

Think of this like stop animation. You take a picture, then re-position the image, take the next picture. In this case, I am going to fade out the first bird for the second.  When done, hit the duplicate key once again.

If you mess up, just delete a frame and move on. If you want to change anything, just go to the frame in question and make the changes.

To speed up the process, I have taken one bird, faded to another, then duplicated the layers so the 2nd bird can fly out of frame to reveal the first bird again.

6. Save Animated Gif for web.

When done, just choose “File” and “Save for Web” – Or Ctrl-Alt-Shift-S. This will bring up the save for web option in a GIF format. The frames will be ready to export. Hit Save, then choose the folder you want to save the files to.

This will create 9 animated files. 4 of them are spacers, which we don’t need. The other 5 are the .gif files.

7. Place on your Google+ Profile

When ready, go to plus.google.com (you will need an account), then on your Profile, and About. Choose the Edit button, then click on one of those 5 pictures.

Delete any photo you have in there. In the first image area, choose Upload image, then the first image in your series (remember, not the spacers, but the images). Rinse and repeat until all five are uploaded.

Press OK, then Done Editing. Your images will start to work

Special Note: Refresh images

It might look like the images are out of sync, or some might be working funny. That is because your cache is in play. The best thing to do is clear your image cache, then go back into Google Plus and view your images. If they don’t straighten out, you might need to look at each image individually.

Special Note: Image Sizes

Keep in mind that animated gifs can be large in file size. It all depends on what you have put into the gif. If it’s 5,000 frames, then each picture might be 300-400 kilobytes, or a larger image. If you are on a fast internet connection that is fine, but anyone on a slower connection might… have… to… wait…

8. Sit Back and Watch the Fun

That’s it! Now when people go to your about page, they can get entertained by the images that come across.

Here are some inventive Google+ ers that used this idea:

• Daria Musk – Musician
• Trey Ratcliff – Photographer
• John Pozadzides – Geek Beat 
• Cali Lewis  - Geek Beat
• Eric Cheng – Photographer
• Dunken K Bliths – Animator
• Ralph Roberts – Author

Related articles

• Google Branded Pages – Is it for you? [How-to] (methodshop.com)
• Photoshopping the Pepper Spray Incident [Meme] (methodshop.com)
• 86 Free Animated Gifs for Your Email Campaign (aweber.com)

Interior Designer and Social Media Goddess – Pat Daly [interview] If you “Like” MethodShop on Facebook, then you’ve probably already seen our “Superfan”...

5 Ways to Help Save on Gas while Running your Business Are you feeling the crunch? That feeling you might be getting when you pull into a gas station? But...

What is Gowalla? Why Does Facebook Want to Buy it? Over the weekend, we heard stories about Gowalla (Go-Wall-ah) and how Facebook may be purchasing....

iRemember Steve Jobs [pics] Steve Jobs will forever be known as an icon of technology. The genius visionary revolutionized gadgets...

Photoshopping the Pepper Spray Incident [Meme] Since the officer pepper-sprayed the students at UC-Davis, the world has been in uproar. The Photoshoppers...

Thumblated Related Post