Sintaxis de nomenclatura del generador de recursos de imagen

La sintaxis de nomenclatura de capas controla el formato de salida, la calidad, las dimensiones y el escalado de los recursos generados automáticamente a partir de las capas y los grupos de capas de tu PSD. Comprender estas reglas de sintaxis te permite crear múltiples variaciones de recursos a partir de una sola capa, codificando todos los parámetros directamente en el nombre de la capa.

Parámetros de calidad específicos del formato

Sintaxis JPEG

Sufijo de calidad

• de .jpg1 a .jpg10 (escala de 1 a 10)
• de .jpg1% a .jpg100% (escala porcentual)

Predeterminado: calidad del 90 % cuando no se especifica ningún sufijo

Ejemplos

• Logo.jpg5, JPEG en el nivel de calidad 5
• Hero.jpg80%, JPEG con una calidad del 80 %
• Banner.jpg, JPEG con la calidad del 90 % predeterminada

Sintaxis PNG

Sufijo de profundidad de bits

• .png8: PNG de 8 bits
• .png24: PNG de 24 bits
• .png32: PNG de 32 bits

Predeterminado: 32 bits cuando no se especifica ningún sufijo

Ejemplos

• Icon.png8: PNG de 8 bits con 256 colores
• Photo.png24: PNG de 24 bits sin transparencia
• Button.png32: PNG de 32 bits con canal alfa completo
• Logo.png: PNG de 32 bits (predeterminado)

Sintaxis de GIF

Formato

• .gif: transparencia alfa básica

Parámetro de calidad: no disponible para el formato GIF

Ejemplo

• Animation.gif: GIF con transparencia básica

Sintaxis de SVG

Formato

• .svg: formato vectorial

Parámetros de calidad y tamaño: no aplicable

Ejemplo

• Shape.svg: gráfico vectorial escalable

Parámetros de tamaño y escala

Los prefijos de tamaño aparecen antes del nombre del recurso, separados por un espacio.Si especifica las dimensiones en píxeles, puede omitir la unidad.

Escala relativa

Sintaxis:[porcentaje]% [nombre-del-recurso]

Ejemplos:

• 200% Logo.jpg: escalado al 200 %
• 50% Icon.png: escalado al 50 %
• 42% Button.gif: escalado al 42 %

Dimensiones absolutas

Sintaxis:[anchura] x [altura] [nombre-del-recurso] o [anchura][unidad] x [altura][unidad] [nombre-del-recurso]

Unidades admitidas: px, in, cm, mm (los píxeles pueden omitirse)

Ejemplos:

• 300 x 200 Hero.jpg - 300 px × 200 px
• 100x100 Thumb.png - 100 px × 100 px (sin espacios)
• 4in x 3in Photo.jpg - 4 pulgadas × 3 pulgadas
• 10cm x 5cm Card.png - 10 cm × 5 cm

Unidades mixtas

Puedes combinar distintas unidades en las especificaciones de anchura y altura.

Ejemplos

• 4in x 100 Banner.jpg - 4 pulgadas de ancho, 100 px de alto
• 200mm x 6in Poster.png - 200mm de anchura, 6 pulgadas de altura
• 10in x 50cm Flyer.jpg - 10 pulgadas de anchura, 50cm de altura

Dimensiones comodín

Usa ? como comodín para escalar proporcionalmente al especificar solo una dimensión.

Sintaxis:

• [width]x? [asset-name] — especifica la anchura; la altura se escala proporcionalmente
• ?x[height] [asset-name] — especifica la altura; la anchura se escala proporcionalmente

Ejemplos:

• 100x? Logo.png — 100px de anchura; la altura se calcula automáticamente
• ?x60in Banner.jpg — 60 pulgadas de altura; la anchura se calcula automáticamente

Varios recursos de una capa

Generar varias variaciones de recursos separando los nombres de recurso con comas o signos más.

Separadores:

• , — coma
• , — coma seguida de espacio(s)
• + — signo más
• + — signo más seguido de espacio(s)

Ejemplos:

• Icon.png,Icon.jpg - versiones PNG y JPEG
• 200% Logo.jpg, 100% Logo.jpg - dos tamaños
• Icon.png8 + Icon.png24 + Icon.jpg90% - tres variaciones de formato
• 100x100 Thumb.jpg90%, 50x50 Thumb.jpg80% - dos versiones escaladas

Ejemplos complejos de nombres de capa

Sintaxis combinada

La sintaxis completa puede combinar parámetros de formato, calidad y escalado:

[tamaño] [nombre-del-recurso].[formato][calidad], [tamaño] [nombre-del-recurso].[formato][calidad]

Ejemplo: 120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Esto genera cuatro recursos:

• Delicious.jpg: JPEG con calidad predeterminada, escalado al 120 %
• Delicious.png: PNG de 24 bits escalado al 42 %
• Delicious_2.jpg: JPEG con calidad del 90 % en 100×100px absolutos
• Delicious.gif: GIF escalado al 250 %

Organización de subcarpetas

Incluya una ruta de subcarpeta antes del nombre del recurso para organizar la salida:

Sintaxis:[subcarpeta]/[nombre-del-recurso].[formato]

Ejemplos:

• icons/Logo.png: guardado en la subcarpeta icons
• @2x/Hero.jpg: guardado en la subcarpeta @2x
• thumbnails/50% Photo.png: escalado al 50 % en la subcarpeta thumbnails

Validación de escalado absoluto

Sintaxis de escalado absoluto válida

Sintaxis de escalado absoluto no válida

Restricciones de nombre de capa

Caracteres no admitidos:: (dos puntos) y * (asterisco) no se pueden utilizar en nombres de capa para la generación de recursos.

Cadenas omitidas: Cualquier cadena sin extensión de archivo se omite en los nombres de capas con varios recursos.Por ejemplo, en 100% Delicious, 42% Layer 1.png, la cadena 100% Delicious se omite porque no tiene extensión.