Guía del usuario Cancelar

Métodos óptimos para crear gráficos web

  1. Guía del usuario de Illustrator
  2. Descubra Illustrator
    1. Introducción a Illustrator
      1. Novedades de Illustrator
      2. Preguntas habituales
      3. Requisitos del sistema de Illustrator
      4. Illustrator para Apple Silicon
    2. Espacio de trabajo
      1. Conceptos básicos del espacio de trabajo
      2. Aprenda más rápido con el panel Descubrir de Illustrator
      3. Creación de documentos
      4. Barra de herramientas
      5. Métodos abreviados de teclado predeterminados
      6. Personalizar métodos abreviados de teclado
      7. Introducción a las mesas de trabajo
      8. Organizar mesas de trabajo
      9. Personalizar el espacio de trabajo
      10. Panel Propiedades
      11. Configuración de preferencias
      12. Espacio de trabajo táctil
      13. Compatibilidad con Microsoft Surface Dial en Illustrator
      14. Deshacer ediciones y administrar el historial del diseño
      15. Rotar vista
      16. Reglas, cuadrículas y guías
      17. Accesibilidad en Illustrator
      18. Modo seguro
      19. Modo de visualización de la ilustración
      20. Uso de Touch Bar con Illustrator
      21. Archivos y plantillas
    3. Herramientas en Illustrator
      1. Herramientas de un vistazo
      2. Selección de herramientas
        1. Selección
        2. Selección directa
        3. Selección de grupos
        4. Varita mágica
        5. Lazo
        6. Mesa de trabajo
      3. Herramientas de navegación
        1. Mano
        2. Rotar vista
        3. Zoom
      4. Herramientas de pintura
        1. Degradado
        2. Malla
        3. Creador de formas
      5. Herramientas de texto
        1. Texto
        2. Texto en trazado
        3. Texto vertical
      6. Herramientas de dibujo
        1. Pluma
        2. Añadir Punto de ancla
        3. Eliminar Puntos de ancla
        4. Punto de ancla
        5. Curvatura
        6. Segmento de línea
        7. Rectángulo
        8. Rectángulo redondeado
        9. Elipse
        10. Polígono
        11. Estrella
        12. Pincel
        13. Pincel de manchas
        14. Lápiz
        15. Shaper
        16. Sector
      7. Modificación de herramientas
        1. Rotar
        2. Reflejar
        3. Escala
        4. Distorsionar
        5. Anchura
        6. Transformación libre
        7. Cuentagotas
        8. Fusión
        9. Borrador
        10. Tijeras
        11. Dimensión
    4. IA generativa (no disponible en China continental)
      1. Generar un gráfico vectorial con una indicación de texto
      2. Cambiar el color de la ilustración con una indicación de texto
    5. Acciones rápidas
      1. Texto retro
      2. Texto con resplandor de neón
      3. Texto de la vieja escuela
      4. Volver a colorear
      5. Convertir boceto en vector
  3. Illustrator en la web (beta)
    1. Información general de Illustrator en la web (beta)
    2. Preguntas frecuentes sobre Illustrator en la web (beta)
    3. Preguntas frecuentes sobre la solución de problemas
    4. Métodos abreviados de teclado de Illustrator en la web (beta)
    5. Crear y combinar formas en la web
    6. Añadir y editar texto en la web
    7. Aplicar colores y degradados en la web
    8. Dibujar y editar trazados en la web
    9. Trabajar con documentos en la nube en la web
    10. Invitar a colaboradores a editar en la web
  4. Illustrator para iPad
    1. Presentación de Illustrator para iPad
      1. Información general sobre Illustrator para iPad
      2. Preguntas frecuentes de Illustrator para iPad
      3. Requisitos del sistema | Illustrator para iPad
      4. Lo que puede o no puede hacer con Illustrator para iPad
    2. Espacio de trabajo
      1. Espacio de trabajo de Illustrator para iPad
      2. Métodos abreviados y gestos táctiles
      3. Métodos abreviados de teclado de Illustrator para iPad
      4. Ajustar la configuración de la aplicación
    3. Documentos
      1. Usar documentos en Illustrator para iPad
      2. Importar documentos de Photoshop y Fresco
    4. Seleccionar y organizar objetos
      1. Crear objetos repetidos
      2. Fusionar objetos
    5. Dibujo
      1. Dibujar y editar trazados
      2. Dibujar y editar formas
    6. Texto
      1. Trabajar con texto y fuentes
      2. Crear diseños de texto a lo largo de un trazado
      3. Añadir fuentes propias
    7. Uso de imágenes
      1. Vectorizar imágenes de trama
    8. Color
      1. Aplicar colores y degradados
  5. Documentos en la nube
    1. Conceptos básicos
      1. Trabajar con documentos en la nube de Illustrator
      2. Compartir documentos en la nube de Illustrator y colaborar en ellos
      3. Compartir documentos para revisar
      4. Ampliar el almacenamiento en la nube de Adobe Illustrator
      5. Documentos en la nube de Illustrator | Preguntas habituales
    2. Solución de problemas
      1. Solución de problemas de creación o guardado de documentos en la nube de Illustrator
      2. Solucionar errores de documentos en la nube de Illustrator
  6. Añadir y editar contenido
    1. Dibujo y acotación
      1. Conceptos básicos de dibujo
      2. Editar trazados
      3. Dibujar ilustraciones con píxeles perfectos
      4. Dibujar con la herramienta Pluma, Curvatura o Lápiz
      5. Dibujar líneas y formas sencillas
      6. Dibujar cuadrículas rectangulares y polares
      7. Dibujar y editar destellos
      8. Calco de imagen
      9. Simplificar un trazado
      10. Herramientas y conjuntos de símbolos
      11. Ajustar segmentos de trazado
      12. Diseñar una flor en cinco sencillos pasos
      13. Crear y editar una cuadrícula de perspectiva
      14. Dibujar y modificar objetos en una cuadrícula de perspectiva
      15. Usar objetos como símbolos para uso repetido
      16. Dibujar trazados con pixelado perfecto en flujos de trabajo web
      17. Medir y trazar dimensiones
    2. Objetos y materiales 3D
      1. Acerca de los efectos 3D en Illustrator
      2. Crear gráficos 3D
      3. Mapear ilustraciones en objetos 3D
      4. Crear texto 3D
      5. Crear objetos 3D
    3. Color
      1. Acerca del color
      2. Seleccionar colores
      3. Uso y creación de muestras
      4. Ajustar colores
      5. Uso del panel Temas de Adobe Color
      6. Grupos de colores (armonías)
      7. Panel Temas de color
      8. Volver a colorear su ilustración
    4. Pintura
      1. Acerca de la pintura
      2. Pintar con rellenos y trazos
      3. Grupos de pintura interactiva
      4. Degradados
      5. Pinceles
      6. Transparencia y modos de fusión
      7. Aplicar un trazo a un objeto
      8. Creación y edición de motivos
      9. Mallas
      10. Motivos
    5. Seleccionar y organizar objetos
      1. Seleccionar objetos
      2. Capas
      3. Agrupar y expandir objetos
      4. Mover, alinear y distribuir objetos
      5. Apilar objetos    
      6. Bloquear, ocultar y eliminar objetos
      7. Copiar y duplicar objetos
      8. Rotar y reflejar objetos
      9. Entrelazar objetos
      10. Cree maquetas de ilustraciones realistas
    6. Cambiar la forma de objetos
      1. Recortar imágenes
      2. Transformar objetos
      3. Combinar objetos
      4. Cortar, dividir y recortar objetos
      5. Deformación de posición libre
      6. Escalar y distorsionar objetos
      7. Fusionar objetos
      8. Cambiar formas con envolventes
      9. Cambiar forma de objetos con efectos
      10. Crear nuevas formas con las herramientas Shaper y Creador de formas
      11. Uso de vértices interactivos
      12. Flujos de trabajo para cambiar de forma mejorados con compatibilidad táctil
      13. Editar máscaras de recorte
      14. Formas interactivas
      15. Crear formas mediante la herramienta Creador de formas
      16. Edición global
    7. Texto
      1. Añadir texto y trabajar con objetos tipográficos
      2. Crear listas numeradas y con viñetas
      3. Administrar área de texto
      4. Fuentes y tipografía
      5. Convertir el texto dentro de imágenes en texto editable
      6. Añadir formato básico al texto
      7. Añadir formato avanzado al texto
      8. Importar y exportar texto
      9. Aplicar formato a párrafos
      10. Caracteres especiales
      11. Crear texto en un trazado
      12. Estilos de carácter y de párrafo
      13. Tabulaciones
      14. Encontrar fuentes que faltan (flujo de trabajo de Typekit)
      15. Texto en árabe y hebreo
      16. Fuentes | Preguntas frecuentes y soluciones de problemas
      17. Crear efecto de texto 3D
      18. Diseños de tipografía creativos
      19. Ampliar y rotar texto
      20. Espaciado entre líneas y caracteres
      21. Separación de sílabas y saltos de línea
      22. Ortografía y diccionarios de idiomas
      23. Aplicar formato de caracteres asiáticos
      24. Modos de composición de alfabetos asiáticos
      25. Crear diseños de texto con objetos de fusión
      26. Crear un póster con texto con Calco de imagen
    8. Crear efectos especiales
      1. Trabajar con efectos
      2. Estilos gráficos
      3. Atributos de apariencia
      4. Crear bosquejos y mosaicos
      5. Sombras paralelas, resplandor y desvanecimiento
      6. Resumen de efectos
    9. Gráficos web
      1. Métodos óptimos para crear gráficos web
      2. Gráficas
      3. SVG
      4. Sectores y mapas de imágenes
  7. Importación, exportación y almacenamiento
    1. Importación
      1. Colocar varios archivos
      2. Administrar archivos vinculados e incrustados
      3. Información sobre vínculos
      4. Desincrustar imágenes
      5. Importar ilustraciones de Photoshop
      6. Importar imágenes de mapa de bits
      7. Importar archivos Adobe PDF
      8. Importar archivos EPS, DCS y de AutoCAD
    2. Bibliotecas Creative Cloud en Illustrator 
      1. Bibliotecas Creative Cloud en Illustrator
    3. Guardar
      1. Guardar ilustraciones
    4. Exportar
      1. Usar ilustraciones de Illustrator en Photoshop
      2. Exportar ilustraciones
      3. Recopilar recursos y exportar en lotes
      4. Empaquetado de archivos
      5. Creación de archivos de Adobe PDF
      6. Extraer CSS | Illustrator CC
      7. Opciones de Adobe PDF
      8. Panel Información del documento
  8. Impresión
    1. Prepárese para imprimir
      1. Ajuste de los documentos para impresión
      2. Cambiar el tamaño y la orientación de la página
      3. Especificar marcas de recorte para separación o alineación
      4. Primeros pasos con un lienzo grande
    2. Impresión
      1. Sobreimprimir
      2. Imprimir mediante gestión del color
      3. Impresión PostScript
      4. Ajustes prestablecidos de impresión
      5. Marcas de impresora y sangrados
      6. Imprimir y guardar ilustraciones transparentes
      7. Reventado
      8. Impresión de separaciones de color
      9. Imprimir degradados, mallas y fusiones de color
      10. Sobreimpresión en blanco
  9. Automatizar tareas
    1. Combinar datos mediante el panel Variables
    2. Automatización con scripts
    3. Automatización con acciones
  10. Solución de problemas 
    1. Problemas conocidos
    2. Errores de bloqueo
    3. Recuperar archivos después de un cierre inesperado
    4. Problemas de archivos
    5. Formatos de archivo admitidos
    6. Problemas con controladores de dispositivos GPU
    7. Problemas con dispositivos Wacom
    8. Problemas con archivos DLL
    9. Problemas de memoria
    10. Problemas con archivos de preferencias
    11. Problemas de fuentes
    12. Problemas con la impresora
    13. Enviar informe de error a Adobe
    14. Mejora del rendimiento de Illustrator

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.

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

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.

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.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?