XIII.2. Diseñador Módulo - Láminas de cuatro cuadros, ejemplo personalización con diseñador
- Clic en crear lienzo. Nombrar lienzo, seleccionar modo de color, tipo de imagen a subir, tamaño de lienzo, subir miniatura y guardar.
- Clic en el icono de cámara para comenzar a subir las imágenes que van a componer el lienzo.
- Subimos la imagen de los 4 cuadros.
- Clic en la imagen en la vista del diseñador para que nos muestre todos los botones relacionados con área de impresión.
- Hacemos clic en resetear área de impresión para poder definirla de nuevo.
- Con la misma imagen seleccionada hacemos 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.
- Hacemos clic en el icono de capas y bloqueamos la capa de la imagen del mockup de los cuadros haciendo clic en el icono del candado.
- A continuación vamos a crear las áreas de reemplazo. Para lo que hemos 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. Guardamos en PNG sin fondo.
- Subimos la imagen PNG al lienzo de la misma forma que en el paso 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 botonoes correspondientes que se muestran en la zona inferior del lienzo.
-
También podemos 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.
- 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 seleccionado la capa de la imagen y hacemos clic en el icono de nube para activarla como área de reemplazo. Guardamos desde el botón "Guardar".
- Para crear el resto de áreas de reemplazo duplicamos 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 fijar como área de reemplazo como se indica en el paso 11. Para el resto de áreas de reemplazo repetimos las acciones indicadas. Guardar cambios.
Para mayor precisión en el posicionamiento se puede usar las flechas de dirección del teclado. - Vinculamos 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.
Al hacer clic en añadir lienzo mostrará un selector con todos los lienzos creados en el producto. Seleccionar el interesado.
- Vemos el producto en la vista pública.
- Desde el lado del cliente hacemos 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. Hacer las transformaciones de escalar, rotar, duplicar, posicionar y eliminar entre otras. Una vez esté del agrado del cliente hacer clic en botón hecho. Si no es del agrado se puede sustituir y visualizar otras imágenes que suba.
- Ahora como cliente vamos a crear un texto en una de los cuadros. 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. Más adelante se explica cómo añadir más tipografías para el diseñador.
