Crear y aplicar texturas naturales
Las texturas hacen que un sitio web se sienta tangible.
Le dan al contenido una relación con el mundo físico, un sentido de lugar y una realidad con la que la gente se puede relacionar.
Desafortunadamente, la simulación de texturas físicas no es tan simple como tomar una foto o ejecutar algunos filtros de Photoshop.
Uno tiene que mezclar el ruido aleatorio y los patrones reconocibles, buscando similitudes en lugar de la repetición pura.
Aquí, discutiremos qué le da a las texturas una calidad orgánica , y veremos las técnicas para crear y aplicar texturas naturales y mosaicos sin costura.
Sentido del tacto a través de la vista
Una "textura" es la superficie de una sustancia física u objeto. Al igual que la vista, nuestro sentido del tacto nos ayuda a comprender los objetos. Áspero, suave, resbaladizo y desmenuzable son texturas y le dicen a alguien de qué está hecho un objeto, dónde ha estado y si está relacionado con otra cosa.
En la web, el sentido del tacto de una persona se limita a su dispositivo de entrada. Pero no todos los sitios web necesitan "sentir" lo mismo. En función de su experiencia en el manejo de objetos cotidianos, las personas asocian ciertas apariencias con ciertas texturas. En el arte digital, uno podría decir que la textura es como algo "se siente" en los ojos.
Si bien los editores de imágenes modernos facilitan la creación de texturas, no todas las texturas son un ganador seguro. Crear una textura de aspecto natural es una tarea difícil que mezcla patrones, caos y uso para crear personajes.
Las texturas naturales tienen una medida de aleatoriedad
Muchas texturas se encuentran entre dos extremos: patrones regulares y ruido aleatorio. Las texturas basadas en patrones no se disculpan por parecer artificiales. Pueden estar formados por un símbolo o texto conocido, y siempre tienen una disposición predecible.
Arriba, muestras de patrones de mosaico.
En el otro extremo, las texturas basadas en ruido incorporan estática aleatoria. Son fáciles de crear: Photoshop tiene su propio filtro "Agregar ruido" y son fáciles de usar porque carecen de funciones que parecen extrañas cuando se cortan.
Arriba, muestras de texturas ruidosas.
Las texturas de aspecto natural se ubican en algún lugar entre los patrones regulares y el ruido aleatorio.
Arriba, una gama de texturas mezcla patrones y ruido en diversos grados.
Si bien nada está mal con ninguno de los extremos, muchas buenas texturas tienen características de ambos. En texturas de aspecto natural, las costuras están ausentes o son difíciles de detectar, y no podemos identificar ningún patrón en mosaicos repetidos. Su apariencia es tan clara y efectiva como cualquier patrón regular, pero menos evidente.
Las texturas "orgánicas" tienen la combinación correcta de ruido y patrón.
Caos racional, ruido ordenado
En el contexto de la textura, "ruido" se refiere a variaciones irregulares en un grupo de píxeles. El grano de película, los artefactos de poca luz y el difuminado son tres tipos de ruido comunes que, deseable o no, se encuentran a menudo en imágenes complejas.
El ruido de textura es lo que hace que las superficies naturales se vean naturales. Pero no es simplemente estático. Por el contrario, el ruido de textura equilibra el caos y el orden.
Arriba, una forma geométrica única repetida muchas veces crea un patrón. A la izquierda, la forma varía solo en la ubicación: las filas no son uniformes.
Las otras tomas muestran cambios en el ángulo, la densidad y el tamaño de la forma. Las texturas creadas a partir de estas variaciones de forma parecerían más caóticas, pero todas las texturas conservarían el carácter único del original, porque las variaciones se basan en la misma forma básica.
Por supuesto, el resultado aún parece artificial. Las repeticiones obvias en las texturas basadas en ruido arruinan el efecto porque las personas son muy buenas para reconocer patrones. Las texturas en el mundo real tienen variación en forma, color y profundidad.
Arriba, las texturas del mundo real muestran ruido y repetición. La arpillera, el granito rosa y el papel de cera tienen sus propios patrones "irregulares regulares", pero cada uno sigue siendo distinto de los demás.
- Con sus líneas horizontales y verticales predecibles, la arpillera es la más regular. Pero las líneas no son perfectas. Las ligeras variaciones en el tono y la dirección evitan que el patrón se vea artificial.
- Las marcas de viruela en el granito no están distribuidas uniformemente. Ver las desigualdades de cerca es difícil. La característica se vuelve más aparente cuando se ve en un área amplia.
- El papel de cera tiene el menor contraste y la menor personalidad. Algunos grupos de tonos oscuros evitan que sea ruido aleatorio.
Cada textura tiene ciertas características, ya sean marcas de viruela, vetas, manchas o surcos, que la hacen única. Las variaciones en estas características lo hacen funcionar.
Arriba, una textura metálica incorpora formas superpuestas de bordes irregulares sin ningún orden en particular, pero conserva su carácter distintivo. (Textura cortesía El diseño Mag .)
Rango de profundidad y contraste desde murmullos hasta gritos
Una variable clave de cualquier textura natural es la profundidad. La "irregularidad" de una textura proporciona una sensación de táctil más que color o tamaño. Pero la profundidad también agrega contraste, lo que atrae la atención y puede degradar la legibilidad.
Una textura gritando en el fondo aumentará el volumen del contenido en sí. ¿En qué punto es demasiado ruidoso? Eso depende de la fuerza del contenido y la disposición de la audiencia.
Si una textura fuerte se ajusta al tema, entonces contribuye al estado de ánimo. Pero si interfiere con la legibilidad, entonces tienes un problema.
¿Cuál de las escrituras anteriores es más fácil de leer? ¿Qué textura refleja mejor el mensaje en la escritura? Puede haber más de una respuesta correcta, pero solo hay una directriz: al mezclar texturas y contenido, especialmente textual, asegúrese de que los bordes del contenido permanezcan visibles.
Hablando de bordes, para realismo adicional, preste atención a dónde termina la textura. Las texturas malolientes o arenosas, por ejemplo, no necesitan terminar en una línea perfecta. En cambio, déjalos rezumar o derrumbarse en la siguiente superficie. El truco es pensar en todo en la página como una superficie con textura, incluso si es un color sólido liso.
Texturas que se vuelven aparentes con fuentes de luz
No todas las texturas necesitan grietas profundas para verse tangibles. Considera la pintura brillante Sin crestas o protuberancias, su sensación de esmalte resbaladizo proviene de su brillo.
Las texturas de arriba muestran cómo la superficie de un objeto no tiene que ser áspera. Puede que no funcionen como baldosas que se repiten, pero el brillo, la reflexión y la translucidez proporcionan pistas visuales sobre cómo se podría sentir un objeto en el mundo real.
El punto dulce entre el personaje y el tamaño del archivo
Un problema común con cualquier textura natural es cómo repetirlo. Cuando la gente detecta la repetición, cualquier ilusión de realidad se destruye. La solución más fácil es usar mosaicos más grandes y, por lo tanto, menos. Con más variación, la repetición de manchas se vuelve más difícil.
Como se muestra arriba, cuanto más anchas sean las fichas, menores serán las probabilidades de que las personas detecten la repetición. Desafortunadamente, las fichas más anchas también crean archivos más grandes, lo que ralentiza la carga de la página. Para muchas personas, un signo de carga estacionario mata el estado de ánimo tanto como ver el borde de un azulejo.
Otra solución es hacer que las formas en el mosaico individual sean más pequeñas.
Como vemos, la repetición de texturas más finas tiene menos posibilidades de ser detectada. Pero cuanto más fina es la textura, menos carácter le puedes dar. La textura más fina sería puro ruido, pero eso no te ayuda. Las texturas naturales siempre evocan una superficie conocida.
En resumen, las texturas naturales deberían:
- Tener suficiente personalidad como para no ser solo ruido aleatorio. Esto significa que las formas, o "agrupaciones" de píxeles, deberían ser similares pero no idénticas.
- Tener suficiente personalidad como para establecer una escena o estado de ánimo, pero no tanto como para distraer a los usuarios del contenido. Esto significa que no se distinguen "grupos" u otras características que se destacan desde lejos.
- Sé lo suficientemente aleatorio para evitar la repetición. Las características de la textura no deben formar un patrón que las personas puedan detectar sin enfocarse.
¿Cómo hacemos todo esto?
Creando texturas en Photoshop
Muchos programas permiten a los diseñadores crear sus propias texturas naturales. Y la web no tiene escasez de texturas descargables. Crear su propia textura puede ser una experiencia gratificante que no viole los derechos de autor y que contribuye a un diseño verdaderamente único.
1. Crea un nuevo documento de Photoshop con un fondo blanco. Para este ejemplo, lo haremos de 600 x 300 píxeles.
2. Llene el fondo con negro.
3. Dibuja trazos blancos al azar apuntando en la misma dirección general. En este ejemplo, estamos usando un simple pincel de bordes duros. Diferentes consejos de pincel crearán diferentes resultados. 
4. Use la herramienta de manchas para untar los trazos en bordes borrosos al azar. Una punta de bordes difusos (con una dureza inferior a 30) funciona mejor. No importa cuán distorsionada sea la textura, los mejores resultados tendrán muchos tonos de gris. 
5. Vaya a Filtro> Ruido> Agregar ruido y agregue estática según su gusto. Luego Filter> Other> High Pass . Juntos, estos agregan más tonos grises (vitales para el paso 6) y un poco de arena. 
6. Crea una capa de mapa de degradado. Esta capa especial aplica color a las capas subyacentes en función de su tono. A diferencia de los degradados normales, que se colorean en píxeles en función de la ubicación, el degradado asigna color a los resaltados, medios tonos y sombras. Use colores poco saturados, especialmente verde, marrón y azul, para simular los colores de la naturaleza. 
Arriba, el resultado de aplicar un mapa de degradado marrón y amarillo.
7. Recorta una parte interesante de la textura. Intenta no usar más de la mitad de toda la imagen. Usaremos el resto en breve. 
8. Importante: Guarde el mosaico recortado como un archivo separado. Necesitarás el archivo original más tarde.
Los detalles que se muestran aquí son deliberadamente grandes para demostrar la técnica, pero el resultado no es malo para una textura. Así es como funciona el proceso en general:
- Cualquier tamaño que sienta apropiado lo hará. Las fichas más grandes tendrán rasgos más realistas pero serán más grandes en tamaño de archivo. Comience siempre mucho más grande de lo que necesita, porque los bordes de una textura que se hizo desde cero rara vez coinciden con los bordes del lienzo.
- Crea una serie de marcas con la misma herramienta o herramientas. La esencia de una textura se establece eligiendo una técnica similar o dos y usándola muchas veces.
- Agregue un poco de caos con filtros de Photoshop.
- Agregue color: mapas de degradado para enfatizar la profundidad y manchas de color aleatorio para salpicaduras. Use colores poco saturados, especialmente verde, marrón y azul, para simular los colores de la naturaleza.
Hacer azulejos sin costura
De aspecto natural o no, la mayoría de las texturas y patrones deben ser integrales. Es decir, los visitantes no deberían poder ver los bordes de la loseta repetitiva. Cómo hacemos esto? El azulejo en sí proporciona la solución.
9. Arriba, la imagen se divide a lo largo de las líneas azul y roja. Debido a que los píxeles a lo largo de la división ya coinciden, moverlos a cada lado asegura que los bordes izquierdo y derecho coincidirán. Por supuesto, el problema todavía existe, pero es más fácil de arreglar.
10. Este azulejo cuadrado viene de una imagen más grande. Arriba, la división del azulejo se rellena con material de la imagen completa. Repita el paso 8 para reparar la costura horizontal (en la parte superior e inferior de la imagen).
La propiedad final
La textura simple creada anteriormente tiene un defecto flagrante: como fue diseñada para demostrar el proceso, sus características se repiten con demasiada frecuencia.
Las características de una textura natural suelen ser menos de una décima parte de la teja entera. Es decir, para una loseta que mide 500 x 100 píxeles, la arruga, el surco u otra marca más grande mediría 50 x 10 píxeles o menos.
Las texturas bien elaboradas requieren una característica más: tiempo. A menos que descargue un regalo de promoción, debe dedicar tiempo a desarrollar y refinar una gran textura. Pero no pienses que es una tarea ardua. Es parte del proceso, naturalmente.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben es un freelance diseñador web quien resuelve los problemas de comunicación con un mejor diseño.
¿Cómo se crean texturas de aspecto natural? Comparte tus ideas en los comentarios a continuación.