Guía del usuario Cancelar

Generación de recursos de imagen a partir de capas

Nota:

Recursos de imagen ahora se encuentra en Archivo > Automatizar > Plugins de Generador.

Puede generar recursos de imagen con formato JPEG, PNG, GIF o SVG a partir del contenido de una capa o grupo de capas de un archivo PSD. Los recursos se generan automáticamente al añadir la extensión de un formato de imagen compatible a un nombre de capa o grupo de capas. También puede especificar parámetros de calidad y tamaño para los recursos de imagen generados.

Generar recursos de imagen a partir de un archivo PSD es de especial utilidad si se va a diseñar un sitio web para varios dispositivos.

Si desea aprender a crear y exportar gráficos web, consulte Cómo exportar archivos en varios formatos desde Photoshop.

Generación de recursos de imagen a partir de capas o grupos de capas

Para comprender mejor el funcionamiento del generador de recursos de imagen, imagine un archivo PSD sencillo (descárguelo a través de este enlace) con la siguiente jerarquía de capas:

Recursos de imagen generados de Photoshop
Ejemplo de un archivo PSD con su jerarquía de capas

En la jerarquía de capas de este archivo hay dos grupos de capas: Rectángulos_redondeados y Elipses. Cada uno de estos grupos de capas contiene cinco capas.

Siga estos pasos para generar recursos de imagen a partir de este archivo PSD:

  1. Con el archivo PSD abierto, seleccione Archivo > Automatizar > Plugins de Generador > Recursos de imagen.
  2. Añada las extensiones de formato de archivo correspondientes (.jpg, .png, .gif o .svg) a los nombres de las capas o grupos de capas a partir de los que desee generar los recursos de imagen. Por ejemplo, puede cambiarle el nombre a los grupos de capas Rectángulos_redondeados y Elipses, a Rectángulos_redondeados.jpg y Elipses.png; y la capa Elipse_4 como Elipse_4.gif.
Nota:

Los nombres de capas no admiten los caracteres especiales : y *.

Photoshop genera los recursos de imagen y los guarda en una subcarpeta junto al archivo PSD. Si aún no se ha guardado el archivo PSD de origen, Photoshop guardará los recursos generados en una nueva carpeta en el escritorio.

Nombres de los recursos de imagen de Photoshop
Los nombres de los recursos de imagen se generan a partir de los nombres de las capas o grupos de capas.

Nota:

En el documento actual está activada la generación de recursos de imagen. En cuanto se activa la función, seguirá estándolo cada vez que se abra el documento. Para desactivar la generación de recursos de imagen del documento actual, basta con anular la siguiente selección: Archivo > Automatizar > Plugins de Generador > Recursos de imagen.

Generación de activos para documentos en la nube

Si está trabajando con un documento en la nube, los activos se guardarán en el directorio "Photoshop Cloud Associates":

  • Windows: C:\Users\sunombre\Documents\Adobe\Photoshop Cloud Associates
  • macOS: /Users/sunombre/Documents/Adobe/Photoshop Cloud Associates

Generación de varios recursos a partir de una capa o un grupo de capas

Para generar varios recursos a partir de una capa o grupo de capas, separe los nombres de los recursos con comas. Por ejemplo, en el siguiente nombre de capa se generan tres recursos:

Elipse_4.jpg, Elipse_4b.png, Elipse_4c.png

Guardado de recursos en una subcarpeta

Puede guardar los recursos de imagen generados a partir de capas o grupos de capas concretos en una subcarpeta un nivel inferior a la carpeta de los recursos del documento. Incluya el nombre de la subcarpeta en el nombre de la capa o grupo de capas como en el siguiente ejemplo:

[subcarpeta]/Elipse_4.jpg 

Caso de uso de un diseño web

Generar recursos de imagen a partir de un archivo PSD es de especial utilidad si se va a diseñar un sitio web para varios dispositivos. Eche un vistazo al siguiente diseño web y su estructura de capas:

Diseño web con su jerarquía de capas

Vamos a extraer el icono de la parte superior y la primera fila de la cuadrícula de la imagen con zonas interactivas globales con formato de recursos de imagen:

  • Añada extensiones de formato de imagen a los nombres de capa correspondientes.
Cambie el nombre de las capas o grupos de capas correspondientes en Photoshop

Cambie el nombre de las capas o grupos de capas correspondientes en Photoshop

Cambie el nombre de las capas o grupos de capas correspondientes

Nota:

Un único recurso de imagen se genera a partir del contenido de una capa o grupo de capas. Por ejemplo, el grupo de capas AdventureCo Logo de la captura de pantalla de más arriba contiene una capa de forma y una capa de texto interactivo. Estas capas se acoplan cuando se genera un recurso de imagen a partir del grupo de capas.

Photoshop genera los recursos y los guarda en la misma ubicación que el archivo PSD de origen.

Recursos de imagen generados de Photoshop
Recursos de imagen generados

Especificación de los parámetros de calidad y tamaño

De forma predeterminada, los recursos JPEG se generan con una calidad del 90 %. Por su parte, los recursos PNG se generan como imágenes de 32 bits. Los recursos GIF se generan con transparencia alfa básica.

Conforme esté cambiando el nombre de las capas o grupos de capas para generar los recursos, podrá personalizar la calidad y el tamaño.

Parámetros de recursos JPEG

  • Añada la calidad deseada con formato de sufijo al nombre del recurso: .jpg (1-10) o .jpg (1-100 %). Por ejemplo:
    • Elipse_4.jpg5
    • Elipse_4.jpg50 %
  • Añada el tamaño de imagen deseado al nombre del recurso (relativo o con un formato compatible; es decir, px, pulgadas, cm y mm) en forma de prefijo. Photoshop redimensionará la imagen según corresponda. Por ejemplo:
    • 200 % Elipse_4.jpg
    • 300 x 200 Rectángulo_redondeado_3.jpg
    • 10 pulgadas x 200 mm Rectángulo_redondeado_3.jpg

Nota: No olvide añadir un espacio entre el prefijo y el nombre del recurso. Si especifica el tamaño en píxeles, puede omitir la unidad. Por ejemplo, 300 x 200.

Nota:

Como puede ver, puede mezclar diversas unidades y píxeles al especificar el tamaño de la imagen. Por ejemplo, 4 pulgadas x 100 Rectángulo_redondeado_3.jpg es un nombre de capa válido para la generación de un recurso.

Parámetros de recursos PNG

  • Añada la calidad deseada con formato de sufijo al nombre del recurso: 8, 24 o 32. Por ejemplo:
    • Elipse_4.png24
  • Añada el tamaño de imagen deseado al nombre del recurso (relativo o con un formato compatible; es decir, px, pulgadas, cm y mm) en forma de prefijo. Photoshop redimensionará la imagen según corresponda. Por ejemplo:
    • 42 % Elipse_4.png
    • 300 mm x 20 cm Rectángulo_redondeado_3.png
    • 10 pulgadas x 50 cm Rectángulo_redondeado_3.png

Nota: No olvide añadir un espacio entre el prefijo y el nombre del recurso. Si especifica el tamaño en píxeles, puede omitir la unidad. Por ejemplo, 300 x 200.

Nota:

Como puede ver, puede mezclar diversas unidades y píxeles al especificar el tamaño de la imagen. Por ejemplo, 4 pulgadas x 100 Rectángulo_redondeado_3.png es un nombre de capa válido para la generación de un recurso.

Parámetros de recursos GIF

  • Añada el tamaño de imagen deseado al nombre del recurso (relativo o con un formato compatible; es decir, px, pulgadas, cm y mm) en forma de prefijo. Por ejemplo:
    • 42 % Elipse_4.gif
    • 300 mm x 20 cm Rectángulo_redondeado_3.gif
    • 20 pulgadas x 50 cm Rectángulo_redondeado_3.gif

Nota: No olvide añadir un espacio entre el prefijo y el nombre del recurso. Si especifica el tamaño en píxeles, puede omitir la unidad. Por ejemplo, 300 x 200.

Nota:

Como puede ver, puede mezclar diversas unidades y píxeles al especificar el tamaño de la imagen. Por ejemplo, 4 pulgadas x 100 Rectángulo_redondeado_3.gif es un nombre de capa válido para la generación de un recurso.

Los parámetros de calidad no están disponibles para los recursos GIF.

Creación de nombres de capa complejos

Puede especificar nombres de recursos con varios parámetros cuando vaya a ponerle un nombre a una capa durante la generación de recursos. Por ejemplo:

120 % Delicioso.jpg, 42 % Delicioso.png24, 100 x 100 Delicioso_2.jpg90 %, 250 % Delicioso.gif

Photoshop genera los siguientes recursos a partir de esta capa:

  • Delicioso.jpg (imagen JPG de 8 bits con una escala del 120 %)
  • Delicioso.png (imagen PNG de 24 bits con una escala del 42 %)
  • Delicioso_2.jpg (imagen JPG con una calidad del 90 % y un tamaño absoluto de 100 x 100 px)
  • Delicioso.gif (imagen GIF con una escala del 250 %)

Ejemplos de escala absoluta

Buenos ejemplos de escala absoluta

  • 100 x 80 foo.png (escala absoluta simple)
  • 80 x 100 px foo.png (espacios entre longitudes)
  • 4 in x 100 foo.png (mezcla de unidades y sin unidades)
  • 90 mm x 120 cm foo.png (mezcla de diferentes unidades)
  • 100x? foo.png (comodín)
  • ?x60 pulgadas foo.png (comodín al principio)

Malos ejemplos de escala absoluta

  • 100 x 100foo.png (sin espacio antes del nombre de archivo)
  • 80 x 100 60 % foo.png (mezcla de escala absoluta y relativa)
  • 50 % 80 x 100 foo.png (mezcla de escala absoluta y relativa)
  • 20 pulgadas cm x 50 cm foo.png (unidades múltiples)
  • 30 nm x 20 nano.png (unidad no válida)

Formato y separación de varios archivos

Buenos ejemplos

  • Capa 1.png (se permite espacio en el nombre de archivo; se genera un único archivo denominado "Capa 1.png")
  • Capa 1.png,Capa 2.jpg (coma como separador)
  • Capa 1.png, Capa 2.jpg (coma seguida de uno o varios espacios como separador)
  • Capa 1.png+Capa 2.jpg (signo más como separador)
  • Capa 1.png + Capa 2.jpg (signo más seguido de uno o varios espacios como separador)

Todo junto

100 % Delicioso, 42% Capa 1.png24 + 100 x 100 Capa.jpg-90%, 250% Quux/Foo Bar Baz.gif da como resultado tres archivos (la cadena "100 % Delicioso" se ignora, porque no es un nombre de archivo):

  • Capa 1.png, con una escala del 42 %, como un png de 24 bits
  • Capa.jpg, como un tamaño absoluto de 100 x 100 píxeles, como un jpg con calidad del 90 %
  • Foo Bar Baz.gif en la subcarpeta Quux, a una escala del 250 %, como un gif.

Especificación de la configuración predeterminada para los recursos

Puede especificar los ajustes predeterminados de documento para los recursos generados. Siga estos pasos:

  1. Cree una capa vacía en el documento.
  2. Inicie el nombre de la capa con la palabra clave default. Ahora, introduzca la configuración que desea aplicar a los recursos de imagen generados a partir del documento. Por ejemplo:

default hi-res/

Genera todos los recursos de imagen en una subcarpeta denominada hi-res. Por ejemplo, [carpeta_ recurso]/hi-res/Delicioso.jpg.

default hi-res/@2x

Genera todos los recursos de imagen en una subcarpeta denominada hi-res. Además, le añade el sufijo @2x a los nombres de recurso. Por ejemplo, [carpeta_recurso]/hi-res/Delicioso@2x.jpg.

default 50 % lo-res/

Guarda los recursos de imagen reducidos en un 50 % en la subcarpeta lo-res de la carpeta de recursos del documento 

default hi-res/@2x + 50 % lo-res/

Genera dos recursos de imagen a partir de una capa:

  • En la subcarpeta hi-res, un recurso de imagen cuyo nombre tiene como sufijo @2x
  • En la subcarpeta lo-res, un recurso de imagen reducido al 50 %
Nota:

Los factores de escala predeterminados se sustituyen con los factores de escala especificados en cada capa.

Desactivación de la generación de recursos de imagen en todos los documentos

Puede desactivar la generación de recursos de imagen de forma global en todos los documentos de Photoshop en las Preferencias.

  1. Seleccione Edición > Preferencias > Plugins.
  2. Anule la selección de Activar generador.
  3. Haga clic en Aceptar.
Nota:

El comando de menú Archivo > Automatizar > Plugins de Generador no estará disponible si desactiva la generación de recursos de imagen en las Preferencias. Solo podrá volver a activarla en el cuadro de diálogo Preferencias.

Menú Plugins de Generador

Antes de la versión de julio de 2024 de Photoshop en el escritorio (versión 25.11), los plugins de Generador se encontraban en el menú Archivo > Generar.

Ahora, todos los plugins de Generador, incluido el plugin predeterminado Recursos de imagen, se encuentran en el menú Archivo > Automatizar > Plugins de Generador.  Este cambio se ha realizado para aclarar el nombre del submenú y diferenciarlo de las nuevas funciones generativas, como Generar imagen.

Preguntas frecuentes

Más contenido similar

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

¿Nuevo usuario?