D6. Camisas con dos vistas y cambio de color de camisa, ejemplo personalización con diseñador -Diseñador Módulo
En este ejemplo mostramos cómo se ha creado el producto para personalizar una camisa con dos vistas.
Presenta tres características de tipo "Cajas opcionales" para personalizar:
a) Estampación bolsillo
b) Estampación en espalda
El cliente puede seleccionar las opciones de personalización de la camisa:
- Con estampación de bolsillo sólo.
- Con estampación en espalda sólo
- Con estampación en bolsillo y en espalda
Además de ofrecer opciones de tallas se ofrece la camisa en diferentes colores a elegir.
También se ha creado una característica llamada Material composición en la que con un único valor (Algodón) se informa al cliente del material y en la descripción de la opción se le dan más detalles.
La característica de cantidad principal (unidades de producto a pedir) se ha mantenido en modo libre, con cantidad mínima de unidades de compra en 1 unidad.
Para la personalización con el diseñador se han creado dos lienzos.
En la vista del cliente se ve el selector con la imagen de miniatura cargada en cada uno de los lienzos creados.
1. Creando los lienzos para personalización por el cliente con el diseñador
1.1 Preparación de archivos:
1.1.1 Archivo JPG para la miniatura. Tamaño igual o inferior a 1 MB.
1.1.2 Archivo PNG con fondo transparente de la vista delantera de la camisa (sólo las sombras). Para uso como mockup.
1.1.3 Archivo PNG con fondo transparente con un icono de carga de imagen y opcionalmente con un marco de línea discontinua según el perímetro de la imagen. Esta imagen se utilizará para definir el área de reemplazo.
Para que el producto cambie de color el diseñador añade al lienzo un fondo del mismo color que selecciona el cliente.
Las imágenes de la camisa se han tratado para que solo estén las sombras en la imagen. Lo que es el color de la camisa es transparente.
Las imágenes de la camisa subidas por el administrador a los lienzos, son archivos .PNG, con fondo transparente.
1.2 Creación del lienzo
1.2.1 Nombrar el lienzo
1.2.2 Ajustar modo de color en "A todo color"
1.2.3 Ajustar tipo de imagen a subir en "Ambos"
1.2.4 "Texto" deshabilitado permitir añadir texto al cliente
1.2.5 Especificar para la vista del lienzo el ancho y el alto en cm.
1.2.6 Cargar la imagen de miniatura preparada.
1.2.7 Guardar cambios.
1.3 Edición del lienzo:
1.3.1 Subir la imagen PNG con el mockup de la camisa.
Opcional resetear el área de impresión y definir el área de impresión según el último objeto seleccionado. Esto redimensionará el área de impresión adaptándolo a la imagen que se ha utilizado.
Ir a interfaz de capas y bloquear la imagen para que el cliente no pueda manipularla.
1.3.2 Cargar la imagen preparada para mostrar y usar como área de reemplazo.
Escalar la imagen al tamaño del área de personalización del bolsillo y posicionar en la ubicación del área a personalizar. Definir la imagen como área de reemplazo haciendo clic en el icono de nube en la capa. 
1.3.3 Guardar cambios.
1.3.4 Repetir el proceso para crear el segundo lienzo con la imagen del mockup de la trasera de la camisa.
2. Vinculando los lienzos
2.1 Para que el cliente vea la camisa en el color seleccionado, en la característica de color vincular los dos lienzos en cada valor de color.
2.2 Al hacer clic en añadir lienzo mostrará un selector con todos los lienzos creados en el producto. Seleccionar el interesado.
2.3 Se vinculan los dos lienzos en cada valor de la característica "Color".
En este ejemplo de producto el cliente al hacer clic en uno de los lienzos le mostrará la camisa en el color que tenga seleccionado. El cambio de color afectará a los dos lienzos ya que ambos están vinculados a cada valor de color.
3. Probando el diseñador de este producto desde el lado del cliente
En la ficha del producto se muestran dos botones para acceder a cada lienzo.
Hacer clic en el botón del lienzo correspondiente.
Se abrirá el lienzo y la camisa se verá en el color que se ha seleccionado en las opciones de color del producto.
Reconocer el área de reemplazo. Presenta línea discontinua y el icono de subir archivo.
Hacer clic en el área de reemplazo y luego clic en el botón de subida de archivo. Puede cargar un SVG o una imagen PNG o JPG a todo color.
El área de reemplazo indica visualmente al cliente la zona de personalización ya que oculta la parte de la imagen subida por el cliente que queda fuera del área. Esto permite que el cliente vea los límites y pueda comprobar que el archivo está conforme según el espacio de personalización disponible.
El cliente puede hacer las transformaciones de escalar, rotar, duplicar, posicionar y eliminar entre otras, viendo los cambios en tiempo real sobre la imagen del objeto.
Una vez el cliente esté conforme con la personalización ha de hacer clic en botón "HECHO".
Si no es del agrado puede eliminar el o los archivos subidos y subir otros.
Importante: Después de cada modificación hacer clic en botón "HECHO" para que los cambios se queden guardados.