Spanish (Español) translation by Javier Salesi (you can also view the original English article)
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
- Por qué no puedes usar cualquier imagen como un fondo de mosaicos
- Cómo recortar y preparar la imagen para fondo con textura
- Cómo eliminar escombros de la imagen para textura mosaico (opcional)
- Cómo hacer una textura de pasto uniforme para mosaico de imágenes
- Cómo combinar las capas de pasto para fondo de pantalla mosaico
- Cómo eliminar los bordes con la herramienta Parche para fondo con textura
- Cómo definir un patrón para el fondo de pantalla
- Cómo hacer una superposición de motivo para textura mosaico
- Cómo añadir un patrón de flor al pasto (opcional)
- 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.
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.
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.
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).
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.
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.
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.
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.
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.
7. Cómo definir un patrón para el fondo de pantalla
Presiona Control-A para seleccionar todo y aplica Edición > Definir motivo.
Ahora vamos a darle un nombre al patrón.
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.
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.
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.
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.
¡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.
¡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!
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)
¿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)
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)
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)
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)
¿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:
Cómo hacer un efecto de textura de risografía
Como Crear un Cartel de Boxeo Antiguo en Photoshop
Borra personas de una foto con Rellenar según contenido en Photoshop
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.
