Este tutorial de Photoshop muestra cómo es "relativamente" fácil de crear atractivos iconos de estilo web 2.0 con reflejos y así sucesivamente, simplemente mediante el establecimiento de los efectos en la capa. Una vez que entienda el proceso, también es posible - dando rienda suelta a su creatividad - para crear muchas variaciones.
PASO 1 - icono del formulario
Creamos una capa y dibujar un rectángulo 
(O cuadrado) con las esquinas ligeramente redondeadas.
Aplicar esta capa de los siguientes efectos:
¿Cómo puedo utilizar un color de sombra interior # ffd800
El gradiente va de # 067500 a # 0cff00
Casi hemos alcanzado nuestro icono! La sombra del color que te guste! Lo importante era una gradación de la oscuridad a claro.
PASO 2 - REFLEXIÓN
Añadir una nueva capa en la parte superior de este cha que acabamos de hacer. Seleccione la forma del icono (Ctrl + clic en la capa) y - sin dejar de ser en la nueva capa vacía - seleccione en el menú Seleccionar-> Modificar-> Tipo de contrato: introduzca 2 píxeles:
Ajuste el color de primer plano a blanco 
y seleccionar la herramienta Degradado 
, Al pasar de blanco a transparente. Luego trazar un degradado de arriba a abajo, con el fin de obtener:
Ahora, un toque final, seleccione la herramienta de selección circular 
, Seleccione una elipse y colocarlo como se muestra a continuación y pulse la tecla Supr - si lo desea, puede establecer la transparencia 90/80:
PASO 3 - Texto y símbolos
Utilizando una de las fuentes muchas bibliotecas gratuitas que puede agregar un símbolo gráfico, un icono en breve. Si este esquema es, en mi caso, añadir el efecto de:
Otteremo un bonito efecto de retorno:
Lo único que falta ... el texto de tu elección!
X Bien hecho el tutorial, web 2.0 está haciendo las normas que los webmasters no se puede olvidar ...
He intentado en el gráfico de la red que se incluirán en una fuente similar a los botones que utiliza pero no he encontrado, ¿podría decirme cómo se llama o dónde encontrarlo? Gracias
@ Marcos: Gracias Mark! Usted puede encontrar algunas fuentes de mapa de bits a la siguiente dirección: http://www.orgdot.com/aliasfonts/
Tutorial de Photoshop: Web 2.0 iconos de la moda en 3 pasos | Undolog.com ...
Tutorial para crear iconos con estilo Photoshop 2.0 ....
hei .. pero se le olvidó decirnos cómo bajo la sombra desapareciendo!
.. ya sabes .. usted ha hecho ya .. 99 es de 100
pequeño botón mítico .. pero se necesitaría un coño sombra eh eh! ^. ^
@ Dapdudida:
A perdonar que me he hecho un screencast pequeña, a pesar de que no salió ningún sonido! Vaya aquí para las técnicas de reflexión 
tienes razón
Hay dos técnicas: con la máscara en la capa (el primer ejemplo) y el uso generalizado de mascarillas! Yo prefiero el primero
Gran tutorial! Yo estaba buscando desde hace mucho tiempo, muchas gracias! Tu blog entre mis favoritos, al igual
@ Artemisia: gracias!
Hola, felicidades por el tuotorial me han sido muy útiles, pero los iconos pequeños en el que encontró?
He intentado buscar en el sitio que usted ha escrito en los comentarios en los párrafos precedentes, pero no encontré nada.
@ Casa Lazio: los iconos son en realidad una tabla de la fuente. Usted puede encontrar muchas fuentes libres que contienen caracteres en lugar de los iconos normales de diversos tipos. Busque en Google por "fuentes dingbats"
Que los chicos después de este paso .. Sé que es una mierda, pero yo estoy en la inclinación "Añadir una nueva capa por encima de la que acaba de crear. Seleccione la forma (Ctrl + clic en la capa) y el resto en la nueva capa vacía "¿Puede alguien explicarme cómo fue que un niño de 2 años?
@ Marco: usted tiene que hacer en la práctica es la de recrear la misma forma de botón en la capa de vacío, pero ligeramente más pequeña. Para seleccionar el contenido de una capa se puede utilizar CTRL + clic del ratón. De esta manera usted podrá ver la selección alrededor de la forma del botón. A continuación, seleccione la capa en blanco para que la selección realizada previamente actuará en esta capa.
El problema es que cuando llego al set "gradiente de superposición", entonces todo está cubierto con la capa del color de la pendiente y me permite ver la forma cuadrada que le había dado para el primer botón. En segundo lugar, volviendo al principio, creo el nivel, pero el diseño cuadrado para intervenir en las sombras fuera y por dentro tengo que duplicar la capa necesariamente. Y "¿no?
Gracias por su excelente guía! Desde que vi mis creaciones sólo puede mejorar!
@ Matías: ¡gracias! Para cualquier información no dudes en enviarme un correo electrónico
¿Puede explicar cómo ha manejado un video tutorial con ventana visible pop-up de estilo?
En pocas palabras, me refiero a los efectos sobre el video donde visisibile sugerir un tutorial sobre cómo crear iconos de estilo Web 2.0
@ Giuseppe Serra:
He utilizado la librería Javascript ShodowBox que le permite abrir ventanas emergentes con diferentes contenidos: imágenes, películas Flash o QuickTime, páginas HTML y mucho más.
sencillo y práctico ... como me gusta:)
Hola cuando intento aplicar el macshera la capa desaparece y la segunda plaza en la máscara de capa es de color blanco y no negro como en la película ¿por qué?
@ Esteban: Usted debe mantener presionada la tecla ALT cuando se aplica la máscara de
Excelente guía, gracias!
Echo de menos una cosa ... El pasaje en el que se inserta la elipse: no puedo dar ese efecto a los iconos.
No entiendo este paso:
Gracias de antemano
Digit @ MM: Este es un paso simple. La capa de degradado se corta, preferiblemente con una forma circular. Lo que hay que hacer es seguir las figuras ilustradas para que el efecto similar a la propuesta, pero también se pueden aplicar diferentes valores para diferentes efectos. En la capa "reflexión", lo que a la corte, utilizar una selección circular para delimitar el área que desea eliminar y presione el botón "Eliminar" para cortar la parte inferior.
Además, la opacidad de esta capa se puede reducir a un 90% o 80% sobre la base de los colores utilizados.
Espero haber respondido a su pregunta.