Elementos de diseño web: la textura
(3 votos, promedio: 4,00 de 5)
Cargando...La textura es uno de los elementos de diseño web más versátil. Se la emplea como medio de decorar páginas web, pero también cumple otras finalidades.
La textura es aplicable a todo tipo de diseño. En el arte, en la decoración de interiores, en la vestimenta, en la construcción de edificios y en general en todo tipo de diseños, desde siempre se ha empleado la textura como elemento decorativo. Desde siempre se ha contado con la textura como un elemento importante a la hora de embellecer una obra. Artesanos, artistas, arquitectos, han sabido emplearla en sus obras con resultados admirables en muchos casos. Existen dos tipos de textura, la táctil y la visual. Esta última se refiere al efecto que los gráficos adquieren cuando imitan una imagen en tres dimensiones, gracias a efectos de luces y sombras.
El diseño web no ha escapado a esta tendencia a decorar elementos o páginas enteras empleando la textura. En el caso del diseño web, la textura es solo un elemento visual y no táctil, como en otros casos, y tiene su precedente en la aplicación de la textura en la pintura.
Si bien se ha empleado desde siempre en el diseño web, en los últimos años ha habido una tendencia al aumento del empleo de la textura, no solo como elemento decorativo, sino como forma de resaltar otros objetos. Basta con hacer un recorrido por la web, para comprobar que la utilización de este elemento de diseño ha ido en aumento, no solo por la cantidad de páginas que lo emplean, sino por la multiplicidad de formas en que se hace.
Y esto está relacionado con la versatilidad que presenta la textura como elemento de diseño, ya que abarca a todo tipo de objetos y en una gran variedad de aplicaciones diferentes. Quizá la forma más simple y más empleada de utilización de la textura, sea en los fondos de las páginas web. Este fue el primer campo de pruebas para la aplicación de este elemento, para luego ir incorporándose a casi todo lo que sea imaginable.
Aplicación de texturas como fondo de páginas web
Esta es la forma más sencilla, aún más desde la aparición de las hojas de estilo en cascada (CSS), de aplicar textura en el diseño web. Para la aplicación de un fondo con textura, basta con tener una imagen que, repetida, da al visitante la sensación de estar frente a un fondo hecho con un material con textura. Es bastante sencillo simular un fondo de madera, piedra, papel o tela, bastando para ello con tener la imagen adecuada.
La aparición de potentes programas de edición de imágenes y creación de gráficos (Adobe Photoshop, GIMP, Inkscape, Adobe Illustrator, CorelDraw y Xara X, entre muchos otros), no solo ha dado a los diseñadores web la posibilidad de crear sus propios fondos, sino que han aparecido una gran cantidad de colecciones descargables de gran calidad, tanto pagas como gratuitas. Esto ha contribuido enormemente a la expansión del uso de texturas como recurso decorativo. Este tipo de imágenes son muy comunes y se encuentran muchos sitios donde se pueden descargar gratis, como por ejemplo:
http://squidfingers.com/patterns/
http://www.kollermedia.at/pattern4u/
Y algunos ejemplos de imágenes que pueden ser empleadas como fondos y que dan un aspecto texturado a las páginas web:
Si tenemos algunas imágenes de fondo (patterns), emplearlas como fondo de la web es muy sencillo, bastando para ello incorporarlo al CSS (tanto si se emplea embebido en el HTML como si se emplea una hoja independiente). Daremos un ejemplo práctico. Si subimos una imagen de fondo de nombre fondo.jpg a una carpeta “images” en nuestro servidor, bastará con colocar el siguiente código:
<body style=”background-image: url(images/fondo.jpg);”>
No habrá necesidad de indicar que se repita, ya que ese es el modo por defecto. De esta forma, tendremos un fondo formado por la repetición de un patrón. Cuando este patrón da la sensación de textura, estaremos aplicando el elemento del que es objeto este artículo. La siguiente página web es un ejemplo de la utilización de fondo con textura:
La textura en la tipografía
Si bien en los textos normales no es recomendable la utilización de ornamentaciones, debido a la dificultad que puede encontrarse un usuario para leerlos, en los títulos y logotipos es posible encontrar muchos ejemplos donde se emplean texturas para decorarlos. Las posibilidades son infinitas y solo se puede contar como límite la imaginación propia.
La utilización de textura en la tipografía no es una novedad, ya que desde la antigua roma hasta nuestros días pueden verse ejemplos de ello. En las páginas web podemos encontrar numerosos ejemplos de ello. En la página que hemos seleccionado como ejemplo, encontramos un par de ejemplos de utilización de la textura en la tipografía.
La textura como forma de resaltar objetos
Además de ser un excelente medio de decorar una página web, resulta también muy interesante su utilización como modo de obtener contraste para diferenciar y resaltar algunos elementos importantes. Su uso en este sentido, ha aumentado mucho en los últimos años, gracias al incremento de la potencia de los programas de edición de gráficos.
Desde la simple aplicación de una sombra hasta la confección de objetos en tres dimensiones, la aplicación de la textura se ha convertido en uno de los recursos más empleados en el diseño web de alta calidad. La siguiente imagen es un ejemplo de ello, donde el elemento principal, una imagen, se sale de las dos dimensiones y adquiere volumen.
Utilización adecuada de la textura
Como todo elemento de diseño, la textura no siempre tiene cabida. Cuando nos enfrentamos a la posibilidad de incorporar elementos con textura debemos preguntarnos en primera instancia, si está de acuerdo con el resto de los elementos. Luego, debemos preguntarnos si el tema de la web se adecúa a la colocación de elementos texturados. Y al final, en caso de que ambas respuestas son afirmativas, analizar que clase de textura y en que elementos debemos colocarla.
Por novedoso que sea un efecto, no siempre es bueno emplearlo. Son muchas las ocasiones en que encontraremos que un diseño plano se adecúa más a lo que pretendemos. Como cualquier otro elemento, tiene gran importancia y su utilización puede generar efectos satisfactorios, pero siempre que se le utilice en forma adecuada y concordante con el resto del diseño.
3 respuestas
Hola me encanta tu pagina, es muy educativa y entretenida. Gracias!
Hola, soy estudiante de diseño gráfico y estoy empezando con esto de las págs. web.
Mi duda es, ¿qué tamaño tendría que tener mi imagen(textura) que se va a repetir, para que no sea muy pesada?
gracias por todos los temas que publicas que son de tremenda ayuda! y un saludo!
En principio, lo importante es el tamaño del archivo final. Si utilizas una buena herramienta de compresión, como el típico “guardar para web” o smush.it, de yahoo, tienes bastante margen… pero procura que no pese más de 200 – 300KB, para que cargue rápido. Lo ideal sería que con unos pocos KB pudieras lograr esa textura, cuanto más pequeña mejor.