Patrones o motivos infinitos con Illustrator
Como ya hemos visto en otra página de este mismo sitio, la creación de motivos, mosaicos o patrones digitales tiene su pequeño truco, ya que se basan en la creación no intuitiva de losetas repetitivas. Del mismo modo, aplicar en Illustrator las técnicas allí explicadas también tiene sus complicaciones y, dependiendo del dibujo del motivo infinito que queramos usar, la operación de crearlo puede ser más o menos complicada.
Los patrones o motivos sencillos
El motivo más sencillo es aquel en el que lo repetido no se entrecruza ni toca al repetirse. En esos casos, el procedimiento en Illustrator no tiene complicación alguna:
Creamos un dibujo de forma ortogonal —preferentemente cuadrada—.
Colocamos lo que queramos dentro…
…y arrastramos el conjunto a la paleta de "Muestras
". Eso convertirá el dibujo en un motivo infinito.
Podemos aplicarlo como relleno a cualquier objeto nativo de Illustrator.
Un par de precauciones
-
Cuanto más complicado sea el dibujo que compone un patrón, más pesado será el archivo final de Illustrator en cuanto a necesidad de procesador y es fácil que el ordenador se bloquee al redibujar si nos pasamos de complicación.
En esos casos será muy conveniente replantearse rehacer el patrón de forma más sencilla o convertirlo en mapa de bits (rasterizarlo)allí donde estè aplicado. Esto simplificará mucho las operaciones de cálculo del ordenador.
-
Aunque podemos deformar, estirar y cambiar la escala del patrón, siempre conviene hacerlo al mismo tamaño al que se va aplicar. Eso simplifica mucho los cálculos que tiene que hacer el ordenador.
Patrones un poco más complejos
En el ejemplo anterior, los dibujos del patrón no interactuán, no se entremezclan. Ya vimos en la otra página mencionada que, para que eso ocurra, hay que aplicar una técnica de corte —o duplicación con movimientos calculados— y redibujado.
Si estuviésemos en Photoshop, lo más sencillo sería cortar las piezas, escaquearlas y redibujar un poco. En Illustrator el método más sencillo es duplicar con parámetros los elementos básicos usando el efecto "Efecto - Distorsionar y transformar - Transformar
" y la paleta "Transformar
, donde se pueden ver las dimensiones de los elementos seleccionados. Veamos como se usa haciendo un ejemplo sencillo.
Lo primero es decidir qué tamaño tendrá la loseta que va a servir de base para el motivo o patrón. El límite es sólo la sensatez, como hemos indicado más arriba, y el hecho de que tiene que ser un rectángulo —en el ejemplo a continuación usaremos una base de 200 × 200 píxeles.
Creamos un nuevo documento, al que en el "Ajuste de la mesa de trabajo
" le damos de tamaño 200 × 200 píxeles —esto no es imprescindible pero trabajar con una mesa de trabajo igual al tamaño del documento final es más cómodo.
Comenzamos a hacer el motivo colocando los dibujos que vayan a formar parte de él, en este caso una especie de motivo ameba, ya que vamos a hacer algo parecido a un motivo que en España llamamos de amebas o paramecios (paisley).
Lo colocamos más o menos centrado sobre la esquina superior izquierda de la mesa de trabajo. No hace falta precisión en esa colocación.
Lo duplicamos horizontalmente con el menú "Efecto - Distorsionar y transformar - Transformar
". En el valor "Mover - Horizontal
", indicamos el mismo valor que quremos que tenga de ancho la loseta final del motivo —en este caso, "200 px
". En "copias
", ponemos "1
" ya que con "0
", simplemente lo desplazaríamos). Aceptamos.
A continuación hacemos lo equivalente verticalmente. Ahora lo que hacemos es dar un valor "Mover - Vertical
" de "-200 px
" para que se coloquen las copias en las esquinas inferiores.
Al comenzar a hacerlo, Illustrator nos advertirá que lo seleccionado ya tiene aplicado un efecto de igual tipo. Nos da lo mismo y aplicamos el nuevo efecto.
Comenzamos entonces a rellenar con más dibujos el interior de la loseta a nuestro gusto. La única precaución que tenemos que tener —aparte de no pasarnos de complicación— es que cualquier elemento que se salga por algún lado del cuadro vertical o lateralmente, debemos duplicarlo en el mismo sentido para que salga por el lado contrario. El valor que debemos darle a esa duplicación es siempre el del cuadro del motivo —en este caso "200 px
"—.
Como hemos usado la opción "Efecto - Distorsionar y transformar - Transformar
", podemos girar y modificar el dibujo de la esquina superior izquierda que estamos usando como referencia del motivo, ya que todas las repeticiones, se modifican igual que el original.
Ahora le aplicamos color —no es que sea el momento obligado, sino que es cuando a mi me da por hacerlo—. Al hacerlo es conveniente usar siempre "muestras globales
", ya que eso nos permitirá hacer cambios de color de un solo golpe y así hacer distintas versiones de color de un mismo motivo —algo muy usual. Conviene recordar, por cierto, que es posible recolorear las ilustraciones en Illustrator usando la llamada "Guía de color
".
Si queremos, podemos añadirle un recuadro con el fondo de color que creamos conveniente. No es imprescindible que mida lo mismo que el recuadro del motivo. De hecho, si es un fondo de color plano, conviene que mida un poco más.
Una vez terminado el motivo, dibujamos un recuadro que mida exactamente lo mismo que debe medir la loseta del motivo (en este caso 200 px). Le damos de color de relleno y de trazo "Ninguno
". Es muy conveniente que su esquina superior izquierda coincida con la mesa de trabajo o punto de coordenadas "0,0
".
Lo seleccionamos y lo enviamos detrás del todo mediante el menú "Objeto - Organizar - Enviar detrás
".
Ese recuadro sin color es la clave. Al encontrárselo detrás del todo, Illustrator va a entender que queremos usarlo como recuadro de límite (bounding box) del motivo y lo usará para definir los límites de éste.
Para rematar, seleccionamos todos los elementos que van a formar el motivo (recuadro sin color incluido) y vamos al menú "Edición - Definir motivo
". Le damos un nombre adecuado —como "amebas azules 01
"— y ya está. También podemos simplemente seleccionar los elementos y arrastrarlos dentro de la paleta de "Muestras
". Cualquiera de los dos métodos sirve igual.
Para usar el motivo, basta con seleccionar cualquier objeto, ir a la paleta de "Muestras
y pinchar el motivo correspondiente con el cursor. El motivo se aplicará como relleno (fill) o trazo (path).
Porque un efecto y no simplemente copiar con parámetros
Si tienes cierta idea de Illustrator te habrás peguntado: ¿Porqué usa el efecto "Transformar
al dibujar las piezas que salen del marco y no se limita a usar la opción "Copiar
" de la paleta "Transformar
"? La respuesta ya la has visto arriba: Es más fácil ir modificando el efecto que hacerlo las veces que hayamos repetido los objetos. Lo mismo se aplica a la hora de colorear.
Eso no quiere decir que pueda ser conveniente "Expandir
" el efecto para que no ocurran después cosas raras.
Un par de precauciones
Muchas veces no necesitamos crear un patrón perfecto que pudiéramos prolongar hasta el infinito. No siempre hace falta un papel pintado. A veces, sólo necesitamos un trozo de motivo repetitivo para cubrir una zona que hace de máscara de recorte de ese patrón.
En esos casos, valdría con usar convenientemente el menú "Efecto - Distorsionar y transformar - Transformar
" sin llegar a definir un motivo propiamente dicho. Así podríamos usar opciones de fondo más complicadas, por ejemplo.
[© Gustavo Sánchez Muñoz, 2023] Gustavo Sánchez Muñoz (también identificado como Gusgsm) es el autor de esta página. Su contenido gráfico y escrito se puede compartir, copiar y redistribuir total o parcialmente sin necesidad de permiso expreso de su autor con la única condición de que no se puede usar con fines directamente comerciales (es decir: No se puede revender, pero sí puede formar parte como citas razonables en trabajos comerciales) y los términos legales de cualquier trabajo derivado deben ser los mismos que se expresan en la presente declaración. La cita de la fuente con referencia a este sitio y su autor no es obligatoria, aunque siempre se agradece.
Comentarios
Path patterns en Illustrator
Muy buena explicación. Por fin logré hacer el pattern. Hice el ejercicio con todos sus pasos y funcionó bien, pero veo que sobre las figuras duplicadas quedan visibles las líneas de la loza, dañando el diseño en buena parte. ¿Cómo hago para que esto no ocurra?
- Inicie sesión para enviar comentarios
La caja delimitadora
En respuesta a Path patterns en Illustrator por Carlos E.E. (no verificado)
Tendría que ver una captura de pantalla del defecto, pero creo que es porque la caja delimitadora (bounding box) no está bien definida.
- Inicie sesión para enviar comentarios
Lineas blancas
Hola, ante todo muchas gracias por el tutorial. Me ha valido de mucho.
Pero al igual que el comentario anterior a mi también me salen unas pequeñas rayas blancas entre las uniones de los patrones. Son muy sutiles pero al exportar a pdf siguen estándo y salen en la impresión.
Tienes alguna solución para esto??
Además lo he probado con muchos patrones diferentes y en todos les pasa lo mismo.
Un saludo.
- Inicie sesión para enviar comentarios
Tendría que verlo
En respuesta a Lineas blancas por Victor (no verificado)
Si quieres envíame un archivo de muestra (no más allá de 4 mb) a gusgsm en el mismo servidor de correo que el tuyo y le echo un vistazo cuando pueda.
Gustavo Sánchez
- Inicie sesión para enviar comentarios
Solución!
En respuesta a Lineas blancas por Victor (no verificado)
He estado, al igual que vosotros, investigando cómo puedo hacer para que no me salgan las rayas separadoras en patrones continuos y he encontrado una solución.
- Expandir - Objeto > Expandir.
- Crear un cuadrado, o circulo, con el mismo color que el patrón.
- Seleccionar el cuadrado que has creado y dar al botón este de "Seleccionar objetos similares".
Se habrán seleccionado los dibujos del patrón. Es la única manera de extraerlos del patrón. - Copiar y pegar.
Al hacer esto se extraen los elementos de dentro del patrón en forma vectorial y sin la máscara que crea el propio patrón para montarlas y habrán desaparecido las rayas separadoras del patrón continuo.
Importante: Al crear el patrón es importante que no exista separación y que más bien monte un elemento con el otro.
El problema sólo sale en patrones contínuos, en los que van separados no se suele apreciar excepto en casos concretos.
Espero que os sirva de algo.
- Inicie sesión para enviar comentarios
¿Seleccionar objetos similares?
En respuesta a Solución! por Albert (no verificado)
No me ha quedado muy clara tu solución... ¿Cuál es el botón "Seleccionar objetos similares
"? gracias
- Inicie sesión para enviar comentarios
Creo que es la "varita mágica"
En respuesta a ¿Seleccionar objetos similares? por Cris (no verificado)
Pero no estoy muy seguro. Es su explicación.
- Inicie sesión para enviar comentarios
Reutilizar el patrón creado
Hola, muchas gracias por el tutorial. Excelente!!! Estoy utilizando el Illustrator CC y al crear el patrón (en realidad estoy confundido si es patrón, pattern o motivo) solamente lo puedo utilizar en el documento que he creado... Si lo quiero utilizar en un documento nuevo ya no está disponible... y aunque está en la biblioteca de motivos —lo he seleccionado y abierto— no se muestra en el panel de motivos... ¿Por qué será? Por favor, me podrías echar una mano...? Salu2 y muchas gracias!!!
- Inicie sesión para enviar comentarios
Tiene su proceso
En respuesta a Reutilizar el patrón creado por Aprendiz (no verificado)
Hola,
Te lo comento con un CS4, que es lo que tengo ahota mismo porque no estoy por casa:
- Haces el motivo nuevo en un archivo nuevo. Lo guardas en su sitio como muestra en tu paleta de muestras y le das nombre.
- En la paleta de muestras, menú lateral. hay una opción que se llama "
Guardar biblioteca de muestras como AI
". Se guarda en su sitio (o donde a ti te convenga). - Cuando abras otro archivo nuevo, en otra sesión, para tomar ese motivo, te vas a la paleta de "
Muestras
" y, en ese menú lateral mencionado, elijes la opción "Abrir biblioteca de muestras - Definido por el usuario
" y elijes la tuya, que estará ahí. - El motivo estará disponible en una paleta nueva que tiene el nombre del archivo porque es una biblioteca. Pasará a estar disponible también en la paleta de "
Muestras
" sólo cuando lo apliques a un objeto del archivo nuevo."
Espero que esto te lo aclare.
- Inicie sesión para enviar comentarios
Muchas gracias!
En respuesta a Tiene su proceso por gusgsm
Hola gus, muchas gracias por tu respuesta... efectivamente así es... lo único que hice adicionalmente fue borrar de esa "nueva biblioteca" los motivos que ya estaban en la biblioteca original... Me sirvió mucho tu consejo. Salu2
- Inicie sesión para enviar comentarios
Quedó perfecto! muy bien
Quedó perfecto! muy bien explicado. seguiré probando ahora con nuevos motivos.
- Inicie sesión para enviar comentarios
Hola,
En respuesta a Reutilizar el patrón creado por Aprendiz (no verificado)
Hola,
Prueba con guardar la muestra. Haz clic sobre el icono que está al extremo izquierdo y en la parte inferior del panel muestras. Al desplegarse las opciones, ve a la primera de la lista, elije donde guardar la muestra que creaste en tu disco duro.
Lo siguiente que debes hacer es agregar la muestra almacenada en tu disco duro en el nuevo documento creado -o en otro previamente creado- para poder usarla. Para hacerlo debes ir al mismo icono de la parte inferior izquierda y elegir de la lista la opción "otra biblioteca", al abrirse la ventana deberás encontrar el lugar donde alojaste la muestra que creaste y listo!.
Espero te sirva mi respuesta.
Saludos
- Inicie sesión para enviar comentarios
Quitar el efecto Transformar
Yo quise copiar y pegar en otro Artboard para volverlo a editar y no mas no me deja copiar solo unas cosas >_< Que puedo hacer?
- Inicie sesión para enviar comentarios
¿Explicarte con más detalle?
En respuesta a Quitar el efecto Transformar por Grecia (no verificado)
¿Por favor?
- Inicie sesión para enviar comentarios
Una raya blanca entre las losetas
Hola,
Gracias por el tutorial. Mi caso es un poco diferente. Yo parto de una foto de una tela estampada para hacer el patrón. El caso que la imagen que tengo, al hacer el patrón y acoplarlo al objeto y escalarlo me sale la raya de unión blanca y, además, no queda nada bien la repetición puesto que se ven los cortes. Hay alguna forma de que no me salga las lineas de unión blanca y al repetirse no salgan esos cortes? Si necesitas te mando una captura de pantalla.
Un saludo
- Inicie sesión para enviar comentarios
Vale
Mh... Más que la captura de pantalla tendría que ver el original.
- Inicie sesión para enviar comentarios
La caja delimitadora es la clave
A todos a los que les salen las rayas blancas, insisto: La caja delimitadora (bounding box) no está bien definida. Planead qué tamaño le váis a dar antes de comenzar el dibujo y colocar una exactamente de ese tamaño sin colores de relleno ni trazo detrás del todo al terminar el dibujo antes de arrastrarlo a la paleta de muestras para crear la muestra.
- Inicie sesión para enviar comentarios
Problemas con líneas de separaracion en el patrón
En respuesta a La caja delimitadora es la clave por gusgsm
He creado una caja delimitadora exactamente con la misma medida del patrón (20cm), sin borde ni relleno. Lo he mandado detrás de todo e igual salen esas famosas líneas de separación que realmente ya me tienen estresado, porque no se como se podra resolver...
me gustaria enviarte el archivo de muestra que hice para que lo veas... He subido el archivo para que lo descargues... Si miras, hay un patron de 20×20 cm. que tiene un fondo. Detrás del fondo va la caja delimitadora de la misma medida 20×20 cm. sin borde ni relleno y luego he seleccionado todo el conjunto y arrastrado a "Muestras
" y nada... En el mismo archivo, he aplicado el patrón a un cuadrado mas grande y se ven esas famosas lineas delimitadoras.
Por favor, ayudame... De repente puedes hacer un vídeo y subirlo a YouTube para solucionar el problema...
Gracias x tu tiempo
- Inicie sesión para enviar comentarios
No existen esas líneas realmente
En respuesta a Problemas con líneas de separaracion en el patrón por Kevin Leañoz (no verificado)
Buenas tardes,
He abierto el archivo y lo he impreso y exportado a otros formatos. Las rayitas finas son sólo un leve defecto de visualización de la pantalla. En esas impresiones y exportaciones no se ven. Aparecen realmente en algunos casos si, por ejemplo, abres el *.ai en Photoshop con baja resolución y, sobre todo, la opción de suavizado (antialiasing) activada. Básicamente es un problema similar al que ocurría con algunos PDF hace tiempo.
Te sugiero que lo imprimas. No debería verse. Tampoco debería verse si haces un "Guardar para web
" desde Illustrator y lo guardas como JPEG o PNG. Ese plugin no falla en la previsualización: el resultado sale sin rayas.
En cuanto a lo del recuadro d etamaño, basta con usar las "Guías inteligentes
" al final cuando dibujas el último recuadro antes de enviarlo detrás. Se pega automáticamente al tamaño necesario.
- Inicie sesión para enviar comentarios
¿Cómo muevo un patrón?
Tengo esta duda: aplico un patrón a un objeto y quiero poder moverlo para que quede exactamente como a mi me gusta. Ya probe con escala y con rotación, pero me gustaría poder hacerlo manualmente.
¿Es posible?
- Inicie sesión para enviar comentarios
Si, es posible mover un patrón de Illustrator
Hola,
Sí, es posible mover un patrón de Illustrator manualmente. Pinchas en el objeto que lo contiene y, mientras mantienes apretada la tecla de acento grave (`), pulsas la tecla de flecha dirección del teclado hacia donde quieres mover el patrón.
(La tecla de acento grave en el teclado tradicional de PC es la que tiene también el corchete de apertura ([) y el acento circunflejo (^).)
Un saludo :)
- Inicie sesión para enviar comentarios
Y lo puedes hacer de modo preciso y matemático
En respuesta a Si, es posible mover un patrón de Illustrator por gusgsm
PS: y, por cierto, como puedes establecer cuánto se desplaza el cursor con las teclas de flecha del teclado en el apartado de "Preferencias - Generales - Incrementos de teclado
", si dispones de valor 1 punto, cada golpe de tecla desplazará 1 punto el patrón —o 1 mm. o 2 picas, etc.—. De ese modo podrás hacer los desplazamientos de forma perfectamente controlada y exacta.
- Inicie sesión para enviar comentarios
¡Gracias!
En respuesta a Y lo puedes hacer de modo preciso y matemático por gusgsm
Muchas gracias por responder a mi comentario, fue de gran ayuda, era justo lo que necesitaba.
- Inicie sesión para enviar comentarios
Color en patrones preestablecidos de Illustrator
Quiero aplicar color a un pattern geométrico (líneas) preestablecido de Illustrator, que aplican en blanco y negro ¿Cómo se hace?
Gracias, Carlos
- Inicie sesión para enviar comentarios
Lo usual es rehacerlo
En respuesta a Color en patrones preestablecidos de Illustrator por Carlos (no verificado)
Hola
Lo más usual es rehacerlo. Arrastras el modelo usado como patrón a un documento de Illustrator, lo modificas y creas un segundo patrón con ello. Para evitar eso, lo que yo haría es crear cualquier patrón nuevo usando siempre lo que se llaman colores con nombre o muestras (swatches). Así, la próxima vez podrás simplemente cambiar la composición de tintas de la muestra en lugar de tener que rehacer el patrón, lo que es absurdo. Que tengas que hacerlo con ese patrón prefijado de Illustrator se debe a que para crearlo se ha usado un color básico negro ;)
Un saludo
- Inicie sesión para enviar comentarios
¡Mil gracias!
Aunque ya tenía una idea de cómo hacer patrones infinitos, mi método era aún demasiado engorroso y laborioso. No conocía el método de agregar efectos para mover y reproducir formas/figuras. Muchísimas gracias, contigo me he ahorrado inútiles horas de trabajo extras. Saludos, seguiré checando tus tutoriales, un abrazo desde México :).
- Inicie sesión para enviar comentarios
Inmovilizar un patrón dentro de un objeto
Hola, quería consultar ¿cómo se puede inmovilizar un patrón ya aplicado a un rectángulo? Cuando lo acomodo en la hoja para mandar a imprimir se mueve y queda de una manera que no quería.
¡Muchas Gracias!
- Inicie sesión para enviar comentarios
En 'Preferencias generales'
En respuesta a Inmovilizar un patrón dentro de un objeto por Erica (no verificado)
En el apartado "Generales
" de "Preferencias
", marca la casilla "Transformar azulejos
". De ese modo, cuando se mueva, escale o rote el objeto, el patrón se transformará con su contenedor.
Saludos y tal
- Inicie sesión para enviar comentarios
Ya me estaba volviendo loca!
En respuesta a En 'Preferencias generales' por gusgsm
Ya me estaba volviendo loca! Excelente!! Funciona de maravillas! Mil gracias por la ayuda!!! Saludos!
- Inicie sesión para enviar comentarios
Problemas con líneas de separaracion en el patrón illustrator
En respuesta a Problemas con líneas de separaracion en el patrón por Kevin Leañoz (no verificado)
Hola
A mi me pasaba lo mismo y lo solucioné exportando a JPEG el diseño final con la repetición y en la zona "Opciones
" del cuadro de diálogo, "Suavizado: Optimización para ilustraciones (supermuestreo).
"
Espero haber podido ayudar. Un saludo
- Inicie sesión para enviar comentarios
Illustrator: Conflicto entre máscaras de recorte y motivos
Hola,
Muy buena tu explicación. Mi problema es que yo uso máscaras de recorte (cmd + 7) en los elementos que componen el motivo, pero parece ser que al definir el motivo, esta máscara de recorte se pierde. Y por tanto al aplicar el motivo, me aparece el dibujo sin la máscara de recorte aplicada.
¿Sabes si hay algún tipo de incompatibilidad entre las dos funciones?
Gracias!!
- Inicie sesión para enviar comentarios
En principio, no las hay
En respuesta a Illustrator: Conflicto entre máscaras de recorte y motivos por Ana (no verificado)
Hola,
Pues acabo de probar a hacer uno con Illustrator CS6 y no hay problemas. Otra cosa es que hagas una máscara o interacción de máscaras demasiado compleja.
Yo probaría a hacer lo más básico posible y, si viera que me sale, ir aumentando la dificultad. Probablemente es un detalle absurdo lo que causa el conflicto.
Saludos
- Inicie sesión para enviar comentarios
Illustrator:Espacio o fisura al aplicar pincel de motivo
Hola,
Mi cuestión es la siguiente. Creo un pincel de motivo de los que están de moda, romano, para crear una mandala. Creo la circunferencia. Aplico el pincel de motivo... y el problema que tengo es que que se ve un mínimo espacio entre motivo y motivo que no debería estar ahí.
El pincel lo tengo con la opción "uniforme". Mi versión es Illustrator CC 2015.
Un saludo
- Inicie sesión para enviar comentarios
Tienes que cambiar una opción en "Encajar"
En respuesta a Illustrator:Espacio o fisura al aplicar pincel de motivo por Francis (no verificado)
Hola,
En las opciones de pincel, hay una zona llamada "Encajar
". Probablemente la tienes en "Añadir espacio
". Cámbialo a "Estirar
" o "Aproximar trazado
", lo que te dé mejor resultado.
Saludos
- Inicie sesión para enviar comentarios
Se me deforma el estampado
Hola!
Gracias por la explicación! Muy completa. Tengo un problema de configuración . Una que diseñé el estampado, lo guardé en la biblioteca de muestras y lo aplico a un objeto. Al cambiar de tamaño ese objeto, se me modifica la escala o se me deforma el estampado. No me queda como yo lo guardé en la biblioteca. ¿Alguna idea qué puede ser?
¡¡Gracias!!
- Inicie sesión para enviar comentarios
Échale un vistazo a esto
En respuesta a Se me deforma el estampado por Virginia (no verificado)
Probablemente veas el motivo si le echas un vistazo a esta página.
- Inicie sesión para enviar comentarios
Añadir nuevo comentario