Hace poco publicamos un tutorial de un efecto "Parallax" con CSS3 (realizado por el buen Edgar Parada). Como ya sabemos, en desarrollo y diseño web, un mismo resultado (independientemente de lo que estemos haciendo) lo podemos obtener de muchas formas diferentes, por lo que en esta ocasión haremos un pequeño tutorial de Parallax pero ahora hecho con jQuery, HTML y CSS.

Haz scroll con la barra para ver el efecto

Básicamente y para los que no lo tienen tan claro, Parallax (hablando de videojuegos, sitios web y gráficos en computadora) es el efecto visual que se crea al desplazar varios planos de una composición a velocidades o intervalos distintos creando la sensación de profundidad. Es un recurso muy utilizado sobre todo en juegos de video, ya sea de plataformas tipo Playstation o Xbox hasta en juegos sencillos hechos en Flash para computadora o dispositivos móviles. Si nos ponemos a investigar un poco este concepto nos podemos remitir a épocas lejanas donde los astrónomos utilizaban este principio para medir las distancias a nivel astronómico como estrellas, galaxias y otros cuerpos celestes.

Últimamente Parallax se ha vuelto muy popular en el diseño de sitios, principalmente por el efecto 3D y la ilusión de profundidad que imprime al diseño, esto mediante varias opciones que pueden ser Flash, CSS3, HTML5, Javascript y/o jQuery. En unas cuantas líneas de código y con 4 imágenes vamos a hacer un ejemplo de como lograrlo, ya dependerá de ti y de tu creatividad, la manera en que puedas aplicar (o mejorar) esto a tu sitio web. Incluso te dejaremos algunas ligas muy interesantes de varios sitios que lo implementan muy bien dentro de su desarrollo.

La semana pasada fue una semana de cambios que hasta hace poco no se creían posibles. Una iniciativa del gobierno estadounidense amenazaba con acabar con Internetz del modo en que lo conocemos, fue tan grande el cambio que se proponía, que propició que sitios de la importancia de Google y la Wikipedia mostraran su descontento por medio de protestas en su sitio. En el caso de Google, fue un link que llevaba a una firma de peticiones para detener la iniciativa, en el caso de wikipedia, fue un cierre total en su servicio por un día. ¿Pero de qué trata esta iniciativa y cómo es que nos afecta? Por medio de éste artículo trataremos de explicar un poco de qué trata SOPA y cómo nos afecta a los diseñadores.

¿Qué es SOPA? Un poco de contexto

 

SOPA, por sus siglas en ingles Stop Online Piracy Policy, es una iniciativa de ley iniciada por el Senador Lamar Smith, que según el gobierno de Estados Unidos busca el ayudar a la lucha contra el infringimiento de copyright al expandir las facultades del gobierno para actuar.

Anteriormente, el modo de acusar a un sitio de infringimiento de copyright era el siguiente: La compañía dueña del copyright acusaba al sitio, si el sitio se encontraba hospedado en un servidor dentro del área de estados unidos, se procedía a actuar en contra del dueño del sitio. Aquí hay dos puntos clave que hay que aclarar:

- La jurisdicción del gobierno terminaba al emprender acciones legales en contra del dueño del sitio, sin perjudicar a un sitio aledaño o afectando a alguien más.

- Si el contenido con copyright era subido por algún usuario del sitio y no el dueño, el sitio podía ampararse gracias a una ley denominada Digital Millennium Copyright Act, que básicamente dice que el sitio no es culpable del contenido que los usuarios suban, siempre y cuando al momento en que haya alguna queja por parte del dueño de los derechos de autor, se elimine el material que tenga copyright.

Hace algunas semanas se estreno en cines la última película de Steven Spielberg, "Las Aventuras de Tintin", un gran proyecto de cine animado  que tiene mucho trabajo artístico por detrás. En esta ocasión Weta Digital con Peter Jackson, fueron los encargados de la animación, captura de movimiento y de los efectos visuales de la película.

Podemos ver que Tintin es una película hecha totalmente en computadora (CGI), pero a diferencia de la mayoría de los largometrajes animados, Tintin fue realizado usando otro tipo de técnicas de animación que varían un tanto a las técnicas tradicionales. La captura de movimiento y la captura de interpretación (Performance Capture) son técnicas en las que Weta se ha especializado y han perfeccionado a lo largo de los últimos  10 o 12 años, utilizándola ahora para esta última producción. Aunque muchos artistas o animadores tradicionales no consideran a este tipo de técnicas (captura de movimiento) como animación en sí misma, no cabe la menor duda que es una novedosa forma de hacer animaciones o películas generadas con computadora con resultados sorprendentes, como lo podemos ver en "Las Aventuras de Tintin".

Weta Digital ha dedicado muchos años y recursos en perfeccionar esta técnica, tecnología o método de animación y que hemos podido ver en películas como Avatar o Planet of Apes (El Planeta de los Simios). Una de las características que brinda esta tecnología es que permite al director, en este caso Steven Spielberg, dirigir como si se tratara de una película rodada en vivo con personajes reales, controlando los movimientos y ángulos de cámara que desea obtener y viendo los resultados en tiempo real en pantallas ya con los personajes finales (modelados previamente en 3D).

Blur Studio, uno de los estudios de Animación y Efectos Visuales situados en California y más reconocidos a nivel mundial, fueron los encargados de realizar la animación y secuencia de títulos de la película "The Girl with the Dragon Tattoo".

Esta, para quienes no han podido verla aún, es una secuencia de 2 minutos y medio que fue generada totalmente en computadora y en la que vemos varios elementos que emergen, se funden y combinan con fluidos que fueron realizados en gran parte con RealFlow, software especializado en la creación y simulación de todo tipo de fluidos. La secuencia fue generada digitalmente para permitir que cada toma pudiera ser vista desde varios ángulos de cámara ofreciendo así una mejor composición. Para la secuencia final se utilizaron escenas 3D escaneadas de los actores con elementos como los tatuajes del Dragon y del Phoenix, diseñadas y modeladas por el equipo de Blur.

Making of The Girl with the Dragon Tattoo

Tim Miller, director creativo de Blur Studio, trabajó de la mano con Fincher para elegir los momentos claves de la trilogía de Stieg Larsson, y extraer imágenes y metáforas visuales para compilar conceptos y crear junto con el equipo creativo de Blur Studio un aspecto macabro, con tonos oscuros y elementos de gran brillo que captaran la atención de las personas desde el principio.

Hace unos meses anunciábamos el lanzamiento de Inkling, de Wacom. Para los que no leyeron la nota o se enteraron de este nuevo producto de Wacom (por este u otro medio), podemos decirles en pocas palabras que Inkling es un lápiz digital, creado por Wacom, con el cuál puedes dibujar normalmente en cualquier hoja de papel o cuaderno pero que al mismo tiempo que vas dibujando se va registrando y guardando cada uno de tus movimientos y trazos en un sensor para que una vez que lo conectes a tu computadora puedas ver tu dibujo de forma digital, e incluso editarlo en Photoshop o Illustrator, ya que conservará tus trazos en vectores. Para mas detalles técnicos puedes revisar la nota del lanzamiento aquí.

Como era de esperarse no podíamos quedarnos sin probar este "fabuloso" gadget y comprobar si realmente cumplía con todo lo que prometía. Fue así que lo conseguimos y comenzamos a trabajar con él.

Para trabajar con Inkling debemos colocar el sensor o receptor en la parte superior de nuestro cuaderno u hoja donde vayamos a dibujar. Uno de los detalles que hay que tener en cuenta es que deberás hacer tus dibujos por lo menos 2 o 3 centímetros (1 pulgada) por debajo de este sensor, ya que todos los trazos que estén muy cerca de él no serán captados y será imposible verlos una vez que los pases a formato digital.

Photoshop desde hace algunas versiones tiene una herramienta que se llama Variables, la cual es una opción que nos ahorrara tiempo valioso al trabajar con archivos múltiples, principalmente aquellos que contengan texto e imágenes que queramos cambiar pero conservando el diseño o elementos gráficos principales.

Básicamente nos sirve para remplazar imágenes y texto en archivos de Photoshop de manera rápida y sencilla, y muy útil en proyectos donde tenemos una gran cantidad de imágenes y a cada una le tenemos que asignar nombres o textos distintos, por ejemplo podría ser en portafolios de trabajo, tarjetas de presentación, credenciales, invitaciones o incluso en catálogos de productos (por poner algunos ejemplos).

Para dejar más claro su funcionamiento vamos a hacer un ejercicio rápido para ejemplificar los usos y ventajas que representa esta opción. Lo que haremos es crear 5 archivos con un mismo "layout" pero con diferente contenido, cambiando así en cada uno las fotografías, los pies de foto y detalles de cada una, todo esto desde un solo archivo de Photoshop.

Creamos un documento nuevo. Nosotros haremos uno de 1280x768 px.

Nuestro documento va a estar conformado por 5 Layers: Uno para el fondo que no cambiará, otro de nombre "photo" que será el área donde serán colocadas nuestras distintas fotografías, el siguiente "place" que será un Layer de texto al igual que uno mas que nombraremos como "year". Y hasta arriba de todos uno mas que llamaremos "Layout" que será el que contenga todos nuestros elementos gráficos (plecas, diseño etc) y que no cambiará.