Como crear un patrón en Illustrator

Ya nos conocéis y no os podemos engañar: nos encanta el flat design. Sin embargo, tampoco le decimos que no a un buen patrón, siempre y cuando aparezca en el sitio adecuado en el momento preciso;).

No hace tanto os hablábamos de texturas. Es un buen recurso para usar de fondo, aunque ha quedado un poco desactualizado a la hora de diseñar pues la tendencia del flat design va hacia fondos de un solo color, que entre otras cosas hagan que la carga de la web sea menos elevada.

Eso no significa que no sirva para nada, o que las páginas web se vean viejas, No. Estamos hablando de tendencias y como en la moda, estas van cambiando. De hecho, nosotros en algunas de nuestras plantillas WordPress, como Vowels y Dessert los hemos usado con buenos resultados.

Sin embargo un buen patrón, nos puede ayudar a personalizar tanto un trabajo web como uno gráfico, dándole ese toque divertido y a la vez personalizado que buscamos. Aunque hay patrones ya hechos y perfectamente adaptables a web. Si tenéis algunos conocimientos de Illustrator, en este artículo os voy contar como diseñar nuestros propios patrones. No hay que ser un diseñador experto, pues el uso del Illustrator para hacer un patrón es nivel usuario.

En Navidad, os presentamos a nuestro patrón navideño, y ahora que estamos un poco bailones, vamos a hacer el tutorial con un patrón de temática musical!

En este caso los gráficos están diseñados por nosotros, pero no hace falta hacer ilustraciones de algo concreto, un grupo de figuras geométricas tales como círculos, cuadrados… pueden ser los protagonistas de nuestro patrón. Dependerá de lo que busquemos para usar una cosa u otra.

El manual está realizado utilizando Adobe Illustrator CS6.

Comencemos paso por paso:

1. Creamos una mesa de trabajo de 600px x 600px. Las dimensiones son orientativas y planteadas para que sea cómodo trabajar sobre ellas. En ningún caso son obligatorias a la hora de realizar un patrón, pero por nuestra experiencia las aconsejamos.

2. Dentro de esta mesa de trabajo, dibujamos un cuadrado de 300px x 300px. Puesto que luego vamos a trabajar con coordenadas, es importante hacer una cuadrícula (ver–> mostrar cuadrícula) y ajustar nuestro cuadrado de 300×300 a esa cuadrícula (ver –> ajustar a cuadricula). Mi recomendación es que se le dé un color cualquiera al cuadrado (que luego podrá cambiarse) y que se sitúe en una capa bloqueada, para que no se mueva mientras creamos nuestro patrón.

3. Pues bien, ya tenemos el cuadrado a partir del cual vamos a crear nuestro patrón. Todo lo que se incluya dentro de él, será lo que lo componga, será nuestro lienzo. Es el espacio de diseño del patrón que luego se repetirá.

Cualquier elemento que coloquemos y que no toque ninguno de los bordes, podemos colocarlo de manera libre, no así con los elementos que se sitúen en uno o más bordes del cuadrado. Siempre que situemos un elemento en cualquiera de los bordes del mismo, hemos de repetirlo en el lado opuesto, de manera que una vez creado el patrón, estos aparezcan superpuestos. Veámoslo con un ejemplo:

Si partimos de la guitarra con el circulo, hemos de colocar sendas guitarras siempre a 300px de diferencia de ésta, en los sentidos «x» e «y» (por situarse en una esquina tocando dos lados del cuadrado). Si por el contrario (como veremos a continuación) solo se colocara en un lado del cuadrado, solamente debería repetirse en uno de los dos sentidos. Podemos saber las coordenadas exactas cuando pinchamos un elemento, en la pestaña “transformar” e ir sumándole o restándole 300 pixeles a los nuevos elementos.

4. Si por el contrario el elemento toca uno solo de los lados del cuadrado, ha de repetirse solo en el sentido que ocupa, ya sea horizontal (x) o vertical (y).

Y así lo hacemos hasta completar el espacio de los lados del cuadrado que deseemos. Mi recomendación es comenzar con un lado e ir así rellenando la totalidad del cuadrado, para que no se produzcas superposiciones que no deseamos. De esta manera, el interior del cuadrado lo podemos dejar para el final, y componerlo de una manera más libre.

5. Una vez hayamos completado el espacio de los bordes del cuadrado, ya podemos completar el interior del mismo. Para esto no hay que seguir ninguna regla. Se puede completar como deseemos. Nosotros vamos a usar los mismos elementos diseñando el patrón de una manera libre.

6. Una vez hemos diseñado nuestro cuadrado, ya está listo nuestro patrón! Solo debemos aplicarlo en el espacio de Muestras de Illustrator.

De esta manera, tras quitar la cuadrícula, ponemos el cuadrado sobre el que hemos trabajado sin contorno y sin relleno. Seleccionamos tanto el cuadrado como los elementos que hemos dibujado sobre él, lo arrastramos hacia la pestaña “muestras” y voila! Ya tenemos nuestra textura.

7. Ya solo tenemos que hacer la figura que prefiramos y arrastrar el patrón desde la “muestra”

Como veis es bastante sencillo y no se necesitan grandes conocimientos de Illustrator. Solo hay que decidir el motivo, buscar los elementos que lo compongan y a diseñar! Es una fácil manera de crear patrones que luego podremos usar para fondos de web o trabajos gráficos. Todo esta permitido, solo hay que tener en cuenta los bordes ;)!

Además, es adictivo, una vez que haces un patrón, ya no puedes parar, cualquier momento esbueno para realizar una composición!

Espero que os haya servido!