Métodos óptimos para crear gráficos web

Adobe Illustrator proporciona una gran variedad de herramientas para crear diseños de páginas web, así como para crear y optimizar gráficos Web. Por ejemplo, utilice colores compatibles con la Web, equilibre la calidad de la imagen y el tamaño de archivo y elija el formato de archivo más adecuado para el gráfico. Los gráficos web pueden aprovechar los sectores y mapas de imágenes, y puede utilizar las diferentes opciones de optimización para comprobar que los archivos se muestran correctamente en la Web.

Al diseñar gráficos para Internet, debe tener en cuenta aspectos diferentes a los del diseño de gráficos para imprimir. 

Para facilitar la toma de decisiones sobre los gráficos web, tenga en cuenta las tres pautas siguientes:

Uso de colores compatibles con Web.

El color suele ser un aspecto fundamental de la ilustración. Sin embargo, los colores que se ven en la mesa de trabajo no son necesariamente iguales que los colores que van a aparecer en un navegador web de otros equipos. Puede evitar el tramado (método de simulación de colores no disponibles) y otros problemas relacionados con el color tomando dos medidas de precaución al crear gráficos web. En primer lugar, trabaje siempre en modo de color RGB. En segundo lugar, utilice colores compatibles con Web.

Equilibre la calidad de la imagen y el tamaño de archivo.

La creación de archivos de gráficos de pequeño tamaño es esencial para poder distribuir imágenes por Internet. Con archivos más pequeños, los servidores web pueden almacenar y transmitir imágenes de forma más eficaz y los visores pueden descargar imágenes más rápidamente. Puede ver el tamaño y el tiempo de descarga estimado de un gráfico web en el cuadro de diálogo Guardar para Web y dispositivos.

Elija el formato de archivo más adecuado para el gráfico.

Los distintos tipos de gráficos deben guardarse en formatos de archivo diferentes para que se visualicen de manera óptima y poder crear un archivo de tamaño adecuado para Internet. Para obtener más información sobre formatos específicos, consulte Opciones de optimización de gráficos web.

Acerca del modo Previsualización de píxeles

Para permitir a los diseñadores web crear diseños con precisión de píxeles, se ha añadido en Illustrator la propiedad de pixelado perfecto. Cuando se activa la propiedad de pixelado perfecto para un objeto, todos los segmentos verticales y horizontales del objeto se alinean con la cuadrícula de píxeles y se obtiene una apariencia nítida de los trazos. Si esta propiedad se define para un objeto y se realiza cualquier nueva transformación, se vuelve a alinear con la cuadrícula de píxeles según las nuevas coordenadas. Para activar esta propiedad, seleccione Alinear con cuadrícula de píxeles en el panel Transformar. Illustrator también dispone de la opción Alinear nuevos objetos con cuadrícula de píxeles en el nivel del documento y está activada por defecto en los documentos web. Cuando esta propiedad está activada, los nuevos objetos que dibuja tienen la propiedad de pixelado perfecto por defecto.

Para obtener más información, consulte Dibujo de trazados con pixelado perfecto para flujos de trabajo web.

Cuando guarde una ilustración en formato de mapa de bits, por ejemplo, JPEG, GIF o PNG, Illustrator rasteriza dicha ilustración a 72 píxeles por pulgada. Es posible previsualizar el modo en que los objetos aparecerán una vez se hayan rasterizado; para ello, seleccione Ver > Previsualización de píxeles. Esto resulta especialmente útil para controlar la colocación precisa, el tamaño y el suavizado de los objetos de un gráfico rasterizado .

Para comprender el modo en que Illustrator divide los objetos en píxeles, abra un archivo que contenga objetos vectoriales, seleccione Ver > Previsualización de píxeles y aumente la ilustración para ver los píxeles individuales. La colocación de píxeles se determinada por una cuadrícula de píxeles que divide la mesa de trabajo en incrementos de 1 punto (1/72 de pulgada). Puede visualizar la cuadrícula de píxeles si acerca el zoom a la vista 600%. Si mueve, añade o transforma un objeto, éste se ajusta a la cuadrícula de píxeles. Como resultado, desaparecerá cualquier suavizado que se encuentre en los bordes “ajustados” del objeto (normalmente el borde izquierdo y el superior). Deseleccione el comando Ver > Ajustar al píxel y mueva el objeto. Esta vez, podrá colocar el objeto entre las líneas de cuadrícula. Observe el modo en que esto afecta al suavizado del objeto. Como puede ver, realizar pequeños ajustes puede afectar a la forma en que se rasteriza el objeto.

Consejos para la creación de imágenes de Illustrator para dispositivos móviles

Si desea optimizar el contenido gráfico para dispositivos móviles, guarde las imágenes creadas en Illustrator en cualquier formato SVG, como SVG‑t, diseñado especialmente para dispositivos móviles.

Los siguientes consejos le ayudarán a garantizar que las imágenes creadas en Illustrator se muestren correctamente en dispositivos móviles:

• Utilice el estándar SVG para crear contenido. El uso de SVG para publicar gráficos vectoriales en dispositivos móviles permite obtener un tamaño de archivo reducido, visualización uniforme, excelente control cromático, posibilidad de aplicar el zoom y texto editable (en el código fuente). Además, dado que el formato SVG se basa en XML, puede incorporar funciones de interactividad a las imágenes, como resaltado, información de herramientas, efectos especiales, sonido y animaciones.

• Trabaje con las dimensiones definitivas de sus dispositivos móviles desde el principio. Si bien SVG es ampliable, es recomendable trabajar con el tamaño correcto para garantizar que los gráficos finales presenten la calidad y el tamaño adecuados para los dispositivos de destino.

• Configure el modo de color de Illustrator como RGB. El formato SVG se muestra en dispositivos de rasterización RGB, como monitores.

• Para reducir el tamaño de archivo, intente disminuir el número de objetos (grupos incluidos) o hacer el archivo menos complejo (con menos puntos). Al utilizar menos puntos, se reduce notablemente la cantidad de información textual necesaria para describir las imágenes del archivo SVG. Para reducir puntos, seleccione Objeto > Trazado > Simplificar y pruebe diferentes combinaciones hasta encontrar un equilibrio entre calidad y número de puntos.

• Procure utilizar símbolos cuando sea posible. Los símbolos definen los vectores que describen un objeto una sola vez, en lugar de varias veces. Esto resulta de gran utilidad si las imágenes contienen objetos como fondos de botones que se han usado en otras ocasiones.

• Al animar gráficos, limite el número de objetos y trate de reutilizar objetos en la medida de lo posible para reducir el tamaño de archivo. Aplique animaciones a grupos de objetos y no a objetos sueltos para evitar la repetición de códigos.

• Considere la posibilidad de usar SVGZ, la versión comprimida (mediante gzip) de SVG. La compresión puede reducir notablemente el tamaño de archivo, en función del contenido del mismo. Por lo general, el texto se puede comprimir mucho, pero el contenido con codificación binaria, como las imágenes rasterizadas incrustadas (archivos JPEG, PNG o GIF), no puede comprimirse demasiado. Los archivos SVGZ pueden descomprimirse con cualquier aplicación que expanda archivos comprimidos con gzip. Para sacarle el máximo partido a SVGZ, compruebe que su dispositivo móvil de destino descomprime archivos gzip.