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%.
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:
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.
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:
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.
Hacer una selección del documento (Ctrl + A) y añadir un recubrimiento de Color de #007dba.
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:
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):
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.
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.
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%:
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:
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.
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:
Disposición algunas guías (Ctrl + R) con las siguientes ubicaciones (desde el borde del documento).
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.
Paso 3: Descargar la textura
Descargar la textura de la tela elegante de patrones sutiles.
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:
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:
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:
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:
Usted debe dejarse con el siguiente resultado:
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:
¿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:
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.
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.
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:
A continuación, agregar una capa de patrón al documento (capa → llenar nueva capa → patrón...)
En la biblioteca del patrón recién descargado, seleccione 'Bright plazas'
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.
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'.
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.
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.
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%.
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:
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.
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).
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:
Resultado final
Nuestro resultado final:
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.
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:
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.
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:
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.
Con un 1px por 1px negro lápiz cuadrado (B), dibuje el patrón siguiente (he utilizado un grid de 1px a ayudarme aquí).
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:
En la siguiente pantalla, tomar el código de la imagen de fondo de la ventana como CRUDOS datos y copiar al portapapeles:
Paso 3: Marcado y estilo un blog básico
A continuación, enciende tu editor de texto y el marcado un blog muy simple:
<article> <h2>Using Pixel Patterns for Headers</h2> <p>Suspendisse elementum odio vel ligula pretium eu vehicula libero gravida. Vestibulum porta pellentesque mauris. Curabitur a enim ac nibh sodales blandit. Donec faucibus tempus erat, non blandit enim euismod vitae. Duis adipiscing erat at nisi semper consectetur. Quisque non vestibulum elit. Curabitur ac lorem urna. Nullam rutrum tristique erat a bibendum. Quisque dapibus lacus elementum turpis accumsan accumsan.</p> </article>
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):
body {background-color:gray;
}
article {
width:600px;
margin: 0 auto;
background-color:white;
padding:25px 20px 20px 20px;
/* Postioning the article as relative allows us to position its children absolutely inside the container */
position:relative;
}
h2 {
font-family: arial;
font-size:25px;
display:inline-block;
padding:0 20px 20px 20px;
line-height:1.5;
margin-bottom:35px;
} 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:
h2:before {
content:'';
/* The Data URI is added directly into the code */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0FDRkFCMDVFRjhBMTFFMUEyNThCMjM4M0E1NUNBQzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0FDRkFCMDZFRjhBMTFFMUEyNThCMjM4M0E1NUNBQzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQUNGQUIwM0VGOEExMUUxQTI1OEIyMzgzQTU1Q0FDNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQUNGQUIwNEVGOEExMUUxQTI1OEIyMzgzQTU1Q0FDNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvYCwlYAAABQSURBVHjalM8xDgAgCAPAlv//GYMGoxEROzFcFQhAMUJVH+8RxyiEpMoP3l7O1nHcx9feK15vKOG0EGHbRn5w+EOGj8ILb4UKnoUqtjQBBgC7kCccYRlZngAAAABJRU5ErkJggg==);
/* Make sure that the pattern repeats itself on the x and y axes */
background-repeat:repeat;
width:100%;
height:40px;
/* The element is positioned relatively to the article tag */
position:absolute;
/* Reduce the opacity of the pattern */
opacity:.2;
margin-left:-20px;
} 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í.
¿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:
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:
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:
<body> <div></div> </body>
Y ahora, la base css:
body {
background-color:#91d1c0;
}
div {
height:600px;
} 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.
div {
height:600px;
/* The gradient is defined within a background image property */
background-image:
/* The gradient is instructed to repeat on both x and y axes and at a 45deg angle */
-webkit-repeating-linear-gradient(45deg,
/* The first 60px of the pattern is transparent, where the body color will display */
transparent 0%, transparent 60px,
/* From 60px to 100px two stops are defined, each with an identical color (dark purple) */
rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px,
/* From 100px to 140px two stops are defined, each with the teal color */
rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,
/* From 140px to 160px, the thin yellow stripe is defined in two stops */
rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px)
/* We need to add a comma at the end of the expression to tell the browser to expect a second background image component
,
} 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.
div {
...
...
/* Note the change in the linear gradient angle */
-webkit-repeating-linear-gradient(-45deg,
transparent 0%,transparent 60px,
rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px,
rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,
rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px)
/* A Semi-colon finalises the background-image property */
;
} Resultado final
Nuestro código final:
body {
background-color:#91d1c0;
}
div {
height:600px;
background-image: -webkit-repeating-linear-gradient(45deg,
transparent 0%, transparent 60px,
rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px,
rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,
rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px),
-webkit-repeating-linear-gradient(-45deg,
transparent 0%,transparent 60px,
rgba(54,57,72,.8) 60px, rgba(54,57,72,.8) 100px,
rgba(50,168,142,.8) 100px, rgba(50,168,142,.8) 140px,
rgba(194,201,147,.8) 140px, rgba(194,201,147,.8) 160px)
;
} Aquí hay una imagen del resultado final:
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
