Tutorial de creación de botones Aqua o Cristal para Flash

Con este tutorial aprenderemos paso a paso a crear un botón con apariencia de cristal con un objeto dentro, con brillos transparencias, sombras, etc.
Estos botones son del tipo “Aqua buttons”, pero avanzado ya que pondremos algún motivo en del botón dando el efecto como si estuviera dentro!
Para seguir este tuto, hay que tener algo de idea en, Photoshop o Fireworks, da igual, los pasos son los mismos, y el único filtro que usaremos es el “Desenfoque Gaussiano” ( Gaussian Blur) que los dos programas traen de base.

Creación de la base

• Creamos un archivo nuevo nuevo de 100 x 100 pxls (color RGB, de preferencia el fondo transparente, resolución 72 dpi)
• Con la herramienta que mas te guste (aerógrafo, pincel, pero de forma circular), con un diámetro de 80 pxls (esto le das en las propiedades de la herramienta), haces en el medio del lienzo, un circulo de color negro, este tiene que quedar lleno, sin degradados, como en la figura siguiente, a esta capa la llamaremos “base negra”. (imagen 1)

• Luego duplicas esta capa y con la herramienta bote de pintura pintas de un color apenas mas claro que el negro anterior (un gris oscuro), lo achicas un poco, y le das el filtro desenfoque gaussiano de 3 pxls, lo centras encima de la capa “base negra” y luego, funde las dos en una. Hasta ahora tu archivo se tiene que ver asi. (Imagen 2)

Efectos de brillo y transparencia

Ahora duplicas la capa que tenemos, y la llamas “brillo bajo”, la vuelves blanca con niveles o levels (arrastrando la flechita de la derecha totalmente hacia la izquierda). Luego la achicas un poco, le aplicas un desenfoque gaussiano de 4 pxls, le das 25 % de transparencia a la capa, luego arrastras la capa hacia la parte inferior del circulo negro (img.3), y luego le pasas la herramienta borrador tipo aerógrafo (100pxls de diámetro, con 80 de presión), como explica la imagen 4; te tiene que quedar como en la imagen 5! ;-)

Ahora duplica la capa "base negra", llévala arriba de las capas, y le pones de nombre “brillo arriba”, luego la vuelves blanca de la misma forma que el paso anterior (con niveles).

En Fireworks directamente haciendo click y en photoshop con “ctrl.+ t” le cambias la forma ovalándola y la bajas un poco como en la figura 6, luego le das un 70% de transparencia a la capa, ahora le pasas la herramienta borrador tipo aerógrafo (100pxls de diámetro, con 80 de presión), como explica la imagen 7; te tiene que quedar como en la imagen 8 ! ;)

(Recuerda que a esta capa no debes darle el desenfoque!)

Duplica la capa “base negra”, deja la nueva capa encima de “base negra” y nómbrala “brillo interno”.
Luego la vuelves blanca (a “brillo interno”) de la misma forma que el paso anterior (con niveles).

En Fireworks directamente haciendo click y en photoshop con “ctrl.+ t” le cambias la forma ovalándola y la subes un poco como en la figura 9, lo desenfocas con “desenfoque Gaussiano de 6 pxls, luego le das un 50% de transparencia a la capa, tu botón ahora se tiene que ver como la imagen 10

Efecto, motivo interior

Ahora vamos a crear el motivo que se verá en el interior del botón de Cristal, puede ser un símbolo de play, de home, de actualizar, lo que quieras… yo voy a utilizar una “C” de “Cristalab” ;)

Son dos capas, una contiene el motivo y la otra (por debajo) la sombra.
Estas dos capas deberán estar ubicadas por debajo de las 2 capas mas superiores, que si hasta ahora le pusiste los nombres se deberían llamar “brillo arriba” y “brillo bajo”.
Pero las capas “base negra” y “Brillo interno” deben estar por debajo de estas.

Veamos como se hace!…

Creas una nueva capa y dibujas o escribes el motivo, la nombramos “motivo”. (img11)

Ahora duplicas la capa del motivo, la colocas por debajo de esta, y la llamas “sombra”, le das un desenfoque gaussiano de 3 pxls y la bajas para dar la idea de sombra como el la imagen 12

LISTO! Ya tienes tu “CristalBlack Button” ahora solo expórtalo a GIF o JPG.

IMPORTANTE:

• Exporta sin la capa “brillo interno” para el estado “up” de tu botón de flash
• Exporta con la capa “brillo interno” para el estado “over” de tu botón de flash

Para lograr el efecto MouseOver como en el ejemplo!! ;)

Recuerda que cualquier duda que tengas, puedes visitar nuestros foros, y dejar tu pregunta, y con gusto te ayudaremos!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo