Share
El propósito de la función Guardar para Web en Adobe Illustrator es optimizar los gráficos para su uso en un sitio web u otra pantalla, como un teléfono de tableta. La palabra "optimizar" se refiere al equilibrio óptimo entre tamaño de archivo y calidad. Queremos archivos de tamaño pequeño para que se carguen rápidamente en una página web, pero no queremos sacrificar su apariencia. Save for Web le permite obtener una vista previa de cómo se verá un gráfico vectorial optimizado, para que pueda elegir el mejor compromiso.
En este artículo, repasaré los formatos de archivo disponibles en Guardar para Web y te mostraré qué formatos son los más adecuados para diferentes tipos de ilustraciones..
Accede a la Guardar para Web diálogo bajo el Expediente menú. Save for Web es casi una aplicación en sí misma, y la ventana de diálogo ocupa la mayor parte de su pantalla.
Puede elegir obtener una vista previa de su obra de arte de una de las tres maneras. Simplemente puede mostrar el original solo. Sin embargo, esto parece bastante inútil, porque probablemente querrá ver cómo se verá el gráfico una vez que esté optimizado. Puede mostrar la vista previa optimizada solo o puede elegir 2-Up, que le dará vistas previas de lado a lado. Puede hacer clic en cualquiera de los paneles para ajustar su configuración. En la imagen de abajo, el original está a la izquierda, y la versión optimizada (en este caso, como un GIF) está a la derecha.
Puede ajustar el tamaño de la vista previa en el menú desplegable en la parte inferior izquierda, y también puede usar atajos de teclado conocidos como Comando / Control-0 para encajar la obra de arte en la ventana, o Comando / Control-plus o menos para aumentar o disminuir el aumento.
Haciendo clic en el Avance botón abrirá el gráfico optimizado en su navegador predeterminado. Si desea ver cómo se ve en otros navegadores, puede agregar más haciendo clic en el ícono del pequeño globo al lado del botón Vista previa.
Una de las secciones más importantes de la interfaz de Guardar para Web es el tamaño del archivo. Debajo de cada vista previa está el tipo de archivo y su tamaño respectivo. Así que en la imagen de abajo, el EPS original está a la izquierda, con un tamaño de archivo de 2.44M. El GIF optimizado está a la derecha, con un tamaño de archivo mucho más pequeño de aproximadamente 39K. Dado que el objetivo de Save for Web es encontrar el equilibrio ideal entre tamaño y calidad, verás estos números a menudo.
GIF es uno de los formatos más antiguos y más utilizados en la Web. Es ideal para imágenes con áreas de color plano, como en este ejemplo. El espacio de color GIF es color indexado. Esto le permite especificar un número exacto de colores en la tabla de colores, para que pueda usar solo los que necesita, reduciendo así el tamaño total del archivo..
El diálogo Guardar para Web tiene varios ajustes preestablecidos de GIF. Elija diferentes configuraciones y vigile la imagen y el tamaño del archivo resultante. En la imagen de abajo, he usado un preset que tiene 128 colores. Como puede ver, la imagen se ve bien y el tamaño del archivo es 37.72K.
En el siguiente ejemplo, he elegido solo 8 colores. Usted puede ver que el tamaño del archivo es ahora 23.3K. Es un ahorro significativo, pero la imagen está empezando a perder calidad. Los bordes son ásperos porque no hay suficientes colores para completar las transiciones entre cada forma. Aunque solo hay cinco colores en la ilustración (tres tonos de azul, amarillo y blanco), Illustrator utiliza más colores en el proceso de suavizado para que los bordes y las curvas aparezcan suaves..
Los colores GIF se pueden restringir a aquellos que se consideran "seguros para la Web". Esto no es realmente una preocupación en estos días, ahora que los monitores pueden mostrar millones de colores, pero hubo un momento en que se aconsejó a los diseñadores usar solo los 216 colores que compartían los sistemas Windows y Macintosh. Entonces, si quisiera asegurarse de que su gráfico tuviera el mismo aspecto en cada plataforma, limitaría sus colores a esa paleta. En el siguiente ejemplo, he usado el Paleta web predefinido, y puede ver cómo el color azul claro ha cambiado a un azul verdoso.
Un GIF puede ser blanco y negro, y usa algo llamado interpolación para simular un tono continuo. Puedes elegir diferentes métodos de interpolación, pero todos tienen un aspecto decididamente de la década de 1980..
Los GIFs soportan un nivel de transparencia. Esto significa que cada píxel es sólido o completamente transparente: no utilizarías un GIF para una imagen con una sombra suave o un degradado transparente.
Junto a la casilla de verificación Transparencia, puede elegir un color mate. Esto agregará un ligero contorno alrededor de la imagen en ese color. Entonces, si está colocando el GIF en un fondo de color, puede seleccionar el mismo color que el color mate. De esta manera la transición entre el gráfico y el fondo aparecerá suave.
Puede elegir recortar la imagen a la mesa de trabajo, lo que hará que las dimensiones en píxeles del gráfico guardado sean las mismas que la mesa de trabajo de Illustrator. O puede optar por dejar esta casilla sin marcar, que recortará la imagen a los límites del gráfico vectorial. Esta es la configuración que probablemente usará la mayor parte del tiempo, ya que no hay necesidad de transparencia adicional alrededor de la imagen. El tamaño del archivo resultante también será más pequeño.
En la sección Tamaño de imagen, puede optar por reducir o ampliar el gráfico optimizado. La nomenclatura es un poco ambigua aquí. No se refiere al tamaño de archivo de la imagen en kilobytes, sino a las dimensiones en píxeles, expresadas como ancho y alto.
Aquí es donde Illustrator tiene una ventaja sobre un raster o una aplicación basada en píxeles como Photoshop. Si amplía la imagen para obtener un resultado optimizado, Illustrator utiliza la información vectorial en el archivo para la ampliación, y el gráfico resultante es nítido y suave. Si tuviera que usar Guardar para Web en Photoshop e intentar ampliar una imagen de trama, sin embargo, la ilustración ampliada se vería borrosa..
Debajo de los campos Tamaño de imagen hay un menú desplegable donde puede seleccionar el método de optimización. Si su gráfico tiene mucho texto, puede elegir Tipo optimizado. En los ejemplos a continuación, puede ver la diferencia entre la imagen que está optimizada y la que no tiene optimización aplicada.
La Tabla de colores contiene muestras para cada color que se incluirá en el gráfico optimizado. En realidad, puede hacer doble clic en una muestra y cambiar su color. Aquí he cambiado el amarillo por el rosa. Puede ver que la muestra ahora es mitad amarilla y mitad rosa en la Tabla de colores, y cuando se coloca sobre ella, la información sobre herramientas le proporciona el desglose de RGB para el original y para el nuevo color. Esto podría ser útil si está guardando una serie de la misma imagen, y quiere que un elemento sea de un color diferente en cada versión. Al reemplazar el color en Guardar para Web, no tiene que alterar el vector original.
Debajo de la Tabla de colores hay una serie de iconos que le permiten ajustar aún más el color. Cuando selecciona una muestra, puede hacerla transparente, confinarla en un color seguro para la Web, bloquearla o eliminarla. Un diamante dentro de una muestra de color indica un color seguro para la Web, y cuando se desplaza sobre él, se muestra el código hexadecimal.
Hay algunas configuraciones y prácticas más que puede utilizar con GIF. Por ejemplo, puede elegir entrelazar el GIF, que cargará la imagen en varias pasadas en un navegador. Este método se desarrolló en los días en que la mayoría de las personas tenían conexiones de acceso telefónico lentas. Un gráfico entrelazado parece cargar más rápido de lo que realmente hace. No hay muchas razones para usarlo hoy, especialmente con un archivo relativamente pequeño como un GIF. Las otras opciones en la configuración de GIF son altamente especializadas o algo anticuadas, por lo que no dedicaré más tiempo a ellas. Pasemos a los otros formatos.!
El formato PNG (algunas personas dicen "P-N-G" y otras lo pronuncian "ping") a menudo es una mejor alternativa a GIF. PNG-8 es similar a GIF en que usa 256 colores, admite transparencia de 1 bit y puede usar dithering. El "8" significa que esta es una imagen de 8 bits. La principal diferencia entre los dos es la forma en que comprimen la información de la imagen. GIF utiliza un método de "pérdida", lo que significa que algunos de los datos se descartan (o se "pierden") para lograr un tamaño de archivo más pequeño. El método PNG no tiene pérdidas, pero debido a su algoritmo de compresión, el tamaño de los archivos resultantes suele ser significativamente más pequeño que un GIF. Entonces, ¿por qué usarías un GIF si PNG es mejor? Bueno, no todos los navegadores admiten el formato PNG (¡Te estoy mirando a ti, Internet Explorer 6!). Pero a medida que más personas se actualizan a navegadores más nuevos, esto no es un gran problema. Así que adelante, pruebe el PNG-8 en imágenes que normalmente requieren un GIF. La mayoría de las opciones para PNG-8 son las mismas que para GIF en la sección anterior.
JPEG fue desarrollado originalmente para comprimir fotos, y por lo tanto es más adecuado para vectores con tonos continuos. Los archivos JPEG son de 24 bits y, por lo tanto, admiten más de 16 millones de colores. La compresión JPEG tiene pérdidas y la imagen se degradará si intenta comprimirla demasiado. En la imagen a continuación, puede comenzar a ver "artefactos" de JPEG en bloque que no son deseables. Elija una configuración de mayor calidad hasta que obtenga un gráfico de mejor aspecto con un tamaño de archivo aceptable.
Puede elegir cargar la imagen en varias pasadas seleccionando Progresivo, y puede difuminar la imagen para mitigar algunos de los artefactos. Ninguno de estos métodos es ideal, ni realmente necesario. Son retrocesos a los días de conexiones de acceso telefónico y máquinas más lentas..
Al igual que con GIF y PNG-8, puede especificar una dimensión de píxel en el campo Tamaño de imagen, seleccionar el método de optimización y elegir si desea recortar la imagen a la mesa de trabajo. No hay una tabla de colores, porque los archivos JPEG están en modo RGB, no en color indexado.
JPEG es muy adecuado para imágenes con tono continuo, pero no es tan bueno para gráficos con áreas más grandes de color plano. En el siguiente ejemplo, el JPEG está a la derecha. Incluso con la configuración de calidad más alta, se ve peor que el GIF y muestra algunos artefactos.
PNG-24 es, como su nombre indica, una imagen de 24 bits. De alguna manera, combina lo mejor de ambos mundos de GIF y JPEG, y es un formato superior. Al igual que JPEG, puede soportar millones de colores. PNG-24 también puede contener transparencia alfa, por lo que puede usarse para gráficos que tienen bordes borrosos y sombras transparentes. Sin embargo, todos esos colores y transparencias tienen un precio en un tamaño de archivo más grande. En el siguiente ejemplo, puede ver que un JPEG guardado en la configuración alta es de casi 22K, mientras que el PNG es de unos 95K. Pero la transparencia le permite colocar el gráfico PNG-24 en un fondo estampado o texturado. Entonces, si necesita ese tipo de flexibilidad, PNG-24 es el camino a seguir..
Espero que tenga una mejor comprensión de los formatos de archivo en la función Guardar para Web de Illustrator. Cada formato tiene sus ventajas y desventajas, pero con algunas pruebas cuidadosas, puede encontrar la mejor configuración para su obra de arte. Esta es una herramienta poderosa y puede hacer que su trabajo en la Web sea mucho más fácil y rápido. Una vez que determine la configuración ideal para sus imágenes, puede guardarlas como un ajuste preestablecido personalizado. Luego, puede procesar por lotes carpetas completas llenas de imágenes similares en un instante..
Los gráficos vectoriales en este artículo se compraron en GraphicRiver: Janitor vector, pumpkin vector.
Accentsconagua