Crear imágenes con animación

Crear imágenes con animación como gifs animados para banners publicitarios, MEMES, botones, divisores y para otros usos es muy sencillo.

Es recomendable usar la menor cantidad de colores posibles para optimizar su tamaño y evite alternar colores muy contrastantes y rápidos que puedan causar mareo, convulsiones y cualquier molestia al usuario.

En Gimp:

Usar GIMP para animar, requiere pensar en cada Capa como un Cuadro que conforma la animación.

Duración de cada cuadro:

Si fuera distinta para algún cuadro, tendríamos que indicarla junto al nombre de la capa en milisegundos y entre paréntesis, por ejemplo si queremos que un cuadro dure un segundo pondríamos al lado del nombre de la capa (1000ms).

Animaciones con transparencias:

Combinar y reemplazar.

Si nuestra imagen está compuesta por capas con transparencias tenemos dos métodos para manejar nuestros cuadros:

  1. Combinar: Yuxtapone las capas mostrando que hay debajo de aquellas con transparencia.
  2. Reemplazar: Reemplaza por completo una capa o cuadro con otro.

Se señala colocando combine para combinar o replace para reemplazar en la capa entre paréntesis al lado del tiempo:

Nombre de la capa(xxxxms)(combine) ó (replace)

Degradados.

Para evitar perder la suavidad en degradados de color sólido a transparencia es recomendable simularla con capas en las que el degradado sea de color sólido al color de fondo.

Previsualizar la animación:

Mediante el Previsualizador podemos en cualquier momento ver como va quedando nuestra animación, abriéndolo en: Filtros > Animación > Reproducir Animación.

Al guardar una animación a color es necesario indexarla, ésto puede hacerse automáticamente al exportar o manualmente en: Imagen > Modo > Indexado (Alt+I).

Exportar gif:

Por último hay que recordar guardar la animación final en: Archivo > Guardar, señalando la extensión .gif y marcando la casilla de “Guardar como animación” y la casilla “Convertir a tonos de gris” si es en blanco y negro o “Convertir a indexada…” si usa todo tipo de colores.

Al exportar se presentan las opciones de:

  • Entrelazar: Carga la imagen de forma progresiva, mostrando distintos niveles de definición o calidad visual con cada pasada, hasta que se completa.
  • Comentario GIF: Espacio para comentar la imagen.
  • Repetir eternamente: reinicia la animación cuando finaliza.
  • Pausa entre cuadro cuando no se especifique: Cuando no se especifica en el nombre de capa ninguna duración todas tomarán la que se especifique aquí.
  • Colocación de cuadros cuando no se especifique: Igual que la anterior pero para elegir entre “Combinar o Reemplazar”.

Optimizar y exportar fotografías y otras imágenes en mapa de bits

Importar las imágenes

Al importar imágenes en mapa de bits a Photoshop o Gimp para incluirlas en un Sitio o diseño Web, es recomendable empezar por:

  • Escanear la fotografía revelada,
  • Escanear los negativos o
  • Importar los archivos de las fotografías desde la cámara digital.

Optimizar imágenes en mapa de bits

Es importante contar con fotografías que cuya corrección de color, contaste y retoque fotográfico sean innecesarios o ya hayan sido aplicados, para como diseñadores Web, enfocarnos en optimización del modelo de color, resolución, ajuste del tamaño y tipo de archivo para Web.

Encuadre

  • Recorte en Gimp:

Para elegir la herramienta de Recorte. Has clic en el botón  en la caja de herramientas o en el menú: Herramientas > Herramientas de transformación > Recortar en la ventana de la imagen.

Cuando cambie el cursor, has clic y arrastra formando un rectángulo que cubra únicamente las partes de la imagen que desees conservar, si tu primera selección no fue de tu agrado, puedes arrastrar las esquinas o bordes del rectángulo para cambiar las dimensiones del área seleccionada y hacer doble clic sobre la imagen para aplicar el recorte.

Sus dimensiones y proporción se muestran en la barra de estado.

Exportar para Web.

  • En Gimp:

Archivo > Exportar como… > Seleccione el tipo de archivo.

  • En Photoshop:

Archivo > Exportar para  Web, seleccione el tipo de archivo desde el menú en la parte superior de la nueva ventana.

Las extensiones recomendadas para publicar las fotografías en Internet son:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

Extensiones recomendadas para compartir originales:

  • PSD: Imágenes a editar en Adobe Photoshop.
  • EPS
  • XCF: Imágenes a editar en Gimp.

Es recomendable que los archivos de imágenes se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Fuente: http://docs.gimp.org/es/

Crear y exportar imágenes vectoriales

Al crear imágenes vectoriales en Inkscape o Illustrator para iniciar el diseño Web, es recomendable empezar por escanear o fotografiar el boceto de la interfaz, para digitalizarla:

  1. Trazándolo con la herramienta: Pluma.
  2. Usando las formas predeterminadas como: polígonos, círculos y líneas para recrear todos sus elementos.

Exportar para Web.

Una vez digitalizada la imagen de la página de inicio y otras páginas con estilos propios, ésta debe ser dividida en secciones que contrendrán solo fondos, texto o imágenes, ésto puede ser visto a más profundidad en el video de ésta sección del VideoTaller.

Muchos programas para diseño presentan el menú: Archivo > Exportar para Web o similares, para hacer más simple la exportación a html, jpg, gif y png a partir de la imagen de interfaz.

Las extensiones recomendadas para publicar las imágenes en Internet son:

  • JPG: Imágenes complejas, que contengan gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores o con animación.
  • PNG: Imágenes que contengan transparencias, de mejor calidad que los .gif.

Es buena práctica mantener los nombres de archivos sin espacios, ni caracteres especiales y en minúsculas.

Compartir los archivos originales editables.

Las extensiones recomendadas para compartir los archivos originales son:

  • SVG.
  • EPS.
  • AI.

Es recomendable que estos archivos se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Formatos de archivo de imagen para Web

Las extensiones de imágenes para Web mas comunes son:

Imágenes en mapa de bits:

Tanto JPEG*, PNG y GIF son formatos para imágenes en mapa de bits o ráster (del inglés raster image). La imagen se representa mediante una cuadrícula de píxeles y no pueden ser aumentadas de tamaño sin que pierdan calidad, resultando en un imágenes que frecuentemente se llaman pixeleadas, pixelizadas o pixelosas.

* Aunque existen 3 variantes del estándar JPEG que comprimen la imagen sin pérdida de resolución: JPEG2000, JPEG-LS y Lossless JPEG, su uso no es generalizado.

En cambio SVG es un formato de imágenes vectorial, éste tipo de imágenes, al no estar conformadas por pixeles, se caracterizan por su capacidad de ser redimensionadas a cualquier tamaño sin que pierdan calidad.