Ever since Google launched their Google + Pages I was plotting and scheming on writing a tutorial about creating a nice animated scrapbook for the page. By the way, the scrapbook is the header of your profile page where you can display 5 images from your Photos.

It is similar to Facebook’s scrapbook. But Google’s one supports animated images as well! You may have seen nicely animated scrapbooks on various profile pages. Ever wondered how they do it?

Today I will show you how to create your own animated scrapbook in Photoshop. I will take ours as an example (you can see it on our Google Page).

One thing you should keep in mind: since Internet connection speed is not constant everywhere, it is almost impossible to accurately calculate the timing for your animation. In other words, if you want to create a sequential animation (like, load first image first, then after 2 seconds load the second image, after 1 sec load third and so on), throw that cool idea aside – most visitors will see a random mess. So what I suggest is, create a simple, looking nice at various load speeds animation. That’s exactly what we are gonna do.

Ok. Let’s get it started.

Before getting your hands on Photoshop, it is better to create a simple “plan” of your animation. Take a pen and a piece of paper and write down how it will work. For our animation, the steps are simple:

a) A blank screen;
b) A solid fill comes from the top to the bottom;
c) The text appears (opacity from 0% to 100%);
d) Stays for a while and then everything disappears slowly.

Step 1

Create a New document in Photoshop (750x150px) and create four Guides with distance of 150px:

Step 2

Now let’s create a new layer and fill it with solid color (I chose grey #a9a9a9):

Step 3

Create another layer and put some descriptive text on it (like your website name, slogan, keywords, logo, etc.):

Note: if you wonder how I created the glossy effect check this tutorial I wrote before (scroll down to the bottom): http://www.truekolor.net/how-to-make-a-nice-banner-in-photoshop/

Step 4

Now let’s get to the animation. To display the animation box go to Window and check Animation:

I decided to make a 6 second animation, to set time go to animation options as shown below and select Document Settings:

Step 5

If you check our plan described before the Step 1, you will see that now we need to make the solid color layer come down from the top. It means that we are changing it’s Position. Select your layer with solid color and click on “clock icon” near Position in the Animation box (making sure that the timeline is on the very first frame):

Step 6

Move the color layer upwards until it’s gone. Ok. Now we need to make it come down in say 2 seconds. Move the Current Time Indicator to 02:00:

Step 7

While at 02:00, move the color layer down, so that it fills the whole background as it was before. When you move it, the Photoshop will create a keyframe automatically:

Now if you push play button on animation from the beginning it will slowly move the color layer from the top to bottom.

Step 8

Ok. Now we need to make text layer appear. Select the text layer. Move your Time Indicator to say 01:20, click on the clock icon near Opacity in the Animation box and set layer’s opacity to 0%:

Step 9

With text layer selected, move the Time Indicator to 02:06 and set layer’s opacity to 100%.

Ok. Now we need everything to disappear at the end of our animation.

Step 10

Select the text layer and move the Time Indicator to 05:00 and set opacity to 100% (to make sure that the keyframe is created just move the slider in layer’s opacity box to the left and back to 100%). Then move the Time Indicator to 05:16 and set opacity to 0%.

Step 11

Do the same for the color layer.

Now your timeline should look like this:

We are done with the animation. Let’s save for Google.

Step 12

Select Slice Tool (C):

And “slice” the whole document into 5 equal pieces (use the slice tool like marquee tool, just select rectangles):

Step 13

Ctrl+Shift+Alt+S (Save for Web) and set as mine:

Click Save and choose some place to save your files. It will create a folder “Images” where you will find 5 GIF animations.

Almost there, the only thing left is to upload your GIFs.

Step 14

Go to your Google Page, login, click on Edit profile at the top-right, click on scrapbook and upload your images one by one:

Click on Done Editing and voila!

If you found this tutorial helpful, please share with your friends and comment!