: Creating Rolodex-Style Flipping Numbers Sprite in Photoshop? So Apple recently had a countdown to their 1 billionth app download and it used a rolodex flipping type of effect. This actually turned

@Goswami567

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 ;)

Vote Up Vote Down

@Vandalay110

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.

Vote Up Vote Down