Crear un fondo tipo patrón o mosaico con herramientas online

  • Por
Claves para usar las herramientas online de Colourlovers y crear todo tipo de patrones con formas y mosaicos que se pueden usar como fondo para diseños web.
Hay un sitio genial para hacer diseño de patrones que puedes usar como fondo en páginas web o cualquier tipo de diseño. Se trata de ColourLovers, y del que, debido a su utilidad, ya hemos mencionado anteriormente en DesarrolloWeb.com. Tiene herramientas de todo tipo, para realizar todos los pasos de creación de un patrón ("pattern", como se conoce en inglés), algunas más simples y otras más complejas.

En este artículo explicaremos cuáles son las herramientas que ofrecen y cómo se deben usar para dejar fluir nuestra creatividad y construir patrones atractivos y personalizarlos con todo tipo de formas y colores.

Construir patrones para diseñadores y no diseñadores

Hasta hace poco me había limitado a consumir los patrones que otras personas habían hecho dentro de ColourLovers. Los había usado para algunos sitios web que he realizado en el pasado, como base para comenzar diseños coloreados con personalidad fuerte. Lo máximo que había hecho es usar las plantillas de patrones ("template patterns") y aplicarles mis juegos de colores para adaptarlos a los deseados en el sitio web. Ese uso de principiante no tiene nada de malo, me ha ayudado en muchas ocasiones, pero experimentando un poco más he descubierto un placer especial en crear mis propios patrones 100% originales y es lo que quiero compartir con vosotros.

Nota: Otra opción para construir fondos es usar Photoshop y es lo que hacía antes cuando deseaba hacer un patrón para usar como mosaico en el background de una página. Esto está explicado en diversos artículos y vídeos de DesarrolloWeb.com que puedes encontrar en el Taller de Photoshop.

Y es que las herramientas online que nos ofrecen son útiles y sencillas de usar, tanto para diseñadores como aficionados al diseño como yo. Hay utilidades que permiten desempeñar todas las etapas de creación del fondo, desde la elección de una paleta de colores hasta la personalización de formas del patrón.

Herramientas para crear patrones y plantillas de patrón

Antes que nada cabe señalar la diferencia entre patrones y plantillas para patrones. Ambas cosas las puedes hacer con las herramientas de ColourLoves de una manera sencilla. Las plantillas de patrones ("pattern templates") son la base del diseño del patrón o mosaico, sin ningún color aplicado, simplemente en escala de grises para distinguir los diferentes elementos a los que luego aplicaremos una paleta dada. Los patrones (patterns) son ya el resultado de aplicar una paleta de color a una plantilla de patrón. Para aclararnos, el "pattern template" lo creas una vez y a partir de él puedes generar infinitos patterns mediante el proceso de aplicarles colores diferentes.

Dentro de todas las herramientas de ColourLovers, las que nos sirven para crear los patrones son las siguientes:

Colorear un patrón ya creado
Esta es la herramienta que te permite usar modelos de patrón (pattern templates) de otras personas para personalizarlos con tus propios colores. No creo que haya necesidad de explicar cómo funciona, puesto que es extremadamente fácil, pero básicamente se trata de encontrar el pattern template que nos interesa y simplemente vamos escogiendo los colores. con ello, el modelo de patrón va actualizándose automáticamente para mostrarse con las cromáticas seleccionadas.

Cualquier persona puede experimentar con esta herramienta y la verdad es que ya de por sí es bastante útil, atractiva y capaz de hacer brotar bastante creatividad de nuestras manos. El problema es encontrar tu modelo de patrón adecuado para tu diseño, puesto que hay tantos disponibles que se hace complicado encontrar el más adecuado. Además, como todos los pattern templates creados por los usuarios están disponibles y muchos de ellos son meras pruebas, a veces es complicado encontrar uno "rompedor" que case bien en la línea de comunicación que queremos seguir.

A veces es mejor comenzar por navegar entre los distintos modelos de patrones para encontrar el que nos gusta y luego colorearlo, puesto que así podemos buscar las plantillas en función de criterios como las más vistas, las que más gustan, las más comentadas, etc. Una vez escogemos nuestro pattern template, tenemos el enlace "Color this pattern" que nos permite personalizarlo con nuestros colores de preferencia.

Crear una plantilla de patrón
Esta parte, denominada en el sitio como "design a pattern", es en la que generamos los modelos con formas diversas en escala de grises, que luego podremos convertir en patrones al aplicarles una paleta de color. En esta parte simplemente situamos formas en el lienzo de una manera atractiva, de modo que, al producirse un mosaico por medio de la repetición del modelo, quede bonito.

Esta parte es un poco más avanzada, pero realmente está al alcance de cualquier persona el experimentar para llegar a resultados creativos y útiles para cada necesidad. La herramienta online que nos sirve para hacer esto es un poco más compleja, pero realmente no reviste demasiada complejidad.

Etapas para la construcción del patrón

Ahora que ya conocemos diversas nomenclaturas y herramientas que tenemos a nuestra disposición, podemos describir cuál sería el proceso para crear un patrón totalmente original y personalizado a nuestro gusto, con las formas y colores que deseemos.

1) Creamos un "pattern template"
Para ello pulsamos el desplegable "Create" que encontramos arriba a la derecha y seleccionamos "Pattern template". Esto nos llevará a una herramienta online llamada Seamless (sin cortes o saltos abruptos en el diseño). También podemos acceder por medio de la URL: www.colourlovers.com/seamless

Seamless está compuesto por diversos controles en los que podemos generar capas con las formas que deseemos usar en la plantilla del patrón. Estas formas las puedes encontrar ya creadas dentro de Seamless en clasificaciones como "Shapes" y "Lines". Dentro de Shapes, a su vez encuentras grupos como "Basic", "Alphabet", "Food", etc.

Se trata de ir poniendo formas o líneas dentro del lienzo de nuestra plantilla de patrón y con ello se irán generando varias capas. Todas esas capas se pueden ordenar, de modo que queden unas encima de otras y además les podemos asignar a cada una, de manera independiente, una escala de gris determinada. Luego, en el paso siguiente, al colorear la plantilla se asignará un color a cada escala de gris, de modo que los patrones ganarán fuerza al aplicarles la paleta de color que deseemos. Sin embargo, en este punto, asignando una escala de gris a cada capa, es donde definimos qué número de colores se usará en el patrón y qué grupo de elementos compartirán tonalidad.

Nota: En un artículo posterior podremos describir Seamless de una manera más detallada y hablar de algunas funcionalidades más útiles como la creación de formas personalizadas, que extiendan las que Seamless nos ofrece. De hecho, explotar las posibilidades de esta herramienta va a ser lo que nos permita obtener unos resultados más creativos y originales. Además, encontramos otro programa llamado "Seamless Studio" que es un poco más complejo y que nos permite una gama de posibilidades mayor.

Al crear tu plantilla tienes que pensar en ella como un mosaico, colocando los elementos de modo que, al producirse la repetición del patrón, se cree un efecto atractivo. Realmente no debes abstraerte mucho en este detalle, porque la propia herramienta nos permite ver el resultado en forma de mosaico para mayor facilidad, lo que la hace especialmente útil para producir patrones, en comparación con otras aplicaciones no pensados para ésto, como Photoshop.

herramienta online seamless lite

2) Guardamos el "Pattern Template" y le damos un nombre
Una vez ya tenemos definido nuestro patrón a base de aplicar formas y escoger cuáles de ellas van a tener cada tonalidad, simplemente pulsamos el botón "Save" y aparecemos en un formulario donde especificamos el nombre de la plantilla de patrones y sus características que desees definir, como descripción, palabras clave, imágenes en las que te hayas inspirado, etc.

3) Coloreamos el patrón
Este es el último paso para tener nuestro patrón listo. Simplemente tenemos que colorear para personalizar el diseño. Una vez que hemos guardado el template, aparecemos en la herramienta para colorear patrones, teniendo como partida la plantilla del patrón que acabamos de crear con escala de grises. Este paso no tiene mucho misterio.

Coloreando un patrón creado

Con todo esto ya tenemos nuestro patrón listo. Con el mismo Pattern Template podemos crear todos los Pattern que deseemos, simplemente aplicando otras paletas de color. Esa parte es la más sencilla. Lo bueno es que a base de cambiar colores, las posibilidades que se nos abren son infinitas.

En la siguiente imagen podemos ver el resultado de aplicar distintas paletas de color a un mismo patrón.

El mismo patrón con distintos colores, creados por mi y por otros usuarios de Colourlovers

En el próximo artículo podremos ver con mayor detalle el programa Seamless y aprender algunas cosas adicionales sobre su funcionamiento.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir