Cristalab

Crear los iconos de Adobe CS3 estilo web 2.0 con Photoshop

Por: july + 06.05.2007

En este webtip mostraré como crear un icono de programa CS3 al estilo web 2.0 como este:



Es un proceso muy sencillo que solo requiere tener un conocimiento básico de como usar Photoshop.

Más que mostrar como crearlo desde cero este tip es una guía de como modificar este documento y adaptarlo a nuestro gusto.

El archivo .PSD lo pueden descargar desde aqui.

Proceso:


En primer lugar nos encontramos con cuatro layers:



Donde solo modificaremos el layer de texto (Ps) y el del fondo (bg); para el layer de texto se usó como fuente Trebuchet MS en color blanco.



Seleccionado el texto solo lo cambiamos por la abreviación del programa que deseemos Dw, Fl, Fw, Fx, Ai, etc..

Luego el para cambiar el color del fondo no tenemos mas que abrir el controlador de Tono/Saturacion o Hue/Saturation (Ctrl+U)



Despues lo guardaremos como PNG.

Ahora si desean modificar el tamaño solo deberemos ir a Imagen>Tamaño de Imagen y cambiarlo (atencion a que los tamaños estén enlazados, si se conservan las proporciones y la resolución).



Eso es todo, espero que les sirva de algo.

Etiquetas photoshop

Comentarios | Enviar un comentario
wow! cool zanks niña
Por: DaDa
Buen tips ... y cuando vi el URL .. veo que ya cambiastes a mediamax miau .. chevere ..es bueno y rapido .. y Gracias nuevamente ...
Por: Pley
bien! lo usaste para tu avatar...
Por: july
Oye muy bueno voy a actualizar mi avatar con ese efecto
Por: Victor-Nael
Muy buen tip July miau

Es muy fácil de lograr y el resultado es impecable
Por: XKlibur
Pues tal vez mi botón no sea tan bueno como el que hizo july, pero el mio lo hice en fireworks Riendo

http://img441.imageshack.us/img441/3346/botongtpqc0.png

Que tal? Lengua
Por: Angelfire_blog
Un tutorial de como hacerlo en fireworks (ignorado por todos... hasta ahora [Espero])

http://www.cristalab.com/foros/viewtopic.php?t=39043
Por: Lunatic_blog
Aps lunatic, no habia visto el tuyo, pero también es muy bueno Guiño
Por: Angelfire_blog

Lunatic_blog :

Un tutorial de como hacerlo en fireworks (ignorado por todos... hasta ahora [Espero])

http://www.cristalab.com/foros/viewtopic.php?t=39043


yo tampoco lo habia visto... pero prefiero Photoshop, alguien q me diga q hace Fireworks q no haga photoshop, pero algo realmente bueno...
Por: july
buen tip july
Por: nahaliel
Sorpresa interesante
como hacer un muy buen efecto en 2 funciones y utilidades muy buenas xd
Por: Néstor
como creo el icono?????????
Por: jere_blog

jere_blog :

como creo el icono?????????

Mira este otro tip:
http://www.cristalab.com/tips/39043/iconos-de-adobe-cs3-estilo-web-2.0-con-fireworks
Por: Zguillez
quiero tener nas iconos
Por: kevin_blog
woooooooooooooooooooooooooooow
Por: wooo_blog
me gustan los icons siiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
Por: jose miguel soy un niño d
mandame iconos locazos
Por: kingae_blog
yo no tengo iconos solo seis i no se como crearlos sin nada raro
Por: xicita_blog
uuxa!! nu funciona Triste
Por: paula_blog
yo nisiquiera tengo photoshop Llorando
Por: Nadis!!_blog
Sobre el estilo de estos iconos me gustaría saber cual sería el procedimiento para exportarlos pequeños tamaño 32x32 o 16x16 y que sean visibles y llevarlos a formato png, estoy haciendo un pack de iconos para una aplicación desarrollada en visual estudio, pero la visibilidad no es muy clara cuando están dentro del programa, si alguien me puede dar un consejo, les agradecería.
Por: ckoxkar

ckoxkar :

Sobre el estilo de estos iconos me gustaría saber cual sería el procedimiento para exportarlos pequeños tamaño 32x32 o 16x16 y que sean visibles y llevarlos a formato png, estoy haciendo un pack de iconos para una aplicación desarrollada en visual estudio, pero la visibilidad no es muy clara cuando están dentro del programa, si alguien me puede dar un consejo, les agradecería.


debes trabajar con una fuente mas legible, apta para tamaños pequeños, y regular mejor el uso de los efectos, ya qeu en tamaño pequeño pueden entorpecer la legibilidad del icono. Busca una fuente para pantalla que trabaje bien en tamaños chicos.
Por: Mariux
que programa me recomiendas usar y en que formato los puedo exportar para que no pierdan calidad y queden a buena resolución?, ahora los estoy haciendo en CorelDraw los exporto como psd y en photoshop les cambio el tamaño a 32x32 y a 16x16 que es el tamaño que necesito, si conoces un procedimiento mejor o un formato que no me haga perder calidad te agradeceria me lo dijera.
Por: ckoxkar

ckoxkar :

que programa me recomiendas usar y en que formato los puedo exportar para que no pierdan calidad y queden a buena resolución?, ahora los estoy haciendo en CorelDraw los exporto como psd y en photoshop les cambio el tamaño a 32x32 y a 16x16 que es el tamaño que necesito, si conoces un procedimiento mejor o un formato que no me haga perder calidad te agradeceria me lo dijera.


deberias hacerlo directamente en photoshop o fireworks. Podes hacer si querés el fondo en corel, pero la tipografia del icono es mejor que ya la trabajes en photoshop o fireworks al tamaño en que realmente ira el icono. No te recomiendo que lo hagas en corel, mejor que sigas bien la explicacion de como hacerlo en Photoshop o en Fireworks (hay un tip para hacer el mismo boton en fireworks, busca en la seccion tips de esta web. )

Para exportar lo recomendable es png en 32 o 24 bits.

Saludos!
Por: Mariux
esta pagina deberia tener imagenes osea iconos cualquiera pensaria que se equivoco de pagina estamos pidiendo iconos mas no lecturas o.k
Por: brigith_blog
Che enseñeme como es estoo
Por: $$$$Nadiu$$$$-blog
Gracias por el tutorial. Mi logo no me ha quedado tan bien como el de july pero a ver que os parece.
[url]www.llarinfants.com
Por: icono adobe cs3-blog
quiero hacer imagenes de pokemon
Por: fernando-blog
e aqui una muestra de como realmente se ven uso roCKetDock para monrtarlos
http://images.onesite.com/mipagina.univision.com/user/elsalvador2007/large/captura_de_pantalla.png
Por: beat montana-blog
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.