¿Crear Sprite de números invertidos estilo Rolodex en Photoshop?

Así que Apple recientemente tuvo una cuenta regresiva para la descarga de su aplicación número 1000 millones y usó un tipo de efecto de volteo de rolodex. Esto en realidad resultó estar ejecutándose en una imagen de sprite que se compone de diferentes "estados" de volteo, luego jQuery se mueve rápidamente a través de estas animaciones para cada nueva descarga.

Estoy tratando desesperadamente de crear un efecto similar en Photoshop que pueda usar para una pequeña aplicación web. Puedo encontrar toneladas de regalos de PSD de reloj para trabajar, pero no estoy seguro de cómo sesgar las imágenes para crear el efecto de volteo.

En última instancia, el objetivo es crear una gran imagen de sprite que contenga todos los diferentes estados numéricos. La versión escalada que incluí arriba es lo más cercano que puedo encontrar a lo que estoy buscando construir; también la incluí a continuación como una imagen directa.

sprites de rolodex a escala

¡Le agradecería cualquier ayuda en esto! Parece que usar un sprite de fondo es la forma más fácil de duplicar este efecto en una página web. Así que estoy atascado en la creación física de estos diferentes "estados" de volteo animado.

Respuestas (2)

Esto es tranquilo simplemente

1.) Cree un rectángulo del tamaño y estilo deseados.

2.) Coloque una capa de texto con el número deseado y combine las dos capas en una.

3.) Repita los pasos 1 y 2 con un número diferente.

4.) ahora corta la capa superior por la mitad

5.) presione comando más T y mueva el ancla (la pequeña cruz) desde el centro de la forma, hasta la parte inferior central de la forma.

6.) agarra el ancla de transformación central superior y tira un poco hacia abajo.

7.) guardar imagen

8.) repita los pasos 6 y 7.

piénselo sin tener en cuenta las sombras y los detalles más complejos (como cambiar del primer número al segundo, una vez que la mitad de la tarjeta está apuntando exactamente hacia usted / está en el medio y el siguiente número se hace visible en la parte posterior).

ACTUALIZAR

para el detalle inferior, deberá crear las capturas de pantalla al revés y luego reordenar los archivos, ya que no puede comenzar con la versión muy sesgada y luego arrastrarla cuando trabaja con archivos de píxeles;)

Imagina una tira de película que colocas debajo de una hoja de papel con un pequeño rectángulo (lo llamaremos ventana) recortado. Solo puede ver una pequeña porción de la tira de película: solo la parte que puede ver a través de la ventana. Para dar la impresión de una imagen en movimiento, cambie la posición de la tira de película para que una parte diferente de la tira de película sea visible a través de la ventana.

En su ejemplo, tiene una tira que es una imagen con una columna y muchas filas. Cada fila es un solo cuadro. Deberá determinar la altura de píxel de una sola fila. Cree un contenedor (1 columna) píxeles de ancho por (1 fila) píxeles de alto. La primera fila es index(0). Ajuste el borde superior de la imagen dentro del contenedor por: -1 veces la cantidad (índice de fila multiplicado por altura de fila) en píxeles.-1*(rowIndex*rowHeight)

En cuanto a "sesgar": sesgar probablemente no sea el término al que te refieres. Lo único que tienes que hacer es mirar un ejemplo del mundo real. Usaste la palabra "rolodex". Seguro que has mirado un rolodex mientras lo hojeabas. Es tan simple como dibujar lo que ves.

Creo que está preguntando precisamente sobre la parte sesgada (la distorsión de la perspectiva del elemento en movimiento), no sobre la disposición de los sprites en la imagen más grande.
En ese caso, debería dibujarlos tal cual, no sesgar un elemento existente.
¿Crear Sprite de números invertidos estilo Rolodex en Photoshop?
RespuestasAquíPolítica de privacidad1y, 0v