Guía del usuario Cancelar

Exportar imágenes y archivos GIF animados

Buscar
Animate

Animate

Abrir aplicación
  1. Guía del usuario de Adobe Animate
  2. Introducción a Animate
    1. Novedades de Animate
    2. Glosario visual
    3. Requisitos del sistema para Animate
    4. Métodos abreviados de teclado de Animate
    5. Trabajar con varios tipos de archivo en Animate
  3. Animación
    1. Aspectos básicos de animaciones en Animate
    2. Cómo utilizar los fotogramas y fotogramas clave en Animate
    3. Animación fotograma a fotograma en Animate
    4. Cómo trabajar con la animación de interpolación clásica en Animate
    5. Herramienta Pincel
    6. Guía de movimiento
    7. Interpolación de movimiento y ActionScript 3.0
    8. Acerca de la animación de interpolación de movimiento
    9. Animaciones de interpolación de movimiento
    10. Creación de una animación de interpolación de movimiento
    11. Uso de fotogramas clave de propiedad
    12. Animación de la posición con una interpolación
    13. Edición de interpolaciones de movimiento con el editor de movimiento
    14. Edición del trazado de movimiento de una animación de interpolación
    15. Manipulación de las interpolaciones de movimiento
    16. Adición de aceleraciones personalizadas
    17. Creación y aplicación de ajustes preestablecidos de movimiento
    18. Configuración de grupos de interpolación de animación
    19. Uso de interpolaciones de movimiento guardadas como archivos XML
    20. Interpolaciones de movimiento e interpolaciones clásicas
    21. Interpolación de forma
    22. Uso de la animación de la herramienta Hueso en Animate
    23. Trabajar con el rigging de personajes en Animate
    24. Uso de las capas de máscara en Adobe Animate
    25. Uso de escenas en Animate
  4. Interactividad
    1. Creación de botones en Animate
    2. Conversión de proyectos de Animate a otros formatos de documento
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Adición de interactividad con fragmentos de código en Animate
    5. Creación de componentes HTML5 personalizados
    6. Uso de componentes en HTML5 Canvas
    7. Creación de componentes personalizados: Ejemplos
    8. Fragmentos de código para componentes personalizados
    9. Prácticas recomendadas - Publicidad con Animate
    10. Autoría y publicación de realidad virtual
  5. Espacio de trabajo y flujo de trabajo
    1. Creación y administración de pinceles
    2. Uso de Google Fonts en documentos HTML5 Canvas
    3. Utilización de las Bibliotecas Creative Cloud y Adobe Animate
    4. Utilización del Escenario y el panel Herramientas en Animate
    5. Flujo de trabajo y espacio de trabajo de Animate
    6. Uso de las fuentes web en documentos de HTML5 Canvas
    7. Líneas de tiempo y ActionScript
    8. Trabajo con varias líneas de tiempo
    9. Configuración de preferencias
    10. Utilización de los paneles de edición de Animate
    11. Creación de capas de la línea de tiempo en Animate
    12. Exportación de animaciones para aplicaciones móviles y motores de juegos
    13. Desplazamiento y copia de objetos
    14. Plantillas
    15. Buscar y reemplazar en Animate
    16. Deshacer y rehacer en el panel Historial
    17. Métodos abreviados de teclado
    18. Uso de la Cronología en Animate
    19. Creación de extensiones HTML
    20. Opciones de optimización para Imágenes y archivos GIF animados
    21. Configuración de exportación de imágenes y archivos GIF
    22. Panel de Recursos en Animate
  6. Multimedia y vídeo
    1. Transformación y combinación de objetos gráficos en Animate
    2. Crear y trabajar con instancias de símbolo en Animate
    3. Calco de imagen
    4. Cómo utilizar el sonido en Adobe Animate
    5. Exportación de archivos SVG
    6. Creación de archivos de vídeo para su uso en Animate
    7. Cómo añadir un vídeo a Animate
    8. Dibujo y creación de objetos en Animate
    9. Remodelado de líneas y formas
    10. Trazos, rellenos y degradados en Animate CC
    11. Uso de Adobe Premiere Pro y After Effects
    12. Paneles de color en Animate CC
    13. Apertura de archivos de Flash CS6 con Animate
    14. Uso de texto clásico en Animate
    15. Colocación de ilustraciones en Animate
    16. Mapas de bits importados en Animate
    17. Gráficos 3D
    18. Trabajo con símbolos en Animate
    19. Dibujo de líneas y formas en Adobe Animate
    20. Uso de bibliotecas en Animate
    21. Exportación de sonidos
    22. Selección de objetos en Animate CC
    23. Trabajo con archivos AI de Illustrator en Animate
    24. Aplicación de modos de mezcla
    25. Organización de objetos
    26. Automatización de tareas con el menú Comandos
    27. Texto en varios idiomas
    28. Utilización de la cámara en Animate
    29. Filtros de gráficos
    30. Sonido y ActionScript
    31. Preferencias de dibujo
    32. Dibujo con la herramienta Pluma
  7. Plataformas
    1. Conversión de proyectos de Animate a otros formatos de documento
    2. Compatibilidad con plataformas personalizadas
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Creación y publicación de un documento de WebGL
    5. Empaquetado de aplicaciones para AIR para iOS
    6. Publicación de aplicaciones de AIR for Android
    7. Publicación para Adobe AIR para escritorio
    8. Configuración de publicaciones de ActionScript
    9. Prácticas recomendadas - Organización de ActionScript en una aplicación
    10. Uso de ActionScript con Animate
    11. Accesibilidad en el espacio de trabajo de Animate
    12. Cómo escribir y gestionar scripts
    13. Activación de la compatibilidad con plataformas personalizadas
    14. Información general sobre compatibilidad con plataformas personalizadas
    15. Uso de plugins de compatibilidad con plataformas personalizadas
    16. Depuración de ActionScript 3.0
    17. Activación de la compatibilidad con plataformas personalizadas
  8. Exportación y publicación
    1. Exportación de archivos de Animate CC
    2. Publicación de OAM
    3. Exportación de archivos SVG
    4. Exportación de gráficos y vídeos con Animate
    5. Publicar documentos de AS3
    6. Exportación de animaciones para aplicaciones móviles y motores de juegos
    7. Exportación de sonidos
    8. Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
    9. Prácticas recomendadas - Convenciones de vídeo
    10. Prácticas recomendadas - Directrices de edición de aplicaciones SWF
    11. Prácticas recomendadas - Estructuración de archivos FLA
    12. Prácticas recomendadas de optimización de archivos FLA para Animate
    13. Configuración de publicaciones de ActionScript
    14. Especificación de configuración de publicación para Animate
    15. Exportación de archivos de proyector
    16. Exportar imágenes y archivos GIF animados
    17. Plantillas de publicación HTML
    18. Uso de Adobe Premiere Pro y After Effects
    19. Compartir y publicar animaciones rápidamente
  9. Solución de problemas
    1. Problemas solucionados
    2. Problemas conocidos

 

Utilice este artículo para aprender a exportar imágenes y archivos GIF animados.

Animate introduce las funciones Exportar imagen y Exportar GIF animado para ayudarle a exportar activos con el formato .png, jpeg y GIF estático y animado en un formato fácil de usar e interactivo.

Al preparar imágenes para Internet y otros soportes en línea, es habitual hacer concesiones entre la calidad de la imagen y el tamaño de archivo.

Las funciones de optimización del cuadro de diálogo Exportar imagen permiten visualizar imágenes optimizadas en diferentes formatos de archivo y con distintos atributos de archivo. Puede ver varias versiones de una imagen a la vez y modificar los ajustes de optimización conforme previsualiza la imagen para poder seleccionar la combinación de ajustes que mejor se ajuste a sus necesidades. También puede especificar la transparencia o halos, seleccionar opciones para controlar el tramado y redimensionar la imagen hasta unas dimensiones en píxeles determinadas o hasta un porcentaje determinado del tamaño original.

Cuando guarda un archivo optimizado mediante el comando Exportar imagen, puede seleccionar que se genere un archivo HTML para la imagen. Este archivo contiene toda la información necesaria para visualizar la imagen en un navegador Web.

En Photoshop, puede utilizar el comando Guardar como para guardar una imagen como archivo GIF, JPEG o PNG. Según el formato de archivo, puede especificar una calidad de imagen, transparencia o halos de fondo, visualización del color y método de descarga. Sin embargo, las características Web (como enlaces y animaciones) añadidas al archivo no se conservan.

También se puede utilizar el Procesador de imágenes de Animate para guardar copias de una carpeta de imágenes en formato JPEG. El Procesador de imágenes permite redimensionar y convertir el perfil de color de las imágenes al estándar Web sRGB.

Exportar imágenes

Para seleccionar opciones de optimización y para obtener una vista previa de las ilustraciones optimizadas, utilice el cuadro de diálogo Exportar imagen (Archivo > > Exportar > Exportar imagen y Archivo > Exportar > Exportar GIF animado).

A. Opciones de visualización B. Optimizar menú emergente C. Opciones predefinidas D. Opciones de tamaño de imagen E. Opciones de animación F. Previsualizar G. Barras de herramientas 

Previsualización de imágenes en el cuadro de diálogo

Haga clic en una ficha situada en la parte superior del área de imagen para seleccionar una opción de visualización:

Original

Muestra la imagen sin optimización.

Optimizado

Muestra la imagen con los ajustes de optimización aplicados.

2 copias

Muestra dos versiones de la imagen lado a lado.

Si no aparece toda la ilustración en el cuadro de diálogo Exportar imagen, puede utilizar la herramienta Mano para mostrar otra área. También se puede utilizar la herramienta Zoom para aumentar o reducir la vista.

  • Seleccione la herramienta Mano (o mantenga pulsada la barra espaciadora) y arrastre el cursor en el área de visualización para tener una panorámica de la imagen.
  • Seleccione la herramienta Zoom   , haga clic en una vista para aumentarla; mantenga pulsada la tecla Alt (Windows) u Opción (Mac iOS) y haga clic en una vista para reducirla.

    También puede escribir un porcentaje de aumento o seleccionar uno en la parte inferior del cuadro de diálogo.

Visualización de la información de la imagen optimizada y el tiempo de descarga

El área de anotaciones situada bajo cada imagen en el cuadro de diálogo Exportar imagen proporciona información de optimización. La anotación de la imagen original muestra el nombre y el tamaño de archivo. La anotación de la imagen optimizada muestra las opciones de optimización actuales, el tamaño del archivo optimizado y el tiempo de descarga estimado a la velocidad seleccionada del módem. Puede elegir la velocidad del módem en el menú emergente de previsualización.

Previsualización del valor gamma de la imagen con diferentes valores

El valor gamma del monitor de un ordenador determina la claridad u oscuridad con la que una imagen se ve en un navegador Web. Puede previsualizar el aspecto que tendrán las imágenes en sistemas con distintos valores de gamma y realizar ajustes de gamma en la imagen que quiera compensar. La activación de una opción de previsualización no afecta a la imagen final.

  • Seleccione una de las opciones siguientes utilizando el cuadro de diálogo Exportar imagen o el menú emergente Previsualizar.

Color de monitor

No realiza ningún ajuste al valor gamma de la imagen. Color de monitor en el ajuste por defecto.

Macintosh heredado (sin gestión de color)

Simula el valor de gamma predeterminado de 1,8 que utilizan Mac OS 10.5 y versiones anteriores.

Windows (sin gestión de color)

Simula el valor de gamma predeterminado de 2,2 que utilizan Windows y Mac OS 10.6 y versiones posteriores.

Usar perfil de documento

Ajusta el valor de gamma para que coincida con el perfil de color de cualquier documento adjunto en un documento con gestión de color.

Optimización de imágenes para Web

  1. Elija Archivo > Exportar imagen o Archivo > Exportar GIF animado.

  2. Haga clic en una ficha situada en la parte superior del cuadro de diálogo para seleccionar una opción de visualización: Optimizada o 2 copias.

  3. (Opcional) Si la imagen contiene varios sectores, seleccione uno o más sectores que desee optimizar.

  4. Seleccione un ajuste de optimización preestablecido en el menú Ajuste predeterminado o defina opciones de optimización individuales. Las opciones disponibles cambian en función del formato de archivo que se haya seleccionado.

  5. Reajuste los valores de optimización hasta estar satisfecho con el equilibrio de la calidad de la imagen y el tamaño de archivo. Si la imagen contiene varios sectores, no olvide optimizar todos los sectores.

    Nota:

    Para restaurar una previsualización optimizada a la versión original, selecciónela y elija Original en el menú Ajuste preestablecido.

  6. Para asegurarse de que los colores que ve en la imagen optimizada tienen el mismo aspecto en los distintos navegadores, convierta los colores de la imagen a sRGB.

  7. Elija entre las opciones siguientes:

    Ninguno

    No se han guardado metadatos (salvo el aviso de copyright de los datos EXIF en archivos JPEG). Produce el menor tamaño de archivo.

    Copyright

    Guarda el aviso de derechos de autor, las condiciones de uso, el estado del copyright y la dirección URL de la información sobre los derechos de autor.

    Información de copyright y de contacto

    Guarda toda la información concerniente al copyright además de los datos siguientes: creador, cargo del creador, direcciones de correo electrónico, dirección, localidad, provincia, código postal, país, teléfonos y sitios Web.

    Todo excepto información de la cámara

    Guarda todos los metadatos, excepto los datos EXIF acerca de la configuración de la cámara, como la velocidad del obturador, la fecha y la hora, la distancia focal, la compensación de exposición, el patrón de medición y el uso del flash.

    Todas

    Guarda todos los metadatos en el archivo.

  8. Haga clic en Guardar.

  9. En el cuadro de diálogo Guardar optimizada como, realice las siguientes acciones y haga clic en Guardar:

    1. Introduzca el nombre de un archivo y seleccione una ubicación para guardar el archivo o archivos resultantes.

    2. Seleccione una opción de formato para especificar los tipos de archivo que desea guardar: archivo HTML y archivos de imagen, solo archivos de imagen o solo un archivo HTML.

    3. (Opcional) Defina ajustes de salida para archivos HTML e imágenes.

    4. Si la imagen contiene varios sectores, seleccione una opción para guardar sectores en el menú Sectores: Todos los sectores o Sectores seleccionados.

      Nota:

      Para restaurar los ajustes de optimización de la última versión guardada, pulse la tecla Alt (Windows) o la tecla Opción (Mac OS) y haga clic en Restaurar. Si desea conservar los mismos ajustes la próxima vez que abra el cuadro de diálogo Guardar para Web, pulse Alt/Opción y haga clic en Recordar.

      5. Para ver un vídeo sobre cómo guardar archivos para la Web en Illustrator, consulte www.adobe.com/go/vid0063_es.

Guardar o eliminar ajustes preestablecidos de optimización

Puede guardar los ajustes de optimización como un conjunto con nombre y aplicarlos a otras imágenes. Los ajustes guardados aparecen en el menú emergente Ajuste predeterminado, junto con los ajustes con nombre predefinidos. Si edita un conjunto con nombre o un conjunto predefinido, el menú Ajuste predeterminado muestra la expresión “Sin nombre”.

  1. Defina las opciones de optimización como desee y seleccione Guardar ajustes en el menú de la paleta Optimizar.

  2. Asigne un nombre a los ajustes y guárdelos en la carpeta adecuada:

    Photoshop

    (Windows XP) Document and Settings\[nombre de usuario]\Datos de programa\Adobe Photoshop CS5\Ajustes optimizados

    (Windows Vista) Usuarios\[nombre de usuario]\Datos de programa\Roaming\Adobe\Adobe Photoshop CS5\Ajustes optimizados

    (Mac OS) Usuarios/[nombre de usuario]/Biblioteca/Preferencias/Ajustes de Adobe Photoshop CS5/Configuración optimizada

    Illustrator

    (Windows XP) Document and Settings\[nombre de usuario]\Datos de programa\Adobe\Ajustes de Adobe Illustrator CS5\[idioma]\Ajustes de Guardar para Web\Optimizar

    (Windows Vista) Usuarios\[nombre de usuario]\Datos de programa\Roaming\Adobe\Ajustes de Adobe Illustrator CS5 \[idioma]\Ajustes de Guardar para Web\Optimizar

    (Mac OS) Usuarios/[nombre de usuario]/Biblioteca/Application Support/Adobe/Adobe Illustrator CS5/[idioma]/Ajustes de Guardar para Web/Optimizar

    Nota:

    si guarda los ajustes en otra ubicación, no estarán disponibles en el menú emergente Ajustes preestablecidos.

  3. Para eliminar un ajuste preestablecido, selecciónelo en el menú Ajuste preestablecido y elija Eliminar ajustes en el menú Optimizar.

Compresión de un gráfico Web a un tamaño de archivo específico

  1. Seleccione Archivo > Exportar > Exportar imagen o Archivo > Exportar > Exportar GIF animado.

  2. Haga clic en una ficha situada en la parte superior del cuadro de diálogo Exportar imagen o Exportar GIF animado para seleccionar una opción de visualización: Optimizado o 2 copias. 

  3. (Opcional) Seleccione los sectores que desea optimizar y el formato de archivo que desea utilizar.

  4. Seleccione Optimizar a tamaño de archivo en el menú Optimizar (a la derecha del menú Ajuste preestablecido).

  5. Introduzca el tamaño de archivo deseado.

  6. Seleccione una opción de Comenzar con:

    Ajustes actuales

    Utiliza el formato de archivo actual.

    Autoseleccionar GIF/JPEG

    Selecciona automáticamente el formato óptimo dependiendo del contenido de la imagen.

  7. Seleccione una opción de la sección Usar para especificar si desea aplicar el tamaño de archivo especificado solo al sector actual, a cada sector de la imagen o a todos los sectores. Haga clic en Aceptar.

Redimensión de ilustraciones al optimizar

En el cuadro de diálogo Exportar imagen, se puede redimensionar una imagen hasta unas dimensiones en píxeles especificadas o hasta un porcentaje del tamaño original.

  1. Haga clic en la ficha Tamaño de imagen del cuadro de diálogo Exportar imagen.

  2. Defina cualquiera de las opciones adicionales:

    Restringir proporciones

    Mantiene las proporciones actuales de anchura y altura de píxel.

    Nota:

    Ninguna de las funciones de la paleta Tamaño de imagen, excepto Recortar al tamaño de la mesa de trabajo, están disponibles para los formatos de archivo SWF y SVG.

  3. Introduzca nuevas dimensiones en píxeles o especifique el porcentaje en que desea redimensionar la imagen y haga clic en Aplicar.

Previsualización de imágenes optimizadas en un navegador Web

Puede obtener una vista previa de una imagen optimizada en cualquier navegador web instalado en su sistema desde el cuadro de diálogo Exportar imagen (Archivo > Exportar > Exportar imagen o Archivo > Exportar > Exportar GIF animado). La previsualización del navegador muestra la imagen con un pie de ilustración que indica el tipo de archivo de la imagen, las dimensiones en píxeles, el tamaño de archivo, las especificaciones de compresión y otra información de HTML.

  • Para previsualizar una imagen en el navegador web predeterminado, haga clic en el icono del navegador situado en la parte inferior del cuadro de diálogo Exportar imagen.
  • En el cuadro de diálogo Navegadores, aparecen todos los navegadores del equipo y se puede definir el navegador predeterminado para previsualizar la imagen.

Más temas de ayuda

Opciones de optimización para imágenes y archivos GIF animados

Ajustes de salida para la exportación de imágenes y archivos GIF animados

 

 

 Adobe

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

¿Nuevo usuario?

Vínculos rápidos

Ver todos los planes Administrar los planes
Ver vínculos rápidos
Ocultar vínculos rápidos

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