Tutorial de Photoshop: Web 2.0 estilo de los iconos en 3 pasos
Viernes, 29 de febrero 2008
Esto muestra cómo Tutorial de Photoshop "relativamente" fácil de crear atractivos iconos de estilo Web 2.0, con matices y todo lo demás, simplemente mediante el establecimiento de los efectos sobre la capa. Una vez que entienda el proceso, también es posible - dar rienda suelta a su creatividad - para crear muchas variaciones.
PASO 1 - forma de icono
Creamos una capa y dibujar un rectángulo 
(o cuadrado) con las esquinas ligeramente redondeadas.
Aplicado a este nivel los siguientes efectos:
Como ya he utilizado una sombra interior Color # ffd800
El gradiente va de 067.500 a # # 0cff00
Casi hemos alcanzado nuestro icono! El gradiente de color que se puede hacer más gusta! Lo importante es una gradación de oscuro a claro.
PASO 2 - REFLEXIÓN
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 - sin dejar de ser en la nueva capa todavía vacía - seleccione en el menú Seleccionar-> Modificar-> Contrato: Entre 2 píxeles:
Ajuste el color de primer plano a blanco 
y seleccionar la herramienta de degradado 
Que va de blanco a transparente. A continuación, dibuje un gradiente de arriba a abajo, con el fin de obtener:
Ahora, un toque final, elegir la herramienta de selección circular 
Seleccione una elipse y lugar como se muestra a continuación y pulse la tecla Supr - si lo desea, puede establecer la transparencia a 90/80:
TEXTOS PASO 3 - Y SÍMBOLOS
Utilizando uno de la biblioteca de la fuente de muchos gratuita que usted puede añadir un símbolo gráfico, un icono en la realidad. Si se trata de esquema, como en mi caso, al añadir el efecto de:
Otteremo un buen efecto incluyen:
Lo único que falta ... el texto de tu elección!
Post relacionados
Cargando ... 
Complimenti x il tutorial, web 2.0 es la creación de normas que los webmasters que no puede perder ...
He buscado en el gráfico de la red que se incluirán en un tipo similar a los botones que usted utiliza, pero he encontrado, usted podría decirme lo que se llama o dónde encontrarlo? Gracias
@ Marcos: Gracias Mark! Usted puede encontrar algunas fuentes de mapa de bits en esta dirección: http://www.orgdot.com/aliasfonts/
Tutorial de Photoshop: Web 2.0 estilo de los iconos en 3 pasos | Undolog.com ...
Tutorial para crear iconos de estilo con Photoshop 2.0 ....
hei .. pero se le olvidó que nos diga cómo la sombra bajo la cual se desvanece!
.. usted sabe .. ya lo ha hecho 99 .. Hace 100
pequeño botón de la mítica .. pero sería un coño sombra eh eh! ^. ^
@ Dapdudida:
Que me perdone que hice un screencast pequeño, aunque no hay sonido provenía! Vaya aquí la reflexión Técnicas 
en lo cierto
Existen dos técnicas: con la máscara en la capa (el primer ejemplo) y el uso general de la máscara! Yo prefiero la primera
Gran tutorial! He estado esperando, gracias! Su blog entre mis favoritos, sólo
@ Artemisia: gracias!
Hola, felicitaciones por la tuotorial he sido muy útiles, pero los pequeños iconos donde has encontrado?
Traté de mirar en el sitio que está a disposición en los comentarios de los párrafos anteriores, pero no encontré nada.
@ Agriturismo Lazio: los iconos son realmente una tabla de la fuente. Usted puede encontrar muchas fuentes libre que contienen caracteres en lugar de los iconos habituales de diversos tipos. Búsqueda en Google "dingbats fuente"
Es decir, los niños después de este paso .. Sé que es una mierda, pero estoy en la inclinación "Añadir una nueva capa sobre la que acaba de finalizar. Seleccione la forma (Ctrl + clic en la capa) y la capa restante en el nuevo vacío "¿Puede alguien explicar como si yo fuera un niño de 2 años?
@ Marcos: usted tiene que hacer en la práctica es 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 utilizar CTRL + clic del ratón. De esta manera usted verá el cuadro alrededor de la forma del botón. A continuación, seleccione la capa de vacío que se ha hecho anteriormente de que la selección actuará en esta capa.
El problema es que cuando llegue a establecer "Superposición de degradado", entonces toda la capa cubre el color de la pendiente y no me deja ver el cuadro grande que es la forma que he dado al primer botón. En segundo lugar, volviendo al texto, se crea el nivel, dibujar la plaza, pero para intervenir en las sombras internas y externas que necesito para duplicar la capa. Derecho e '?
Gracias por su excelente guía! Desde que vi mis creaciones sólo puede mejorar!
@ Matías: Gracias a ti! Para cualquier información no dude en enviarnos un mensaje
¿Puede usted explicar cómo se logró un tutorial de vídeo ventana emergente de estilo visible?
Bueno me refiero al efecto en el vídeo donde visis Sugerir un tutorial sobre la creación de iconos de estilo de la web 2.0
@ Giuseppe Serra:
Usé la biblioteca de Javascript ShodowBox que le permite abrir ventanas emergentes con diferentes contenidos: imágenes, películas Flash o QuickTime, las páginas HTML y más.
fácil y conveniente ... justo como me gusta:)