Apesto usando photoshop, y sé que muchos lo hacen.
En el tip antes mencionado, se da un fuente para modificar. En este tip pretendo mostrarlo desde cero.
El soporte de vectores de fireworks es genial, y tambien su integración con Flash. Puedes incluso pegar el resultado, y se verá igual de bien.
Photoshop.png < Fireworks.png.
Entonces... creemos el icono de Flash CS3:
Primero crearemos un documento en blanco con las medidas que se ven en la imagen. El fondo, preferiblemente, debe ser transparente.
Después, en este documento, dibujamos un rectángulo redondeado, con la herramienta señalada. Si no te aparece ésta, dale click a la pequeña flecha negra de la herramienta "rectángulo"
Creamos el campo de texto. En este caso usaremos las letras "Fl". La fuente es "Trebuchet MS", en la imagen siguiente vemos el resto de parámetros:
Observen que vamos a modificar el relleno de la letra: Click a la pequeña flecha negra de la imagen anterior.
Hacemos un lindo degradado lineal:
Empecemos a darle color al botón: Le ponemos un degradado radial al rectángulo con los tonos de rojo característicos de Flash. Ubicamos su punto central en la parte baja del rectángulo.
Para lograr un mejor efecto de botón (con su relieve) y para atenuar lo feo del degradado, vamos a hacer un iluminado interior:
Perfecto. Ya tenemos la forma básica del botón. Pero claro, lo queremos "pimped", no? Eso pensé . Entonces primero, creemos el brillo del botón:
Creamos un nuevo documento y copiamos el rectángulo redondeado de nuestro botón, pero le quitamos el degradado. Luego, creamos un óvalo y lo ubicamos encima del rectángulo. Podemos disminuir su alpha para lo que sigue:
Lo que hacemos es ver hasta dónde llegará el brillo. Una vez decidida la posición, devolvemos el alpha a 100. Lo que haremos a continuación será enmascarar ese ovalo con el rectangulo, y lo haremos así:
Selecciona la capa del rectangulo
Apreta ctrl+x (o ve a Edición -> Cortar)
Selecciona la capa del óvalo
Apreta el botoncito de máscara (el que tiene una especie de asterisco en un fondo gris).
Apreta ctrl+v (o ve a Edición -> Pegar)
Selecciona todo, y agrupa (ctrl+g)
Copia y pega encima de tu archivo original
Haz un degradado en el brillo
En imagenes:
Ahora demos los toques finales al texto: Lo ponemos en negrita, le añadimos glow interior y sombra:
Si añadimos una sombra a lo que llevamos realizado, podemos dejarlo así, y se ve muy bien:
Pero queremos ser pimp, y dejarlo de acuerdo al diseño presentado por july? Entonces podemos hacer un par de cosas más:
Copiamos el rectangulo de fondo, le quitamos las esquinas redondeadas de abajo (usando Alt+click), disminuimos su tamaño, y cambiamos su fill (relleno). Lo ponemos exactamente donde acaba el original (el del botón):
Y listo, todo bonito. Imagino que hay detalles que faltan, pero con esto ya tienen la idea.
PD: Como nota, cabe anotar que cada uno personalizará con colores y letras como quiera, para cada programa. Tambien que, al ser vectores, se pueden pegar en Flash. Solo dénle a la opción "Keep all paths editable" y voilá.
...prefiero photoshop, igual esta mas explicado q el otro, bien! Por:nahaliel
Excelente articulo, fireworks es una excelente herramienta y hay gente que no lo aprecia como deberia. Por:Jose Orozco_blog
Apesto usando photoshop escribió:
Apesto usando photoshop
No sabes cuanto te pierde. (No entremos en dicusiones) Por:torrealbaruben
Muy bueno. Se asemeja mucho a la técnica que empleo yo en illustrator, pero consciente de es totalmente empleable en fireworks.Más practico así, pues el diseño final del layout es conveniente sea un png editable y editado en fireworks. Yo soy fan de que así sea. Muy elegante tu botón, que parece que sólo admiran la herramienta en cuestión. Enhorabuena!! Por:Sugar_blog
Gracias por los comentarios positivos! La verdad, es el primer tip que hago de diseño y me gustó mucho hacerlo.
No sabes cuanto te pierde.
Si, se que me pierdo bastante al no usar photoshop... pero como dices, no discutamos eso ahora Por:Lunatic_blog
JAJA. buenisimo el mio lo hice en FLash, y me quedo igualito (mm... momento el mio es vectorial , mejor todavia) Por:eveevans
eveevans :
el mio lo hice en FLash, y me quedo igualito (mm... momento el mio es vectorial , mejor todavia)
¿Para cuando el tip donde explicas como? Por:Freddie
Freddie :
eveevans :
el mio lo hice en FLash, y me quedo igualito (mm... momento el mio es vectorial , mejor todavia)
¿Para cuando el tip donde explicas como?
bueno,bueno, voy a prepar el tuto "mismo tuto pero en Flash", hay se los envio Por:eveevans
Mejor que sea vectorial? no comparto eso prefiero un PNG, el exceso de vectores en FLASH complica el rendimiento de la maquina Por:MIguel Angel_blog
MIguel Angel_blog :
Mejor que sea vectorial? no comparto eso prefiero un PNG, el exceso de vectores en FLASH complica el rendimiento de la maquina
¿Qué maquina? ¿En qué escenarios?
Cualquiera puede decir lo que sea sin ejemplos claros. Por:Freddie
MIguel Angel_blog :
Mejor que sea vectorial? no comparto eso prefiero un PNG, el exceso de vectores en FLASH complica el rendimiento de la maquina
ah?? jaja, ni que fuera, solo es un boton!!!! ninguna"maquina" decente tendria problema! Por:eveevans
Pues el de flash el básicamente lo mismo, no tiene caso hacer un nuevo tip, de hecho, Semper ya publicó un tuto para hacer ese tipo de efecto, con eso es suficiente para imitar el tip de Lunatic Lycanthrop. Por:Darel
Me perdonaras pero el tuto es bastante malo, le faltan bastantes imagenes, me perdí en la parte de "Apreta el botoncito de máscara (el que tiene una especie de asterisco en un fondo gris)." nunca encontré el dichoso asterísco. Es como si en esa parte te hubieses aburrido de tomar capturas. Una pena. Por:Kerosene_blog
(mm... momento el mio es vectorial , mejor todavia)
Juas, no lo habia visto, pero... Fireworks trabaja todas las shapes como vectores, al igual que los filtros y todo eso. Si sigues el tuto, tendras tu imagen vectorial, ampliable y pegable en flash.
como se llama el programa de flash para hacer animaciones ?
plis ayudenme
Dreamweaver.
Por:
mmmmm el que se perdio buscando el boton de mascara es realmente gill cualquier persona que usa o fotoshop o firework sabe que las mascaras estan en en la ventana de layer buscalas hay....
muy bueno esto me gusto, siempre me piden hazte un boton como los de mac con esa onda y yo tenia que hacer miles de capas, brillos, este es mucho mas sencillo. Por:alexis_blog
Excelente artículo sobre ese efecto, muchas gracias por ellos. Yo amo Fireworks y no quiero discutir eso con los Photoshopers. Por:Mario_blog
muy bueno, te felicito y gracias por enseñarnos estas cosas. Por:jeet_15_blog
Excelente, yo tambien soy mejor en Fireworks, me ha servido bastante, ya hize el boton para el login de mi tesis siguiendo este minitutorial, muchisimas gracias!!! Por:gara501
Excelente voya a abusar de la confianza y sabras como hacer un efecto similar en un logo plano?? es una especie de espiral y peus se veria muy bien asi... Por:norbac_blog
el tutorial esta perfecto no le hagas caso a los que dicen que esta mal explicado porque la verdad esta de 10 me vino excelente ya que tengo que entregar un Final donde tengo que presentar los iconos de Adobe Por:andres27
Muy buen tutorial, a pesar de no conocer ese programa siguiendo sus pasos pude logar algo parecido en el que yo utlizo. Por:Beatriz _blog
Hola quiero hacer un icono me envian un corro electronico? giovana.chan@homail.com graxx!! Por:Gio_blog
Fireworks le da mil patadas a Photoshop
Photoshop deberia utilizarse solo para retoque fotografico
para vectores, botones, interfaces, web, ilustraciones, dibujos, animaciones y un largo etcetera, el mejor es Fireworks sin duda Por:Radioboy_blog
Y el que te dijo que te pierdes mucho al no usar Photoshop miente como un bellaco... Fireworks tiene bastantes cosas de Photoshop y además el plus de que todo es vectorial y todos los pasos se pueden deshacer y rehacer cuando uno quiera...
repito... si quieres retocar una foto, no hay nada mejor que Photoshop y sus pinceles mágicos y correctores...
para todo lo demas FI-RE-WORKS Por:Radioboy_blog
Lo maximo tu tutoria, pero me gusta mas illustrator, y puede quedarte casi lo mismo, pero digo casi xq hasta lo q sé no se puede degradar de un color a transparente o si? xfa respondanme cómo (siesq se puede) xq siempre me tok hacerlo de un color hasta blanco y de ahi aplicarle un tipo diferente d tranparencia pa q coja el color de lo q tenga abajo
sorry x alargarme mucho el asunto pero queria ser medio claro en mi pregunta.... gracias Por:paulo_darkboy-blog
con un tutorial hasta un mono de la NASA o de africa puede hacer un boton de estos
porque tanta pelea por el software
Ps vs.Fw
quisiera saber (para los que discuten)
donde dejan el desarrollo del intelecto;creatividad;conocimiento y poder crear el boton primero en tu mente
y luego poder usar cualquier herramienta virtual para hacerla Por:beat montana-blog
estoy disgustado porque no me dan la informacio´n que yo les estoy pidiendo por favor ver eso Por:manuel-blog
YO LE APLICARIA UN ULTIMO RETOQUE AL "PIMP" LE PRONDRIA UN DEGRADADO GAUSIANO PARA DAR UN EFECTO DE FLOTACION Por:MASTERANGEL-blog
gracias.. muy bueno el ejemplo Por:miltown-blog
con ireflector de logra eso en un solo click
saludos Por:francisco-blog
esta kul Por:luigy-blog
es un programa de la mierda io hice uno [=b y no m salio a verg a putos cman fireworcks Por:Rodo -blog
que buen titurial, en verdad me sirvio remucho, porque yo lo estaba haciendo de una forma muy diferente, pero asi como lo esplican aca queda mucho pero mucho mejor.
Por:cristian-blog
Gracias por el tuto, me sirvió bastante para aprender a usar este gran programa, también me costó tiempo encontrar el dichoso asterisco con fondo gris jejeje. Cada vez que trasteo con el fireworks aprendo algo nuevo. Lástima que apenas haya ejemplos como este en la red. Por:IvanSr-blog
Alguien sabe como lograr el mismo efecto, pero en Illustrator? Porque, al igual que paulo_darkboy-blog, no logro degradar de un color a transparente. Hay manera de hacerlo con el AI? Gracias. Por:Fabi-blog
es un buen informe para practicarse en fireworks Por:jose oveniel-blog
hola como estan yo bien les cuento que encontre una novia sin diente pero igual me gusta Por:elias -blog
aunq no tenga dientes y es desordenada la amo te amo mi ermozura sin diente yo elias Por:elias -blog
AUNK SE UN POCO DESCUIDADO... LO AMO POR SU FOMA DE SER Y COMPORTARCE COM MIGO. TE AMO DAVID... Por:ALONDRA-blog
. Entonces primero, creemos el brillo del botón:
yo aprendi fireworks luego Photoshop, me encanto el Tip 
Gracias Lunatic un poco tarde pero... Al menos este es desde 0... 
