Cómo hacer una tarjeta de corazón en 3D
Contenidos
Esta tarjeta muestra una imagen en este ángulo… Las tarjetas con movimiento están apareciendo por todas partes estos días. Hace tiempo que existen, pero en los últimos años el número de imágenes en una tarjeta ha aumentado considerablemente. Las primeras versiones sólo tenían dos o tres imágenes, pero las nuevas pueden contener suficientes imágenes para simular un par de segundos de vídeo.
y otra en este ángulo. De hecho, esta tarjeta tiene unas 20 imágenes diferentes según el ángulo de visión.Las tarjetas Motion utilizan una tecnología especial llamada impresión lenticular. Este proceso toma un lote de imágenes e imprime tiras alternas de cada imagen en el reverso de una lámina de plástico transparente. La lámina de plástico tiene una serie de crestas curvas. Cada cresta curva es una lentícula. Cuando la luz atraviesa la lámina de plástico, se refleja en el papel blanco liso que hay debajo de la lámina de plástico.
Cada lentícula mide aproximadamente 0,3 milímetros de ancho. Puedes verlas si miras de cerca una tarjeta de movimiento. La luz que regresa pasa a través de las tiras de imagen impresas en la hoja de plástico. La lentícula está hecha de tal manera que refracta la luz de retorno en un ángulo específico y amplía la imagen. Las tiras están alineadas de manera que todas las tiras de una imagen concreta se refractan en el mismo punto. Debido a la refracción y al aumento, lo que se ve es una imagen única y completa que parece cubrir toda la tarjeta. Al cambiar el ángulo de la tarjeta en relación con la línea de visión, se ven las diferentes tiras de imágenes como una serie de imágenes completas.
Cómo hacer una tarjeta de cumpleaños en 3D
Las tarjetas virtuales en 3D se han hecho muy populares en el último año. Visualmente, son bastante intrigantes. Estas tarjetas combinan la naturaleza de un naipe plano con imágenes o animaciones que tienen profundidad y paralaje. El diseñador Robbie Tilton crea algunos ejemplos impresionantes de cartas en 3D.
En este videotutorial, vamos a aprender a crear nuestra propia tarjeta 3D completamente en After Effects. Te recomiendo que descargues el archivo de proyecto gratuito, que incluye un montón de recursos que te ayudarán a crear tu propia tarjeta a medida que vayas avanzando.
Esto es posible a través de un poco de truco de composición (pista de mates para ser específico-más sobre esto más adelante). Puedes hacer versiones 3D de tarjetas reales que escanees tú mismo, o puedes crear una original desde cero. La imagen de la tarjeta puede ser lo que quieras, desde capas planas hasta fotos o modelos 3D.
Luego, en otra composición, tendrás que construir tu escena 3D o 2.5D. (En el tutorial, titulé mi composición 3D Image Window Comp.) Puedes hacer esto con capas o imágenes 3D, o puedes usar plugins 3D hechos para After Effects, como Element 3D o Stardust.
Hacer una tarjeta 3d en línea
Hace un tiempo, escribí un artículo sobre botones CSS interactivos en 3D. Usando una técnica similar, decidí diseñar algunas tarjetas de usuario CSS interactivas en 3D (y volteables). Estos también funcionan muy bien para un montón de cosas diferentes – por ejemplo, una tarjeta de banco UI, una tarjeta de juego UI, o simplemente una página de equipos. La demostración se puede ver a continuación.
Empecemos con el HTML. Este es el aspecto de nuestra primera tarjeta. Cada tarjeta tiene dos partes principales – tarjeta interior, y tarjeta interior-cara trasera. La primera contiene el anverso de la tarjeta, y la segunda, el reverso.
Nuestro JS hace una cosa fundamental – y es averiguar la posición del usuario en la tarjeta, y traducirla en un ángulo que pasamos a nuestro CSS, para cambiar la forma de ver la tarjeta. Para ello, necesitamos saber a qué distancia del centro de la tarjeta se encuentra el usuario. En realidad, sólo tenemos que preocuparnos de dos ejes, y cuando el usuario llega a la parte superior o inferior de cualquiera de ellos, podemos girar la tarjeta en relación con el centro, como se muestra en la imagen siguiente.
Todo lo que tenemos que hacer ahora, es añadir esta función a cada uno de nuestros eventos de movimiento del ratón, y luego restablecer cada uno cuando el ratón del usuario deja el elemento. También añadiremos algunas funciones para “voltear” y “desvoltear” la tarjeta:
Cómo hacer una tarjeta pop up en 3D
¿Quieres que tu mensaje sea realmente llamativo? Ahí es donde entra en juego una tarjeta pop up. Las tarjetas desplegables son ideales para cualquier ocasión y harán que tu regalo y tu mensaje destaquen sobre los demás. Y lo que es mejor, son sorprendentemente sencillas de crear.
2. 2. Corta unas ranuras en el centro de la tarjeta. Con el lado doblado hacia ti, corta dos hendiduras de 2,5 cm. El papel entre cada uno de los cortes formará una lengüeta a la que sujetarás tu arte pop up. Las pestañas pueden ser anchas o estrechas dependiendo del tipo de arte que elijas. Haz varias pestañas si piensas añadir arte pop up a lo largo del ancho de tu tarjeta.
5. Dobla la segunda hoja de papel por la mitad. Este será el exterior de tu tarjeta final. Pega la parte exterior del primer papel. Coloca la primera pieza de papel dentro de la segunda y presiona para que se junten, ocultando los recortes de las pestañas.
Ahora que ya sabes cómo hacer una tarjeta pop up, ¡empecemos! Si dibujar no es tu fuerte, pero quieres crear una tarjeta pop up significativa, utiliza estos imprimibles para guiar tu diseño y luego personaliza tu tarjeta con rotuladores, purpurina y otros elementos decorativos.
Relacionados
