Diseño a lo «2.0»
Creo que este es mi primer artículo sobre diseño en sí. ya era hora de entrar de lleno en mi área. Puedes haber notado que han proliferado 2 características principales en cuanto a diseño en los últimos 5 – 6 años. El primero vino con el gran estilo Aqua creado por Apple para su línea gráfica desde la llegada del sistema operativo Mac OSX (tanto en su sistema operativo, como en sus manuales y su sitio web). El otro son las gradientes de fondo que se han utilizado bastante también en todos lados, inclusive en este mismo sitio. Bueno, no es difícil hacerlas, pero sí necesitan de cierto control para que no lleguen a ser esos horribles gradientes que proliferaban en gráficas hechas por defecto a mediados de los ’90.
Bueno, en este momento trataré cómo llegar a tener sutiles gradientes, con las que podrán potenciar considerablemente la visual de sus sitios. Con esto ganaremos profundidad, y lograremos destacar ciertas partes de nuestro contenido que estimemos necesario hacerlo.
Para esto utilizaremos Adobe Photoshop. GIMP puede actuar de la misma manera. Otros, no lo sé. Primeros crearemos un encabezado para CSSLab, con otra tipografía de la utilizada normalmente aquí (ver imagen 1). Bien, en un nuevo archivo de 300x200px a 72 DPI, escribo el título de nuestro sitio (en un nuevo layer de texto) en una tipografía en bold, y condensada a -50 (ver imagen 2 ). Ahora, comenzaremos con darle estilo a la tipografía. Abrimos Layer Style (para el layer de nuestro texto) y primero, le agregamos algo de color (ver imagen 3). Utilizaremos una degradación de rojos, y he aquí la clave. Se trata de escoger un color y variaciones suaves del mismo (en hexacromía un tono hacia arriba o hacia abajo). En este caso será el rojo WebSafe #FF0000, y para el otro color, el mismo rojo pero levemente más oscuro, el #CC0000 (ver imagen 4). Importante en este caso es tener nuestra gradiente en 90º, así corre desde arriba hacia abajo de nuestra tipografía (ver imagen 5).
Bien, ya vimos cuál es el detalle que hace ver estas degradaciones tan ampliamente aceptadas. Se trata de encontrar la combinación de tonos, dentro del mismo color, pero levemente superior o inferior. O sea, si utilizo un gris #66666 para la parte de arriba (recuerda que nuestra gradiente estará en 90º), la de abajo sería #333333 o #999999 (ver imagen 6). Otro detalle importante que suele utilizarse para despegar el texto y separarlo del fondo que lo soporta, es un Drop Shadow pero también muy sutil. El que siempre utilizo es el con las configuraciones que muestro en la imagen 7, color negro, con 5px de radio, 0 de distancia (o sea, la sombra se reflejará a todos lados de la tipografía) y 30% a 40% de transparencia (nuevamente, muy suave como se ve en la imagen 8).
Bien hemos avanzado bastante. Ahora, el fondo. Utilizaremos otro gradiente, pero de negro a gris, o gris a negro, de gris a gris; esto queda a criterio del diseñador que existe escondido en todos nosotros. Hay que hacer las propuestas y probar. Me quedo con la que muestro en la imagen 9 (de blanco #FFFFFF a gris #CCCCCC). Pero esperen, aún falta un pequeño trazo blanco alrededor del texto, para que separe el rojo del gris (ya que tienen a vibrar, y para destacar más nuestro logotipo. Ver el resultado hasta aquí).
Por último, podemos agregar un Pattern al fondo, y fusionarlo con nuestra gradiente. Patterns hay muchas, las más utilizadas son las denominadas Scanlines, o las que son representadas mediante líneas horizontales, verticales, oblícuas o puntos de 1px o más.
Links: