Guía del usuario Cancelar

Optimización de imágenes para los formatos GIF o PNG-8

  1. Guía del usuario de Photoshop Elements
  2. Introducción a Photoshop Elements
    1. Novedades de Photoshop Elements
    2. Requisitos del sistema | Photoshop Elements
    3. Conceptos básicos del espacio de trabajo
    4. Modo Guiada
    5. Realización de proyectos fotográficos
  3. Entorno y espacio de trabajo
    1. Familiarícese con la pantalla de inicio
    2. Conceptos básicos del espacio de trabajo
    3. Herramientas
    4. Paneles y cestas
    5. Apertura de archivos
    6. Reglas, cuadrículas y guías
    7. Modo rápido mejorado
    8. Información de archivo
    9. Ajustes preestablecidos y bibliotecas
    10. Compatibilidad con toque múltiple
    11. Discos de memoria virtual, plugins y actualizaciones de la aplicación
    12. Acciones de deshacer, rehacer y cancelar
    13. Visualización de imágenes
  4. Corrección y mejora de fotografías
    1. Redimensionar imágenes
    2. Recorte de fotografías
    3. Procesamiento de archivos de imagen RAW de cámara
    4. Adición de desenfoque, sustitución de colores y clonación de áreas de imagen
    5. Ajuste de sombras y luz
    6. Retoque y corrección de fotografías
    7. Enfocar fotografías
    8. Transformación
    9. Tono inteligente automático
    10. Recomposición
    11. Uso de acciones para procesar fotografías
    12. Composición de Photomerge
    13. Creación de imágenes panorámicas
    14. Superposiciones en movimiento
    15. Elementos en movimiento
  5. Adición de formas y texto
    1. Adición de texto
    2. Edición de texto
    3. Creación de formas
    4. Edición de formas
    5. Introducción a la pintura
    6. Herramientas de pintura
    7. Configurar pinceles
    8. Motivos
    9. Rellenos y trazos
    10. Degradados
    11. Trabajo con texto asiático
  6. Filtros, efectos y ediciones guiadas
    1. Modo Guiada
    2. Filtros
    3. Modo de edición Guiada: ediciones de Photomerge
    4. Modo guiado: ediciones básicas
    5. Filtros de ajuste
    6. Efectos
    7. Ediciones divertidas del modo de edición Guiada
    8. Ediciones especiales del modo de edición Guiada
    9. Filtros artísticos
    10. Modo de edición Guiada: modificaciones del color
    11. Modo guiado: ediciones de blanco y negro
    12. Filtros de desenfoque
    13. Filtros de trazos de pincel
    14. Filtros de distorsión
    15. Otros filtros
    16. Filtros de ruido
    17. Filtros para interpretar
    18. Filtros para bosquejar
    19. Filtros para estilizar
    20. Filtros de textura
  7. Trabajo con colores
    1. Conceptos del color
    2. Configurar la gestión de color
    3. Fundamentos de la corrección de tonos y colores
    4. Selección de colores
    5. Ajuste del color, la saturación y el tono
    6. Corrección de tintes de color
    7. Uso de modos de imagen y tablas de colores
    8. Color y Camera Raw
  8. Trabajo con selecciones
    1. Realizar selecciones en Photoshop Elements
    2. Almacenamiento de selecciones
    3. Modificación de selecciones
    4. Desplazamiento y copia de selecciones
    5. Edite y perfeccione selecciones
    6. Bordes de selección suaves con suavizado y calado
  9. Trabajo con capas
    1. Creación de capas
    2. Edición de capas
    3. Copia y organización de capas
    4. Capas de ajuste y de relleno
    5. Máscaras de recorte
    6. Máscaras de capas
    7. Estilos de capa
    8. Opacidad y modos de fusión
  10. Creación de proyectos fotográficos
    1. Aspectos básicos del proyecto
    2. Realización de proyectos fotográficos
    3. Edición de proyectos fotográficos
  11. Almacenamiento, impresión y uso compartido de fotografías
    1. Guardado de imágenes
    2. Impresión de fotografías
    3. Uso compartido de fotografías en línea
    4. Optimización de imágenes
    5. Optimización de imágenes para el formato JPEG
    6. Tramado en imágenes Web
    7. Edición guiada - Panel Compartir
    8. Previsualización de imágenes Web
    9. Uso de transparencia y mates
    10. Optimización de imágenes para los formatos GIF o PNG-8
    11. Optimización de imágenes para el formato PNG-24
  12. Métodos abreviados de teclado
    1. Teclas para seleccionar herramientas
    2. Teclas para seleccionar y mover objetos
    3. Teclas para el panel Capas
    4. Teclas para mostrar u ocultar los paneles (modo Experto)
    5. Teclas para pintura y pinceles
    6. Teclas para utilizar texto
    7. Teclas para el filtro Licuar
    8. Teclas para transformar selecciones
    9. Teclas para el panel Muestras de color
    10. Teclas para el cuadro de diálogo Camera Raw
    11. Teclas para la Galería de filtros
    12. Teclas para utilizar modos de fusión
    13. Teclas para ver imágenes (modo Experto)

Acerca del formato GIF

El formato GIF utiliza el color de 8 bits y comprime eficazmente áreas de color uniforme a la vez que mantiene los detalles nítidos, como los que hay en líneas, logotipos o texto. El formato GIF también se usa para crear una imagen animada y mantener la transparencia. La mayoría de los navegadores admiten el formato GIF.

El formato GIF utiliza compresión LZW, que es un método de compresión sin pérdida de calidad. Sin embargo, como los archivos GIF tienen un límite de 256 colores, si se optimiza una imagen original de 24 bits como archivo GIF de 8 bits, es posible que se reste colores a la imagen.

Imagen GIF con color selectivo (izquierda) e imagen GIF con color Web (derecha)

Puede elegir el número de colores de una imagen GIF y controlar cómo se traman en un navegador. El formato GIF admite transparencia o halos de fondo, permitiendo fusionar los bordes de la imagen con el color de fondo de una página Web.

Acerca del formato PNG-8

El formato PNG-8 utiliza el color de 8 bits. Al igual que el formato GIF, el formato PNG-8 comprime eficazmente áreas de color uniforme a la vez que mantiene los detalles nítidos, como los que hay en líneas, logotipos o texto.

Como el formato PNG-8 no lo admiten todos los navegadores, es preferible evitarlo si se va a distribuir la imagen a muchos usuarios.

Este formato utiliza esquemas de compresión más avanzados que el GIF, así que un archivo PNG-8 puede ser entre un 10 y un 30% más pequeño que un archivo GIF de la misma imagen, según los motivos de color. Aunque PNG-8 tiene una compresión sin pérdida de calidad, si se optimiza una imagen original de 24 bits como archivo PNG de 8 bits, es posible que se reste color a la imagen.

Nota:

con determinadas imágenes, sobre todo las de motivos sencillos y pocos colores, la compresión GIF puede crear un archivo de menor tamaño que la compresión PNG-8. Vea las imágenes optimizadas en los formatos GIF y PNG-8 y compare el tamaño de los archivos.

Como sucede con el formato GIF, puede elegir el número de colores de una imagen y controlar cómo se traman en un navegador. El formato PNG-8 admite transparencia y halos de fondo, permitiendo fusionar los bordes de una imagen con el color de fondo de una página Web.

PNG-8 con 256 colores y sin tramado (izquierda) y PNG-8 con 16 colores y tramado (derecha)

Optimización como formato GIF o PNG-8

GIF es el formato estándar para comprimir imágenes con áreas grandes de colores uniformes y detalles nítidos como los que hay en líneas, logotipos y texto. Al igual que el formato GIF, el formato PNG-8 admite transparencias y comprime eficazmente áreas de color uniforme a la vez que mantiene los detalles nítidos; sin embargo, no todos los navegadores Web permiten visualizar archivos PNG-8.

  1. Abra una imagen y elija Archivo > Guardar para Web.
  2. Elija GIF o PNG-8 en el menú de formatos de optimización.
  3. Para ver la imagen con una resolución baja mientras se descarga con resolución completa, seleccione Entrelazado. El entrelazado puede hacer que el tiempo de descarga parezca más corto y notifica a los usuarios que la descarga está en curso.
  4. En el menú de formatos de optimización, elija un algoritmo de reducción de color para generar la tabla de colores de consulta:

    Perceptual

    Crea una tabla de colores personalizada dando prioridad a los colores para los que el ojo humano es más sensible.

    Selectiva

    Crea una tabla de colores parecida a la tabla perceptual, pero favorece amplias áreas de color y la conservación de los colores Web. Esta tabla de colores normalmente produce imágenes con la máxima integridad del color. (Selectiva es la opción por defecto).

    Adaptable

    Crea una tabla de colores personalizada realizando muestras del espectro que aparece con más frecuencia en la imagen. Por ejemplo, una imagen solo con tonos de verde y azul produce una tabla de colores compuesta principalmente por verdes y azules. La mayoría de las imágenes concentran los colores en áreas determinadas del espectro.

    Restrictiva (Web)

    Utiliza la tabla estándar de 216 colores y compatible con Web común a los paneles de 8 bits (de 256 colores) de Windows y Mac OS. Esta opción asegura que no se aplique ningún tramado de navegador a los colores cuando la imagen se visualice con un color de 8 bits. Si la imagen tiene menos de 216 colores, los colores que no se utilicen se quitan de la tabla.

  5. Para especificar el número máximo de colores del panel, seleccione un número en el menú Colores, introduzca un valor en el cuadro de texto o haga clic en las flechas para cambiar el número de colores. Si la imagen contiene menos colores que el panel, la tabla reflejará el número de colores más reducido en la imagen.
  6. Si elige Restrictiva (Web) como algoritmo de reducción de color, podrá seleccionar Auto en el menú Colores. Elija Auto si desea que Photoshop Elements determine el número óptimo de colores de la tabla según la frecuencia de los colores de la imagen.
  7. Elija un porcentaje de tramado, introduciendo un porcentaje en el cuadro de texto Tramado o haciendo clic en la flecha del menú Tramado y arrastrando el regulador que aparece.
  8. Si la imagen contiene transparencia, seleccione Transparencia para mantener los píxeles transparentes; desactive esta opción para rellenar los píxeles parcial y totalmente transparentes con el color mate.
  9. Para crear un GIF animado, seleccione Animar.
  10. Para guardar la imagen optimizada, haga clic en OK. En el cuadro de diálogo Guardar optimizada como, escriba un nombre de archivo y haga clic en Guardar.

Creación de un GIF animado

  1. Coloque las imágenes que desea que aparezcan en cada cuadro de la animación en capas separadas del panel Capas. Por ejemplo, para crear la animación de un ojo parpadeando, colocaría una imagen del ojo abierto en una capa y una imagen del ojo cerrado en otra capa.
  2. Seleccione Archivo > Guardar para Web.
    Nota:

    si la imagen tiene varias capas, también puede abrir el cuadro de diálogo Guardar para Web desde el cuadro de diálogo Guardar como si elige el formato CompuServe GIF y selecciona Capas como cuadros.

  3. Optimice la imagen en formato GIF.
  4. Seleccione Animar.
  5. Defina opciones adicionales en la sección Animación del cuadro de diálogo:

    Opciones de repetición

    Puede optar por repetir continuamente la animación en un navegador Web o animar una sola vez. También puede elegir Otro para especificar el número de veces que debe repetirse la animación.

    Retardo de cuadro

    Especifica el número de segundos que aparece cada cuadro en el navegador Web. Utilice un valor decimal para especificar fracciones de segundo. Por ejemplo, utilice 0,5 para indicar medio segundo.

Logotipo de Adobe

Inicia sesión en tu cuenta