Preparar tu producto

Prepara tus capas 2D.

Un lienzo. Capas alineadas. Opciones claras.

Base
Marco de puerta en un lienzo transparente completo
Acabado
Panel de roble en la misma posición
Cristal
Inserto de cristal a la derecha del lienzo común
Tirador
Tirador negro a la izquierda del lienzo común
Un producto completo
Puerta completa de roble con cristal y tirador negro

El espacio vacío forma parte de cada archivo.

01

Empieza con un lienzo común.

Mantén las mismas dimensiones, cámara, recorte y posición.

Mismas dimensionesMismo origenMisma vista
¿Qué debe mantenerse fijo?

Usa un archivo maestro editable. Mantén coherentes la escala, la perspectiva, la iluminación y las sombras. Exporta cada pieza en el lienzo completo; no recortes los píxeles vacíos ni centres cada pieza por separado.

1080 px1080 px
Base frame
Base
1080 px1080 px
Oak panel
Acabado
1080 px1080 px
Glass insert
Cristal
1080 px1080 px
Black handle
Tirador
1080 × 1080 es un ejemplo, no un requisito fijo.
02

Exporta la pieza.
Conserva el espacio vacío.

Usa capas transparentes para las piezas que cambian de forma independiente.

¿Capas o imágenes completas?

Las piezas independientes usan PNG o WebP con transparencia. Una escena completa u otro ángulo puede requerir una imagen de sustitución completa. JPG sirve para imágenes completas opacas, no para superposiciones transparentes.

Prepara una imagen por acabado o tirador. No necesitas renderizar cada combinación completa si las piezas independientes están bien alineadas.

Fondo transparente
Tirador con espacio vacío transparente✓
Fondo blanco
El espacio blanco taparía las imágenes de detrás×
Recortado y centrado
Marco que muestra una posición incorrecta de capasIncorrecto: el tirador se ha desplazado al centro de la puerta×
Puerta completa
La puerta compuesta correctamente✓

Orden de capas · de atrás hacia delante

1 · Base
2 · Acabado
3 · Cristal
4 · Tirador

PNG o WebP
con transparencia

El patrón de cuadros indica píxeles vacíos. No forma parte de la exportación.

03

Conserva la calidad.
Reduce el tamaño del archivo.

Comprime las exportaciones sin cambiar sus dimensiones.

Bordes nítidosArchivos pequeñosNombres de archivo claros
¿Qué debo revisar después de exportar?

Revisa los bordes sobre fondos claros y oscuros. Comprueba detalles y bordes transparentes al tamaño que verá el cliente. Conserva el maestro editable; la compresión depende de la imagen y no hay un tamaño único para todas las capas.

Exportación original
Exportación PNG original del roble

178 KBPNG · 1080 × 1080

Exportación optimizada
Exportación WebP de roble más ligera en el mismo lienzo

13 KBWebP · 1080 × 1080

Borde transparente ampliado
Borde ampliado del panel de roble con espacio transparente

Solo vista de detalle

door_base.webpfinish_oak.webphandle_black.webp

Tamaños reales del paquete de ejemplo. Tus imágenes pueden variar.

04

Vincula las capas en ConfigUX.

Añade imágenes. Revisa las conexiones. Prueba las opciones.

AssetsOptionsPreview
Puerta · Ejemplo 2DEspacio de ejemplo
OptionsMappingPricesElementsViewerLayoutBrand

← Back to Finish

Roble

Imagen de opción roble
Roble
Available
Added priceIncluded
Image connectionConnected ›
VisibilityAlways ›
Tooltip & helpOff ›
Label & detailsEnglish ›

Abre una opción en Options para revisar su Image connection.

Vista de producto 2D
Acabado
Tirador

Roble + Negro · Prueba las opciones. El marco y el cristal permanecen en su sitio.

  1. 1 · Añadir imágenes
    Sube archivos a Assets o añádelos al crear el configurador.
  2. 2 · Revisar
    Abre tu opción en Options y revisa Image connection.
  3. 3 · Vista previa
    Prueba todos los acabados y tiradores. Revisa la alineación en ordenador y móvil.
¿En qué se diferencian las capas de las imágenes completas?

Un proyecto por capas conserva la base y combina imágenes transparentes independientes en un orden fijo. Studio mantiene esas conexiones existentes. Los controles sencillos “Product image” y “Apply image connection” asignan una imagen de sustitución completa. Un tirador transparente por sí solo no es una imagen completa del producto.

Esta ilustración de Studio usa los archivos de ejemplo. Los botones muestran el resultado de las capas localmente; no crean ni editan un configurador en tu cuenta.

Pruébalo con un paquete de ejemplo.

Seis capas alineadas. Dos acabados. Dos tiradores.
PNG, WebP y archivos fuente editables.

¿Listo para convertir tus archivos en una experiencia de producto?Obtener la guía de IA ConfigUX →