Portada Suscríbete al RSS Feed

Cómo crear Patrones de Diseño en Photoshop

Por Juan D. • Feb 16th, 2009 • Categoría: Utilidades e Internet

En este tutorial aprenderás a crear patrones de diseño en Photoshop los cuales podrás insertar como fondo en tu sitio web, en tu escritorio o como en cualquier otro trabajo que así­ lo requiera.
A partir de una imagen crearemos el patrón el cual se podrá repetir infinidad de veces.

Orientaré este tutorial para fines web pero si ustedes necesitan hacer un patrón para imprimir recuerden substituir el valor de 72dpi por 300dpi que se ven en la siguiente imagen.
1- Así­ que, creemos el lienzo. Yo utilizaré una resolución de 200×200 pixels pero tu puedes utilizar la que desees pero siempre mantén la proporción cuadrada.

2- Lo que tenemos que hacer es crear la imagen o importarla y colocarla en el centro del lienzo tal cual se ve en la siguiente imagen. Utilizaré esta águila para crear mi patrón:

3- Ahora, utilizando las reglas (rulers) y las guí­as (guides) de Photoshop dividiremos el lienzo en 4 partes iguales. Para hacer esto guí­ate con las medidas que elegiste para tu lienzo. En mi caso que es de 200×200 pixels, se que tengo que ubicar las guí­as en el pixel 100.
Nota: Si no tienes las reglas activadas presiona Ctrl + R y para crear una guí­a solo haz clic sobre una regla y arrastra hacia el centro del lienzo.
Deberí­as tener algo así­:

4- Ahora, si tienes 2 capas o mas como yo debes realizar el siguiente paso. Acoplaremos la imagen. Es decir, convertiremos todas las capas en una sola. Para eso, dirí­gete al menú Capas (Layers) y elige Acoplar Capas (Flatten Image).

5- Ahora viene la parte interesante! Con la herramienta de selección rectangular, vamos a seleccionar la sección superior izquierda y la vamos a copiar (Ctrl + C). Para que la selección quede perfecta activa la opción Snap to Guides en el menu View:

Ahora si ya podemos seleccionar la primer parte de la imagen:

6- Ahora pegaremos este pequeño cuadrado que en mi caso abarca parte del ala del águila presionando Ctrl + V y vamos a moverlo hasta la parte inferior derecha como lo muestra la imagen:

Verás que la imagen central quedó un tanto cortada por la imagen nueva que pegamos. Eso lo resuelves fácilmente con la Goma de borrar eliminando ese gris que se superpone con el águila central.

7- Ahora vamos a repetir este paso 3 veces más hasta obtener el siguiente resultado. Recuerda que cada parte que copiamos la tenemos que trasladar al sitio opuesto. Por ejemplo, si ahora copiamos el cuadrado superior derecho lo tenemos que trasladar al inferior izquierdo.
Guí­ate con el siguiente esquema:

- La parte A irá en el lugar D
- La parte B irá en el lugar C
- La parte C irá en el lugar B
- Y la parte D irá en el lugar A

Este deberí­a ser el resultado final!

Felicitaciones!!! Ahora solo debemos salvar la imágen en el formato deseado y ya está lista para ser utilizada!

Related Posts with Thumbnails
a
    Tags: , , ,
    
    a

      6 Comentarios »

      1. Muy bueno no hay muchos tutoriales que expliquen la creacion de patrones, me gusto mucho :-) seguid asi y llegareis lejos

      2. Muchas gracias, me algro que el tutorial halla sido de tu agrado.
        Espero que los próximos tutoriales que estoy preparando también sean de ayuda y fáciles de entender.
        Saludos y gracias nuevamente por el apoyo! :)
        ZonaCG

      3. Hola la verdad he estado buscando esta informacion, pero yo soy super novata en este tema y tengo algunas dudas,
        la primera es que lo necesito para imprimir sobre tela algunas ilustraciones que he hecho y luego las pase a mi pc escaneando pero contienen muchos elementos y son un poco grande, y mi programa es el photoshop cs3 que me parece que las herramientas cambian, por ejemplo el tema de las capas y las lineas guias no son fijas, hay algun truco…si me puedes ayudar te lo agradecere mucho…. es que estoy haciendo un curso pero la prof no me explico bien y estoy un poco perdida y estoy ansiosa de poder hacer mi patron y ver que lo puedo repetir las veces que quiera es mi mayor ilusion, un millon de gracias ….. este es uno de los mejores tutoriales hacerca de este tema que mejor se ha explicado aunque debiste colocar el final hacer la repetición final es decir el paso que me parece el mas complicado cuando logras ver todas las agilas en su totalidad… bueno ya me estoy extendiendo un gran abrazo y sigue con tus tutoriales que son excelentes

      4. Hola maribel, gracias por tu comentario. No tengas duda que tu problema sobre las ilustraciones que deseas estampar en tela tiene solución. Puedes escanear tus dibujos y luego seguir los pasos de este tutorial.
        Básicamente tienes que dividir a tu dibujo en 4 (partes iguales) como se muestra en el tutorial y luego desplazar cada parte al lugar indicado como se muestra en el último paso.
        Luego solo basta con copiar y pegar tu capa que se verá como el último paso, es decir, tu dibujo en el centro y en cada esquina un fragmento de él.
        Espero que mi respuesta te halla servido de ayuda y no dudes en dejar tu comentario si necesitas más ayuda.
        Saludos
        Juan
        ZonaCG

      5. Hermano, muy bueno tu tutorial, te felicito por dejar de manera clara explicado esto de los patrones photoshop.

        Ahora, me gustarí­a saber cómo hago si quiero hacer el patrón a partir de una foto de una textura de madera, por ejemplo. Probé como tú explicas, pero al final siempre quedan unas rayas verticales que rompen con la continuidad en el patrón, dando la idea de desniveles en la superficie. Gracias, de antemano, por tu ayuda.

      6. Luis, muchas gracias por tus comentarios. Como bien dices, es diferente crear patrones a partir de un gráfico simple como hice yo, que a partir de una textura de madera por ejemplo, son procedimientos diferentes. Tendré en cuenta tu pedido para los nuevos tutoriales :)
        Saludos
        Juan
        ZonaCG

      ¡Deja tu comentario!