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 así como usar Device Central para comprobar que los archivos se muestran correctamente en la Web.

Acerca de los gráficos 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.

Nota:

Hay muchas plantillas de Illustrator diseñadas especialmente para Internet, incluidas las páginas web y los titulares para Web. Seleccione Archivo > Nuevo de plantilla para seleccionar una plantilla.

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áficorasterizado.

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 zooma lavista 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, realizarpequeñosajustes puede afectar a la forma en que se rasteriza el objeto.

Opción Previsualización de píxeles desactivada (arriba) y activada (abajo)
Opción Previsualización de píxeles desactivada (arriba) y activada (abajo)

Nota:

La cuadrícula en píxeles variará según el origen (0,0) de la regla. Al mover el origen de la regla, Illustrator rasterizará la ilustración de otro modo.

Uso de Adobe Device Central con Illustrator

Device Central permite saber de antemano cómo se verán los archivos de Illustrator en una amplia variedad de dispositivos móviles.

Por ejemplo, un artista gráfico puede usar Illustrator a la hora de diseñar un papel tapiz para teléfonos móviles. Una vez creado el archivo, el artista puede probar el archivo fácilmente en varios tipos de teléfonos. Así, el artista puede realizar ajustes, como alterar el archivo para que se muestre correctamente en varios teléfonos, o crear dos archivos que cubran una amplia gama de tamaños de pantalla de teléfono.

Acceso a Illustrator desde Adobe Device Central

  1. Inicie Device Central.
  2. Seleccione Archivo > Nuevo documento en > Illustrator.

    En Device Central se muestra el panel Nuevo documento con las opciones correctas para crear un nuevo documento móvil en la aplicación seleccionada.

  3. Realice los cambios necesarios, como por ejemplo, seleccionar una versión del reproductor, el tamaño de visualización, la versión de Flash o el tipo de contenido.
  4. Lleve a cabo uno de los procedimientos siguientes:
    • Seleccione la opción de tamaño personalizado para todos los dispositivos seleccionados e indique el ancho y el alto (en píxeles).

    • Seleccione uno o varios dispositivos en la lista Conjunto de dispositivos o en la lista Dispositivos disponibles.

  5. Si ha seleccionado varios dispositivos, Device Central selecciona un tamaño para usted. Si desea seleccionar un tamaño diferente, haga clic en un dispositivo o conjunto de dispositivos diferente.
  6. Haga clic en Crear.

    Se abrirá la aplicación seleccionada con un nuevo documento móvil listo para su edición.

Creación de contenido para dispositivos móviles con Adobe Device Central e Illustrator

  1. En Illustrator, seleccione Archivo > Nuevo.
  2. En Perfil de nuevo documento, seleccione Móvil y Dispositivos.
  3. Haga clic en Device Central para cerrar el cuadro de diálogo de Illustrator y abrir Device Central.
  4. Seleccione un tipo de contenido.

    La lista de dispositivos disponibles que aparece a la izquierda está actualizada y muestra los dispositivos compatibles con el tipo de contenido seleccionado.

  5. En Device Central, seleccione uno o varios dispositivos, o bien un conjunto de dispositivos.

    En función del dispositivo o dispositivos seleccionados, Device Central sugiere uno o varios tamaños de mesa de trabajo para su creación. Para crear un documento cada vez, seleccione uno de los tamaños de documento propuestos (o seleccione la opción de tamaño personalizado para todos los dispositivos seleccionados e indique valores personalizados para el ancho y el alto).

  6. Haga clic en Crear.

    Se abrirá en Illustrator un archivo AI vacío con el tamaño indicado. El nuevo archivo tiene los siguientes parámetros predeterminados:

    • Modo de color: RGB

    • Resolución de rasterizado: 72 ppp

  7. Añada contenido al archivo AI vacío en Illustrator.
  8. Cuando acabe, seleccione Archivo > Guardar para Web y dispositivos.
  9. En el cuadro de diálogo Guardar para Web y dispositivos, seleccione el formato deseado y cambie los ajustes de exportación que necesite.
  10. Haga clic en Device Central.

    En la ficha Device Central Emulator aparecerá un archivo temporal con los ajustes de exportación indicados. Para continuar con las pruebas, haga doble clic en el nombre de un dispositivo diferente en las listas Conjuntos de dispositivos o Dispositivos disponibles.

  11. Si, después de previsualizar el archivo en Device Central, necesita hacer cambios en el archivo, vuelva a Illustrator.
  12. En el cuadro de diálogo Guardar para Web y dispositivos de Illustrator, realice los ajustes necesarios, como seleccionar un formato o una calidad diferentes para la exportación.
  13. Para volver a probar el archivo con la nueva configuración de exportación, haga clic en Device Central.
  14. Cuando esté satisfecho con los resultados, haga clic en Guardar del cuadro de diálogo Guardar para Web y dispositivos de Illustrator.

    Nota:

    Para abrir Device Central desde Illustrator (en lugar de crear y probar un archivo), seleccione Archivo > Device Central.

Sugerencias 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.

Las siguientes sugerencias 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 SGVZ, compruebe que su dispositivo móvil de destino descomprime archivos gzip.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea