Iconos de Adobe CS3 estilo web 2.0 con Fireworks

Por: Lunatic Lycanthrop + 08.05.2007

Basado en el tip de Crear los iconos de Adobe CS3 estilo web 2.0 con Photoshop se me ocurrió esta fácil forma de hacerlo, en fireworks. ¿Por que? Por varias razones:

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

Versión final:



Y el archivo editable en Fireworks.


Saludos, y espero les guste el efecto.

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

fireworks

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario