Title image

Disney Tag

Home / Posts tagged "Disney"

Ante la caída en desuso de Flash y el auge del Material Design, se han buscado alternativas para dotar a los sitios web de cierto dinamismo para contrarrestar su natural apariencia “plana”.

``Un diseñador sabe que ha alcanzado la perfección no cuando no le queda nada por agregar, sino cuando ya no le queda nada por añadir``- Antoine de Saint-Exupéry

Una de estas alternativas es optar por generar efectos y animaciones en JQuery, siendo el Efecto Parallax (en español paralaje), una tendencia cada vez más extendida en el mundo del diseño web y la animación.

Seguro que lo has visto miles de veces al entrar una web, hacer scroll y notar que el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías.

Y aunque parezca una tendencia muy actual, el Efecto Parallax es en realidad un truco con mucha historia. Por eso, en esta ocasión, haremos un reboot de nuestra anterior entrada y explicaremos más a fondo que es el parallax y cómo se utiliza en el Diseño.

El  moderno (pero común)  Efecto Parallax

El Parallax es un principio de diseño propio de la animación, que juega con la percepción humana,a fin de crear una ilusión de profundidad espacial con medios de representación bidimensionales. Para entenderlo mejor, hablaremos primero de sus orígenes.

La paralaje (del griego parállaxis para cambio, diferencia) define a un fenómeno de la percepción por el cual la posición de un objeto en el campo visual cambia en relación con el punto desde donde se observa.

Esto puede ejemplificarse si levantamos el pulgar a la altura del rostro, mientras abrimos y cerramos alternativamente el ojo derecho y el izquierdo. Notaremos que, mientras que el fondo permanece estático, nuestro pulgar aparentemente cambia de posición gracias a la distancia de nuestros ojos. ¿Sencillo no?

Visión estereoscópica

Si se observa el punto amarillo con el ojo izquierdo (posición A) parece que se encuentre sobre un fondo azul, pero si se observa con el ojo derecho (posición B), aparece sobre el fondo rojo.

Y aunque el Efecto Parallax apenas se aprecia en nuestro día a día, constituye uno de los fundamentos de la percepción espacial. De esta manera, los reflejos lumínicos de objetos cercanos se mueven más rápido en la retina que los de objetos a una cierta distancia, generando una ilusión de profundidad inducida por el movimiento.

Animando ratones y patrullando la luna

Como mencionamos en la introducción, el Efecto Parallax es en realidad un truco muy antiguo, inventado por Walt Disney para dotar a sus películas de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo.

El invento en sí, se llama “cámara multiplano”, ya que la superposición de planos para generar profundidad genera el Efecto Parallax. Les comparto un video que muestra el funcionamiento de la cámara multiplano de Disney.

Posteriormente, los programadores de videojuegos de los 80´s importaron este concepto con el fin de crear la ilusión de tridimensionalidad con medios bidimensionales. Juegos clásicos del tipo Jump’n’Run o Shoot’em up como Super Mario, Moon Patrol o Jungle Hunt, son un gran ejemplo de este efecto en acción:

Ideal para Storytelling y Diseño Web

Si bien desde finales de la década de los 2000 se utiliza el Efecto Parallax en el diseño web, no sería hasta que la página de Nike nikebetterworld.com (offline) causara un enorme impacto medial en 2011.

Sentando así, un precedente para la tendencia en diseño web que utiliza el Efecto Parallax para crear una impresión de profundidad en un medio bidimensional como es la web.

Sin embargo y aunque el Efecto Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera, no es conveniente usarlo por el simple hecho de seguir la tendencia. La presencia de este tipo de efectos puede ser tan sorprendente como cansina, para los usuarios.

Lo ideal es aprovechar este recurso como complemento narrativo. Esta posibilidad de storytelling del Parallax, lo vuelve perfecto para landing pages, o webs que intenten sumergir al usuario en una historia, causando una experiencia comunicativa mucho más divertida y cercana a otros medios como los videojuegos o los cómics.

Ejemplos destacables

El Efecto Parallax polariza las opiniones. Mientras que muchos usuarios aprecian el diseño con este tipo de efectos producidos por el movimiento, otros ya están cansados de un medio ya no tan moderno, sobre todo si se utiliza con el único fin de exhibirse sin un concepto que lo justifique.

¿Cuándo enriquece el Efecto Parallax a una web? Esto depende sobre todo de lo que se quiere conseguir con el proyecto y del público. Lo que no podemos negar es que ha demostrado ser un medio ideal para contar historias, por ello aquí te compartimos una recopilación de páginas con Parallax que seguro que terminan de convencerte, si aún tenías dudas, de lo increíble de este efecto.

The Hybrid Graphic Novel

Un proyecto con luz propia es la página de lanzamiento del Peugeot Hybrid4 que, camuflada como una novela gráfica de acción, presenta las características más importantes del vehiculo. Tan increíble, que incluso el proyecto fue galardonado por la página The FWA como FWA of the day.

Why your Brain Craves Infographics

Con un estilo visual retro de libro educativo, el sitio muestra algunos datos del porque las infografías son una buena forma de acercarse con la gente y comunicar ideas, a través de algunos datos sobre psicología y marketing. Un gran ejemplo de cómo se pueden volver una serie de datos ``duros`` más digeribles.

Firewatch

Utilizar el parallax scrolling cómo eyecatcher al inicio de una página también está justificado, pues si se hace bien este instrumento tiene una enorme capacidad para enganchar al usuario e interesarlo por el contenido que viene a continuación. Un ejemplo clásico lo encontramos en la página web para el videojuego Firewatch de Campo Santo.

Perspectiva que cambia la forma de ver

Aunque en principio atractivo, las páginas scroller con Efecto Parallax, encierran un innegable potencial para mejorar el storytelling de una marca, pero también ha provocado su uso masivo (y desmedido) desde 2011.

A final de cuentas, los efectos de paralaje o cualquier otro tipo de animaciones, deben de utlizarse cuando ayudan a mejorar la experiencia del usuario, destacar contenido, productos, servicios o animar al call to action. Va en ese sentido, muy de la mano de los principios del material design del cual ya hemos hablado en este blog.

Sin embargo es innegable el atractivo que genera el Efecto Parallax , pues ayuda a modificar la perspectiva que tienen las personas sobre lo que es un sitio web y cambia su forma de ver a una marca o producto. Y tú, ¿te animas a dar profundidad a tu web? Ya sea con una tienda en línea, landing page o blog, con nuestro servicio de Diseño Webolvídate de perder oportunidades y comienza a conectarte con todo el mundo. ¡Conócenos!

¿Ustedes conocen más ejemplo para compartir con nosotros?, ¿Les gustaría que habláramos de algunas formas de añadir este y otros efectos a sus páginas?

No olviden dejar sus comentarios.

¡Saludos!

A lo largo de mi experiencia como diseñador, me he enfrentado con la necesidad de estar en constante práctica y evolución de mis habilidades y conocimientos.

Y sin lugar a dudas, puedo decir que aprender a animar ha sido uno de los mejores skills que he tenido la oportunidad de aprender, pues es de todos conocido, la capacidad que tienen las animaciones/videos para contar historias y conectar con las personas.

“Piensa, Sueña, Cree y Atrévete” - Walt Disney

Incluso, desde el punto de vista artístico, la necesidad de romper barreras y aprender nuevas técnicas va desde el dominio de la ilustración tradicional y digital, a su eventual evolución en movimiento. Y para muestra les comparto uno de los primeros proyectos que realizamos en Galahad Studio como animación en este enlace.

En este sentido, esta evolución podría continuar hacia la realización de ilustración y animación 3D. Sin embargo, aprender todas las áreas de 3D requiere mucho tiempo y dedicación. Pero…¿y si hubiera una manera de generar un fake 3D animado?. Pues en esta entrada del blog, quiero compartirles algunos tutoriales y plugins, que vuelven esta idea una realidad.

Espera un segundo…

Antes que nada, es importante entender que la “tridimensionalidad” en un medio bidimensional, no es otra cosa que un juego de luces, sombras y perspectiva.

En este sentido, fuera de la Realidad, todo lo que vemos en televisión, cine, revistas, libros, etc. que genera un efecto tridimensional, no es otra cosa que una ilusión óptica, que provoca que nuestro cerebro interprete esas imágenes en diferentes planos. Generando así, la idea de una falsa “tridimensionalidad”.

Y aunque suene un poco complicado, en realidad es una técnica que se ha usado desde hace mucho tiempo. Apuesto incluso, a que no sabías que fue el propio Disney quien generó la primer tecnología que buscaba generar profundidad en las animaciones. El invento en sí, se llama “cámara multiplano” y a la superposición de planos para generar profundidad se le llama paralaje o efecto parallax, del cual por cierto ya hemos escrito una entrada.

Antes de seguir con lo que nos interesa de generar un efecto de fake 3D, les comparto un video que muestra el funcionamiento de la cámara multiplano de Disney y el parallax:

Parallax + Rigging

Hasta este punto y habiendo entendido y dominado el principio del parallax, ya podríamos desarrollar animaciones tridimensionales, donde el escenario jugaría un lugar vital en este proceso, pero… ¿qué pasaría con nuestros personajes?

El efecto de parallax funciona increíble al usarlo sobre fondos, simplemente porque la distancia entre los objetos (digamos el sol, el cielo, unas montañas y nuestro primer plano), es notoria. Pero no es así con un personaje, pues sus elementos (nariz, ojos, cabeza, etc.) no están posicionados (normalmente) a grandes distancias uno de otro.

En ese caso, necesitaríamos realizar un Rigging de nuestros personajes. Aunque su origen está en la animación 3D, ya es muy común hablar de ello en animación 2D. Al final justo lo que buscamos es lograr un  efecto de fake 3D.

El rigging, es el proceso de creación de un sistema de controles digitales y su posterior adición a un modelo 3D, para que así, pueda ser animado fácil y eficientemente. Dicho en pocas palabras, es la creación de una marioneta digital.

Y es justo esta marioneta y una sutil animación, lo que nos permitiría generar un efecto de fake 3D en las expresiones y movimientos de nuestros personajes, como podemos ver en el siguiente video:

¿Notas como un personaje 2D adquiere una dimensión completamente nueva al ser animado de esta manera?

¿Y… ahora?

Es verdad, hacer el rigging y parallax en una animación, puede volverse un trabajo tedioso, aunque sea fundamental para la creación de nuestro efecto de fake 3d.

Por ello, quiero hablarles de un par de formas de realizar todo el proceso de una manera más sencilla, mediante plugins. En esta ocasión, vamos a recomendar dos, Joysticks ‘n Sliders y Duik, ambos disponibles en After Effects y compatibles entre sí.

Rigging = Duik

Duik es toda la caja de pandora de la animación y el rigging en Adobe After Effects.

Proporciona las herramientas de rigging principales que se encuentran en cualquier software de 3D, como IK, controladores y bones, pero los adapta a la animación 2D en After Effects.

Desarrollado por equipo de RAINBOX, Duik permite manipular personajes complejos y usar técnicas avanzadas de animación. Altamente recomendado.

Fake 3D = Joysticks ‘n Sliders

Joysticks ‘n Sliders es un sistema de rigging basado en posturas para After Effects, con aplicaciones ilimitadas.

Es es una herramienta imprescindible para cualquier persona que haga animación de personajes en After Effects. y aunque no es exactamente único en el mercado, su gran diferenciador, es que permite animar poses y controles para los movimientos intermedios. Logrando un gran dinamismo y naturalidad en los movimientos.

Desarrollado por Mike Overback, es una herramienta clave para la animación facial, la rotación de la cabeza y el rigging de posturas.

Y esto sólo es el principio

Como siempre, hay muchísimo que decir acerca de estas herramientas. Pues su propia naturaleza genera posibilidades infinitas.

Ya se que se utilicen keyframes o plugins para generar animaciones, generar un fake 3D en una animación motion graphic, se vuelve la posibilidad de llevar la ilustración 2D a un nuevo nivel. Y si a esto le sumamos el uso de parallax, la espectacularidad estaría llamando a la puerta.

Tú también puedes llevar a otro nivel la publicidad de tu marca. Nosotros te ayudamos a darle vida a tu nuevo producto, personaje o publicaciones en redes sociales. Nuestros servicios de Ilustración y animación no tienen límites y tus ideas tampoco. ¡Contáctanos!

¿Conoces otras técnicas para desarrollar animación?, ¿Te gustaría que habláramos de ellas en futuras entradas?

No olviden dejar sus comentarios.

¡Saludos!

¡Hola que tal!

En Galahad Studio creemos que el diseño se encuentra en prácticamente todos los aspectos de nuestras vidas, porque el diseño no se trata sobre el objeto físico, ya sea un cartel, una animación o el empaque de un producto. El diseño es realmente lo que se encuentra entre el mensaje y el espectador final, es todo el proceso de desarrollo hasta obtener una materialización de una idea. Como dijera el diseñador Robin Mathew, “El diseño es donde la ciencia y el arte se equilibran”.

Sin embargo, esta es una visión muy romántica de lo que el Diseño termina siendo, pues para muchas empresas y marcas únicamente es un “agregado” visual para sus productos. Una decoración. Por eso, en esta ocasión queremos hablarles de una producción única e increíble, pues mezcla perfectamente los ejes de lo conceptual, lo funcional y lo estético y sin embargo, vio la luz para ser ni más ni menos, que un producto de entretenimiento. Hoy queremos hablarles de Cuphead, un videojuego lanzado en septiembre del año pasado (2017) y que ha dado muchísimo de que hablar.

“El diseño es donde la ciencia y el arte se equilibran. Robin Mathew”

En una industria en donde los videojuegos nos impactan, ya sea por su argumento, otras por su jugabilidad o sus gráficos, Cuphead resulta ser amor a primera vista, ya que conjuga todos estos aspectos en un producto solido, dónde su apartado visual ha maravillado a más de uno, desde que fue anunciado en la conferencia de Microsoft del E3 2014.

Desarrollado por StudioMDHR, Cuphead resultó ser una propuesta arriesgada para todos los miembros del estudio, debido a que la industria del videojuego ha estado dominada por las grandes marcas y productoras, por lo que los desarrolladores independientes siempre han tenido problemas para financiar sus proyectos. Además, los múltiples retrasos de su lanzamiento, afectaron negativamente la percepción de los jugadores sobre el juego (en algún punto, se esperó que fuera definitivamente cancelado). Sin embargo, en junio de 2017, fue anunciada su fecha definitiva de lanzamiento para otoño del mismo año. Hoy en día podemos decir que la espera y todos los sacrificios del estudio valieron la espera.

El secreto de la creatividad es saber ocultar tus fuentes…

Esta definitivamente no fue la idea que tuviera StudioMDHR al desarrollar su videojuego, pues la característica más impresionante del mismo, fue la decisión de producir Cuphead dibujando a mano todos los assets, personajes, fondos y animaciones del juego, siguiendo un estilo idéntico al de los dibujos de la década de 1930.

Son notables las influencias de los grandes genios y pioneros de los dibujos animados como Max Fleischercreador de  Betty Boop y Koko el payaso y productor de la serie de Popeye; Tex Avery, creador del  Pato LucasBugs BunnyDroopyLobo McLobo, entre otros; o del mismísimo Walt Disney. Es de reconocer, en este sentido, la capacidad de sus creadores y su excelente trabajo al imitar un estilo de hace casi un siglo, pues Cuphead, fácilmente nos transporta a esa época con sus innumerables guiños y diseño de personajes y escenarios. La nostalgia se respira en cada momento del juego.

El mundo cabe en una canción…

Ahora bien, no puede haber un producto completo, si su visión está enfocada en un solo aspecto. Aunque el aspecto visual de Cuphead se lleva las palmas, no sería nada sin el increíble cuidado que sus desarrolladores han puesto en su música. Producida por Kristofer Maddigan quien ha pertenecido a numerosos ensambles de ópera y ballet, así como sinfónicas en Canadá y numerosos cuartetos de Jazz de la ciudad. También musicalizó la instalación Nuit Blanche en la ciudad de Toronto. Ha sido músico invitado para artistas como Petula Clark, The Drifters, Ian Finkle y el proyecto solista de Andy Bell de Erasure.

El soundtrack de Cuphead consta de tres horas continuas de música, que va desde el Jazz, las primeras Big Bands y Ragtime. La grabación de la música estuvo realizada por una Big Band de 13 personas, 10 del ensamble de ragtime, un pianista solista, un vocalista y un bailador de tap. Todo un esfuerzo increíble que logra transportar las imágenes en pantalla a esos años 30´s en las que están inspiradas. Vale la pena detenerse un momento para apreciarlo.

Con tantos videojuegos que son publicados anualmente, acaba siendo difícil desarrollar algo único o que no se haya visto anteriormente. Sin embargo StudioMDHR logró acertar al elegir un estilo visual tan atractivo como nostálgico, logrando crear visualmente, algo totalmente diferente a lo que estamos acostumbrados a ver. Es digna de aplaudir la arriesgada propuesta de StudioMDHR por apostar tan alto para cumplir su sueño, pero en Galahad Studio creemos que esa es la única razón por la que vale esforzarse cada día.

¿A ustedes que les ha parecido?, ¿Han tenido la oportunidad de jugarlo?

¡Saludos!

Hoy quiero platicarles un poco de un efecto sorprendente llamado Parallax y que en los días recientes he tratado de conocer y utilizar.

El efecto Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera. Básicamente genera una sensación de profunidad al separar en planos/capas, el contenido de una animación o sitio web.

Y aunque parezca una tendencia muy actual (y de hecho lo es en el mundo del diseño web), el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo.

“El invento se bautizó como “cámara multiplano” y más tarde se adaptó al mundo de los videjuegos en 2D, como Moon Patrol (1982)”

Y para muestra un botón, pues les comparto un link a un sitio en el que lo utilizan de una manera brillante. En este caso, se aprovechan sus características, para sumergir al usuario en la narración de una historia, con una experiencia comunicativa mucho más divertida y cercana a otros medios como el videojuego o el cómic.

Espero puedan darse unos minutos y se dejen sorprender por este increíble efecto.

Abrir chat
1
¿Dudas? ¡Hagamos tu proyecto realidad!
¡Saludos Capitán!

Soy Avalon IV, tu asistente virtual a bordo de Galahad Studio...

¿Tienes un proyecto en mente? ¡Déjanos orientarte! y recibe un descuento especial, en el primer proyecto que desarrollemos juntos.

Envíanos un mensaje y ¡Comencemos!