Diseño de plantillas SVG para editores
Introducción
El sistema de productos HTML5 permite crear diseños donde puede haber distribución de varias fotos con tamaños distintos, elementos decorativos de diseño o formas para que el cliente pueda personalizar su producto.
Estos diseños pueden ser utilizados en los editores de Gran Formato, Multi Regalo y Lienzos
Al tratarse de editores Web, este tipo de plantillas para los diseños o escenas, tienen que prepararse en ficheros de tipo vectorial SVG. Para trabajar con ficheros svg recomendamos trabajar con un programa de diseño de distribución libre, llamado Inkscape, puede visitar la Web en el siguiente link: https://inkscape.org/es
Existe webs especializadas con recursos para ayudar a la creación de productos y materiales gráficos:
http://goinkscape.com/create-a-custom-calendar-in-seconds/ Cómo crear un calendario en segundos
http://dryicons.com/free-graphics
http://all-free-download.com/free-vectors/
Materiales
En este apartado del BackOffice de productos es dónde se administra el material gráfico SVG que usaremos para conseguir que el producto a personalizar sea lo más realista posible en el momento de la edición.
Este material SVG se clasifica en dos pestañas: Escenas y Diseños que usaremos según el material que queremos publicar
- Escenas. Son los elementos gráficos que pueden combinar imágenes o decorados para representar en pantalla y poner en situación al usuario. Las escenas solo se utilizan en pantalla y no son imprimibles.
- Diseños. Son los elementos gráficos que nos ayudan a crear el diseño del área imprimible. Siguiendo el caso de la escena del teléfono deberíamos de crear un archivo de imagen svg con las dimensiones reales de nuestra carcasa sobreponiendo un área con las formas redondeadas que después recortaremos.
Preparar diseños en SVG
Cuando trabajamos con las plantillas SVG, tenemos que tener en cuenta que para que el sistema de plantillas HTML5 reconozca un área donde tiene que ir una foto, debemos de utilizar una forma rectangular de color verde puro (RGB=0,255,0), en el programa Inkscape el color Lima (#00FF00), y sin transparencia.
El funcionamiento del editor y el uso de los rectángulos verdes es este:
Cuando el usuario crea su proyecto, el editor elimina los rectángulos verdes del SVG y los substituye por las imágenes elegidas, debidamente ajustadas a las dimensiones de cada rectángulo.
Podemos crear diseños donde con formas que no son rectangulares, por ejemplo un círculo,un corazón, una estrella etc., pero para que el sistema reconozca el área de foto debemos utilizar una forma rectangular, el truco para hacer esto es dibujar un objeto con la forma y aplicar un de recorte sobre el rectángulo verde.
En este ejemplo vamos a dibujar una forma circular para que el efecto en el editor sea un círculo al poner la foto, los pasos son los siguientes:
- El primer paso es crear el área rectangular de color verde
- Dibujar un objeto con la forma circular (en nuestro ejemplo lo he puesto en color rojo para diferenciarlo del área verde)
- Alinear y seleccionar los dos objetos y aplicar un recorte
El resultado final de nuestro diseño mostrará un forma circular, aunque internamente el fichero SVG trabaja con una forma rectangular a la que se le aplicado un recorte, y nuestro sistema lo reconocerá como una área donde tiene que ir una imagen.
Importar diseños png en Inkscape
Podemos importar un fichero PNG para preparar un diseño en SVG con distintos marcos para fotos.
En este ejemplo vamos configurar el diseño de un collage que tendrá tres imágenes a partir de un PNG que previamente hemos preparado con Photoshop y que tiene tres huecos transparentes para colocar las imágenes que el cliente podrá editar.
Abrimos el programa Inkscape, y en primer lugar tendremos que configurar las dimensiones del documento a través de la opción “Propiedades del documento” del menú archivo.
En nuestro ejemplo vamos a configurar las dimensiones de nuestra plantilla con las mismas medida del fichero PNG que vamos a importar, 400 x 305 mm.
El siguiente paso es importar nuestro fichero PNG a través de la opción “Importar”
Una vez hemos importado el diseño PNG en el programa Inkscape el siguiente paso es añadir los distintos rectángulos de color verde puro (Lima (#00FF00) para que el sistema reconozca las áreas donde tienen que ir cada imagen del cliente.
Adaptamos los rectángulos verdes a los huecos de nuestro diseño, y los posicionamos por debajo de la capa del PNG.
Una vez tenemos nuestra plantilla SVG preparada, tendremos que publicarla como un diseño en el apartado Materiales de nuestro BackOffice de productos.
Para comprobar que todo ha ido correctamente, al crear el nuevo diseño y publicar nuestra plantilla SVG nos mostrará una imagen y nos indicará el número de contenedores de imagen detectados.
Este diseño SVG podremos utilizarlo en cualquier producto que tenga las mismas medidas o que sea proporcional al tamaño de impresión.
Fondos en diseños SVG
Es posible hacer que un diseño SVG tenga la propiedad que el cliente pueda cambiar el color del fondo.
Para poder hacerlo tenemos que utilizar el editor de ficheros SVG Inkscape, y en las propiedades de cualquier objeto con forma rectangular del diseño, tenemos que añadir el valor #IMX_BACKGROUND en el campo Etiqueta.
Los pasos a seguir son los siguientes:
- El primer paso es crear un rectángulo con un color inicial y situarlo en nuestro diseño.
- Seleccionamos el rectángulo y en el menú “Objeto” seleccionaremos la opción “Propiedades del objeto”
- En el campo Etiqueta tenemos que añadir el valor #IMX_BACKGROUND y clicamos en Aplicar para guardar los cambios.
Cuando esta plantilla se publica en la carpeta Materiales podremos ver que el sistema ha detectado la propiedad del fondo.
En el momento de importar este diseño en un producto podrás marcar la casilla para permitir cambiar el color de fondo a los clientes.
Textos en diseños SVG
Si queremos añadir un texto en un apartado concreto de nuestro diseño SVG y limitar el ancho de un texto dentro de un diseño en SVG, para ello tienes que dibujar un objeto rectangular del tamaño y aplicar un recorte.
Para usar el texto en SVG podemos usar dos formas:
- Añadir una nota entre paréntesis
Si el texto lo creamos entre paréntesis, el editor permite al cliente que el texto escrito se pueda editar, pero si el usuario no lo edita entonces la caja de texto no se imprimirá.
- Añadir un texto directamente (sin paréntesis.)
En cambio si el texto se escribe sin paréntesis, el editor permite al cliente que el texto escrito se pueda editar, pero si el usuario no lo edita entonces la caja de texto se imprimirá tal como lo hemos escrito en el diseño.
Pasos a seguir para para incluir un texto en un diseño SVG :
- En este ejemplo que detallamos lo primero que hemos hecho es crear el texto entre paréntesis.
Tendremos que seleccionar el tipo de fuente, el tamaño, y muy importante tendremos que Alinear al centro para que cuando el cliente edite el texto,este quede centrado en el diseño.
La lista de fuentes que admite el editor son las siguientes:
- Abril (Abril Fatface)
- Amatic SC
- Anton, Cabin
- Dancing Script
- Great Vibes
- Gochi Hand Lobster
Clicamos aplicar para guardar los cambios y posicionamos el texto en nuestro diseño.
- Hemos dibujado un rectángulo de color gris, puede ser cualquier color, para delimitar el área que queremos que ocupe el texto.
- El rectángulo gris lo elevamos a primer plano
- El siguiente paso es seleccionar los dos objetos, y con el botón derecho del ratón seleccionaremos Aplicar recorte
Sombras en diseños SVG
Para crear una escena más realista, podemos aplicar sombras a los diseños svg. Aquí hay una muestra de cómo se mostrará un producto con Sombras.
Debido a problemas con la renderización de svg y las sombras, debe aplicar la sombra al área que no es verde. Por lo tanto, debe crear un área con exactamente la misma área pero en otro nivel inferior.
En la muestra, el área rosa estará en un nivel inferior del área verde.
IMPORTANTE: La zona verde debe tener el mismo tamaño que gestionamos en el backoffice bajo el valor TRIMBOX.