D. Diseñador Módulo

• D1. Introducción - Diseñador Módulo
• D2. Fuentes para el diseñador - Diseñador Módulo
• D3. Crear lienzo Interfaz - Diseñador Módulo
• D4. Actualizar lienzo Interfaz - Diseñador Módulo
• D5. Láminas de cuatro cuadros, ejemplo personalización con diseñador - Diseñador Módulo
• D6. Camisas con dos vistas y cambio de color de camisa, ejemplo personalización con diseñador -Diseñador Módulo
• D7. Bolígrafos varios modelos, ejemplo personalización con diseñador - Diseñador Módulo
• D8. Pegatinas diferentes modelos, ejemplo personalización con diseñador - Diseñador Módulo
• D9. Diseñador con característica de tipo Medidas (antes llamada "Tamaño") - Diseñador Módulo

D1. Introducción - Diseñador Módulo

Para crear un producto con diseñador es necesario tener contratado el módulo correspondiente. 

El módulo diseñador permite crear productos en los que el cliente pueda cargar archivos tipo PNG, JPG, y SVG, añadir y editar textos  y visualizarlos en el mockup del producto.  Es decir, permite crear un producto para compra de productos personalizados con una interfaz visual en tiempo real que actúa además como sistema de carga del archivo.

Si se crea un producto con diseñador también se puede activar el botón de "Requiere archivo". Así si se rechaza el archivo el administrador ya dispone de la imagen de vista de personalización y el cliente puede cargar de nuevo el archivo mediante el sistema de carga de "Requiere archivo" en su pedido.

Cuando se añade al carrito el producto personalizado con el diseñador la aplicación guarda la personalización provisionalmente para que una vez tramitado el pedido esté disponible para descarga en el pedido.

Se recomienda abrir los archivos SVG subidos al pedido con la aplicación gratuita Inkscape. Es muy probable que otras aplicaciones de diseño vectorial no representen los SVG presentes en un archivo. 

Con el módulo diseñador instalado se presentan estos cambios en el gestor:

1. En la ficha de producto mostrará un ajuste para activarlo.

2. En el menú de la aplicación la sección de Ajustes -> Catálogo -> Fuentes para el diseñador

3. En los valores de las características se muestra el acceso a la interfaz para vincular lienzo.

4. Cuando se activa el diseñador en la ficha de producto se presentan el siguiente cambios en la ficha de producto: Presenta una nueva pestaña llamada "LIENZOS". 

En la pestaña "LIENZOS" se encuentra la interfaz de creación de lienzos.

Los lienzos son creados por el administrador. Para crearlos se requerirá disponer de los archivos necesarios de tipo imagen o vector (SVG).  Los archivos PNG pueden ser modificado el color desde el diseñador. 

Cada lienzo puede tener múltiples áreas de reemplazo. Son áreas en las que el cliente puede cargar una imagen y que están delimitadas por la imagen o imágenes que se utilizan como áreas de reemplazo. El cliente al cargar la imagen entre otras acciones puede escalarla, pero el área de reemplazo ocultará la parte de la imagen que se salga del área de reemplazo establecida.

Una vez creado el lienzo puede vincularse con un valor. Cuando el cliente seleccione el valor la visualización en la vista del cliente del selector de lienzos cambiará y mostrará la imagen de miniatura que el administrador ha subido para ese lienzo.

Una vez el cliente haya terminado con la personalización ha de hacer clic en el botón "Hecho". Esa acción hará que se guarde provisionalmente la personalización, el lienzo con la imagen y si procede el texto u otras modificaciones hechas por el cliente.
Cuando el cliente haga clic en "Añadir al carrito"  el lienzo personalizado será cargado para ser recibido con el pedido una vez haya sido tramitado.

Del lado del cliente la interfaz es igual que la del lado del gestor.  Los ajustes hechos por el administrador en el lienzo como por ejemplo bloqueo de capas o permitir añadir texto entre otros no permitirán al cliente realizar acciones relacionadas como por ejemplo; mover, escalar, rotar, eliminar la capa o añadir texto.

4.1 Al crear un lienzo en la vista pública del cliente se presenta:

4.1.1 Botón tipo imagen de acceso al lienzo.

4.1.2 Interfaz de diseñador en línea del lado del cliente.

D2. Fuentes para el diseñador - Diseñador Módulo

Interfaz general de añadir fuentes para el diseñador.

En el menú lateral del gestor > Ajustes > Catálogo, presenta la herramienta llamada "Fuentes para el diseñador".

Desde esta sección se añaden las fuentes que serán seleccionables en los campos de texto que se añadan a los diseños. Se pueden añadir diferentes tipos:

• • • Fuentes genéricas : que ya están integradas en los navegadores por defecto como son Arial, Times New Roman o Helvetica.
    • Fuentes de google: En caso de incluir una fuente de Google Fonts se deberá respetar el nombre otorgado por google y como url poner ‘google’.
    • Fuentes personalizadas: En caso de querer incluir una fuente externa, debemos conocer la url del archivo de la fuente, la cual deberá indicarse en el campo ‘url’.
      

Elemento	Función
Crear fuente botón	Para acceder a la interfaz de añadir fuente.
Filtro y paginación	Poder filtrar y buscar  en la lista fuentes añadidas. Paginación con elementos por página y totales que contiene la lista.
ID	Visualización de identificados único de cada fuente añadida. Para uso interno por el sistema.
Nombre	Visualización del nombre de la fuente añadida.
Enlace	Visualización del enlace de la fuente añadida.
Botón "Actualizar"	Acceder a la interfaz de actualización de la fuente añadido.
Flecha botón "Actualizar"	Para acceder a la acción de eliminar fuente añadida.

Para conocer más ver página de este manual llamad,  2.8.2.11 Fuentes para el diseñador.

D3. Crear lienzo Interfaz - Diseñador Módulo

 

1. Crear lienzo interfaz primer paso

Elemento	Función
Crear lienzo	Botón texto que abre la interfaz de creación de un nuevo lienzo.

2. Crear lienzo interfaz segundo paso

Al hacer clic en botón crear lienzo.

Elemento	Función
Nombre	Nombre a asignar al lienzo. Requerido.
Descripción	Para reflejar información de interés para los administradores.
Modo de color selector	Permite limitar la personalización según modo de color. Disponibles opciones de a uno, dos, tres, cuatro colores y  "A todo color".
Tipo de imagen a subir selector	Permite limitar la personalización según el tipo de imagen a subir. Disponibles cuatro opciones, ninguno, vector (SVG) , trama (mapa de bits JPG o PNG) o ambos (trama y vector).
Texto habilitado	Botón para permitir o no al cliente añadir y editar un texto. En magenta lo permite. En blanco no lo permite.
Ancho	Tamaño de ancho del lienzo. Afecta a al tamaño de ancho de la vista del diseñador.
Alto	Tamaño de alto del lienzo. Afecta a al tamaño de ancho de la vista del diseñador.
Botón emplear medidas definidas en el producto	Marcado (en magenta),  si hay una característica de tipo tamaño, el lienzo se adaptará automáticamente.  Si se marca este botón: No se puede subir ningún archivo desde el gestor al lienzo. No se debe vincular el lienzo a ningún valor .
Miniatura	Imagen para la vista del selector de lienzos desde el lado del cliente. Tamaño máximo 1 MB (380 x 380 pixeles a 72 ppp). Requerido.
Botón "CREAR"	Guardar el nuevo lienzo creado.

El ajuste de modo de color "A todo color" es el único que permite seleccionar  la subida de imágenes de tipo mapa de bits y de tipo vector. El resto de modos de color sólo permiten seleccionar carga de vectores.

D4. Actualizar lienzo Interfaz - Diseñador Módulo

1. Interfaz en modo lista actualización lienzo 

Elemento	Función
Miniatura y botón	Vista desde el gestor de la imagen miniatura del lienzo creado. En el supuesto de tener más lienzos creados en un producto, por cada uno se mostrará su imagen miniatura, y su nombre.
Actualizar	Botón para acceder a la interfaz de actualización  del lienzo.
Duplicar	Botón duplicar lienzo
Eliminar	Botón eliminar lienzo.

2. Interfaz general de actualización de lienzo 

Elemento	Función
Botón "VOLVER AL PRODUCTO"	Para volver a la interfaz principal de la ficha de producto.
Botón "VER EN LA TIENDA"	Para ver el diseñador en la vista del cliente.
Botón "GUARDAR"	Guardar cambios hechos en el lienzo.
Botón "RESETEAR ÁREA DE IMPRESIÓN"	Se entiende como área de impresión el tamaño del lienzo.
Botón "DEFINIR EL ÁREA DE IMPRESIÓN SEGÚN EL ÚLTIMO ELEMENTO SELECCIONADO"	Ajusta el área de impresión al tamaño del objeto del archivo seleccionado de una capa.

3. Herramientas menú izquierdo  - Interfaz crear lienzo

Elemento	Función
Subir archivo	Botón para abrir subida de archivo. Cada archivo se añade como una capa.
Gestor de capas	Abre el gestor de capas. Vista de una capa.

3.1 Interfaz de capas

Elemento	Función
Botón	Cambiar color de capa (archivo subido).
Nombre del archivo	La capa se crea con el nombre del archivo subido.  Y se la asigna un número de capa. Para ver el nombre completo del archivo que tiene la capa,  poner el cursor encima.
Icono de flecha arriba	Para poner la capa la primera delante.
Icono nube con flecha	Botón establecer capa como área de reemplazo. La capa que está en este estado es en la que el cliente podrá subir archivos. Puede haber más de un área de reemplazo en un lienzo.
Icono bloque líneas	Ordenar manualmente las capas. al poner el cursor encima se convierte en un aspa que permite hacer clic y arrastrar la capa a otra posición.
Icono candado	Botón para bloquear capa. No bloqueada Sí bloqueada
Icono x en un círculo	Botón para eliminar capa.

Además de estos elementos de la interfaz se encuentra la columna derecha. Es la parte de visualización. En ella hay más ajustes para el lienzo. 

Se ha limitado el tamaño máximo del archivo de imagen jpg o PNG a subir por el cliente a una medida de 3.500 x 3.500 px. Tamaños superiores a este pueden alterar el correcto funcionamiento de la aplicación.

El diseñador no redimensiona la imagen. Al pedido llegará la imagen en el tamaño y resolución subida por el cliente.

Para envío de imágenes de tamaño superior utilizar aplicaciones web gratuitas para envío de archivos de mayor tamaño que el limite especificado. Como por ejemplo; Wetransfer.

Con en fin de explicar la interfaz de creación de lienzos a continuación se muestran y explican ejemplos de productos creados para personalización con el diseñador.

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.

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.

D7. Bolígrafos varios modelos, ejemplo personalización con diseñador - Diseñador Módulo

En este producto al cliente se le ofrece poder comprar 3 modelos de bolígrafos diferentes con personalización gráfica para cada uno. Un lienzo para cada bolígrafo. Cada lienzo vinculado a un valor de la característica de modelo de bolígrafo.

• El cliente puede seleccionar el modo de color del serigrafiado y el color de la tinta.
  
• El producto se ofrece para compra por cantidad de unidades. Mínimo 500 bolígrafos.
  
• El precio se muestra en tabla relacionada con las opciones de tiempo de producción.

1. Creando del lienzo para personalización gráfica de un bolígrafo

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 con fondo blanco del modelo de bolígrafo. Esta imagen actuará 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.

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 de 30 cm y el alto de 14 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 JPG con el mockup del bolígrafo
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 los lienzos de los otros dos modelos de bolígrafos con las imágenes de miniaturas y archivos correspondientes.

2. Vinculando los lienzos

En este producto se ha vinculado el lienzo correspondiente a cada valor de la característica Modelo.  El cliente al seleccionar un modelo de bolígrafo el selector de personalización de lienzo mostrará la imagen miniatura correspondiente al modelo seleccionado. El cliente al hacer clic en el selector de personalización accede al lienzo de personalización de ese tipo de bolígrafo.

En este producto el selector de lienzos de personalización en la vista del cliente muestra sólo uno. El correspondiente al tipo de bolígrafo seleccionado por el cliente.

Cuando el cliente cambia de modelo de bolígrafo en la característica "Modelo" la imagen del botón del lienzo ahora muestra el bolígrafo que ha seleccionado. Una ventana emergente le alerta de que personalización de la anterior lienzo será descartada y que debe personalizar el lienzo. Pide confirmación del cambio. 

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.

Se abrirá el diseñador que muestra al cliente el lienzo disponible para personalizar el bolígrafo que ha seleccionado.

El cliente reconoce el área de reemplazo por la línea discontinua que presenta y el icono subir archivo que el administrador ha usado para definir este área.

El cliente 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 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.

D8. Pegatinas diferentes modelos, ejemplo personalización con diseñador - Diseñador Módulo

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 el área interior del cí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.

D9. Diseñador con característica de tipo Medidas (antes llamada "Tamaño") - Diseñador Módulo

El diseñador puede configurarse en los productos que interese para que se adapté a las medidas proporcionales que el cliente escriba en la característica de tipo tamaño.

1. Para utilizar este método seguir los siguientes pasos

1.1 Asegurarse de que el producto tiene característica de tipo "Medidas". 

1.2 La característica medidas está disponible en el modo avanzado. Asegurarse de que está activado para poder añadirla.

1.3 Activar diseñador en el producto

2. Creación del lienzo

2.1 Nombrar el lienzo

2.2 Ajustar modo de color.

2.3  Ajustar tipo de imagen a subir.

2.4 Definir si se permite añadir texto.

2.5 Especificar para la vista del lienzo el ancho y el alto en cm. 

2.6 Cargar la imagen de miniatura preparada.

2.7 Guardar cambios.

2.8 Ajustar que tipo de archivo que se permite al cliente que suba. Trama (JPG, PNG) o Vector (SVG) o ambos. Ajustar modo de color permitido del archivo. Y si se permite añadir texto o no.

2.9 Activar el botón "Emplear las medidas definidas en el producto"  y seleccionar la característica de tipo medidas por el
nombre que se le ha dado. 

Al activar la opción «Emplear las medidas definidas» en el producto, el sistema adapta automáticamente el tamaño del lienzo a la proporción de tamaño definida en el producto, según la característica de tipo tamaño.
El área de reemplazo se ajusta de forma automática al tamaño del lienzo resultante.

Para utilizar correctamente este modo, tener en cuenta lo siguiente:

• • • • No se debe añadir ningún archivo al lienzo.

      • El lienzo no debe estar vinculado a ningún valor.

      • El producto debe disponer de una característica de tipo tamaño, configurada en modo medidas libres o
        con presets creados.
        

2.10 Guardar cambios.

3. El diseñador de este producto desde el lado del cliente

El cliente selecciona o escribe las medidas del producto en la característica medidas.

Selecciona las diferentes variaciones del producto.

Hace clic en la imagen de acceso al lienzo para acceder al diseñador.

El área de impresión que en este modo es también el área de reemplazo, se ha dimensionado a las medidas que el cliente ha especificado.

El cliente sube el archivo y puede hacer las transformaciones de escalar, rotar, duplicar, posicionar y eliminar entre otras,  viendo los cambios en tiempo real.

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 archivo subido y subir otros.
También puede salir del diseñador y modificar las medidas del producto.

Importante: Después de cada modificación hacer clic en botón "HECHO" para que los cambios se queden guardados.