XIII.5. Diseñador Módulo - Pegatinas diferentes modelos, ejemplo personalización con diseñador
En este producto al cliente se le ofrece poder comprar pegatinas de diferentes formas con personalización gráfica para cada tipo de pegatina.
El cliente puede ajustar en el producto:
- El ancho y alto de la pegatina.
- La forma de la pegatina.
- El material.
- Acabados especiales.
- La cantidad de unidades de pegatinas según opciones de cantidad. Compra mínima de 100 unidades de pegatinas.
- El precio del pedido se muestra en tabla relacionada con las opciones de tiempo de producción.
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 fondoel transparenteárea coninterior unadel imagencírculo transparente. El corte de la forma de la pegatina. Dentro del círculo transparente, una línea discontinua en rojo para indicar el margen de sangrado. Esta imagen va a ocultar lo que esté fuera de la zona transparente del PNG. Y además indicar al cliente el margen de sangrado y la línea de corte de la pegatina.
1.1.3 Archivo PNG con fondo transparente con un icono de carga de imagen. Esta imagen se utilizará para definir el área de reemplazo.
1.2 Creación del lienzo:
1.2.1 Nombrar el lienzo
1.2.3 Ajustar modo de color en "A todo color"
1.2.4 Ajustar tipo de imagen a subir en "Ambos"
1.2.5 "Texto" deshabilitado permitir añadir texto al cliente
1.2.6 Especificar para la vista del lienzo el ancho de 15 cm y el alto de 15 cm.
1.2.7 Cargar la imagen de miniatura preparada.
1.2.8 Guardar cambios
1.3 Edición del lienzo:
1.3.1 Subir la imagen PNG con la transparencia de la forma.
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 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 En interfaz de capas colocar la capa de la imagen PNG con la transparencia de forma en posición delante (clic en icono flecha arriba de la capa).
1.3.4 Guardar cambios.
1.3.5 Repetir el proceso para crear los lienzos de los otros modelos de forma de corte de pegatinas con las imágenes correspondientes.
2. Vinculando los lienzos
En este producto se ha vinculado el lienzo correspondiente a cada valor de la característica "Corte de pegatinas". El cliente al seleccionar una forma de corte de pegatinas, el selector de personalización de lienzo mostrará la imagen miniatura correspondiente a la forma seleccionada.
2.1 Para que el cliente vea el lienzo en el diseñador correspondiente a la opción seleccionada en la característica llamada "Corte de pegatinas" en la característica se han de vincular cada lienzo con el valor.
Al hacer clic en añadir lienzo mostrará un selector con todos los lienzos creados en el producto. Seleccionar el que se quiere vincular.
En este producto en la vista del cliente muestra sólo un botón de acceder al diseñador. El correspondiente al tipo de pegatina seleccionada por el cliente en la característica llamada "Corte de pegatinas".
3. El diseñador de este producto desde el lado del cliente
En la ficha del producto se muestra un único botón para acceder al lienzo correspondiente al tipo de corte de pegatina que tiene seleccionado.
El cliente en la vista pública ha de hacer clic en el botón para acceder al diseñador.
Se abrirá el lienzo y verá la máscara de corte de forma de la pegatina y el área de reemplazo. Éste último presenta línea discontinua y el icono de subir archivo.
Hace 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 con la "máscara de forma".
El archivo que representa el corte de la forma está ocultando la imagen subida en el área de reemplazo. Todo aquello que no está dentro del círculo. En el círculo transparente, al crear el archivo se ha añadido una línea discontinua de color rojo para indicar al cliente el margen de sangrado.
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.
También puede salir del diseñador y volver al producto para cambiar la opción de corte de pegatina.
Importante: Después de cada modificación hacer clic en botón "HECHO" para que los cambios se queden guardados.