Share
¿Alguna vez se ha preguntado cómo crear patrones de fondo perfectos y perfectos que funcionen en Photoshop y en la web? No busques más porque hoy vamos a desglosarlo por tí, paso a paso. Estarás creando tus propios patrones de fondo en poco tiempo!
Heya a todos! Hoy continuamos con nuestra serie de tutoriales sobre la creación de patrones de fondo que se pueden usar en la web (y durante la fase de diseño) con nuestra cuarta edición: Texturas de tela sintética. Veremos cómo crear patrones de tela creíbles y de azulejo comenzando con un enfoque simple de vainilla y luego tomando los mismos principios para crear versiones avanzadas..
Nuestro objetivo es simple: Para enseñar a cualquier persona cómo crear patrones de fondo destinados a la web (pero que también se pueden usar fácilmente durante el proceso de diseño). Vamos a ser "agnósticos del programa", lo que significa que la mayoría de los consejos funcionarán tanto en Photoshop como en Fireworks.
Asegúrese de revisar el resto de la serie, incluyendo la fibra de carbono, los fondos ruidosos y la publicación Introducción a los patrones!
Hoy es el cuarto día de nuestra serie, pero vale la pena mencionar que todos estos tutoriales son "independientes", lo que significa que debería poder continuar con la Parte 4, incluso si se perdió las primeras dos partes..
El patrón que vamos a cubrir hoy es cómo crear una "textura de tela sintética" efectiva que se pueda usar como patrón en Photoshop y como fondo de mosaico en sus páginas web. Vamos a hacer esto en 4 pasos:
Durante los últimos meses, las texturas sutiles y ruidosas han sido súper populares entre los diseñadores web (consulte nuestro tutorial sobre cómo crearlas aquí). Sin embargo, en las últimas semanas, ¿he estado notando más y más texturas de ruido "avanzadas"? es decir, la gente va más allá del simple enfoque de 'agregar patrón de ruido' y está probando efectos más divertidos. Hay dos cosas principales que me gustaría señalar:
1: Las texturas que vamos a cubrir hoy están creadas al 100% en Photoshop.. Cubriremos cómo crear texturas fotográficas en nuestro próximo tutorial..
2. Estas texturas deben ser sutiles y ser usadas con moderación. Nada grita en 1995 como una textura de fondo fea con filtros de Photoshop de mano dura.
¿Bien? has sido advertido. Hagámoslo!
Esta textura introductoria es increíblemente sencilla de crear, pero se puede usar para obtener resultados de aspecto altamente profesional cuando se usa correctamente.
Por ejemplo, echa un vistazo a la textura detrás del pie de página del tema de WordPress 'qop':
No esta mal verdad Empezaremos con un lienzo en blanco. Establece el tamaño en 400 x 400 por ahora. El tamaño se puede cambiar más adelante, pero no desea que sea demasiado pequeño porque necesitaremos espacio alrededor de los bordes para trabajar.
Crea una nueva capa y rellénala con Negro color.
Adelante, nómbrela Black Layer solo por el bien de la organización..
Ahora queremos aplicar un filtro rápido para establecer la base de nuestra textura de línea aproximada. Mientras esté en la capa Negra, aplique el siguiente filtro: Filtros> Bocetos> Papel Agua.
Puede ajustar la configuración hasta que tenga su propio efecto deseado personalizado, pero la textura de demostración utiliza la siguiente configuración:
Establezca el modo de fusión de la capa negra en Pantalla De modo que solo se vean las líneas blancas. En este punto, también puede agregar un rectángulo de fondo para establecer un color para su textura. Tenga en cuenta que puede cambiar el color en cualquier punto de este proceso.
¿Realmente no podemos ver nada más que blanco ahora? así que vamos a agregar un rectángulo de color simple y llamémoslo nuestro Color de fondo. Usé el color # 242d34, Pero siéntete libre de usar cualquier cosa que quieras.
Ahh, mucho mejor! Ahora podemos ver nuestra textura. Aunque es un poco plano. Entonces, agreguemos un poco de profundidad a nuestra textura: lo haremos creando una nueva capa y completándola con Negro (de nuevo). Nombra esta capa "Blanca" (verás por qué en los próximos pasos).
Ahora vamos a agregar el Filtros> Bocetos> Papel Agua Efecto de nuevo, pero esta vez queremos agregar mucho más brillo y contraste a la configuración:
Ahora, simplemente invierta los colores para esa misma capa (Imagen> Ajustes> Invertir), y establecer el modo de fusión en Multiplicar. Reduzca la opacidad de la capa a alrededor del 90% para que el efecto no sea demasiado abrasivo.
Whallah! Derecho no muy mal?
El siguiente paso es recortar los bordes de este patrón porque Photoshop tiende a ser un poco pesado alrededor de los bordes. Recortar en aproximadamente 50px de cada borde usando el Cultivo herramienta.
¿Por qué recortamos esto? Debido a que Photoshop tiende a volverse un poco pesado alrededor de los bordes del filtro de papel de agua, lo que significa que si intentamos convertirlo en un patrón, obtendremos "costuras" obvias. Recortar desde el borde nos ayuda a eliminar estas costuras visibles cuando vamos a usar esto como un patrón o en la web.
El paso final es simple: simplemente configure el color de fondo al color deseado, ajuste la opacidad de cada capa de filtro hasta obtener el nivel de textura deseado, luego conviértalo en un patrón (Edición> Definir patrón). Todo listo!
Y, el producto final debe tener este aspecto cuando se usa como patrón:
Esto puede ser un poco demasiado dramático en términos de contraste para el uso (normalmente, para aumentar el nivel de intensidad de los tutoriales para hacer más obvios los efectos), siéntase libre de jugar con la opacidad de las capas de textura para que sea "perfecto" para tu propio diseño particular.
Para personalizar este efecto: Las principales cosas en las que podría estar interesado en ajustar son las "longitudes de fibra" del filtro de papel de agua y el color de fondo. Además, también puede ser divertido entretenerse con la escala del patrón final. Una vez que haya recortado, intente cambiar el tamaño de toda la imagen para ajustar la densidad de la textura (y use la herramienta Afilar para ajustar lo nítida que es).
Esta siguiente textura es probablemente la más simple de las cuatro de hoy. Tres sencillos pasos completarán el efecto:
Primero, cree un nuevo documento (400 x 400) y dibuje un rectángulo de color en el documento. Usaremos esto más adelante para ajustar el color del patrón final..
A continuación, cree una nueva capa, rellénela con negro y agregue el filtro: Filtro> Textura> Texturizador. Usa los siguientes ajustes:
Establecer el modo de fusión en esa capa a la pantalla.
A continuación, crea una nueva capa, rellénala con blanco esta vez. Agregue el mismo filtro exacto: Filtro> Textura> Texturizador. Usa los siguientes ajustes:
Ahora solo establece el modo de fusión de esa capa en Color Burn para que puedas ver el color de fondo..
Finalmente, ajustemos el color de fondo a algo más sutil. Tenga en cuenta que al ajustar el color de fondo, es posible que también desee ajustar los modos de opacidad y fusión de las dos capas superiores hasta que el efecto sea el deseado..
El patrón final como se muestra en la demo:
Puede crear el patrón desde aquí (Edición> Definir patrón), o puede jugar con el color de fondo, la opacidad de las capas de filtro y el recorte hasta que tenga un patrón que se adapte perfectamente a su diseño..
La siguiente textura es un poco más avanzada, así que presta especial atención si buscas recrear este efecto..
Comience con un nuevo documento (400 x 400) y comience dibujando un rectángulo azul (# 2b4891) como fondo. Puedes elegir cualquier color, pero estamos acostumbrados a ver el denim azul, así que nos quedaremos con eso por ahora..
A continuación, crea una nueva capa y Llenar Con 50% de gris (puedes usar la tecla de acceso rápido Shift + Retroceso / Borrar). Dale el nombre de capa horizontal por ahora.
A continuación, establezca la Primer plano y Fondo Colorea el blanco y negro predeterminado presionando re. Necesitamos agregar la base para nuestro patrón de mezclilla. En nuestra capa gris, aplique el filtro: Filtro> Boceto> Patrón de semitono.
Usa los siguientes ajustes:
Esto debería producir un patrón de línea básico? pero el denim es "difuso", por lo que queremos estropearlo un poco usando otro filtro: Filtro> Pixelado> Mezzotinta. Establezca el tipo en Puntos finos.
Ahora crea una copia duplicada de esta capa (Ctrl + J) y llámalo "Capa vertical".
Utilice la herramienta de transformación libre (Ctrl + T) para girarlo 45 grados Y escalarlo lo suficiente como para que se ajuste a cada esquina de nuestro documento. Se me ocurrió escalarlo un 145% en caso de que estés tratando de igualar el mío exactamente.
No se preocupe de que escalar el patrón tan grande creará algunas imperfecciones de trama. En realidad queremos eso. De hecho, siga adelante y agregue más desenfoque (Filtro> Desenfoque Gaussiano establecido en 0.3) tanto para esta capa como para la primera capa sin transformar.
Finalmente, establezca el modo de fusión en la capa diagonal en Múltiple con 70% de opacidad -- y establecer el modo de fusión en la capa de banda horizontal para Luz tenue con 60% de opacidad.
¡Eso completa el efecto denim! Puedes jugar con los colores de fondo y luego convertirlo en un patrón (Edita> Define Patrón).
Nota: Si observa alguna costura obvia en su patrón, tendrá que jugar un poco con el recorte. El truco aquí es asegurarse de que no haya líneas brillantes u oscuras no naturales cerca de ninguno de los bordes. Intenta unos cuantos recortes diferentes hasta que el patrón sea transparente.
Si siguió la demostración a la carta, simplemente puede recortar la altura de su documento a 400 px por 396px. Esto alejará las costuras (abajo):
Whallah! ¿Como funciona esto? Si recuerdas en nuestro primer tutorial de patrones, la idea general aquí es que los últimos píxeles del lado derecho y la parte inferior de nuestro patrón siempre deberán vincularse con el lado izquierdo y la parte superior del documento. Recortar esos 4px en este caso ayuda a que la parte inferior coincida con la parte superior. Ya que la derecha y la izquierda ya coinciden, estamos listos para ir!
¡Bien! Hemos llegado a la textura final del día. Por ahora hemos empleado algunas técnicas bastante difíciles, por lo que este último paso realmente parecerá bastante simple..
Crear un 200 x 240 documento. Continúe y arrastre las tres capas sin procesar que usamos para nuestro patrón de mezclilla (las dos capas de textura + el color de fondo).
Agrupa estas capas juntas (Ctrl + G) y establece una máscara de 50px de ancho en toda la carpeta del grupo. Si no ha creado una máscara de grupo como esta antes, es fácil: solo use la Marco rectangular herramienta de selección para dibujar una amplia selección de 50 px que llena el documento de arriba a abajo (mire la Información panel para comprobar su medida). Luego simplemente presione el botón "Agregar máscara vectorial" en la parte inferior del panel de capas:
¿Por qué 50px? Porque con un documento de 200px de ancho, vamos a querer ajustar 4 franjas de 50px.
A continuación, duplique este grupo de capas, muévalo hacia la derecha del primer grupo, luego (opcionalmente) gírelo horizontalmente para crear un patrón diagonal opuesto.
Para agregar un poco de contraste en las rayas, simplemente cambie el color de fondo (los cambios sutiles son mejores aquí) a algo un poco más claro o más oscuro que el color original).
Finalmente, duplique AMBOS grupos de bandas y muévalos al espacio en blanco en nuestro documento.
Aún no hemos terminado, para agregar algo de interés visual, desvinculemos las máscaras de grupo de estas dos últimas franjas y luego movamos las 3 capas de mezclilla adentro sobre 100px para crear una estriación ligeramente diferente. El resultado final no es dramáticamente diferente, pero las personas que buscan costuras en su patrón se verán desechadas por este paso final.
Felicidades Seleccionar Edita> Define Patrón, Y empieza a usar esto en tus propios proyectos. Como idea final, obviamente puede hacer mucho más con esto agregando sus propias personalizaciones. El siguiente ejemplo cambia los colores a un tono marrón, y luego también reduce el "punto" del patrón al reducir el tamaño de la imagen. Echa un vistazo a nuestro ejemplo final:
¡Bien! Así que ahora debe tener un conocimiento básico lo suficientemente bueno como para crear sus propias variaciones personalizadas de estos patrones de fibra sintética: juegue un poco con los niveles, colores, tamaños de documentos y más para agregar su propio toque personal a estos. Heck, incluso puedes invertir el sombreado para crear patrones sutiles de colores claros..
En las siguientes partes de esta serie, le mostraremos cómo crear algunos patrones de textura avanzados basados en fotografías, más patrones basados en formas, patrones transparentes y aún más en el futuro..
Suscríbase o vuelva a consultar el sitio para ver todas las actualizaciones de esta serie a medida que ocurren!
Accentsconagua