Botón Photoshop Crear Web 2.0

Los botones Los tutoriales de Photoshop son probablemente una de las categorías más populares en cualquier sitio de tutoriales de Photoshop y como la Web 2.0 es un tema candente, vamos a hacer un botón simple adecuado para cualquier aplicación de sitios web de la Web 2.0. Tutorial despues del salto.

Cree un lienzo en blanco a aproximadamente 500 px (ancho) x 400 px (altura) para comenzar el diseño del botón. Crear una nueva llamada de capa 'bg01'. Selecciona el Herramienta Rectangular Redondeada, mantenga presionada la tecla MAYÚS y dibuje un cuadrado de lado redondo en el centro. Cualquier color está bien en la etapa actual..

Llamar al Opciones de mezcla debg01'y ajustar los siguientes estilos:

Sombra paralela

• Opacidad: 40%
• Distancia: 0px
• Spread: 0%
• Tamaño: 6px

Superposición Gradiant

• Color de parada: 0%, # d00031
• Color de parada: 100%, # ff2b5d

Mantenga presionada la tecla CTRL, haga clic izquierdo en 'bg01'Capa miniatura para seleccionar su forma. Ir Seleccionar -> Modificar -> Contrato e ingrese el valor '2px'. Esto reducirá el área seleccionada en 2 píxeles..

Crear una nueva llamada de capa 'bg02'y llenó el área resaltada (después del encogimiento) con cualquier color. Yo uso # 000000 negro aquí. Haga doble clic en 'bg02' para iniciar el Opción de fusión y ajustar el siguiente estilo.

Superposición Gradiant

• Color de parada: 0%, # c6002f
• Color de parada: 100%, # c6002f

Crea otra capa nueva para texto, llámala 'TXT'. Inserte el texto de su botón. Usaré un alfabeto para representar. Los estilos de fuente que estoy usando aquí son los siguientes:

• Arial redondeado negrita
• 150 pts

Igual, después de decidir su texto, haga doble clic en 'txt' para iniciar el Opciones de mezcla y ajustar los siguientes estilos.

Sombra paralela

• Opacidad: 25%
• Distancia: 0px
• Propagación: 0px
• Tamaño: 5px

Sombra interior

• Opacidad: 10%
• Distancia: 0px
• Choke: 0
• Tamaño: 10px

Biselado en relieve

• Profundidad: 1px
• Dirección: Abajo
• Tamaño: 0px
• Suavizado: 0px
• Modo de resaltado de opacidad: 32%
• Opacidad del modo Sombra: 32%

Superposición Gradiant

• Color Stop: 0% # d2d2d2
• Color Stop: 100% # f0efef

El botón está casi terminado. Vamos a darle un poco de brillo en la parte superior. Sostener CTRL, click izquierdo 'bg02'Capa miniatura para resaltar la forma exterior; escoger Herramienta Eclipse Marquee. Ahora mantenga ALT, con la herramienta Eclipse Marquee seleccionada, arrastre hacia la mitad inferior del área resaltada. Consulte la imagen de arriba.

Con la parte superior resaltada y Eclipse Marquee Tool aún seleccionada, haga clic derecho y elija Pluma; entrar 15px para el radio.

Crea una nueva capa, llámala 'brillar'y llene la parte resaltada con blanco [#ffffff]. Esto debería agregar efecto de brillo a la parte superior de su botón. El producto final debe verse como la imagen de abajo..

Descargar tutorial

Algo extra…

Ajustar las opciones de fusión debg01'y'bg02Te daré más botones interesantes. Aquí hay otro tutorial de Photoshop sobre el botón que he hecho anteriormente: crear un botón brillante para la Web 2.0

Descargar muestra