7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Adobe Photoshop

Cómo convertir una textura en un fondo de mosaicos

Read Time: 10 mins

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Los fondos de pantalla de mosaicos son magníficos para sitios web y toda clase de trabajo en Photoshop. Son particularmente útiles con texturas donde necesitas un fondo general más grande que la imagen pequeña con la que tienes que trabajar.

En este tutorial de cómo hacer un fondo de pantalla, tomaremos una textura y la convertiremos en una imagen de fondo lista para hacer mosaicos fluidos. Es una pequeña técnica útil que ha existido siempre. También podemos hacer esta técnica en este tutorial de diseño en Photoshop.

Pero ¿qué tal si no tienes el tiempo de hacer un fondo con repetición de textura desde cero? Puedes visitar la biblioteca de Envato Elements para encontrar cientos de texturas de mosaico para fondos ¡con descargas ilimitadas!

De manera adicional, si prefieres aprender esta genial habilidad Photoshop viendo un video, te podemos ayudar. Puedes aprender cómo hacer un mosaico para fondo mirando este nuevo video del canal de Envato Tuts+ en YouTube:

Lo que aprenderás en este tutorial de cómo hacer un fondo de pantalla de mosaico en Photoshop

  1. Por qué no puedes usar cualquier imagen como un fondo de mosaicos
  2. Cómo recortar y preparar la imagen para fondo con textura 
  3. Cómo eliminar escombros de la imagen para textura mosaico (opcional)
  4. Cómo hacer una textura de pasto uniforme para mosaico de imágenes
  5. Cómo combinar las capas de pasto para fondo de pantalla mosaico 
  6. Cómo eliminar los bordes con la herramienta Parche para fondo con textura
  7. Cómo definir un patrón para el fondo de pantalla
  8. Cómo hacer una superposición de motivo para textura mosaico
  9. Cómo añadir un patrón de flor al pasto (opcional)
  10. Cómo desplazar el fondo usando un filtro

Lo que necesitarás para el tutorial de cómo hacer un mosaico

1. Por qué no puedes usar cualquier imagen como un fondo de mosaicos 

En este tutorial, queremos crear un fondo de mosaicos desde una textura de pasto. Hay una fantástica foto de pasto en Envato Elements que puedes utilizar. Sin embargo, si solo hacemos la imagen en mosaicos tal como está, el resultado no es muy bueno. Como puedes ver a continuación, está muy claro dónde se repite la imagen y los parches oscuros se aprecian muy raros. Entonces para convertir esa foto en un fondo de mosaicos, primero necesitamos eliminar cualquier irregularidad y posteriormente hacer que los bordes se fusionen.

Por qué no puedes hacer un mosaico desde cualquier fotoPor qué no puedes hacer un mosaico desde cualquier fotoPor qué no puedes hacer un mosaico desde cualquier foto

2. Cómo recortar y preparar la imagen para fondo con textura

Entonces el primer paso es tomar la imagen principal y luego hacer un Recorte en una sección que no tenga los parches de esquina realmente oscuros. Algo como el cuadro mostrado a continuación.

recortar pastorecortar pastorecortar pasto

Abajo está nuestro segmento. Lo he reducido un poco para que la textura no esté exageradamente definida. Aunque tiene un color casi uniforme, podríamos aclarar los bordes. Mientras más uniforme obtengamos la imagen, el resultado será mejor, pues ligeras diferencias resaltan cuando el fondo se hace en mosaicos.

Entonces toma la herramienta Sobreexponer (O) y con un pincel difuso grande, pásalo suavemente sobre los bordes izquierdo y derecho para aclararlos. Pero no exageres, pues el pasto lucirá muy opaco.

herramienta sobreexponer aplicada en el pasto para textura mosaicoherramienta sobreexponer aplicada en el pasto para textura mosaicoherramienta sobreexponer aplicada en el pasto para textura mosaico

3. Cómo eliminar elementos no deseados de la imagen para textura mosaico (opcional)

Usando una imagen de stock de pasto limpio siempre será ideal, ¡pero no te preocupes si tu pasto tiene elementos no deseados en él! En el ejemplo observado abajo, hay una hoja que va a ser un elemento molesto si aparece una y otra vez, así que debemos librarnos de ella.

Para  hacer esto, toma la herramienta Parche (J) y dibuja una forma alrededor de la hoja y luego arrastra con tu mouse para obtener un área cercana con la cual parcharla. (Nota que la herramienta Parche debe ser establecida en Origen y no en Destino, de lo contrario la usas de una manera un poco diferente).

hoja sobre pastohoja sobre pastohoja sobre pasto
hoja eliminadahoja eliminadahoja eliminada

4. Cómo hacer una textura de pasto uniforme para mosaico de imágenes

Nuestro fondo está apreciándose ahora muy bonito y uniforme. Solo necesitamos hacer que los bordes se combinen fluidamente.

Para hacerlo, comienza duplicando la capa del pasto. Luego mueve la primera capa hacia la izquierda y la segunda capa hacia la derecha. Sigue haciendo esto hasta que puedas ver ambas capas con un margen blanco intermedio. Ahora júntalas para que el borde que está más a la derecha de la primera capa toque el borde que está más a la izquierda de la segunda capa.

textura de pasto uniformetextura de pasto uniformetextura de pasto uniforme

5. Cómo combinar las capas de pasto para fondo de pantalla mosaico

Aquí puedes ver las dos capas casi tocándose. Únelas para que no haya un espacio intermedio y combina las dos capas.

ancho del pasto desplazado ancho del pasto desplazado ancho del pasto desplazado

6. Cómo eliminar los bordes con la herramienta Parche para fondo con textura

Ahora, de nuevo utilizamos la herramienta Parche para dibujar una forma sin mucha prolijidad alrededor del borde donde se encuentran las dos capas. Luego usa tu mouse para arrastrar un área cercana para parcharla.

usa la herramienta parcheusa la herramienta parcheusa la herramienta parche

Paso 1

La herramienta Parche hace esta clase de operación realmente fácil, especialmente con un fondo tan ruidoso como este pasto. Como puedes ver, a menos que observes minuciosamente, no se aprecia claramente donde está la línea de la fusión. Si lo quieres, podrías ser más detallista y clonar briznas de hierba, pero con lo que hemos hecho es suficiente para nuestros propósitos.

elimina borde con la herramienta Parcheelimina borde con la herramienta Parcheelimina borde con la herramienta Parche

Paso 2

Ahora repetimos el mismo proceso verticalmente. Así que duplica la capa y mueve una hacia abajo y una hacia arriba hasta que se encuentren los bordes inferior y superior. Combina las capas y usa la herramienta Parche para librarte del borde.

 ¡Y ahora estamos listos para aprender cómo hacer un mosaico! 

La razón por la que esto funcionará es que nos hemos desecho eficazmente de esos bordes. Los nuevos bordes del documento ya coinciden porque movimos las capas igualmente hacia la derecha y hacia la izquierda para que el borde derecho de este documento sea el siguiente pixel del borde izquierdo.

textura de pasto finaltextura de pasto finaltextura de pasto final

7. Cómo definir un patrón para el fondo de pantalla

Presiona Control-A para seleccionar todo y aplica Edición > Definir motivo.

crear patrón de pasto en Photoshop para mosaico de imágenescrear patrón de pasto en Photoshop para mosaico de imágenescrear patrón de pasto en Photoshop para mosaico de imágenes

Ahora vamos a darle un nombre al patrón.

nombrar al patrón de pasto en Photoshopnombrar al patrón de pasto en Photoshopnombrar al patrón de pasto en Photoshop

8. Cómo hacer una superposición de motivo para textura mosaico

 Ahora, en cualquier capa, si seleccionas opciones de fusión y marcas la casilla Superposición de motivo, puedes elegir entre tu colección de patrones personalizados como se muestra, incluyendo el del pasto que acabamos de crear.

Por supuesto, también deberías guardar la imagen del patrón como archivo PSD o JPG, pues podrías necesitarla como una imagen independiente. Por ejemplo, si la fueras a utilizar como una imagen de fondo en un documento HTML, necesitarías la imagen JPG sola, no un "Motivo" de Photoshop.

usa relleno de motivousa relleno de motivousa relleno de motivo

9. Cómo hacer un patrón de flor al pasto para el fondo de pantalla mosaico (opcional)

Si quisieras agregar un patrón de flor a tu pasto, coloca una imagen PNG de flor blanca en tu textura de pasto finalizada. 

A continuación, utiliza la herramienta Marco rectangular para dividir la flor a la mitad ya sea vertical u horizontalmente. No necesita estar perfectamente dividida a la mitad. He colocado dos flores como ejemplos. 

divide la flor usando imágenes en formato PNGdivide la flor usando imágenes en formato PNGdivide la flor usando imágenes en formato PNG

Ahora, en la flor horizontal, arrastra la mitad inferior hacia arriba y la mitad superior hacia abajo, para que ambas piezas toquen los bordes de la pantalla. Asegúrate de que queden perfectamente paralelas.

Haz lo mismo con una división vertical, solo lleva la mitad izquierda hacia la derecha y la mitad derecha hacia la izquierda. 

Aplica Edición > Definir motivo una vez más y usa tu nueva textura de pasto con flor.

alinea las floresalinea las floresalinea las flores

10. Cómo desplazar el fondo con textura utilizando un filtro

Este es nuestro pasto en mosaicos. Como puedes apreciar, hay un pequeño parche oscuro que molesta, pero debido a que voy a usarlo como un fondo para un sitio web, no es algo relevante pues habrá algo encima que lo cubrirá. Sin embargo, podrías fácilmente regresar y parchar ese punto para hacerlo más fluido.

patrón de pasto en Photoshop para fondo de pantalla mosaico patrón de pasto en Photoshop para fondo de pantalla mosaico patrón de pasto en Photoshop para fondo de pantalla mosaico

¡Gracias a los comentaristas que señalaron la existencia de una manera más sencilla de desplazar el fondo usando un filtro! Solo aplica Filtro > Otro > Desplazamiento y selecciona un cantidad de pixeles para mover la imagen horizontal y verticalmente. ¡Gracias por el consejo! Aprendo algo nuevo cada día.

desplazamiento automáticodesplazamiento automáticodesplazamiento automático

¡Se terminó! ¡Ahora sabes cómo hacer un fondo de pantalla mosaico!

Espero te haya gustado este tutorial sobre cómo hacer un fondo de pantalla mosaico. Aprendimos cómo convertir una imagen en una textura de fondo fluida, cómo definir un motivo y más. Y aunque este tutorial puede resultar útil, en ocasiones no tendrás el tiempo para crear un fondo con textura reiterativa desde cero.

A continuación, revisaremos algunas texturas e imágenes de fondos de mosaicos de Envato Elements ¡que puedes descargar y usar de inmediato! 

RESULTADO FINAL patrón de pasto con floresRESULTADO FINAL patrón de pasto con floresRESULTADO FINAL patrón de pasto con flores

Las 5 mejores texturas para fondos de mosaicos de Envato Elements

Si diariamente usas Photoshop y software de diseño, necesitas visitar Envato Elements. El mercado basado en suscripción te ofrece descargas ilimitadas de recursos creativos digitales por una tarifa mensual.

Puedes obtener de manera ilimitada gráficos, texturas, complementos, fuentes, fotos de stock, ¡y más! Estas son las cinco mejores texturas para fondos de mosaicos que puedes usar ahora mismo en tus proyectos:

1. Textura que te anima a saber cómo hacer un fondo de pantalla con follaje exótico (en formato JPG)

Textura que te anima a saber cómo hacer un fondo de pantalla con follaje exóticoTextura que te anima a saber cómo hacer un fondo de pantalla con follaje exóticoTextura que te anima a saber cómo hacer un fondo de pantalla con follaje exótico

¿Buscas un bonito fondo de mosaicos inspirado en la naturaleza? ¡Esta es una opción hermosa! La descarga incluye una imagen de fondo en mosaicos en alta definición (5906x5906 px).

2. Patrón fluido TERRAZO Natura (en formatos AI, EPS y JPG)

Patrón fluido TERRAZZO NaturaPatrón fluido TERRAZZO NaturaPatrón fluido TERRAZZO Natura

También obtienes este fabuloso paquete de fondos con textura repetitiva. La colección incluye seis diseños individuales, cada uno con versiones clara y oscura. Los bonitos fondos de mosaicos vienen en archivos AI y EPS para Illustrator y archivos JPEG para Photoshop.

3. Patrones de estampado animal para Photoshop (en formato JPG y PSD)

Patrones de estampado animal para Photoshop (JPG, PSD)Patrones de estampado animal para Photoshop (JPG, PSD)Patrones de estampado animal para Photoshop (JPG, PSD)

Los llamados animal prints son muy populares para fondos con textura y esta colección es perfecta si te gusta este estilo. La descarga incluye diez bonitos fondos en mosaicos. Cada patrón se exportó en una alta resolución de 1800x1800px, así que funcionarán para proyectos en pantalla e impresos.

4. Geometric Play - Te ayuda a descubrir cómo hacer un mosaico de imágenes (en formatos AI, EPS y JPG)

Geometric Play -  Te ayuda a descubrir cómo hacer un mosaico de imágenesGeometric Play -  Te ayuda a descubrir cómo hacer un mosaico de imágenesGeometric Play -  Te ayuda a descubrir cómo hacer un mosaico de imágenes

Este kit es para los amantes de los patrones geométricos. Estas minimalistas y elegantes imágenes para fondos de mosaicos lucen fantásticas en una variedad de proyectos. 

Obtendrás 20 muestras de patrones para Illustrator, 20 fondos de mosaicos en alta resolución (archivos JPEG) y 20 papeles digitales no estructurados en mosaicos en formato JPG.

5. Patrones de piel capitonada (en formatos PNG, PAT y PSD)

Patrones de piel capitonadaPatrones de piel capitonadaPatrones de piel capitonada

¿Te gustan los fondos con texturas ultrarrealistas? Este paquete es para ti. Obtendrás 14 patrones fluidos únicos de piel capitonada.

Explora más recursos y tutoriales de Photoshop sobre cómo hacer un mosaico y otros efectos

¿Quieres más formidables tutoriales de Photoshop? Envato Tuts+ tiene docenas de tutoriales y recursos ¡que puedes explorar para tus próximos proyectos! Consulta algunos de ellos:

Nota editorial: Este artículo se actualizó con la colaboración de Abbey Esparza y Maria Villanueva. Abbey es instructora autónoma en Envato Tuts+. Maria es Editora Asociada del canal Tuts+ Design.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Scroll to top
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.