Semanas Vectorización 6 y de 7 tipografías Animación en Photoshop. Por fin entenderás y comprenderás la elaboración de gifs animados para páginas web!

Transcripción

1 Semanas Vectorización 6 y de 7 tipografías Semanas 4 y 5 Empecemos! Bienvenidos y bienvenidas a una nueva semana, muy divertida y animada. En la actualidad podemos dar animación y sonido a las imágenes que editamos y/o diseñamos. A lo largo de este tema tendrás la ocasión de poner en práctica las competencias específicas alcanzadas hasta ahora. Para la edición de imágenes debemos adquirir habilidades y destrezas que permitan crear diseños incorporando movimiento y audio. En esta ocasión experimentaremos con las herramientas de animación que nos ofrece Photoshop CS6; aunque el fin principal de este programa es la edición de píxeles, también nos ofrece la herramienta de línea de tiempo, que sirve para crear cuadros de animación, donde cada uno representa una configuración de capas. Por fin entenderás y comprenderás la elaboración de gifs animados para páginas web! Qué sabes de...? Qué es animación? Alguna vez has experimentado una técnica artesanal para realizar animaciones? Conoces los programas de alta tecnología que permiten realizar animaciones? Sabes qué son gif? El reto es... Xavier cursa el 10mo semestre en un CCA del Instituto Radiofónico Fe y Alegría. Decide diseñar una página web para publicitar el pequeño negocio que emprendió hace varios meses. La semana pasada tuvo la oportunidad de crear una fuente tipográfica, con la cual elaboró un logo para representar su empresa; ahora, el facilitador le recomienda animar el boceto, para que sea 227

2 Semana 6 y 7 más atractivo. Junto a tus compañeros y facilitador, ayuda a Xavier a darle movimiento a su logo. Vamos al grano La animación no es más que un proceso para dar movimiento a imágenes, dibujos y textos. Existen muchas formas de animar, desde la manera artesanal hasta la digital, haciendo uso de programas especializados para tal fin. También se puede definir la animación como una ilusión óptica en la que una serie de objetos o dibujos estáticos son vistos secuencialmente a cierta velocidad, creando una sensación de movimiento natural. Existen diferentes técnicas de animación; en el cine y la televisión son usadas con regularidad en: 1. Los dibujos animados, que se crean bosquejando los fotogramas uno por uno. Para lograr un segundo, se necesitan 24 cuadros de fotogramas. Esta fue una de las principales técnicas usadas a principios del siglo XX por los artistas de Disney. El animador debe dibujar cada fotograma en papel y después realizarlo de nuevo con tinta, pintándolo en láminas de acetato. Finalmente, el dibujo se fotografía con una cámara estática. Los fotogramas se colocan en secuencia para dar la ilusión de movimiento. Esta técnica es poco utilizada debido al empleo de la computadora, que es más rápida, lo cual abarata los costos de producción. Figura Animación en volumen. Igual a la anterior, es una animación cuadro por cuadro; en los últimos años se ha popularizado con el nombre en inglés de stop motion. Esta técnica no se emplea para animar dibujos o imágenes planas, sino objetos estáticos e inmóviles colocados delante de una cámara. Consiste en aparentar el movimiento de dichos objetos capturados en los fotogramas. Cada uno debe moverse ligeramente, cambiando de posición en cierta dirección, en relación con los anteriores, cuidando la continuidad de los movimientos que se quieren imitar.

3 Semana 6 y 7 Al hacer la reproducción de los fotogramas, se crea la ilusión óptica de movimiento del objeto. Esta animación de volumen da autentica profundidad de campo, lo que genera una sensación de movimiento convencional, aunque es obtenida fotograma por fotograma y no en tiempo real como una filmación tradicional. Para llevar a cabo este tipo de animación, necesitas la historia ilustrada o storyboard, el cual consiste en un conjunto de ilustraciones mostradas en secuencia, con el objetivo de servir de guía para entender la historia, pre-visualizar una animación o seguir la estructura de una película antes de realizarse o filmarse, además de una cámara fotográfica y un software para editar. Figura 30 En definitiva el stop motion no entra en la categoría del dibujo animado, sino en imágenes con volúmenes creados y fotografiados. La Pixilación es una variante del stop motion en la que los objetos animados son personas y objetos comunes de la vida real. Al igual que en cualquier animación, estos son fotografiados repetidas veces, desplazándose ligeramente entre cada fotografía. Esta es la técnica más usada en la elaboración de video clips. Figura

4 Semana 6 y 7 La animación por computadora, también llamada animación digital, informática o por ordenador, es la técnica que consiste en crear imágenes en movimiento mediante el uso de computadoras. Los gráficos se crean en 3D, aunque el 2D todavía se sigue usando ampliamente para conexiones lentas y animaciones sencillas. Los diseños se elaboran con la ayuda de programas de diseño. En este caso, las imágenes no se toman sino que se producen, es decir, se construyen individualmente, por lo cual se debe cumplir con el estándar del cine. Figura 32 Una película posee 24 fotogramas por segundo, pero no necesariamente son diferentes, a veces suelen repetirse uno o varios. En la actualidad existen diversos programas de animación; el más usado es After Effects, el cual posee una aplicación para la realización de gráficos profesionales en movimiento en 2D y 3D. Además, permite el montaje de videos agregando efectos especiales audiovisuales constituidos en la superposición de capas. Este software se basa en la línea del tiempo, al igual que el software Autodesk Combustion y EyeonFusion. De igual manera, Adobe Photoshop CS6 posee aplicaciones útiles para dar movimiento, además de contar con la línea del tiempo para las animaciones básicas, poniéndoles ciertos efectos empleando After Effects. Esta función es el punto de partida para la edición de videos y de alguna forma sustituye otros programas como los antes mencionados. Incluye la creación, edición, segmentación, adición de pistas de audio y transiciones, mediante el método sencillo de arrastrar y soltar con un clic. Además, al tener todas las herramientas de edición de imagen, ofrece una gran cantidad de opciones artísticas. 230 Este programa es ideal para la elaboración de gifs animados con letras e imágenes, para lo cual es necesario seguir los siguientes pasos:

5 Semana 6 y 7 1. Abrir Adobe Photoshop CS6. Luego, en un formato de 20x12 cm, abrir un nuevo archivo con una resolución de 200 píxeles. Figura En la opción Ventana haz clic en Línea del tiempo para que se despliegue en la parte inferior de la pantalla. Figura

6 Semana 6 y 7 3. Seguidamente crea un fondo de tu preferencia con el texto que desees presentar en gif. Aplícale los estilos de capa que quieras para hacerlo más atractivo. Figura Elabora el mismo procedimiento en un archivo distinto pero con las mismas medidas. Escribe aquí otras palabras o coloca la imagen de tu preferencia. Figura

7 Semana 6 y 7 5. Ahora tienes dos archivos distintos; haz clic en la opción que está en la esquina de la línea del tiempo y selecciona Copiar cuadro. Figura Abre el otro archivo en la misma opción a la anterior, ubicada en la esquina de la línea del tiempo; haz clic en Pegar cuadro; se desplegará una ventana con el mismo nombre; presiona la opción Pegar; luego escoge Enlazar capas añadidas para que se peguen todas. Figura

8 Semana 6 y 7 7. En el botón Reproducción ya se puede visualizar el gif. Para controlar el tiempo, haz clic en la flecha donde señala los segundos y selecciona el retardo de tiempo que desees. Figura Una vez que se controle el tiempo, se pueden duplicar las capas para llegar a un segundo o más, en la opción Duplicar los cuadros seleccionados. Figura Al visualizar el gif y definido el tiempo, selecciona la opción Guardar para web. Al desplegarse la ventana, espera que cargue, para luego escoger el lugar donde lo archivarás. Esta es una forma sencilla y rápida de elaborar un gif animado. También puedes practicar con los estilos de capas e ir duplicando de seis en seis, para luego hacer los cambios. Puedes cambiar en las capas el color del contorno de las letras; al ejecutar la animación, se verá el efecto de variación de los colores. 234

9 Semana 6 y 7 Para saber más Para profundizar en lo estudiado durante estas semanas, te recomendamos visitar las siguientes direcciones web: Aplica tus saberes Adobe Photoshop CS6 en un programa muy versátil. Cada vez se incorporan nuevas herramientas útiles y artísticas que resuelven problemas gráficos cotidianos. A partir de lo estudiado, elabora dos gifs haciendo uso de las herramientas de animación, línea del tiempo, estilos de capas, fondos, imágenes, líneas, texturas, entre otros. Practica con estas herramientas para descubrir los efectos que se pueden lograr y luego utilizar los gifs animados para páginas web o pantallas led de publicidad exterior. Las pantallas led que actualmente se ubican en avenidas, son utilizadas para hacer publicidad; manejar el Adobe Photoshop CS6 te permitirá crear excelentes diseños para ser reproducidos en dichos monitores. Comprobemos y demostremos que Haz uso de la tipografía que vectorizaste en las semanas 4 y 5. Realiza un gif empleando tu nombre o el de tu futura empresa. Sincroniza los tiempos para que tengan una duración mínima de un segundo o el tiempo que consideres necesario. Presenta a tu facilitador el gif diseñado, explicando el procedimiento seguido para producir tu diseño. Luego, intercambia opiniones con tus compañeros, tratando de establecer el tiempo y la cantidad de capas adecuadas para el diseño de un gif empleando Adobe Photoshop CS6. 235