7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Visuals

El qué, por qué y cómo de las texturas en el diseño web

Read Time: 24 mins

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

El uso de texturas y patrones en el diseño web ha recorrido un largo camino en muy poco tiempo. Desde el grunge cliché y las llamativas texturas vintage, los mejores sitios web actuales usan texturas en una amplia variedad de formas para crear una experiencia más inmersiva, definir la personalidad del sitio y crear un aspecto y una sensación más refinados.

En el tutorial de hoy, vamos a abordar directamente algunas de las formas en que puede usar la textura y los patrones para mejorar su próximo diseño, servir algunos ejemplos inspiradores de texturas utilizadas de la manera correcta y también proporcionar una serie de mini tutoriales para darle una introducción a algunas de las formas prácticas de incluir texturas en su próximo proyecto.

¿Listo para comenzar?


Terminología: texturas vs. Patrones vs. Imágenes de fondo

Antes de empezar, vamos a tomar un momento para definir rápidamente la diferencia entre imágenes de fondo, patrones y texturas. Mientras que los términos son de uso frecuente interchangably, hay diferencias sutiles entre los tres que te ayudarán a pensar en la mejor solución para sus diseños.

Patrones de

En términos generales, los patrones son pequeñas, simples, basados en imágenes y son repetibles en ejes x e y. De hecho, se pueden generar 'patrones' en sólo unos pocos píxeles, y como tal son generalmente extremadamente ligero en cuanto a tamaño de archivo.

Aquí unos ejemplos de algunos patrones de baldosas simples junto con la correspondiente imagen que se utilizó para crear el archivo de patrón zoom en el 3200%.

A Selection of patternsA Selection of patternsA Selection of patterns

Texturas

Texturas en comparación son generalmente más complejas, tienen un sentido más fuerte de aleatoriedad pero, similares a los patrones a menudo están diseñados para repetir (pero no siempre es el caso).

Mientras que patrones sin duda tienen su lugar en el diseño web moderno, es el uso creativo de texturas que realmente captura la imaginación de webdesigers el mundo encima.

Aquí está una pequeña muestra de ejemplos para darte una idea de la diferencia entre los patrones y texturas:

A Selection of texturesA Selection of texturesA Selection of textures

Imágenes de fondo

Imágenes de fondo son una bestia completamente diferente. Por lo menos con el propósito de este tutorial creo que de las imágenes de fondo como no repetir, grandes y detalladas imágenes, ilustraciones y fotografías. Mientras que esto es un la generalización superior, sirve para ilustrar la diferencia entre imágenes de fondo, patrones y texturas.


Vamos a hacer algo de ruido

Ruido es uno del uso más popular de textura en el diseño de la web hoy en día y puede ser utilizado para agregar profundidad e interés a casi cualquier elemento en cualquier diseño de fondos a los botones.

El uso eficaz del ruido se encuentra en la sutileza de su aplicación. Buen ruido debe ser casi indistinguibles para el ojo mientras todavía romper un color sólido con pequeñas variaciones de la luz y la oscuridad.

Echemos un vistazo a una utilización tradicional del ruido en la naturaleza de www.kendoui.com.

Noise Example from www.kendoui.comNoise Example from www.kendoui.comNoise Example from www.kendoui.com

Este ejemplo es eficaces gracias a la utilización de iluminación simulado para crear profundidad adicional e interés visual al diseño general. También tenga en cuenta que las áreas resaltadas de la página dan el área de contenido un sentido de definición sin necesidad de utilizar un área de contenido tradicional 960px bloque ancho sólido color.

En una vena similar, Matthew Price ha usado efectos de iluminación creativa para resaltar sus diferentes servicios y es otro buen ejemplo de cómo tomar una textura simple ruido para añadir un verdadero punto de diferencia a un sitio:

Noise Example from www.articodesign.comNoise Example from www.articodesign.comNoise Example from www.articodesign.com

Mini Tutorial: Crear ruido en Photohop

Ahora que hemos visto un par de ejemplos, vamos a echar un vistazo a cómo crear un efecto de ruido simple en Photoshop:

Paso 1: A partir

Crear un nuevo documento 150px x 150px con un fondo transparente.

Noise Tutorial 1Noise Tutorial 1Noise Tutorial 1

Hacer una selección del documento (Ctrl + A) y añadir un recubrimiento de Color de #007dba.

Noise Tutorial 2Noise Tutorial 2Noise Tutorial 2

Paso 2: Lleve el ruido

Crear una nueva capa (Ctrl + Shift + N) y llenarlo con #000000.

A continuación, generar un filtro de ruido (filtro → ruido → añadir ruido) y de entrada los siguientes valores:

Noise Tutorial 3Noise Tutorial 3Noise Tutorial 3
Noise Tutorial 3

Paso 3: Mezclar el ruido

A continuación, gire a la monochomatic textura de ruido mediante la adición de una capa de ajuste blanco y negro (capa → capa de ajuste → blanco y negro) (nota, esta es la opción preferida para convertir el ruido de escala de grises, el ajuste "monocromático" en el generador de ruido tiras medio lejos tonos):

Noise Tutorial 4Noise Tutorial 4Noise Tutorial 4

Para limitar el efecto de la capa de ajuste solo a la capa de ruido (no a la capa azul), cree una máscara de recorte en la capa de ajuste haciendo clic con el botón derecho en la capa de ajuste y seleccionando Crear máscara de recorte.

Noise Tutorial 6Noise Tutorial 6Noise Tutorial 6

Con la capa de ruido seleccionada, cambie el modo de mezcla a superposición y dial de la opacidad hacia entre 5% - 8% dependiendo del color base.

Noise Tutorial 6Noise Tutorial 6Noise Tutorial 6

Paso 4: acabados

Para un toque final opcional, añadir otra capa sobre el color base, llevar el relleno a 0% y añadir un degradado lineal de blanco a negro con un modo de fusión Subexposición lineal y una opacidad del 15%:

Noise Tutorial 8Noise Tutorial 8Noise Tutorial 8

Texturas para fiel a efectos de la vida

También se utiliza texturas más explícitamente para crear efectos de true-to-life para crear la ilusión de la mirada de los efectos del mundo real. También conocido como skeuomorfismo, este efecto ha demostrado ser una persistente tendencia en diseño de la interfaz.

Este enfoque puede utilizarse para crear representaciones extremadamente literales, como se ve en el ejemplo siguiente del usuario de Dribbble Tom Creighton:

Dials From Tom CreightonDials From Tom CreightonDials From Tom Creighton

En particular, tenga en cuenta no sólo la textura detallada de madera, sino también el gradiente metálico realista para la marca y el uso efectivo de la sombra.

Skeuomorfismo no siempre tiene que ser tan literal. En el ejemplo siguiente, los estrategas de la copia y el contenido de Six11Ink han utilizado una textura de papel para crear la ilusión de que el sitio realmente se representa en acciones de calidad en lugar de una pantalla, un perfecto maridaje con enfoque de negocios de la empresa de contenido escrito.

Six11InkSix11InkSix11Ink

Mini Tutorial: Crear una cinta de tela realista en Photoshop

Em encanta u odio em, las posibilidades son bastante buenas que usted va creando una cinta realista en un proyecto de futuro. En este mini proyecto, que va creando una cinta de tela realista en Photoshop con la ayuda de una biblioteca de patrón.

Paso 1: Crear un documento nuevo

Crear un nuevo documento (Ctrl+n) 150px x 300px y rellénelo con blanco:

Ribbon Tutorial 1Ribbon Tutorial 1Ribbon Tutorial 1

Disposición algunas guías (Ctrl + R) con las siguientes ubicaciones (desde el borde del documento).

Ribbon Tutorial 2

Paso 2: Dibujar una forma de cinta

En una capa nueva y con la herramienta pluma para 'Forma', sacar de la siguiente forma utilizando las intersecciones de las guías para ayudarle. Tenga en cuenta que el borde superior de la cinta supera la parte superior del documento.

Ribbon Tutorial 3Ribbon Tutorial 3Ribbon Tutorial 3

Paso 3: Descargar la textura

Descargar la textura de la tela elegante de patrones sutiles.

Ribbon Tutorial 4Ribbon Tutorial 4Ribbon Tutorial 4

Una vez que hayas extraído el archivo, abrir la imagen PNG en Photoshop. Establecer la imagen como un patrón (editar → definir patrón).

Paso 4: Añadir la textura a la cinta

Volver a su documento de Ribbon.psd y aplicar la textura de la tela de la clase como un efecto de capa a la forma de la cinta:

Ribbon Tutorial 6Ribbon Tutorial 6Ribbon Tutorial 6

Paso 5: Efectos de capa

Duplicar la forma principal de la cinta en una capa nueva (capa → duplicar capa) y asígnele el nombre 'Efectos de la cinta'.

Aplicar los siguientes efectos de capa:

Ribbon Tutorial 7Ribbon Tutorial 7Ribbon Tutorial 7


Ribbon Tutorial 8Ribbon Tutorial 8Ribbon Tutorial 8


Ribbon Tutorial 9Ribbon Tutorial 9Ribbon Tutorial 9


Ribbon Tutorial 10Ribbon Tutorial 10Ribbon Tutorial 10


Ribbon Tutorial 11Ribbon Tutorial 11Ribbon Tutorial 11


Ribbon Tutorial 12Ribbon Tutorial 12Ribbon Tutorial 12


Ribbon Tutorial 13Ribbon Tutorial 13Ribbon Tutorial 13

Paso 6: Añadir un resplandor sutil

Duplicar la forma principal de la cinta otra vez y colocarlo en la parte superior de su pila de capa. Aplicar un degradado de opacidad blanca blanco 0% opacidad → 100% con los siguientes ajustes:

Ribbon Tutorial 14Ribbon Tutorial 14Ribbon Tutorial 14

Paso 7: Terminando

Para finalizar, vuelta a su parte inferior la mayoría capa (es decir el fondo del documento) y aplica la siguiente gradiente:

Ribbon Tutorial 15Ribbon Tutorial 15Ribbon Tutorial 15

Usted debe dejarse con el siguiente resultado:

Ribbon Tutorial 15Ribbon Tutorial 15Ribbon Tutorial 15

Texturas para añadir interés Visual

Mientras el bloque sólido colores han sido un pilar de diseño web eficaz por años (y todavía tengan un lugar en el diseño moderno), cada vez más diseñadores han sido empleando el uso creativo de texturas para añadir interés visual adicional a los componentes de su proyectos.

El resultado es a menudo una solución más sofisticada, pulida y puede bajar el tono y refinamiento adicional, especialmente donde un sólido bloque de color o bien puede abrumar o aburrido abajo el total impacto del sitio.

Tome este ejemplo de sólido gigante que ha utilizado una textura bastante simple para romper para arriba una opción de color atrevido:

Solid GiantSolid GiantSolid Giant

¿Este diseño particular dejo ver rojo (o rosa)? Texturas no siempre tienen que ser tan abierta. Echemos un vistazo a un uso más conservador de texturas en nuestro propio Tuts + Premium:

Textures from Tuts+ PremiumTextures from Tuts+ PremiumTextures from Tuts+ Premium

Observando el aumento superior, podemos ver el uso de tres texturas diferentes que se utilizan para definir las diferentes secciones de la página (el encabezado, el fondo del cuerpo y la ventana de splash). Mientras que colores bloque podido fácilmente ser utilizados aquí, el uso de textura añade una capa adicional de atención a los detalles y la complejidad del diseño.

También cabe destacar la elección de texturas complementarios utilizados, las texturas de la cabecera y el fondo del cuerpo comparten una base geométrica similar, utilizar una proporción similar de escala el plano base de 45 grados. Todos estos elementos añadir a la armonía del diseño general.


Hay cientos de ejemplos del uso eficaz de texturas simples para mejorar la estética general del sitio. Veamos un ejemplo final de República Visual.

Visual RepublicVisual RepublicVisual Republic

Si bien siempre es mejor ejercer moderación cuando se emplea cualquier patrón de diseño, este ejemplo logra el equilibrio perfecto entre el diseño coherente y el interés visual sin dejar de ser reservado y de buen gusto.


Mini Tutorial: Modificar y colorear una textura

Hay un montón de recursos en línea donde puede descargar imágenes y archivos .pat para uso sin restricciones para sus proyectos personales y comerciales. En este mini tutorial, vamos a cargar Photoshop con un completo banco de texturas modernas y de buen gusto y modfiy una textura para que coincida con nuestras necesidades de diseño.

Vamos a tomar un poco de inspiración en el ejemplo sólido gigante y usaremos la biblioteca de excelente textura de patrones sutiles.

Paso 1: Descargar e instalar la biblioteca de texturas

Diríjase a la Página Web de patrones sutiles. Mientras que puede buscar y descargar tus texturas favoritas individualmente, puede descargar toda la biblioteca actual de Github.

Desplácese hacia abajo hasta la parte inferior de la página de patrones sutiles y haga clic en el "Get it on Gihub'. Descargar el repositorio y descomprima los archivos a su hardrive.

Download the Subtle Patterns LibraryDownload the Subtle Patterns LibraryDownload the Subtle Patterns Library

A continuación, abrir photoshop y entrar en el gestor de ajustes preestablecidos (Editar ajustes preestablecidos de → → gestor de ajustes preestablecidos)

Seleccione 'Patrones' de la gota hacia abajo del cuadro de selección y haga clic en 'Cargar'. Seleccione el archivo SubtlePatterns.pat en la biblioteca descargada y extraída (... / subtlepatterns-SubtlePatterns-xXXXXX/SubtlePatterns.pat/SubtlePatterns.pat).

¡Excelente! Ahora agregada toda la biblioteca de textura patrones sutiles a sus patrones de Photoshop que en mi opinión te servirá mucho mejor para sus proyectos que la biblioteca de patrón por defecto de Photoshop!).

Paso 2: Crear un documento nuevo

Crear un nuevo documento (Ctrl+n) 500px x 500px con un fondo blanco:

New Document 500px x 500px, White BackgroundNew Document 500px x 500px, White BackgroundNew Document 500px x 500px, White Background

A continuación, agregar una capa de patrón al documento (capa → llenar nueva capa → patrón...)

Add a Pattern LayerAdd a Pattern LayerAdd a Pattern Layer

En la biblioteca del patrón recién descargado, seleccione 'Bright plazas'

Select the Bright Squares PatternSelect the Bright Squares PatternSelect the Bright Squares Pattern

Paso 3: Capas de ajuste

Una de las primeras cosas que notarás acerca de la biblioteca de patrones sutiles es que casi todas las texturas son monocromáticas y son ya sea claro u oscuro. Mientras que esto es genial para un diseño que se basa en tonos de negros y blancos, es más difícil de colorear la textura.

Lo que cambiamos esta textura muy ligera brillante que azul en tiempo unos pasos, pero para comenzar con, tendremos que ajustar las curvas, contraste y saturación de la textura.

En primer lugar, añadir una nueva capa de curvas (capa → → nueva capa de ajuste curvas) y modificar la entrada a 132 y la salida 109.

Add a Curves Adjustment LayerAdd a Curves Adjustment LayerAdd a Curves Adjustment Layer

A continuación, agregue una nueva capa de Tono / Saturación (Capa → Nueva capa de ajuste → Tono / Saturación) y cambie el tono a 360, la Saturación a 100, la ligereza a -28 y marque la casilla 'Colorear'.

Add a Hue/Saturation Adjustment LayerAdd a Hue/Saturation Adjustment LayerAdd a Hue/Saturation Adjustment Layer

A continuación, agregue una capa de ajuste de niveles (capa → → nueva capa de ajuste niveles) y cambiar el umbral negro a 30, el umbral de gris a 1.1 y el umbral blanco a 200.

Add a Levels Adjustment LayerAdd a Levels Adjustment LayerAdd a Levels Adjustment Layer

Por último, añadir una capa de ajuste Brillo/contraste (capa → nueva capa de ajuste → Brillo/contraste) y cambiar el brillo y el conjunto el contraste a 10 -10.

Add a brightness/contrast Adjustment LayerAdd a brightness/contrast Adjustment LayerAdd a brightness/contrast Adjustment Layer

Paso 4: Colorear la textura

En su pila de capa, agregue una capa de relleno de color (capa → nueva capa de relleno → Color sólido...) y establecer el color a #00b4ff. Establecer el modo de fusión a 'Color' y mantener la opacidad al 100%.

Add a Color Layer -- #00b4ffAdd a Color Layer -- #00b4ffAdd a Color Layer -- #00b4ff

Tenga en cuenta, dependiendo de su elección de color para el recubrimiento de color final, que las capas de ajuste le necesitan ser ajustados individualmente y ensayo y error puede ser necesario... Por esta razón, a veces es más fácil añadir el color del recubrimiento primero y relleno el ajuste de capas de modo que puedes escuchar el resultado final mientras juegas con los valores de las capas de ajuste.

Paso 5: Añadir texto modelado

Ahora que hemos creado nuestra textura coloreada y ajustado, vamos a completar este mini proyecto con un texto estampado.

Con un atrevido Mostrar la tipografía (estoy usando Bebas Neue), escriba la palabra 'Textura' en el centro del documento:

Add Some TextAdd Some TextAdd Some Text

A continuación, por encima de la capa de texto añadir en una nueva capa de patrón (capa → nueva capa de relleno → patrón) y seleccione 'Hormigón pared 2' de la biblioteca del patrón.

Add a new pattern LayerAdd a new pattern LayerAdd a new pattern Layer

Para restringir el patrón para el texto, usaremos una máscara de recorte. Con la capa del patrón seleccionada, crear una máscara de recorte (capa → crear máscara de recorte).

Add a Clipping MaskAdd a Clipping MaskAdd a Clipping Mask

Paso 6: Estilos de capa de acabado

Para completar la apariencia del texto, añadir los siguientes estilos de capa a la capa de texto:

Add an Inner ShadowAdd an Inner ShadowAdd an Inner Shadow
Add a Drop ShadowAdd a Drop ShadowAdd a Drop Shadow

Resultado final

Nuestro resultado final:

Final ResultFinal ResultFinal Result

Texturas para definir un determinado aspecto, tonifican o sentir

Hemos visto cómo los diseñadores utilizan texturas para simplemente añadir interés visual en el ejemplo anterior. Tomando este una paso idea texturas más, también puede utilizarse para definir un aspecto particular, tono o sentir que es coherente con el concepto de diseño general del sitio.

Tomemos por ejemplo el sitio web de i-Avion, un sitio web de comparación de vuelo francés.

i-avion 1970s texturesi-avion 1970s texturesi-avion 1970s textures

La ilustración principal y la fuente del titular dan el sitio una distinta retra apariencia, mientras todavía se siente fresco y moderno. Lo que realmente trae el hovever vivo, 1970 sensación, es el uso de un fondo sencillo azul y blanco-lunares y un starburst estilizado que son consistentes con los patrones de diseño utilizados con frecuencia en medios escritos de mediados de siglo.

Si tuviera que extraer sólo la ilustración y la cabecera y eliminar las texturas, esta apariencia retra sería diluida en el mejor y, en el peor, no transmite, puesto que la elección de la fuente ni la ilustración son suficientemente estilizado para llevar todo el diseño.


Otro ejemplo eficaz de texturas se utiliza para comunicar un diseño estético de otro tiempo puede encontrarse en el sitio de Onst Creative.

Otra vez, las ilustraciones se han utilizado mucho para hacer el trabajo sucio de transmitir la apariencia del sitio, pero como siempre, el diablo está en los detalles:

Heavy Noise over at Onst CreativeHeavy Noise over at Onst CreativeHeavy Noise over at Onst Creative

El sitio utiliza una textura de ruido granular sobre la mayoría de los elementos en el sitio del sitio desde el fondo hasta las ilustraciones y los encabezados. Este uso generalizado de una textura cruda acompañada de elecciones de fuentes y patrones de diseño de mediados de siglo presta a la experiencia del usuario donde el visitante se siente más como si estuviera hojeando un cómic de la década de 1950 en lugar de ver el sitio en su nueva pantalla Retina.


Simple repetición patrones de píxeles

Hasta este punto, nos hemos centrado principalmente en la aplicación de texturas en el diseño del sitio Web. Ningún artículo sobre este tema estaría completo sin un vistazo al uso de repetir patrones de píxeles en diseño web.

Como hablamos antes, no hay mucho más simple que patrones de píxeles. A menudo solamente tomar nueve o 16 píxeles (o incluso más pequeños), patrones de píxeles pueden ser utilizados para el efecto dramático.

Para nuestro primer ejemplo de patrones de píxeles en acción, echemos un vistazo en el sitio del exterior del cable, una compañía de teatro de Estados Unidos.

Pixel Patterns from Outside the WirePixel Patterns from Outside the WirePixel Patterns from Outside the Wire

El sitio presenta una impresionante fotografía de ancho y alto, un patrón de diseño que se está haciendo cada vez más popular a medida que el ancho de banda y el tamaño de las pantallas de los usuarios aumentan en todo el mundo. Si bien este es un concepto de diseño espectacular, es importante recordar que lo que importa es el contenido del sitio ... y con una imagen de tan alta resolución, podría ser fácil perder elementos importantes como la navegación y el logotipo principal en el colores, tono y contraste de la imagen.

Para solucionar este problema, los diseñadores de este sitio han superpuesto una cuadrícula de repetición muy pequeño (12px 12px y una enorme 1KB para ser exactos) que reduce el impacto de la imagen y aumenta el contraste entre el fondo y los elementos de diseño del sitio.


Otra popular aplicación de patrones de píxeles en el diseño web es añadir más contraste a las etiquetas de cabecera, especialmente títulos de entradas en el blog y otros contenidos similares.

¿Recuerde el ejemplo de TutsPlus que vimos antes? Echemos otro vistazo a la forma de que estilo de sus etiquetas H2:

Repeating Patterns for Header TagsRepeating Patterns for Header TagsRepeating Patterns for Header Tags

Como se puede ver, el uso de un patrón de píxeles da un aspecto más refinado e interesante que sólo el uso de un color sólido bloque. Y porque se repite este patrón particular, es capaz de escalar a múltiples líneas y aún diferentes longitudes, si es necesario.

Vamos a crear un efecto similar en el siguiente mini tutorial:


Mini Tutorial: Estilo un encabezado con un patrón de píxeles

Para este pequeño proyecto, vamos a añadir finura extra un poco a un blog post título mediante el uso de CSS... y no hay archivos de imagen.

Voy a seguir este ejemplo bastante básico y sólo se muestran las principales técnicas... Hay mucho margen para más estilo, así que siéntase libre de experimentar.

Paso 1: Crear un patrón de píxeles en Photoshop

Fuego photoshop, crear un nuevo documento (Ctrl+n) 12px de 12px con un fondo transparente.

Create a new documentCreate a new documentCreate a new document

Con un 1px por 1px negro lápiz cuadrado (B), dibuje el patrón siguiente (he utilizado un grid de 1px a ayudarme aquí).

Create the patternCreate the patternCreate the pattern

A continuación, exportar la imagen como una imagen PNG-24 (Ctrl + Mayús + Alt + S) y guárdalo en tu escritorio.

Paso 2: Convertir el patrón a una URI de datos

En este proyecto, vamos a estar aplicando el patrón como una URI de datos, una representación del archivo PNG en puros datos que el navegador puede representar como una imagen. Este es un paso opcional (sólo podría usar una imagen), pero usando esta técnica reduce una solicitud http y es una aplicación perfecta para un archivo de imagen pequeña como esta.

Dirígete a la sección de recursos en la Web semántica y cargar la imagen en el convertidor URI:

Convert the image to a Data URIConvert the image to a Data URIConvert the image to a Data URI

En la siguiente pantalla, tomar el código de la imagen de fondo de la ventana como CRUDOS datos y copiar al portapapeles:

Copy the Data URI to your clipboardCopy the Data URI to your clipboardCopy the Data URI to your clipboard

Paso 3: Marcado y estilo un blog básico

A continuación, enciende tu editor de texto y el marcado un blog muy simple:

En el encabezado del documento, crear una etiqueta de estilo y definir algunos estilos básicos (o crear un nuevo documento css y enlace a él en la cabeza del documento):

Paso 4: Estilo del fondo de H2

En este paso, vamos a dar nuestra etiqueta H2 un fondo con nuestro URI de datos recién creada.

En el CSS, añadir en el siguiente código, utilizando los datos sin procesar desde el convertidor del paso anterior:

Mientras que esto debería ser bastante auto explicativa, hay un par de notas a.

En primer lugar, separar el contenido de h2 del fondo dentro de la pseudo: antes de que elemento nos permite establecer algunos relleno para el texto y jugar con la opacidad de la imagen de fondo. En colores de fondo diferentes, podemos elegir aumentar o disminuir la opacidad según sea necesario, que nos permite utilizar un URI de datos individuales a través de un sitio completo, en lugar de generar varios archivos .png y convertir a cada uno a su propio base64 codifican imagen.

En segundo lugar, la capacidad de colocar el fondo detrás del texto de h2 es posible mediante el establecimiento de la <article>posición relativa y la <h2:before>elemento absoluto.</h2:before> </article>

Resultado final

Aquí está una captura de pantalla del resultado final, o se puede jugar con el JS Fiddle aquí.

Final ResultFinal ResultFinal Result

¿No quiero usar el Photoshop? También se puede recrear este mini proyecto con Patternify, un generador en línea que incluso después de la conversión de datos URI!


Texturas para hacer un gran impacto

Hasta ahora, hemos hablado principalmente sobre patrones sutiles, unobstructive que complementar y mejorar un diseño ya existente, pero que no necesariamente hacen una declaración de diseño grande en sí mismos. En esta sección, echemos un vistazo a un par de ejemplos donde las texturas o patrones son usado hace un gran impacto en y de sí mismos.

Por ejemplo, tomar el reciente rediseño del Museo Nacional de LGBT. Este diseño utiliza múltiples patrones y texturas con gran efecto, y de hecho el sitio podría se han utilizado para destacar el uso de texturas y estampados en algunas de las otras secciones de este artículo. Lo que quiero resaltar aquí es el uso audaz de un simple patten en la sección contacto del sitio:

The Contact Section of the National LGBT MuseumThe Contact Section of the National LGBT MuseumThe Contact Section of the National LGBT Museum

Nota cómo el diseño equilibra un patrón repetitivo audaz con un montón de espacio en blanco para equilibrar el sitio y para proporcionar una experiencia de usuario que es llamativo pero no abrumadora.


En otro ejemplo, vamos a echar un vistazo a la caja de Pop, otro sitio effectivly combina texturas audaces y sutiles para hacer una declaración dramática:

Pop The BoxPop The BoxPop The Box

Texturas de tela sutil balance un fondo de sitio de tartán audaz que complementan el contenido del sitio y proporcionar una dirección clara para el usuario del sitio para el propósito del sitio.


Mini Tutorial: ¿Quién necesita Photoshop?

Hasta ahora, hemos mirado en crear texturas y patrones en Photoshop, usando como repetir imagen de fondo en CSS y exportando las imágenes.

En este mini tutorial, vamos a ser aproximadamente recrear la textura de tartán en el ejemplo anterior... pero sólo vamos a usar gradientes CSS con ninguna imagen en absoluto.

Como una advertencia antes de empezar, hay ventajas y desventajas de este enfoque. Mientras que estamos reduciendo la necesidad de recursos adicionales del sitio y reducir las peticiones HTTP, que pueden afectar al rendimiento del sitio, este enfoque no alcanza el nivel de píxel perfección alcanzable con un editor de imágenes. El resultado puede resultar diferente en diferentes navegadores y requerirá una caída para IE8 y por debajo. Así que utilice con precaución!

Paso 1: marcado

El marcado para este mini proyecto es muerto fácil. Todo lo que necesitamos hacer es crear un div con una altura arbitraria de 600px que contendrá el fondo gradiente de repetición:

Y ahora, la base css:

Paso 2: crea la primera mitad de nuestro gradiente

Este fondo va a tener dos superposiciones de gradiente superpuestas formadas por múltiples paradas, una a 45 ° y la segunda a -45 °.

Primero crearemos el gradiente más abajo:

Tenga en cuenta, por simplicidad, solo estoy incluyendo los prefijos del sitio web en este ejemplo. Tendrá que incluir los prefijos de proveedor adecuados para navegadores adicionales.

Paso 3: crea la segunda mitad del gradiente

El último paso de esta técnica es tomar el degradado que ya hemos creado y replicarlo exactamente con la excepción de cambiar el ángulo del degradado lineal a -45 °.

Gracias a la naturaleza en cascada de CSS, el segundo degradado se renderizará naturalmente sobre el primer degradado sin la necesidad de cambiar el índice Z de las propiedades. Además, como hemos elegido rgba para definir los colores del degradado, no es necesario que prestemos atención a la opacidad del elemento.

Resultado final

Nuestro código final:

Aquí hay una imagen del resultado final:

Final Result of The ProjectFinal Result of The ProjectFinal Result of The Project

O bien, puede ver el código y editarlo en vivo en JS Fiddle

Como nota final, si desea crear un resultado aún más limpio o ampliar los límites de las posibilidades del diseño de patrones sin imágenes, puede lograr excelentes resultados utilizando el elemento canvas y el script Patternizer.js. Es una forma más compleja de lograr el resultado que se muestra arriba, pero puede ser una solución mejor según sus necesidades.


la conclusión

Si ha seguido los mini-tutoriales en este artículo, estará bien armado con algunas de las aplicaciones más progresivas de texturas y patrones en el diseño de sitios web, así como también, con suerte, inspirándose en una amplia gama de algunos de los mejores ejemplos disponibles.

Por supuesto, solo hemos arañado la superficie del uso de texturas y patrones en el diseño web. Todos los días, los diseñadores innovadores están superando los límites del uso de texturas en sus proyectos con resultados sorprendentes.

¿Cómo has usado texturas y patrones en tus diseños? ¿Cuáles son tus técnicas favoritas? Deja un comentario - ¡nos encantaría escuchar tus pensamientos!


 Recursos adicionales

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 Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.