D5. Láminas de cuatro cuadros, ejemplo personalización con diseñador - Diseñador Módulo
En este lienzo el cliente puede subir los archivos en el mockup que presenta el lienzo de cuatro cuadros. Una imagen para cada cuadro. El producto son cuatro cuadros con las láminas impresas para cada cuadro, de las imágenes subidas por el cliente.
1. Creando el lienzo 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 JPG de la imagen con los cuatro cuadros. 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 y mostrar el área de reemplazo.
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 impresión (lienzo) el ancho y alto en cm.
1.2.6 Cargar la imagen de miniatura preparada.
1.2.7 Guardar cambios.
1.3 Edición del lienzo:
1.2.1 Clic en el icono de cámara para comenzar a subir las imágenes que van a componer el lienzo.
1.2.3 Subir la imagen con los 4 cuadros sin lámina.
1.2.4 Clic en la imagen en la vista del diseñador para que muestre todos los botones relacionados con área de impresión.
1.2.5 Hacer clic en resetear área de impresión para poder definirla de nuevo.
1.2.6 Con la misma imagen seleccionada hacer clic en "Definir el área de impresión según el último elemento seleccionado". El área de impresión se ajusta al tamaño de la imagen subida.
1.2.7 Hacer clic en el icono de capas. Bloquear la capa de la imagen del mockup de los cuadros haciendo clic en el icono del candado.
1.2.8 A continuación se crean las áreas de reemplazo. Para lo que se han preparado unas imágenes en png con el icono de carga de archivo. Estas imágenes tienen la misma proporción de tamaño y orientación que las de los espacios para laminas de los cuadros. Guardar en PNG sin fondo.
1.2.9 Subir la imagen PNG al lienzo de la misma forma que en el paso 1.3. La imagen se muestra en el lienzo y en cada esquina presenta un icono de acciones de transformación, como eliminar, rotar, duplicar y escalar. Hacer clic y arrastrar en este último para escalarla y hacerla más pequeña. Si se comete un error se puede hacer o deshacer con los botones correspondientes que se muestran en la zona inferior del lienzo.
1.2.10 También se puede ver que la imagen subida muestra una interfaz más completa justo en la zona inferior de ella. Más adelante se mostrarán más detalles sobre esta interfaz.
1.2.11 Una vez escalada y centrada la imagen al espacio de la lamina se procede a definirla como área de reemplazo. Para ello desde la sección de capas seleccionar la capa de la imagen y hacer clic en el icono de nube para activarla como área de reemplazo. Guardar desde el botón "Guardar".
El diseñador dispone de unas guías automáticas para facilitar la alineación central tanto vertical como horizontal.
Con las flechas del teclado también se puede mover el elemento.
1.2.13 Para crear el resto de áreas de reemplazo duplicar la primera realizada haciendo clic en el icono de la esquina superior izquierda de la imagen. Arrastrar la imagen hasta la posición de la lamina del cuadro de la derecha y definir la capa como área de reemplazo. Para el resto de áreas de reemplazo repetir las acciones indicadas. Guardar cambios.
Para mayor precisión en el posicionamiento se puede usar las flechas de dirección del teclado. Tanto del lado del gestor como del lado del cliente.
2. Vinculando el lienzo
2.1 Vincular el lienzo a la opción de un valor de una característica. En este ejemplo a la que indica el tamaño del cuadro.
2.2 Al hacer clic en añadir lienzo mostrará un selector con todos los lienzos creados en el producto. Seleccionar el interesado.
3. Probando el diseñador de este producto desde el lado del cliente
El cliente accede al diseñador haciendo clic en el botón del lienzo correspondiente
Desde el lado del cliente hacer clic en el selector de lienzos para acceder a la personalización.
Como cliente hacer clic en cada área de reemplazo y cargar una imagen.
El cliente puede hacer las transformaciones de escalar, rotar, duplicar, posicionar y eliminar entre otras, viendo los cambios en tiempo real sobre el objeto.
El área de reemplazo permite al cliente ver los límites y comprobar que el archivo está conforme al espacio de personalización disponible.
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 otras.
Añadiendo texto
En este lienzo el cliente puede añadir texto. El texto no queda limitado por el área de reemplazo.
Para añadir texto se dispone de libertad de composición con los múltiples modificadores y el uso de cualquier tipo de tipografía que esté añadida en las fuentes para el diseñador.
El cliente puede escalar, rotar entre otras acciones el texto, mientras ve como queda en los objetos que presenta el lienzo.
Importante: Después de cada modificación hacer clic en botón "HECHO" para que los cambios se queden guardados.