Lectura No. 5. Contextualización. Nombre: Página web DISEÑO DIGITAL 1. Para qué me sirve una animación cuadro por cuadro?

Transcripción

1 Diseño Digital

2 DISEÑO DIGITAL 1 Lectura No. 5 Nombre: Página web Contextualización Para qué me sirve una animación cuadro por cuadro? Este tipo de animaciones son realmente entretenidas para el público espectador y más allá del entretenimiento que puede llegar a producir, es una técnica que literalmente te permite jugar con la creatividad, por qué literalmente? Porque al realizar esta animación tú podrás imaginar una historia con sus respectivos personajes (los cuales pueden ser juguetes, muñecos, muñecos hechos de plastilina, legos, etc.). Este tipo de animaciones es utilizado también en el mundo de la publicidad para realizar pequeños cortometrajes o spots de televisión. Y es la técnica perfecta para cautivar a nuestro target de niños pequeños. Por qué optimizar imágenes? La primera y más importante razón por la cual debemos optimizar las imágenes es para dejar una experiencia satisfactoria a los usuarios. Nosotros lo que queremos siempre es hacer sentir al usuario cómodo y contento, por lo que buscamos proporcionarle imágenes de gran tamaño y que carguen rápido a través de nuestro sitios web. Al optimizar las imágenes que subes a tus sitios web le estás brindando a los usuarios un servicio de calidad, pues ellos podrán ver estas imágenes de forma instantánea y en un tamaño apropiado para el espectador.

3 DISEÑO DIGITAL 2 Introducción al Tema La publicidad es un medio de difusión masivo que suele ser muy costoso para las empresas, sin embargo existen formas sencillas y no muy costosas de hacer publicidad. Una de ellas es la animación de cuadro por cuadro, que no es más que la rápida sucesión de fotos hecha a objetos estáticos con la finalidad de crear una percepción de movimiento. El objetivo final del diseño de páginas web es la creación de bellas y atractivas imágenes que se descarguen lo más rápido posible. Para ello es necesario seleccionar un formato de archivo con la mejor compresión para la imagen y mantener la mayor calidad posible. Este equilibrio es lo que se conoce como optimización, es decir, buscar la proporción correcta de colores, compresión y calidad.

4 DISEÑO DIGITAL 3 Explicación Página web 2.6 Animación cuadro por cuadro Se le conoce como animación cuadro por cuadro a la técnica de mover ágil y velozmente imágenes o fotografías que tienen una secuencia previa, las cuales narran una historia. Estas imágenes o fotos son tomadas a objetos estáticos que simulan estar en movimiento y generando una acción. Esta técnica es también llamada stop motion, foto por foto, o bien, en bajo un contexto cinematográfico se utiliza el término de fotograma por fotograma. Para la elaboración de un stop motion normalmente se usan objetos como juguetes, plastilina, cubos, muñecos o alguna otra cosa que pueda tomar forma mediante el movimiento. La creación de un stop motion es relativamente sencilla, pues no requiere de una gran inversión de dinero, puede hacerse con elementos caseros y no se necesitan muchas personas para su realización, pero eso sí, se requiere de disponibilidad de tiempo, paciencia, concentración y claro, una buena idea. Los pasos para hacer un stop motion puede resumirse en 6: Paso 1: crear tu idea pensando en la historia a desarrollar y los personajes que aparecen en ella. Paso 2: pon tu cámara en un lugar donde puedas usarla sin que ésta se mueva ni un milímetro al momento de realizar las tomas. Paso 3: coloca tus imágenes u objetos frente a la cámara. Paso 4: ahora empezarás a sacar las fotos hasta del más mínimo movimiento que realices en tus objetos/personajes. Paso 5: toma todas las fotos que sean necesarias para que se vean definidos los movimientos que realicen tus objetos/personajes.

5 DISEÑO DIGITAL 4 Paso 6: observa la secuencia de tus fotos de manera rápida y verás cómo transcurre tu historia en cuestión de segundos. Tomado de: para fines educativos 2.7 Optimizar imágenes de bitmap En las páginas web es muy común que encontremos imágenes que fueron subidas con formato GIF y JPEG, esto se debe a que las imágenes guardadas en estos formatos son más fáciles de comprimir y tienen una mayor capacidad de compresión que los otros formatos. Al comprimir una imagen se reduce el tiempo de transferencia a través de Internet. Cuando guardamos imágenes que contienen colores planos con el formato GIF pueden comprimirse de mejor manera al momento de exportarse. Generalmente los archivos más apropiados para guardarse en un formato GIF son los dibujos animados, logotipos, imágenes con áreas transparentes o animaciones.

6 DISEÑO DIGITAL 5 Para optimizar una imagen antes de subirla a la página web puedes descargar un programa gratuito para optimizar imágenes para páginas web, una sugerencia para ello es Compresión selectiva de áreas de un archivo A través de esta función podemos comprimir zonas específicas de nuestra imagen JPEG con diferentes niveles de calidad. Así podremos resaltar las áreas que son de nuestro mayor interés comprimiéndolas con un nivel mayor; mientras que las zonas de menor significancia en la imagen (como es el caso de los fondos) las podemos comprimir con un nivel menor o inferior. Teniendo como resultado una imagen con un tamaño reducido pero que a su vez conserva la calidad de sus zonas más importantes. Como se muestra en el ejemplo siguiente, el área que se encuentra dentro de la línea punteada se está comprimiendo con un nivel de calidad de 90% mientras que la parte de afuera que no se encuentra seleccionada se comprime con un nivel de calidad de 50%. Tomado de ont9.htm para fines educativos

7 DISEÑO DIGITAL 6 Conclusión Como se vio en esta sesión, un stop motion es una táctica entretenida, eficaz y creativa para elaborar spots publicitarios y videos informativos que pueden ir dirigidos a todo tipo de target, pues su realización puede adaptarse a una idea creativa en la cual se narre una historia para adultos o para los pequeños infantes. Podemos implementar un cortometraje en nuestro sitio web creado por un stop motion, para que a través de éste se puedan dar a conocer algunos aspectos de la empresa, como sus características o parte de su historia, pero en una forma subjetiva, es decir mezclando la realidad con un mundo creativo para amenizar la historia y hacerla entretenida para el público visual. Al subir nuestro stop motion a nuestra página web tenemos que buscar la manera de hacer nuestro archivo más ligero, para que el usuario no tenga que esperar mucho tiempo para que se cargue por completo y pueda ser visualizado desde el inicio hasta al final sin interrupciones. Y una forma de alivianar el peso de nuestro stop motion es optimizando nuestras imágenes, buscando un punto de equilibrio entre la proporción correcta de colores, la compresión y la calidad de éstas.

8 DISEÑO DIGITAL 7 Para aprender más Cómo optimizar imágenes bitmap en Photoshop? s/a (2013). Optimizar imágenes para Internet. s/a (2012). Optimizar imágenes para web con Photoshop. Leal, Christian (2009) Compresión selectiva.

9 DISEÑO DIGITAL 8 Actividad de aprendizaje Instrucciones Con la finalidad de poner en práctica los conocimientos teóricos proporcionados en esta sesión, se te pide realizar los siguientes ejercicios propuestos. 1. Elabora un spot publicitario de cualquier producto utilizando la técnica de Stop Motion con una duración mínima de 20 segundos. 2. Crea un documento con la siguiente imagen y optimízala de tal forma que los personajes tengan un ajuste del 80% y lo demás de un 40%.

10 DISEÑO DIGITAL 9 Referencias S.a (2006) Tipos de imágenes para una web. Obtenido de: S.a (2013) Stop motion o animación cuadro por cuadro. Educación continua. Obtenido de: S.a. (2013). Optimización de imágenes web. Obtenido de: