Como crear botones estilo windows vista en fireworks
clik aqui para ver ejemplo
Lo primero que hay que hacer es abrir nuestro fireworks crear un nuevo documento, preferiblemente uno en fondo transparente para ir viendo con mayor claridad el grafico , con dimensiones de 80x32.
Luego seleccionar la herramienta rectangulo redondeado
y dibujar un cuadro para nuestro boton de 60x28 y en las propiedades de forma automática le asignan 2px de redondeado a las esquinas.
En caso no encuentren ese panel, pues van al menu Ventana / Propiedades de Forma Automatica y le dan click para que se muestre.
Le aplican un relleno radial de centro blanco y el extremo en color #666666, luego expandan un poco el relleno de manera que efecto sea un poco mas suave.
Luego aplicar un efecto de
Sombra Interior en color blanco, un pixel de ancho, angulo de 270º y una opacidad del 65% :
Esto es para el efecto de biselado porque el que tiene el fireworks no se aplica muy bien a este caso en particular.
Bueno lo siguiente es aplicar otra vez el mismo efecto pero esta vez a la base, simplemente cambiamos el angulo a 90º, hasta ahora tendríamos algo como esto :
Le puse el fondo verde para que se pudiera apreciar mejor el detalle.
Ahora es momento de aplicarle un contorno oscuro que haga de efecto de hundido, de haber sido una forma base tipo circulo o cuadrado le habria puesto solo un borde, pero siendo un cuadrado redondeado el borde suavizado se ve horrorosamente borroso y el borde duro lo es demasido, es por eso que aqui les paso un tip para conseguir ese borde duro en los lados y suave en las esquinas. Lo unico que hay que hacer es aplicar un efecto de
iluminado de color negro con una suavidad de cero, desplazamiento de cero, ancho de 1px y una opacidad del 70%.
Ahora que se tiene ya el efecto de borde oscuro hay que aplicar un color que contraste con éste para que se genere el efecto de relieve, simplemente aplicamos el mismo efecto solo que ésta vez el color será blanco y la opacidad será de 20%.
Ahora la imagen estará mas o menos así.
Y asi como esta como que no llama mucho la atencion, ahora hay que ponerle ese brillo propio de los objetos lisos, para ello simplemente copiamos nuestro cuadro y lo pegamos en otra capa, quitamos todos los efectos y editamos sus propiedades de forma automática, asignándole una altura de 14px y estableciendo el redondeo de las esquinas de la base a cero. Ahora hemos de tener algo como ésto.
Ahora que ya tenemos la forma bien definida, solo hay que aplicarle un color de relleno lineal, para éste caso usaremos para la parte superior un color blanco al 80% y para la base un blanco al 40%.
Lo siguiente es seleccionar el cuadro redondeado y su reflejo, agruparlos y convertirlos en un simbolo(presionar F
, ahora que ya esta convertido en un simbolo solo hay que aplicar el modo de mezcla
solapamiento y nos debe quedar algo así :
A hora ya es mas visible ese estilo tipo windows vista, pero se puede mejorar editando un poco el fondo, para eso creamos un rectangulo del mismo tamaño que el lienzo para que lo cubra por completo, el color a usar será #007A94 en un relleno sólido y aplicaremos un filtro de
brillo y contraste estableciendo el brillo en un -50% y el contraste en cero, debemos tener en cuenta que éste cuadro sera el color base de nuestro botón asi como también de la barra del menú y por lo tanto debe de situarse en la capa mas profunda, después agregamos un rectangulo más de las mismas proporciones de manera que cubra por completo al anterior y asegurándonos que la capa en la que se encuentra éste, sea la inmediata superior a la del color base, luego aplicamos un color de relleno lineal que en la parte superior tenga un color #666666, en el cuarto superior a la base sea #999999 y en la base un color #FFFFFF, luego aplicarle un filtro de
brillo y contraste estableciendo el brillo en cero y el contraste en 20, ahora le ponemos un modo de mezcla de
solapamiento debiéndonos quedar algo así :
Ahora que nuestro botón ya tiene esas sombras estilo vista, solo falta darle el efecto de reflejo, para ello solo basta con agregar otro rectangulo de igual ancho que los anteriores pero de la mitad del alto y le damos un color relleno lineal, para la parte superior aplicamos un color blanco al 60% y para la base un color blanco al 40%, luego le damos a la capa una opacidad del 60%, ésto lo pueden adecuar a sus gustos personales, pero a mi parecer 60% es un buen valor. Hay que recordar que ésta capa debe de esta justo sobre la capa que trabajamos hace un momento.
Ahora al fin despues de tanto tenemos nuestro botón estilo vista.
Pero éste tutorial no estaría completo si no les enseñara a aplicarlo correctamente a un menu en css para distinto anchos de texto en los vinculos, es por esto que haremos uso de lo ultimo que nos trajo adobe fireworks CS3, la escala inteligente, pero si es que la aplicamos en nuestro botón así como está, el degradado radial que le pusimos se va a estirar como si fuera un degradado en ondas y ése no es el efecto buscado puesto que queremos que el centro se repita tal cual es, por esto es que debemos rasterizar la imagen, pero como que se que quieren utilizar este mismo efecto para otros botones sin tener que repetir los pasos desd el inicio les recomiento que guarden una copia del documentos de fireworks así como está ahora. Luego trabajando sobre una copia seleccionan todas las capas y preferiblemente agrupan(CTRL + G) todos los elementos y van al menú Modificar / Allanar Selección, con esto se ha conseguido que la imagen haya sido transformada a mapas de bits. Ahora convertimos la imagen en símbolo(F
y activamos la escala inteligente, para esto procuramos seleccionar como zona de repetición solo 2px de ancho en el centro.
Ahora ya en el documento podemos redimencionar el boton a unos 300px de ancho para que se pueda aplicar bien como fondo de varios links de menu, independientemente del ancho del texto en ellos.
Ahora ya podemos usar éste fondo con el respectivo css en nuestros links para generar un super menu estilo windows vista
suerte!!!!
espero que les sirva
, ahora que ya esta convertido en un simbolo solo hay que aplicar el modo de mezcla 
