XIII.3. Diseñador Módulo - Camisas con dos vistas y cambio de color de camisa, ejemplo personalización con diseñador
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:
- Estampación bolsillo
- Estampación en espalda
Al ser las dos características de tipo "Cajas opcionales" el cliente puede seleccionar las diferentes opciones:
- 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.
Creando el el lienzo para personalización del bolsillo
Preparación de archivos:
- Archivo JPG para la miniatura. Tamaño igual o inferior a 1 MB.
- Archivo PNG con fondo transparente de la vista delantera de la camisa (sólo las sombras). Para uso como mockup.
- 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.
Creación del lienzo:
- Nombrar el lienzo
- Ajustar modo de color en "A todo color"
- Ajustar tipo de imagen a subir en "Ambos"
- "Texto" deshabilitado permitir añadir texto al cliente
- Especificar para la vista del lienzo el ancho de 26 cm y el alto de 24 cm.
- Cargar la imagen de miniatura preparada.
- Guardar cambios
Edición del lienzo:
- 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.
- 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.
- Guardar cambios.
- Repetir el proceso para crear el segundo lienzo con la imagen del mockup de la trasera de la camisa.
Vinculando lienzo:
Para que el cliente vea la camisa en el color seleccionado en la característica de color vincular el lienzo en cada valor de color. Se pueden vincular varios lienzos a un valor.
Desde la interfaz de vincular lienzo se pueden realizar ajustes en él.
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. Ver capturas de pantalla siguientes:
El cliente hace clic en el área de reemplazo y carga un SVG o una imagen PNG o JPG .
La visualiza y modifica hasta que está conforme.
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.
