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.
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:
En la jerarquía de capas de este archivo hay dos grupos de capas: Rounded_rectangles (rectángulos redondeados) y Ellipses (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:
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.
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 > Generar > Recursos de imagen.
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
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]/Ellipse_4.jpg
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:
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:
Cambie el nombre de las capas o grupos de capas correspondientes
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.
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.
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.
Como puede ver, puede mezclar diversas unidades y píxeles al especificar el tamaño de la imagen. Por ejemplo, 4pulg x 100 Rectángulo_redondeado_3.jpg es un nombre de capa válido para la generación de un recurso.
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.
Como puede ver, puede mezclar diversas unidades y píxeles al especificar el tamaño de la imagen. Por ejemplo, 4pulg x 100 Rectángulo_redondeado_3.png es un nombre de capa válido para la generación de un recurso.
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.
Como puede ver, puede mezclar diversas unidades y píxeles al especificar el tamaño de la imagen. Por ejemplo, 4pulg 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.
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, 100x100 Delicioso_2.jpg90 %, 250 % Delicioso.gif
Photoshop genera los siguientes recursos a partir de esta capa:
Puede especificar los ajustes predeterminados de documento para los recursos generados. Siga estos pasos:
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:
Los factores de escala predeterminados se sustituyen con los factores de escala especificados en cada capa.
Puede desactivar la generación de recursos de imagen de forma global en todos los documentos de Photoshop en las Preferencias.
el comando de menú Archivo > Generar 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.
En el nivel de documento, los nombres de recurso deben ser únicos.
De forma predeterminada, los recursos JPG 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.
Sí. Si aplica transparencia u otros efectos a una capa, también se reflejarán en los recursos generados a partir de dicha capa. Sin embargo, los efectos pueden no apreciarse a la perfección en los recursos generados.
Los recursos se recortan a los límites del documento. Si una imagen no está dentro de los límites del documento, el generador no crea los recursos de imagen asociados.
Además de la coma (,) puede usar el símbolo más (+) como separador entre nombres de recursos de imagen. Por ejemplo:
42 % Rectángulo_redondeado_1.png24 + 100x100 Rectángulo_redondeado_1.jpg90 %
Equivale a:
42 % Rectángulo_redondeado_1.png24, 100x100 Rectángulo_redondeado_1.jpg90 %
Inicia sesión en tu cuenta