Creating Rolodex-Style Flipping Numbers Sprite in Photoshop?

Question

So Apple recently had a countdown to their 1 billionth app download and it used a rolodex flipping type of effect. This actually turned out to be running on a sprite image which is composed of different flipping "states", then jQuery quickly moves through these animations for each new download.

I'm desperately trying to create a similar effect in Photoshop that I can use for a small web application. I can find tons of clock PSD freebies to work with, but I'm unsure of how to go about skewing the images to create the flip-like effect.

Ultimately the goal is to create a large sprite image containing all of the different number states. The scaled version I included above is the closest I can find to what I'm looking to build - also included it below as a direct image.

I would appreciate any help on this! It seems that using a background sprite is the easiest way to duplicate this effect on a webpage. So I'm just stuck at physically creating these different "states" of animated flipping.

Answer 1

This is quiet simply

1.) Create a rectangle of desired size and styling.

2.) Put a text layer with the desired number on it and merge the two layers into one.

3.) Repeat step 1. and 2. with a different number.

4.) now cut the layer on top in half

5.) press command plus T and move the anchor (the little cross) from the middle of the shape, to the bottom-middle of the shape.

6.) grab the upper middle transform anchor and pull it down a little.

7.) save picture

8.) repeat step 6. and 7.

think thats about it without taking shadows and more complex details into account (like switching from the first number to the second, once the half card is pointing exactly at you / is in the middle and the next number gets visible on the back.

UPDATE

for the lower detail, you'll have to create the screenshots in reverse and then reorder the files, since you can't start with the heavily skewed version and then drag it out when working with pixel files ;)

Answer 2

Imagine a film strip which you place under a piece of paper with a small rectangle (we'll call it a window) cut out of it. You can only see a small portion of the film strip: only the part you can see through the window. To give the impression of an moving image, you change the position of the film strip so that a different portion of the film strip is visible through the window.

In your example, you have a strip which is an image with one column and many rows. Each row is a single frame. You will need to determine the pixel height of a single row. Make a container (1 column)pixels wide by (1 row)pixels high. The first row is index(0). Adjust the top edge of the image within the container by: -1 times the quantity (row index multiplied by row height) in pixels. -1*(rowIndex*rowHeight)

As far as "skewing": skewing is probably no the term you meant. The only thing you need to do is look at a real world example. You used the word "rolodex." Surely you have looked at a rolodex as you flip through it. It is as simple as drawing what you see.