Glossy buttons y web dos cero

por Ricardo Escudé

Llevábamos tiempo pensando en realizar un post sobre botones ‘glossy’ (brillantes), ya que muchos de los profesionales lo asocian con el término web 2.0 . En este reportaje no pensamos en entrar en las discusiones sobre qué es web dos cero, si un término de marketing o sencillamente otra manía que tenemos de etiquetar las cosas para que nos resulten más fácil de entender. Esperamos que os guste:

Recuerda: Pincha sobre las imágenes para verlas más grandes, si no te perderás los detalles.

INTRODUCCIÓN:
Hemos decidido realizar un sencillo artículo explicando cómo dar un poco de gracia a textos o formas de colores planos, hacerlos más naturales mediante la aplicación de un brillo de una luz proveniente de un punto específico.

Paso 1: Introducción
El primer paso es por supuesto, decidir a qué figura, forma o texto vamos a aplicar este sencillo efecto. Aunque inicialmente podáis pensar que este efecto va a darle un aspecto sintético a vuestro diseño, nuestra experiencia nos ha enseñado que resultan muchos más naturales que si los dejaras con colores planos.

Paso 2: Crea tu figura
Recuerda que, independientemente de tu diseño de salida, la capa donde esté debe estar trazada y no puede ser de color negro 100% (requeriría ajustes en las técnicas usadas en este artículo). Nosotros partimos de la siguiente imagen de nuestro apreciado logotipo:

Alia Multimedia - Imagen sobre la cual partimos para crear el estilo web 2.0

Paso 3: Primeros retoques
Una vez con nuestra figura situada en una capa trazada, nuestro primer paso es duplicarla, por lo que tendremos una capa que hemos llamado `original´ y otra llamada `copia´:

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0

En la capa `copia´, cambia el modo de fusión de la capa a Trama. Procedemos a mover la capa `copia´ mediante las teclas de dirección ligeramente a izquierda o derecha y arriba o abajo. Ten en cuenta que esta capa dará el toque oscuro a tu diseño, así que dependiendo de qué dirección quieras que incida la luz que provocará el brillo, deberás moverla en una dirección u otra. Por último, cambia la opacidad de la capa `copia´ a un valor inferior al 50%.

Nuestro contorno estará más o menos así, ligeramente más oscuro en ciertos bordes:

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Detalle del contorno

Paso 4: Crear el brillo
Seleccionamos ahora el contenido de nuestra capa original, pulsando la tecla Ctrl con el ratón encima de la capa `original´.

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Detalle de la selección

Con motivo de eliminar la zona sobrante de la capa copia (ya que la hemos movido), haremos clic en Selección > Invertir con el contenido seleccionado y cambiamos a la capa copia sin perder la selección, pulsando la tecla Supr para eliminar las zonas fuera de nuestra forma original.

Paso 5: Aplicación de bordes
Para darle un estilo casi `cartoonish´ o de cómic a nuestro diseño, vamos a aplicarle un contorno de un color ligeramente más oscuro que nuestro color original, y lo haremos en una capa diferente:
Selecciona nuevamente el contenido de la capa original, y crea una capa nueva llamada `borde oscuro´. Pulsa Edición > Contornear, y elige un color un poco más oscuro y un grosor bastante fino (en nuestro caso, que trabajamos para web, vamos a elegir 1 píxel de grosor). Recuerda que el contorno debe ser hacia el interior.

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Detalle del contorno

Paso 6: Brillo – 1ª parte
Nuevamente seleccionamos el contenido de nuestra capa original y creamos una nueva capa que llamaremos `borde brillante´. Al igual que con la capa del paso 3, vamos a Edición > Contornear, pero ahora lo haremos con color blanco o blanco con un matiz muy ligero del color de nuestro diseño original. En este caso, el grosor ha de ser siempre inferior al grosor del contorno que pusimos en la capa borde oscuro.

Paso 7: Selección de las zonas de brillo
Ahora, imaginemos de qué lado queremos que venga la luz que provocará el brillo. Si por ejemplo viene por la derecha, usaremos la herramienta lazo para seleccionar el lado contrario (el izquierdo en este caso) en la capa borde brillante y eliminaremos con la tecla suprimir aquellas zonas donde no incidirá la luz.

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Detalle de la selección glossy

Paso 8: Brillo – 2ª parte
Seguimos con la capa `borde brillante´, la cual moveremos al igual que hicimos con la capa copia un poco hacia izquierda o derecha y un poco arriba o abajo (¡experimenta!). Ahora seleccionamos la herramienta goma de borrar y ajustamos la opacidad al 10-20%. Procedemos a aplicar la goma poco a poco para suavizar los bordes que han quedado después de suprimir las zonas de la izquierda (zonas con poca luz) y también eliminar sutilmente brillos en las zonas que deseemos.

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Perfilamos el brillo

Paso 9: Ajustes finales
Es hora de ajustar la capa original. Podemos usar las herramientas sobreexponer y subexponer para saturar u oscurecer el color de algunas zonas de la imagen original, saturando donde la luz incide directamente y oscureciendo donde no incida. Es más fácil si colocas la exposición de ambas herramientas en exposición sobre el 10-20%.

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Aplicamos sobreexposición

Paso 10: Más brillo
Por último, y seleccionando previamente el contenido de la original, si queremos darle un toque mayor al brillo, podemos crear una capa encima llamada brillo final.
Con la herramienta Degradado, creamos un degradado de blanco a transparente, y lo aplicamos con el blanco orientado en el lado del cual venga la luz (en nuestro caso, derecha). Si se trata de un texto con varias letras, deberás hacerlo individualmente en cada una de las letras.

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Más glossy

Ahora disminuiremos la opacidad de esta capa brillo final a un valor entre el 2 y el 15% dependiendo de nuestro color inicial (observad que el halo de brillo sea realista conforme a vuestro criterio)

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Bajamos la opacidad del brillo

Paso 11: Más volumen con una sombra paralela
Por último, podemos darle un poco de volumen y más contraste al brillo aplicando una sombra a la capa original mediante `Sombra paralela´, una sombra suave de opacidad inferior a 40% y distancia corta (menor a 10 píxeles). Recuerda que la sombra ha de estar al lado contrario de donde venga la luz.

Alia Multimedia - Diseño de páginas web y desarrollo web 2.0 - Resultado final

Esperamos que le saquéis provecho.

Un saludo a nuestro cada vez mayor visitantes del mundo profesional del diseño y desarrollo web.

Dpto de diseño de Alia Multimedia