Para incluir un trazo exterior y mantener sin cambios las dimensiones PNG de un recurso de juego, reserva espacio para el trazo dentro de una mesa de trabajo de tamaño fijo. En Affinity para Mac, ajusta toda la ilustración contorneada dentro de ese límite y, después, exporta la mesa de trabajo con nombre al tamaño en píxeles requerido.

Este flujo de trabajo está pensado para quien prepara un recurso vectorial pequeño para un juego, como un icono geométrico de 32 × 32 px. Utiliza los controles del Centro de ayuda actual de Affinity para escritorio. Affinity Designer 2 tiene un espacio de trabajo de exportación independiente llamado Export Persona; la documentación actual de Affinity lo denomina Slice Studio. El flujo principal que se describe a continuación utiliza el cuadro de diálogo Exportar actual para escritorio. Documentación actual de exportación de Affinity, Documentación de Export Persona de Designer 2.

¿Qué puede permanecer sin cambios al añadir un trazo exterior?

Antes de editar, distingue tres medidas: las dimensiones de la forma, la ilustración visible incluido el trazo y las dimensiones en píxeles de la imagen exportada. El panel Trazo de Affinity coloca el trazo centrado sobre el borde del objeto, hacia dentro o hacia fuera. Estas opciones de alineación determinan el espacio que ocupa el contorno. Panel Trazo.

Un trazo exterior necesita espacio más allá de la forma original. Si la forma ya ocupa todo el límite de salida, para conservar el trazo completo hay que cambiar algo: reducir o remodelar la ilustración, usar el espacio transparente disponible o escalar toda la composición al tamaño de salida requerido. Es geométricamente imposible conservar las posiciones originales de los bordes, el trazo exterior completo y los mismos límites de salida si el trazo rebasa esos límites.

Affinity establece un límite claro para las mesas de trabajo: los objetos que se extienden más allá de una mesa de trabajo quedan recortados en su borde. Por tanto, una mesa de trabajo puede mantener fijo el tamaño de exportación, pero no conservar el contenido del trazo que quede fuera de ese límite. Acerca de las mesas de trabajo.

La documentación oficial de exportación describe cómo elegir un área de exportación y cambiar la anchura y la altura de salida. No documenta ninguna opción que incluya trazos exteriores que sobresalen y, a la vez, conserve tanto la escala original de la ilustración como un límite de imagen fijo. El método compatible consiste en encajar la ilustración visible dentro del área de exportación elegida. Cuadro de diálogo Exportar, Configuración de exportación.

Requisito Método adecuado Qué cambia
Mantener un trazo realmente exterior y las dimensiones PNG exactas Incrustar la forma en una mesa de trabajo fija El tamaño de la forma o el relleno disponible
Mantener el límite actual de la forma como límite exterior visible Usar un trazo alineado hacia dentro, cuando corresponda La ubicación del contorno y el área visible del relleno
Mantener las proporciones de toda la composición y forzar un tamaño de salida determinado Cambiar el tamaño de la imagen exportada La escala de la ilustración en los píxeles exportados
Mantener toda la ilustración a su escala original sin disponer de espacio Aumentar el área de salida Las dimensiones de exportación; esto no cumple el requisito de tamaño fijo

¿Cómo encajar un trazo exterior en una exportación de 32 × 32 px?

El siguiente ejemplo práctico utiliza un cuadrado ilustrativo alineado con los ejes, con un trazo exterior uniforme de 2 px. Se prescinde deliberadamente de efectos, trazos de anchura variable y detalles salientes en las esquinas para que el cálculo del espacio resulte claro.

En este cuadrado, la anchura visible equivale a la anchura de la forma más una anchura de trazo a cada lado. Por tanto, una salida de 32 px permite una forma de 32 − 2 − 2 = 28 px de ancho. El mismo cálculo da una altura de 28 px. Al centrar la forma, quedan 2 px entre el borde subyacente y cada borde de la mesa de trabajo; el trazo exterior ocupa ese espacio.

1. Establece el área de salida fija

En Vector Studio, elige Archivo > Nuevo. Establece Unidades del documento en píxeles, Anchura de página y Altura de página en 32 px y activa Mesas de trabajo. Activa Fondo transparente si el recurso necesita un contorno transparente. Para este ejemplo, usa 72 DPI y haz clic en Crear documento. Estos controles del documento se describen en la ayuda de Affinity para crear documentos. Crear documentos nuevos.

Si vas a añadir una mesa de trabajo de exportación específica a un documento existente, la Herramienta Mesa de trabajo ofrece controles An. y Al. para crear una mesa de trabajo nueva y, después, Insertar mesa de trabajo. Introduce explícitamente las dimensiones requeridas en píxeles en lugar de ajustar la mesa de trabajo alrededor de la ilustración seleccionada. Herramienta Mesa de trabajo.

2. Ajusta el tamaño de la forma subyacente y configura el trazo

Crea o selecciona el cuadrado. Abre Ventana > General > Transformar e introduce An.: 28 px y Al.: 28 px. El panel permite introducir dimensiones exactas y elegir un punto de anclaje para las transformaciones. Centra el cuadrado, de modo que sus bordes subyacentes queden a 2 px de la mesa de trabajo. Panel Transformar.

Abre Ventana > Vector > Trazo. Elige un trazo sólido, introduce Anchura: 2 px y selecciona Alinear trazo hacia fuera. Para este ejemplo sencillo, usa un vértice redondeado. Affinity documenta los controles de alineación, anchura y vértice en el panel Trazo. Panel Trazo.

Al cambiar el tamaño de una ilustración existente, comprueba cómo se escala el trazo. Escalar con objeto determina si la anchura del trazo cambia junto con una forma cerrada. El panel Transformar también tiene Anulación de escala, que puede forzar el escalado de propiedades como las anchuras de trazo. Después de cambiar el tamaño, vuelve a comprobar que la anchura prevista sea de 2 px, en lugar de dar por sentado que no ha variado. Controles de escalado del trazo, Anulación de escala de Transformar.

3. Comprueba toda la extensión visible

El cuadrado de 28 px más su trazo exterior ocupa ahora 32 px en cada dirección. Se trata de un cálculo geométrico para el ejemplo indicado, no de un resultado de exportación medido. Si quieres dejar un margen transparente alrededor del contorno, reserva también ese espacio: un margen de 1 px en cada lado reduce el cuadrado permitido a 26 × 26 px.

No apliques la misma resta sin más a todos los recursos. Los vértices en inglete de Affinity pueden sobresalir en esquinas agudas, mientras que los remates afectan a los extremos de las líneas. Una silueta compleja requiere inspeccionar todo su contorno, especialmente en las esquinas y los extremos. El cálculo sencillo de anchura es un punto de partida para formas regulares. Vértices y remates del trazo.

¿Cómo exportar la mesa de trabajo sin cambiar sus dimensiones?

Elige Archivo > Exportar > Exportar y, después, selecciona un ajuste preestablecido de PNG. En Área, selecciona la mesa de trabajo con nombre. Affinity distingue esta opción de Área de selección, que incluye las capas superpuestas, y de Solo selección, que excluye las capas superpuestas no seleccionadas. Si eliges la mesa de trabajo con nombre, el área de exportación deseada queda especificada claramente. Cuadro de diálogo Exportar.

Comprueba la anchura y la altura de salida: ambas deben ser de 32 px en este ejemplo. Affinity permite establecer otras dimensiones y ofrece la opción Bloquear relación de aspecto. Evita cambiar el tamaño de salida para compensar una ilustración que aún sobresale de la mesa de trabajo; primero ajusta el contorno dentro de sus límites. Configuración de exportación.

Antes de guardar, inspecciona la vista previa de exportación. En Mac, ⌘1 muestra la vista previa al 100 % y ⌘2 al 200 %. Revisa los cuatro bordes para detectar partes recortadas del contorno y confirmar cualquier margen transparente previsto. A continuación, elige Preguntar ubicación, haz clic en Exportar, ponle nombre al archivo, elige su ubicación y haz clic en Guardar. Cuadro de diálogo Exportar y atajos de vista previa para Mac.

Como comprobación práctica final, abre el PNG guardado e inspecciona sus dimensiones en píxeles y toda la silueta. Que la anchura y la altura sean correctas no demuestra por sí solo que el trazo quepa: una imagen recortada también puede medir exactamente 32 × 32 px.

¿Pueden las porciones conservar el mismo resultado de tamaño fijo?

Sí, siempre que definas deliberadamente el área de exportación. Affinity documenta dos comportamientos distintos de las porciones: una porción creada a partir de un elemento del panel Exportar capas ajusta automáticamente su tamaño a la extensión de ese elemento y exporta el contenido de su capa; una porción dibujada manualmente incluye el contenido de todas las capas visibles dentro de su área. Exportar con Slice Studio.

Para crear una región de exportación fija, selecciona la Herramienta Porción en Slice Studio y arrastra para delimitar un área alrededor de la ilustración preparada. Usa el panel Transformar correspondiente para establecer la posición y el tamaño exactos de la porción. Elige PNG en las opciones de exportación de la porción y exporta la porción requerida. Mantén todo el trazo dentro del rectángulo de la porción, igual que harías dentro de una mesa de trabajo. Exportar porciones.

Comprueba la resolución de exportación indicada en lugar de dar por sentado que 1x siempre equivale a las dimensiones en píxeles del documento. Affinity documenta la relación entre el escalado de una porción y los DPI del documento: su ejemplo de 64 × 64 px se exporta a 64 × 64 px a 1x con 72 DPI, pero a 32 × 32 px a 1x con 144 DPI. Este es un problema distinto de configuración del tamaño, independiente de la ubicación del trazo. Dimensiones de las porciones y DPI.

¿Qué debes cambiar si el resultado sigue sin ser correcto?

Usa el síntoma para decidir cuál es la siguiente edición:

  • El PNG tiene las dimensiones correctas, pero el contorno está recortado: mueve o reduce la ilustración hasta que todo el trazo quepa dentro de la mesa de trabajo o la porción.
  • Las dimensiones del PNG varían cuando cambia la ilustración: comprueba si estás exportando una selección o una porción de objeto cuyo tamaño se ajusta automáticamente. Para obtener un límite fijo, usa la mesa de trabajo con nombre o una porción manual con dimensiones precisas.
  • El grosor del contorno cambia tras modificar el tamaño: comprueba Escalar con objeto y Anulación de escala de Transformar; después, restablece la anchura de trazo deseada.
  • El contorno cabe, pero el recurso parece más pequeño: comprueba si se usaron la anchura y la altura de exportación para escalar al tamaño final una composición más grande.
  • Solo se recortan las esquinas agudas: inspecciona el estilo de vértice y la extensión del inglete antes de cambiar el tamaño de toda la composición.

Estas comprobaciones se basan en las diferencias documentadas entre el recorte de mesas de trabajo, las extensiones de porciones, el escalado de trazos y el cambio del tamaño de exportación. Cada una aborda una causa distinta; cambiar solo la alineación del trazo no resolverá todos los problemas de tamaño de exportación. Límites de las mesas de trabajo, Comportamiento de las porciones, Controles del trazo, Dimensiones de exportación.

Para conseguir un flujo de trabajo repetible con recursos de juego, primero establece el límite en píxeles requerido y reserva dentro de él espacio para el contorno. Mantén la alineación exterior si esa apariencia es importante, ajusta la ilustración subyacente para dejar espacio y exporta la región fija. Así se conservan las dimensiones de archivo solicitadas y se deja espacio para que se renderice todo el trazo.

Fuentes