¿Alguna vez te has preguntado cómo a algunos diseñadores web se les ocurren tan buenas texturas de fondo? En realidad, es mucho más fácil de lo que piensas. Solo toma unos minutos y un solo filtro de Photoshop que probablemente nunca hayas usado.
Intrigado? Sigue leyendo para ver las instrucciones paso a paso para crear texturas enlosables a partir de casi cualquier imagen.
La manera fácil o la manera difícil
Hay dos formas de iniciar este proyecto. Puedes ir a tomar una textura pre-construida o crear tu propia desde cero. Para este tutorial, quiero darle el valor de su dinero, así que tomaremos el camino correcto y crearemos nuestra textura de inicio desde el principio.
Sin embargo, si tiene prisa, simplemente tome una textura libre de algún lugar y omita los primeros pasos. Aquí hay tres recursos excelentes para comenzar (¿de nuestro artículo? ¿40 Recursos asombrosos para regalos de diseño?).
Perdido y tomado
Texturas CG
Textura rey
Si quieres algo más único, abre Photoshop y sigue adelante.
Paso 1: Nuevo lienzo
Las imágenes de fondo en mosaico pueden ser bastante fáciles de detectar cuando son pequeñas, así que voy a hacer las mías bastante grandes. Lo guardaremos como JPG, por lo que el tamaño del archivo debe ser lo suficientemente pequeño como para cargarlo rápidamente en la mayoría de las conexiones. Si no estás de acuerdo con el tamaño grande, ¡simplemente haz el tuyo más pequeño!
En Photoshop, cree un nuevo documento de 800 píxeles por 800 píxeles a 72 ppp y en RGB.
Ahora llene su lienzo con un rango medio de color sólido oscuro. Puedes elegir lo que quieras, pero fui con # 80ac4b.
Paso 2: Crea un pincel personalizado
Me he dado cuenta de que las texturas de bokeh parecen ser muy populares últimamente. Decidí mostrarte cómo construir una. Es un buen ejemplo porque hará que la textura sea un poco más complicada que la mayoría.
Para comenzar, crea un nuevo documento, toma un pincel redondo y haz clic una vez en el centro del lienzo para hacer un punto negro. Le he dado al mío un ligero brillo exterior negro para agregarle un poco al efecto bokeh. Ahora ve a Editar> Definir predefinido de pincel.
Nombra tu pincel, guárdalo y vuelve a cambiar a tu otro lienzo.
Ahora seleccione ese pincel, vaya a la paleta de pinceles y aplique las siguientes opciones para darle un buen efecto de dispersión.
Ste 3: píntalo
Ahora que tienes un buen pincel con el que trabajar, pinta en algún bokeh. No se deje llevar demasiado, recuerde que cuanto más complejo sea, más difícil será entrar y arreglar cuando lo convertimos en un patrón repetitivo.
Aquí está el patrón que se me ocurrió:
Paso 4: Offset
Esta es la parte donde Photoshop se hace cargo y hace un buen truco que nos ahorra mucho tiempo. Primero asegúrese de que sus capas se fusionen en un documento plano. Ahora vaya al menú y elija Filtro> Otros> Desplazamiento.
Establezca su desplazamiento horizontal y vertical en la mitad de las dimensiones en píxeles de su lienzo y seleccione la opción de ajuste.
Voila! Una textura de fondo sin fisuras. Ok tal vez no Sin embargo, gran parte del trabajo se ha hecho por nosotros y solo necesitamos un poco de limpieza para que funcione.
Paso 5: Limpiar las costuras
Si estuviéramos trabajando con una textura fotográfica, entraríamos y clonaríamos las costuras para asegurarnos de que todo pareciera decente. Sin embargo, aquí tenemos un fondo de color sólido por lo que podemos pintar con un pincel verde.
Entra y pinta completamente sobre cualquier área problemática. Está bien si destruyes algún bokeh en el proceso. Como puede ver en la imagen de abajo, aplasté un poco uno de mis círculos mientras reparaba la textura. Arreglaremos esto en el siguiente paso.
Paso 6: Agregando un poco más de Bokeh
Ahora toma el cepillo bokeh que hiciste y desactiva los efectos de dispersión que activaste antes. Agregue un poco de bokeh adicional con un clic en un momento en el que haya notables espacios en el centro de la imagen (manténgase alejado de los bordes). Usa unas pocas capas y diferentes opacidades para que se vea bien y reemplaza cualquier círculo que hayas arruinado con el paso anterior pintando justo encima de ellas.
Cuando haya terminado con este paso, debe tener un gráfico de fondo hermoso y perfectamente enlosable. Ahora guárdelo como un archivo JPG, manteniendo el tamaño de su archivo lo más bajo posible y manteniendo una imagen nítida. Decidí guardar el mío a 500px por 500px para poder detectar fácilmente el patrón de repetición y buscar áreas problemáticas.
A continuación, lo probaremos en un navegador web para asegurarnos de que funciona.
Paso 7: Tirarlo en una página web
La mejor manera de probar la textura es crear una página web rápida. Cree un documento HTML vacío y aplique estilo al cuerpo con el siguiente CSS:
Ahora véalo en su navegador para ver cómo lo hizo. No se preocupe si no es perfecto, solo regrese y modifique las áreas que necesitan ser arregladas. Como se puede ver en la imagen de abajo, ¡nos estamos preparando bastante bien! No está mal solo por unos minutos de trabajo.
Texturas orgánicas
Para ser concienzudo, también quiero mostrarle cómo funciona esto con una textura que es un poco más típica con los recursos que encontrará en línea. Aquí hay uno que tomé de Flickr.
Primero corte los bordes, serán muy fáciles de detectar en un patrón repetido. Luego ejecute el comando de compensación como lo hicimos antes.
Como puede ver en la imagen de arriba, ¡esta textura es tan perfecta para esta técnica que es difícil detectar las costuras incluso antes de que realicemos cualquier limpieza! Aún así, recorra las costuras con la herramienta de clonar o con el pincel de curación para asegurarse de que las transiciones sean agradables y graduales.
Cuando hayas hecho eso, guárdalo y cárgalo en el navegador como antes para ver si tienes áreas feas.
La imagen de arriba muestra mi producto final. Repasándolo por segunda vez con una textura mucho más fácil para trabajar, ¡pude reducir mi tiempo a aproximadamente dos minutos!
Conclusión
Este método es tan rápido y fácil que realmente no tiene excusa para no darle una oportunidad la próxima vez que quiera enriquecer el fondo de su diseño web. Crear sus propias texturas en mosaico en lugar de tomar una ya hecha le ayudará a mantener su sitio con un aspecto único y le dará mucha más libertad en el tipo de textura que desee.
Háganos saber en los comentarios a continuación si pudo encontrar una pieza decente utilizando este método. Deje un enlace a su producto final para que podamos verlo!