¿Quieres registrarte?

Crear los iconos de Adobe CS3 estilo web 2.0 con Photoshop

Por: july
6 de Mayo del 2007
299 de clabLevel
Otros artículos de july
48,824 visitas

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.

Enviar a twitter Enviar a facebook


También te interesa


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

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 xD

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

Que tal? :P
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 ;)
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
:o 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 :(
Por: paula_blog
yo nisiquiera tengo photoshop :'(
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
yo no se hacer iconos
Por: Juan bolivar-blog
[img] :) que lindo la verdad
Por: milagros-blog
Que genial
Por: PlaySation2-blog
Os esplicais komo el culo, aber, no me entero de nada...
Por: Anonimo-blog
mm.. quieiro tenes un fotoshop..

para cambiarme el color de pelo..deliniarme los ojos..poner le fondo blanco..cosas asi..donde lo puedo bajar?
Por: dani-blog
Quiero crear un icono.
Por: Nombre-blog-blog
Soy bastante novato, espero aprender... Tengo un inconveniente. Luego de modificar la imagen, la quiero grabar en .png pero se me graba tb el borde blanco; es decir, el .png no tiene transparencias. Tengo CS3 y creo haber probado grabarlo de todas las formas posibles, siempre con el mismo resultado.
Alguien que me asista?
Gracias. Saludos
Por: pedro-blog

pedro-blog :

Soy bastante novato, espero aprender... Tengo un inconveniente. Luego de modificar la imagen, la quiero grabar en .png pero se me graba tb el borde blanco; es decir, el .png no tiene transparencias. Tengo CS3 y creo haber probado grabarlo de todas las formas posibles, siempre con el mismo resultado.
Alguien que me asista?
Gracias. Saludos


quitale el fondo, osea deja el fondo transparente en el PSD. U_U
Por: penHolder
como puedo agrandar iconos compa te kiero mucho soy cabro jajajajaj
Por: chico meee...-blog
cual es la fuente que usan los de adobe?
Por: Kii-blog
sabeis qos digo q tais fumaos i yata q no ai derexo
Por: john-blog
aqi dbria abr iconos cualqiera en el mundo pnsaria q esto es una pagina q no es la q el a buscao
Por: el mañiko-blog
esta moral jeje :P
Por: jermias-blog
eds una mierda
chauuuuuu
Por: micaela -blog
qoomoo descargoo photoshop cs3? ayuudaa[!]
Por: ani2597
:(
Por: ani2597
ani descargalo de taringa.net, ahi busca el photoshop cs3
Por: cheloon-blog
Me gusta el child porn... y el gay porn y el furry y LOLIGURO!
Por: ELPORNERO-blog
hola
estabueno pero me aruino la mackina mi mama pago $10.000 yo re triste asique no lopongan :( :´( si que no lo pongan su buena amiga anita
Por: anita**-blog
esta buenisimo :) pero lo que dise anita es sierto :(
aseque confien en ella por fabor





12526cul
Por: 12526cul-blog
cmo lo deescargo ?=
Por: luciana44
gracias
sirve mucho para iconografias en web
Por: ast3risko-blog
la verdad no lo entendi y deve ser aburrido y ademas deven traer virus

boe...chau ??????
Por: daiana-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.