Este tutorial de Photoshop muestra cómo es "relativamente" fácil crear llamativo iconos web 2.0 estilo, con reflejos, etc, simplemente mediante el establecimiento de los efectos sobre la capa. Una vez que entienda el proceso, también es posible - al dar rienda suelta a su creatividad - crear muchas variaciones.
PASO 1 - ICONO DE FORMA
Creamos una capa y dibujar un rectángulo 
(O cuadrado) con las esquinas ligeramente redondeadas.
Aplicado a esta capa de los siguientes efectos:
Como ya he utilizado un color de sombra interior # ffd800
El gradiente va desde # 067500 a # 0cff00
Casi nos nuestro icono! El matiz de color que puede hacer que sea más como! Lo importante es partir de una oscura hacia una gradación clara.
PASO 2 - FANTASMA
Añadir una nueva capa por encima de este cha que acaba de hacer. Seleccione la forma del icono (Ctrl + clic en la capa) y - estar en la nueva capa sigue vacío - seleccione desde el menú Seleccionar-> Modificar-> Contrato: introducir 2 píxeles:
Ajuste el color de primer plano a blanco 
y seleccione la herramienta Degradado 
, Pasando de blanco a transparente. Luego dibuja un degradado de arriba hacia abajo, con el fin de obtener:
Ahora, un toque final, seleccione la herramienta de selección circular 
, Seleccione la elipse y la posición como se muestra en la figura siguiente y presione la tecla Supr - si usted desea, puede establecer la transparencia a 90/80:
PASO 3 - TEXTOS Y SÍMBOLOS
Utilizando una de las muchas bibliotecas de fuentes libres que usted puede agregar un símbolo gráfico, un icono en la realidad. Si este esquema es, como en mi caso, la adición en el sentido de:
Puede lograr un bonito efecto de volver:
La única cosa que falta ... el texto de su elección!
Felicidades x tutorial, web 2.0 da las normas que los webmasters apenas puedo olvidar ...
He buscado en la red para ser incluidos en un botones gráficos de fuentes similares a lo que se utiliza, pero no he encontrado, ¿podría decirme cómo se llama ni dónde encontrarlo? Gracias
@ Marcos: Gracias Marcos! Usted puede encontrar algunas fuentes de mapa de bits en esta dirección: http://www.orgdot.com/aliasfonts/
Photoshop tutorial: iconos de estilo web 2.0 en 3 Pasos | Undolog.com ...
Tutorial para hacer 2.0 iconos de estilo con Photoshop ....
hei .. pero se le olvidó decirnos cómo la sombra de que se desvanece!
.. sé cómo es .. Ya que has hecho 99 .. Hace 100
botón mítica pequeña .. pero tendrían que pasar una sombra coño eh eh! ^. ^
@ Dapdudida:
Para perdóname he cometido un pequeño screencast, aunque el sonido fue allí! Vaya aquí Técnicas para la reflexión 
tienes razón
Hay dos técnicas: con la máscara en la capa (el primer ejemplo) y el uso de la máscara en general! Yo prefiero la primera
Tutorial Great! Yo estaba buscando desde hace mucho tiempo, muchas gracias! Tu blog es uno de mis favoritos, inmediatamente
@ Artemisia: thanks!
Hola, felicitaciones por la tuotorial He sido muy útil, pero los iconos pequeños donde los encontraste?
Traté de buscar en el sitio que publicó en los comentarios anteriores párrafos, pero no encontré nada.
@ Lazio Farm: Los iconos son en realidad una fuente gráfica. Usted puede encontrar muchas fuentes libres que contienen caracteres en lugar de los iconos normales de diversos tipos. "Fuentes dingbats" Google
Eso es chicos después de este paso .. es una mierda lo sé, pero estoy en la inclinación "Añadir una nueva capa sobre la que usted acaba de hacer. Seleccione la forma (Ctrl + clic en la capa) y la capa que queda en el nuevo vacío "puede alguien explicar como si yo fuera un niño de 2 años?
@ Marco: lo que necesita hacer, básicamente, consiste en recrear la misma forma que el botón de la capa de vacío, pero un poco más pequeño. Para seleccionar el contenido de una capa puede usar CTRL + clic del ratón. De esta manera podrás ver la selección alrededor de la forma del botón. A continuación, seleccione la capa de vacío para que la selección realizada anteriormente actuará en esta capa.
El problema es que cuando llegue al ajuste "Gradient Overlay" entonces toda la capa cubre el color de la pendiente y no permite que vea la plaza que es la forma que yo le había dado al botón inicialmente. En segundo lugar, volviendo al principio, creo el nivel, el dibujo de la plaza, pero para intervenir en las sombras externas e internas necesariamente tienen que duplicar la capa. Y "¿no?
Muchas gracias por su excelente guía! Desde que vi mis creaciones sólo pueden mejorar!
@ Matt: gracias a ti! Para cualquier información, no dude en enviarme un correo electrónico
¿Me puede decir cómo se maneja una ventana emergente estilo tutorial de vídeo visible?
En resumen, me estoy refiriendo al efecto en el video donde visisibile proponer un tutorial sobre cómo crear iconos de estilo web 2.0
@ Giuseppe Serra:
He utilizado la biblioteca de Javascript ShodowBox que le permite abrir ventanas emergentes con contenido diferente: imágenes, películas flash o vídeos, quicktime, páginas html, y más.
sencillo y práctico ... como me gusta :)
Hola cuando trato de aplicar el macshera para nivelar el segundo cuadrado desaparece y la máscara de la capa es de color blanco y no negro como en la película de siempre?
@ Stephen: Tienes que mantener pulsada la tecla ALT cuando se aplica la máscara
Gran guía, gracias!
Echo de menos una sola cosa ... El pasaje en el que se coloca la elipse: No puedo dar ese efecto al icono.
No puedo entender este pasaje:
Muchas gracias de antemano
@ Digit WM: Es un paso simple. La capa de sombreado se corta, preferiblemente con una forma circular. Lo que tienes que hacer es seguir las ilustraciones para que el efecto similar a la propuesta, pero también se pueden aplicar diferentes cortes para diferentes efectos. En la capa de "reflexión", lo que para cortar, utilizar una selección circular para delimitar el área que desea borrar y pulse el botón "Eliminar" para cortar la parte inferior.
Además de la opacidad de esta capa puede reducirse a 90% o 80% dependiendo de los colores utilizados.
Espero haber respondido a su pregunta.
excelente y claro! felicitaciones y agradecimiento, saludos