Optimizar y guardar imágenes en formato GIF
Después de crear una animación en Photoshop, hay que guardarla en uno de los formatos disponibles, uno de los cuales es GIF. La peculiaridad de este formato es que está pensado para ser visualizado (reproducido) en un navegador.
Si estás interesado en otras opciones para guardar animaciones, te recomendamos que leas este artículo:
Lección: Cómo guardar un vídeo en Photoshop
El proceso de creación GIF se describió en una lección anterior, pero hoy hablaremos de cómo guardar el archivo como un GIF Y sobre los ajustes de optimización.
Lección: Crear una animación sencilla en Photoshop
Guardar GIFs
Empecemos repitiendo el material y familiarizándonos con la ventana de configuración de guardado. Se abre haciendo clic en «Guardar para la web». en el menú «Archivo»..
La ventana consta de dos partes: un bloque de vista previa
y el bloque de configuración.
Vista previa de la unidad
El número de opciones de vista previa se puede seleccionar en la parte superior del bloque. En función de sus necesidades, puede seleccionar el ajuste deseado.
La imagen de cada ventana, excepto la original, se ajusta por separado. Esto es para que usted pueda seleccionar la mejor opción.
En la parte superior izquierda del bloque hay un pequeño conjunto de herramientas. Sólo vamos a utilizar «Mano». и «Escala»..
Por medio de «Manos». puede mover la imagen dentro de la ventana seleccionada. La selección también se realiza con esta herramienta. «Zoom» realiza la acción del mismo nombre. También puede acercarse y alejarse con los botones de la parte inferior del bloque.
Justo debajo hay un botón con la leyenda «Vista».. Abre la opción seleccionada en el navegador por defecto.
En la ventana del navegador, además de un conjunto de opciones, también podemos obtener Código HTML gifs.
El bloque de ajuste.
En este bloque se realizan los ajustes de la imagen, vamos a considerarlo en detalle.
- Esquema de colores. Este ajuste determina qué tabla de colores indexada se aplicará a la imagen durante la optimización.
- Percepcióno simplemente «esquema perceptivo». Cuando se aplica, Photoshop crea una tabla de colores basada en los tonos actuales de la imagen. Según los desarrolladores, esta tabla es lo más parecido a cómo ve los colores el ojo humano. Además, es lo más parecido a la imagen original y los colores se conservan al máximo.
- Selectivo es similar al anterior, pero utiliza predominantemente colores seguros para la web. Aquí también se hace hincapié en mostrar tonos cercanos al original.
- Adaptable. En este caso, la tabla se crea a partir de los colores que aparecen con más frecuencia en la imagen.
- Limitado. Consta de 77 colores, algunas muestras de los cuales se sustituyen por el blanco en forma de punto (grano).
- Ordenado por. La selección de este patrón le da la oportunidad de crear su propia paleta.
- Blanco y negro. Este cuadro utiliza sólo dos colores (blanco y negro), también utilizando la arenilla.
- En escala de grises.. Aquí se aplican diferentes 84 niveles de escala de grises.
- MacOS и Windows. Estas tablas están hechas en base a las peculiaridades de la visualización de imágenes en los navegadores bajo estos sistemas operativos.
He aquí algunos ejemplos de aplicaciones de los esquemas.
Como puede ver, las tres primeras muestras tienen una calidad bastante aceptable. A pesar de que visualmente son casi indistinguibles el uno del otro, estos esquemas funcionarán de forma diferente en distintas imágenes.
- El número máximo de colores en la tabla de colores.
El número de tonos de una imagen afecta directamente a su peso y, por tanto, a su velocidad de carga en el navegador. El valor más utilizado es 128ya que este ajuste casi no afecta a la calidad, a la vez que reduce el peso del gif.
- Colores de la web. Este ajuste establece la tolerancia con la que se convierten las tonalidades a colores equivalentes de la paleta Web segura. El peso del archivo está determinado por el valor fijado por el deslizador: un valor más alto significa un archivo más pequeño. Cuando ajuste los colores de la web, no se olvide también de la calidad.
Ejemplo:
- El difuminado permite suavizar las transiciones entre los colores mezclando las tonalidades contenidas en la tabla de indización seleccionada.
El ajuste también ayuda, en la medida de lo posible, a preservar los gradientes y la integridad de las zonas monocromas. Cuando se aplica el dithering, el peso del archivo aumenta.
Ejemplo:
- Transparencia. Formato GIF Sólo ite píxeles completamente transparentes, o completamente opacos.
Este parámetro, sin ajustes adicionales, muestra mal las líneas curvas, dejando escaleras de píxeles.
El ajuste se llama «Mate». (En algunas revisiones. «Kaima».). Ajusta la mezcla de los píxeles de la imagen con el fondo de la página en la que se ubicará. Para una mejor visualización, seleccione un color que coincida con el color de fondo del sitio.
- Entrelazado. Uno de los más útiles para la configuración de la web. En caso de que el archivo tenga un peso importante, permite mostrar la imagen en la página de una sola vez, mejorando su calidad mientras se carga.
- La conversión sRGB ayuda a conservar al máximo los colores originales de la imagen al guardarla.
Configuración «Transparency Dithering». degrada significativamente la calidad de la imagen, y sobre el parámetro «Pérdidas». hablaremos en la parte práctica de la lección.
Para comprender mejor el proceso de configuración de un gif guardado en Photoshop, es necesario practicar.
Practica
El objetivo de la optimización de imágenes para la web es reducir al máximo el peso del archivo manteniendo la calidad.
- Después de procesar la imagen, se va al menú «Archivo – Guardar para la web».
- Ajuste del modo de visualización «4 opciones»..
- A continuación, hay que hacer una de las variantes lo más parecida posible al original. Que sea la imagen a la derecha del original. Esto se hace para estimar el tamaño del archivo con la máxima calidad.
Los ajustes de los parámetros son los siguientes:
- Esquema de colores «Selectivo»..
- «Colores». – 265.
- «Vacilación». – «Al azar»., 100 %.
- Desmarcamos la casilla junto al parámetro «Entrelazado».ya que el volumen final de la imagen será bastante pequeño.
- «Colores de la web». и «Pérdidas». – Cero.
Comparemos el resultado obtenido con el original. En la parte inferior de la ventana de muestra podemos ver el tamaño actual del gif y su velocidad de descarga a la velocidad especificada de Internet.
- Vayamos a la imagen que está debajo de la que acabamos de montar. Intentemos optimizarlo.
- Dejaremos el esquema sin modificar.
- Reducimos el número de colores a 128.
- El valor es . «Vacilación». hasta el 90%.
- Colores de la web no tocar, ya que en este caso no nos ayudará a conservar la calidad.
El tamaño del gif ha bajado de 36,59KB a 26,85KB.
- Como ya hay algo de grano y pequeñas imperfecciones en la imagen, vamos a intentar ampliarla «Pérdidas».. Este parámetro define el nivel permisible de pérdida de datos durante la compresión GIF. Cambia el valor a 8.
Hemos conseguido reducir aún más el tamaño del archivo, pero perdiendo un poco de calidad. El gif pesa ahora 25,9 kilobytes.
En total hemos conseguido reducir el tamaño de la imagen en unos 10KiB, lo que supone más de un 30%. Es un resultado bastante bueno.
- Los siguientes pasos son bastante sencillos. Pulsamos el botón «Guardar»..
Elige un lugar para guardarlo, dale un nombre y vuelve a hacer clic.Guardar»..
Tenga en cuenta que existe la posibilidad, junto con GIF crear y HTML El documento en el que se incrustará nuestra imagen. Para ello es mejor elegir una carpeta vacía.
El resultado será una página y una carpeta con la imagen.
Consejo: Al nombrar un archivo, procure no utilizar caracteres cirílicos, ya que no todos los navegadores son capaces de leerlos.
Esta es la lección sobre cómo guardar una imagen en GIF Completado. En él descubrimos cómo optimizar un archivo para publicarlo en Internet.
Nos alegramos de haber podido ayudarle con su problema.
Nuestros especialistas tratarán de responder con la mayor rapidez posible.
¿Le ha ayudado este artículo?