Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Fondos y efectos

Una imagen o un color de fondo puede ser uno de los elementos más distintivos de nuestras páginas web. Es muy fácil indicar en el programa editor de html que utilice una imagen o color de fondo. En el código se indica dentro de la etiqueta <BODY>, pero con un editor visual no es preciso buscarla: basta elegir la opción "imagen de fondo..." para la página, y elegir el fichero, en formato gif o jpg. Si la imagen escogida es menor que el tamaño de la pantalla, se repite horizontalmente y verticalmente, tantas veces como sea necesario en el fondo de la página. En el mismo cuadro de diálogo se puede especificar el color de fondo de la página; si la imagen elegida es un gif con áreas transparentes, podemos aprovechar esta propiedad y dejar que se vea a través de la imagen de fondo. También es posible tener una página con fondo de color liso, sin imagen. Las imágenes de fondo también se pueden aplicar selectivamente a una o más celdas de una tabla, para crear efectos más interesantes. Por ejemplo, una cuadrícula a modo de cuaderno, una textura natural... Finalmente, con las hojas de estilo es posible asignar un color de fondo o una imagen de fondo a los diferentes componentes de la página web. Así, podemos tener por ejemplo una definición de encabezados que tengan un fondo de imagen texturado.

Hace unos años, había una tendencia a utilizar imágenes minúsculas para el fondo de las páginas, con la idea de que sería mucho más rápido mostrarlas en pantalla. En realidad, si la imagen está formada por colores planos y bien optimizada, puede utilizarse una imagen de grandes dimensiones, sin que afecte significativamente el tiempo de descarga. Con este criterio es posible crear una imagen que no se repita horizontalmente o / ni verticalmente, para crear efectos muy vistosos y originales.

Ejemplos de texturas creadas en el programa Freeware Reptile.

¿Qué gráficos utilizamos?

Conviene seguir el principio básico de emplear el formato GIF para imágenes de fondo con colores planos y formas simples, y el JPG para imágenes fotográficas o con gradaciones de color más complejas, y para texturas. Debemos tener precaución con estos fondos texturados, porque pueden dificultar la lectura, al igual que ciertas combinaciones de colores poco afortunadas. Un fondo de estas características no debería colocarse bajo largos bloques de texto; es uno de los más evidentes signos de incompetencia a la hora de diseñar una página. Para textos largos, la recomendación es algo muy próximo a texto en negro sobre fondo blanco.

Aunque ahora ya no es tan vital restringir los colores de fondo de una tabla o una página a la paleta segura para la web, es una buena idea elegir de entre este conjunto de 216 colores, porque nos asegura que el color de fondo será absolutamente liso y las letras se podrán leer sobre él, aunque el visitante tenga un equipo con tarjeta gráfica capaz de mostrar sólo 256 colores. Esta restricción no es tan grande como pueda parecer: cierto que es sólo una ínfima parte de los colores posibles en una máquina más moderna, pero aún así es un rango muy amplio de colores. Imaginemos que son lápices de colores, acuarelas o rotuladores. ¿Se venden cajas con tantos colores distintos?

Ideas interesantes para utilizar imágenes de fondo.

Esta misma casilla es un ejemplo de utilización de una imagen de fondo simple. Algunas de estas ideas ya están muy vistas... ¡debemos pensar nuevas posibilidades y experimentar! Al utilizar imágenes para tablas o la página es importante planificar bien la colocación de los elementos; debe evitarse que estos queden inadecuadamente dispuestos y que, por ejemplo, aparezca texto sobre una parte del fondo que no debiera tenerlo.

  • Una sutil animación (debería ser muy compacta y simple, y sólo como fondo de celdas que no tengan mucho texto.
  • Una cuadrícula, líneas... como en un cuaderno.
  • Una imagen con un margen que simula un cuaderno, archivador...
  • El logotipo de la empresa, institución o producto.
  • Una franja de color o con diferentes formas, en vertical o en horizontal.
  • Una textura suave de papel o material natural (madera, roca, corcho, tela...)

Cómo obtener o crear las imágenes para el fondo.

Muchos programas incluyen generosas colecciones de texturas listas para usar, en el formato estándar gif o jpg, o bien en formatos fáciles de convertir a aquéllos. También podemos encontrar herramientas de relleno que utilizan diferentes modelos de texturas para poder rellenar con ellas una objeto del tamaño y forma que se quiera. Así podremos crear los botones, fondos y demás elementos de la página a voluntad. Por otro lado, se pueden conseguir también gratuitamente en diferentes servidores de Internet. Si buscamos en un servidor en inglés, los términos a buscar son background images. Existen muchos servidores de este tipo.

Existen diferentes maneras de generar texturas que se acoplan sin que se pueda distinguir el margen de las piezas del mosaico resultante. Podemos utilizar cualquier programa de gráficos, teniendo presente que deben estar alineadas:

1. las formas de la parte inferior de un módulo con las de la parte superior del siguiente; 2. las formas del extremo derecho deben continuar con las del extremo izquierdo de la pieza vecina. Veamos algún ejemplo en las ilustraciones adjuntas.
Los programas de dibujo vectorial pueden ir muy bien para crear determinados tipos de texturas (con formas geométricas, especialmente), porque los elementos se pueden manipular con precisión y libertad. Con Fireworks , además, no sólo puede crearse un módulo de repetición con las ventajas de manipular vectores, sino que al aplicar texturas a los pinceles utilizados, puede conseguirse una imagen realista que no parece creada en un programa de dibujo. Otro ingrediente útil para crear estas texturas simples, geométricas, son los dingbats o fuentes de símbolos. Simplemente abrimos un programa de dibujo o pintura y elegimos el símbolo adecuado, que después guardamos en forma de gif o jpg. Si queremos alternar colores, sólo debemos aumentar el número de caracteres utilizados del dingbat y aplicarles color a cada uno, y después guardar la imagen que incluya varios caracteres (tal como mostramos en la imagen.) Existen muchos dingbats que son adecuados para este uso; nuevamente, se trata con frecuencia de material gratis que puede obtenerse de sitios como The Dingbat Page. Si lo que queremos es una textura más realista, al estilo de las que mostramos también en esta página, debe utilizarse preferiblemente un programa de pintura, o bien aplicar diferentes filtros a una imagen creada en un programa de dibujo. Existe una utilidad gratis muy peculiar, Reptile, de Sausage Software, que genera automáticamente una infinidad de imágenes y animaciones, aptas para utilizar como fondos. El programa es muy entretenido: a partir de una serie de parámetros, opera para crear estas imágenes, con resultados sorprendentes. Las texturas que mostramos aquí han sido creadas en este programa.  Si os interesa este tipo de texturas, este programa es una adición necesaria a vuestra colección de software.

Trucos.

Si queremos un efecto similar a un cuaderno, con un margen izquierdo que simula anillas, perforaciones, espiral... el truco esencial es emplear una imagen suficientemente ancha para que, incluso a la máxima resolución que algunos usuarios utilizan, la imagen de fondo no se repita horizontalmente. Esto significa unas dimensiones enormes: unos 1050 píxels de ancho, por ejemplo, por unas decenas de alto. Si tememos un tamaño de fichero excesivo, debemos cuidar mucho la optimización de la imagen (ved el artículo sobre este tema.)

Para que los elementos de la página estén colocados correctamente, a una cierta distancia constante del margen izquierdo, y sin superponerse al margen del "cuaderno", podemos hacerlo de dos maneras:

1. Posición absoluta definida con capas de texto e imágenes (layers), empleando hojas de estilo; básicamente, se crean unos contenedores para los objetos de la página que están colocados en la pantalla de forma exacta. 2. Con tablas, utilizando medidas absolutas par controlar el ancho (para asegurarnos, podemos colocar a la izquierda una columna del mismo ancho que el margen que queremos reservar y colocar en ella un gif transparente, asignándole el ancho que queremos mantener libre.)

Cuidado aquí con un detalle: los navegadores, por defecto dejan una sangría en los márgenes superior y derecho. Para complicar las cosas, este margen es diferente en Explorer y Netscape. Para que la página esté perfectamente ajustada a la esquina superior izquierda, sin que aparezcan espacios vacíos, debemos indicarlo al programa de edición de html (suele ser una opción dentro de la configuración de la página), o bien incluir este texto: leftMargin=0 topMargin=0 MARGINHEIGHT="0" MARGINWIDTH="0" dentro de la etiqueta BODY de la página.

En muchas de las páginas de Vigital hay una imagen de fondo simple, que crea un pequeño espacio a la izquierda, un espacio blanco donde colocamos el texto y las imágenes, y un lateral derecho en el que encontramos barras de navegación y diversos iconos relacionados. Si la resolución del monitor es mayor, se puede ver un área más ancha a la derecha, pero no llega a repetirse.

Naturalmente, la libertad que tenemos para experimentar con estas imágenes y colores de fondo será mucho mayor para páginas cortas, con contenidos que quepan en una pantalla única, ya que no habrá problemas de repetición del módulo elegido.

Otra alternativa interesante para crear efectos visuales interesantes es utilizar una estructura de tabla cuidadosamente definida con fondos de color diferentes en las tablas. Uno de los principales problemas que pueden surgir con los fondos de color en las tablas deriva de la diferente manera en que los programas navegadores entienden que debe repetirse un motivo dentro de las celdas. Por esto, conviene siempre comprobar cómo se ve la página en el máximo número de versiones y navegadores posibles.