Por: hRod + Otros tutoriales de hRod + 8 de Septiembre del 2004
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.
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).
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)
LISTO! Ya tienes tu “CristalBlack Button” ahora solo expórtalo a GIF o JPG.
IMPORTANTE:
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!
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
