Cómo convertir una textura en un fondo de azulejos sin problemas

Los fondos en mosaico son excelentes tanto para fondos de sitios web como para todo tipo de trabajos de Photoshop. Son particularmente útiles cuando se trabaja con texturas en las que necesita un fondo general más grande que la imagen pequeña con la que tiene que trabajar. En este rápido tutorial, lo guiaré para tomar una textura y convertirla en una imagen de fondo lista para un mosaico sin problemas. Es una pequeña técnica útil que ha existido por siempre. Necesitamos esta técnica para el otro tutorial de hoy: cómo se puede mezclar y combinar un diseño simple con patrones, fotos y fondos..

Esta publicación es el día 9 de nuestra sesión de diseño web. Sesiones creativas "Sesión día 8

¿Por qué no puedes simplemente hacer una foto vieja?

Así que en este tutorial queremos crear un fondo de mosaico de una textura de hierba. Hay una fantástica foto de la hierba en Flickr por 100kr

que podemos utilizar. Sin embargo, si solo hacemos un mosaico de la imagen como está, el resultado no es muy bueno. Como puede ver arriba, es muy claro dónde se repite la imagen y los parches oscuros se ven bastante extraños. Entonces, para convertir esa foto en un fondo de azulejos, primero debemos eliminar cualquier irregularidad y luego hacer que los bordes se mezclen entre sí..


Paso 1

Entonces, el primer paso es agarrar la imagen principal y luego recortarla en una sección que no tenga los parches de esquina realmente oscuros. Algo así como la caja que se muestra arriba..


Paso 2

Aquí está nuestro segmento. De hecho, lo he reducido un poco para que la textura no se vea demasiado afilada. Ahora, aunque es en su mayoría de color uniforme, podríamos hacer con aclarar los bordes. Cuanto más uniformes podamos obtener la imagen, mejor, ya que las pequeñas diferencias son bastante evidentes cuando el fondo está en mosaico.

Así que solo toma el Dodge Tool (O) y con un pincel grande y suave, solo pásalo suavemente sobre los bordes izquierdo y derecho para aclarar una sombra. No te vayas por la borda, ya que la hierba se verá lavada..


Paso 3

Como se puede ver arriba, la hierba tiene un color mucho más uniforme. Pero hay una pequeña hoja en la parte superior izquierda, que será un regalo muerto si la misma hoja aparece una y otra vez, por lo que deberíamos deshacernos de ella. Para hacer esto toma el Herramienta de parche (J) y dibuje una forma alrededor de la hoja y luego arrastre con el mouse para obtener un área cercana para parchearla. (Tenga en cuenta que la herramienta de parches debe configurarse en Origen y no en Destino, de lo contrario, la usará de manera ligeramente diferente)


Etapa 4

Así que nuestro fondo se ve bastante bonito y uniforme ahora. Solo tenemos que hacer que los bordes sangren unos contra otros. Así que duplica la capa de hierba. Luego mueva la primera capa a la izquierda y la segunda capa a la derecha. Sigue haciendo esto hasta que puedas ver ambas capas con un espacio en blanco entre ellas. Ahora júntelos para que el borde más a la derecha de la primera capa toque el borde más a la izquierda de la segunda capa..


Paso 5

Aquí puedes ver las dos capas casi tocando. Júntelos para que no haya ningún blanco en el medio y fusione las dos capas en una sola..


Paso 6

Ahora volvemos a usar la herramienta de parches para dibujar una forma áspera alrededor del borde donde se encuentran las dos capas, luego usamos el mouse para arrastrar un área cercana para parchearlo.


Paso 7

La herramienta de parche hace este tipo de operación. De Verdad Fácil, especialmente con un fondo tan ruidoso como esta hierba. Como puede ver, a menos que mire con cuidado, no es evidente dónde está la línea de mezcla. Si quisiera, podría entrar en detalles finos y clonar hojas de hierba individuales, pero esto está bien para nuestros propósitos..


Paso 8

Ahora repetimos el mismo proceso verticalmente. Así que duplique la capa y mueva uno hacia abajo y uno hacia arriba hasta que los bordes superior e inferior se encuentren. Combina la capa y utiliza la herramienta de parche para deshacerte del borde.


Paso 9

Y ahora estamos listos para el mosaico.!

La razón por la que esto funcionará es que efectivamente hemos eliminado esos bordes, los nuevos bordes del documento ya coinciden porque movimos las capas a la izquierda y a la derecha de manera que el borde derecho de este documento es el siguiente píxel a lo largo del borde izquierdo.


Paso 10

Así que presione CTRL-A para seleccionar todo e ir a Edita> Define Patrón.


Paso 11

Ahora le damos un nombre al patrón


Paso 12

Ahora, en cualquier capa, si selecciona las opciones de fusión y marca la casilla Superposición de patrón, puede elegir entre su conjunto de patrones personalizados como se muestra, incluido el césped que acabamos de crear. En la imagen de arriba puedes verme aplicando el patrón en el fondo de un sitio web.

Por supuesto, también debe guardar la imagen del patrón como un PSD o JPG, ya que puede necesitarla como una imagen independiente. Por ejemplo, si lo utilizara como imagen de fondo en un documento HTML, necesitaría una imagen JPG única, no un "patrón" de Photoshop..


Finito!

Aquí está nuestra hierba de azulejos. Como puede ver, hay un parche oscuro que lo revela, pero como voy a usar esto como fondo para un sitio web, no es un gran problema ya que habrá cosas por encima. No obstante, puede volver fácilmente y parchear ese punto para hacerlo más transparente.


Actualizar - Filtro> Otro> Desplazamiento

¡Gracias a los comentaristas que señalaron que de hecho hay una manera más sencilla de compensar el fondo utilizando un filtro! Simplemente vaya a Filtro> Otros> Desplazamiento y seleccione una cantidad de píxeles para mover la imagen horizontal y verticalmente. Gracias por la punta chicos! Aprendo algo nuevo cada día :-)

Esta publicación es el día 9 de nuestra sesión de diseño web. Sesiones creativas "Sesión día 8