1

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.

scaled rolodex sprites

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.

2 Answers 2

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

0

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.

2
  • I think he's asking precisely about the skewing part (the perspective distortion of the moving element) not the arrangement of the sprites in the larger image.
    – e100
    Apr 18, 2012 at 15:34
  • In that case, he should be drawing them as-is, not skewing an existing item.
    – horatio
    Apr 18, 2012 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.