Tutorial : Como crear botones estilo windows vista en fireworks

botones estilo vista en fireworks

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 herramienta cuadro 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.

paso2

Luego aplicar un efecto de Sombra Interior en color blanco, un pixel de ancho, angulo de 270º y una opacidad del 65% :

paso3

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 :

paso 4

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%.

paso5

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%.

paso6

Ahora la imagen estará mas o menos así.

imagen paso 6

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.

vista del paso 7

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%.

relleno linealvista del efecto de reflejo

Lo siguiente es seleccionar el cuadro redondeado y su reflejo, agruparlos y convertirlos en un simbolo(presionar F8), ahora que ya esta convertido en un simbolo solo hay que aplicar el modo de mezcla solapamiento y nos debe quedar algo así :

resultado parcial boton estilo vista

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í :

degradado boton en fireworksefecto de sombra boton vista

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.

boton vista en fireworks

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(F8) y activamos la escala inteligente, para esto procuramos seleccionar como zona de repetición solo 2px de ancho en el centro.

escala inteligente fireworks

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.

boton fireworks estilo vista

Espero que éste tutorial haya sido de su agrado, cualquier duda o consulta haganmelo saber.

Comentarios

Te agradezco mucho el tutorial, en este momento no puedo probarlo, pero lo haré en un futuro... En realidad no conocía tu blog, veo que es muy interesante.. lo seguiré recorriendo. Un saludo grande

Me alegra saber que el tutorial fué de tu agrado y espero que le heches mano pronto.
Saludos

Excelente blog men saludos
solo una peticion crees que puedas pulicar el archivo descargable de estos
botones

saludos

gracias,me parece muy bueno.Un saludo
(y muy facíl)

Un muy buen material y de destacar tu habilidad y destreza para hacerlo tan practico.

Saludos.

Muy bueno el blog pero hay una parte que no entendí muy bien, cuando agrupo el rectángulo y el reflejo, en qué símbolo exactamente lo convierto y en que parte le puedo dar ese efecto de soplamiento, ya que lo estuve intentando de varias formas pero no logré realizar este paso.

Gracias por tu respuesta y felicitaciones

antes de nada muchas gracias por el trabajo que has dejado para la gente.

Estoy un poco pez con el tema del fireworks, por lo que me esta costando seguir tus pasos, y cuando ya casi los tenia (creo)..... me he quedado bloqueado con la escala intelegente, no encuentro por ningun sitio dicha definicion, (como ya te he dicho estoy un poco pez).

Te agradeceria si me pudieses indicar como conseguir realizar los ultimos pasos mas detalladamente para redimensionar el boton a 300px.

Muchas gracias.

Antes que nada, debes asegurarte de estar usando Fireworks CS3, ya que la escala inteligente esta disponible sólo en esa versión, de ser ése el caso sólo debes hacer doble click al símbolo que creaste para abrir su ventana de edición, ya estando allí, sobre tu barra de propiedades te ha de aparecer un texto diciendo "Guías de escala en 9 divisiones", sólo activas la casilla y te aparecerán las guias, ya luego las acomodas según lo especificado en el tutorial.
Espero haber despejado tus dudas.

muchas gracias por tu contestacion.

Cuando se desconcen las cosas siempres intentamos complicarlas, pero una vez he visto tu constestacion he visto que era mas facil de lo que parecia y que de hecho en el tutorial ya estaba explicado, era simple, simple, simple.

muchas gracias,

hey super bacano tu blog me gusta demasiado, sus tutoriales y articulos son muy interesantes. e igualmente te queria hacer una pregunta con respecto a la creacion de botones windows vista, que no he podido pasar del solapamiento que es eso y donde esta ubicado,

gracias por tu respuesta

El solapamiento es un modo de mezcla, lo puedes encontrar fácilmente al seleccionar algun objeto y revisar la barra de propiedades, está encima del cuadro de los filtros y la opcion por defecto que muestra es "Normal", sólo le das click y te aparecerá el listado de opciones, ya luego seleccionas de alli "Solapamiento".
Espero haber despejado tus dudas.
Saludos.

hola te queria felicitar por todo tu blog que esta muy bacano y al mismo tiempo hacerte una pregunta , ¿como hago para que ponerle redondear solamente la base del rectangulo y no todo,ya que cuando lo voy a redondear no aparecen opciones si nada mas quiero redondear la base o la parte superior.

gracias

Si no te aparecen las opciones de las formas automáticas debes ir al menú Ventana/Formas automáticas, y te ha de aparecer una ventana al lado derecho con todas las opciones disponibles para las formas automáticas, ya luego seleccionas el rectángulo redondeado y verás las opciones disponibles para él, entonces quitas el candado para establecer la curvatura de sus lados en forma independiente, luego solo asignas cero a la base y listo.

no entiendo esta parte me puedes explicar un poco mas detalladamente "y activamos la escala inteligente, para esto procuramos seleccionar como zona de repetición solo 2px de ancho en el centro
" me puedes explicar por favor te lo agradesco

Al estar dentro del símbolo, editando sus propiedades, en la parte inferior te aparecera una casilla de verificacion para activar la escala inteligente, una vez activa te apareceran las guias de la escala, es alli donde las colocas igual a la imagen que muestro en el tutorial, donde como te daras cuenta para el centro la seleccion es de tan solo 2px.
Espero haber despejado tus dudas.

que fireworks usas? el macromedia fireworks o el adobe fireworks cs3

En el tutorial se especifica que se esta usando Adobe Fireworks CS3, ya que a partir de esta version recien se encuentra disponible la escala inteligente.

Soy nuevo en fireworks y me costaba un poco iniciarme debido a los vicios creados de otros programas, gracias a tutorial y esforzándome un pelín he conseguido finalizar este estupendo tutorial y te lo agradezco. He agregado el blog a "favoritos" y me he registrado para agradecértelo. Un abrazo.

Hola Randall, primero que nada quiero felicitarte por tu blog, es muy interesante el contenido que manejas, ahora me gustaria preguntarte a que te refieres cuando dices que "apliquemos el modo mezcla de solapamiento"

Gracias y salu2

I Know The Power Of Dark Side

Cuando digo " ahora que ya esta convertido en un simbolo solo hay que aplicar el modo de mezcla solapamiento y nos debe quedar algo así " me refiero a que una vez que convertimos el grupo en un simbolo, debemos seleccionar la capa en la que está y cambiar su modo de mezcla a solapamiento, para que genere ese contraste de color con la capa inferior.
Espero haya despejado tus dudas.

Saludos.

hola, sabes como se pueden activar la escala inteligente DESPUES de haberlo convertido a simbolo y no haberlo seleccionado. Es que quiero aplicarselas a botones que no tiene activada la opcion y no se como hacerlo :p

gracias

En el panel de biblioteca, seleccionas tu simbolo creado y le das click al icono con forma de "i" que dice propiedades de simbolo, luego se abrira una ventana donde solo tienes que marcar la opcion "Activar guias de escala en 9 divisiones".

mil gracias esta muy padre y sencillo

y como se guarda como boton

Añadir nuevo comentario

finpecia without a perscription buy prednisone pills order Cytotec mastercard uk Lisinopril generic cheap generic finpecia where buy Alli uk Lisinopril purchase online prescription metformin prednisone no physician approval order generic Metformin online buy generic Metformin online buy 10mg Maxalt buy generic Maxalt online no prescription order generic Maxalt online no prescription uses for Metformin Metformin online buy Finpecia visa Finpecia order online Maxalt with no rx buy metformin epharmacist where to buy Metformin by cod Metformin order online