Hey guys back-to-back "Tutoriales de Photoshop. En este tutorial aprenderemos cómo crear I-Phone Como botón en Photoshop. Esto es muy simple y muy eficaz tutorial. Espero que disfruten de este tutorial.

Final Preview

Esto es lo que hemos ido hacer hoy

Paso # 1

Photoshop Abrir y crear un nuevo documento, el mío es de 550 × 398px con un fondo blanco.

Paso # 2

Rellene el color de la capa de fondo, el color de la mía es # 333333.

Paso # 3

Cree un nombre de la nueva capa de la capa de gradiente Stripe. Elige la herramienta Marco Rectangular y crear una banda blanca.

Diseño de la capa de rayas doble clic sobre la miniatura de la capa de rayas en el panel Capas para abrir el cuadro de diálogo Estilo de capa, vamos a aplicar un efecto de Gradiant vertical para el fondo. Luego haga clic en el gradiente de olor c sobre el derecho de la opción de degradado para abrir el Editor de degradado de color.

Haga doble clic en el left-color-stop y entrar en el valor de color # aaaaaa, haga doble clic en la izquierda-centro-color-stop y entrar en el valor de color # cccccc, haga doble clic en el centro-derecha-color-stop y entrar en el valor de color # dddddd, a continuación, haga doble clic sobre el derecho de-color-stop y entrar en el valor de color # ffffff.

Debería tener este aspecto.

Paso # 4

Seleccione la herramienta Rectángulo redondeado y crear el botón, el radio mío es 90X40px.

Ahora aplique algún efecto

Superposición de degradado

El estilo del botón de doble clic sobre la miniatura de la capa de botón en el panel Capas para abrir el cuadro de diálogo Estilo de capa, vamos a aplicar un efecto de Gradiant vertical para el botón. Luego haga clic en el gradiente de color a la derecha de la opción de degradado para abrir el Editor de degradado de color.

Haga doble clic en el left-color-stop y entrar en el valor de color # 000000, haga doble clic en la izquierda-centro-color-stop y entrar en el valor de color # 222222, haga doble clic en el centro-derecha-color-stop y entrar en el valor de color # 444444, a continuación, haga doble clic sobre el derecho de-color-stop y entrar en el valor de color # 666666.

Bisel y relieve

Después aplicas el estilo de capa Bisel y Relieve. Cambiar el estilo de exterior Bisel, de cambiar los valores de la profundidad, tamaño y suavizar. Elijo Para establecer la profundidad de 100%, talla de 1px y ablandar a 10px

Parte importante de este tutorial: Mantenga el ángulo a -90 ^°, altitud a 40 ^o

Modo destacado: que yo decida establecer la opacidad al 100%.

Modo de Sombra: elijo para establecer la opacidad al 100%.

Golpe

Finalmente, se aplicará el movimiento. Primer cambio de los valores de su tamaño. Puedo elegir para establecer el tamaño de 1px. Cambio de la posición en el interior

Puedo elegir para establecer la Opacidad al 80%.

Cambiar el color de los trazos por defecto # 222222

Debería tener este aspecto.

Paso # 5

La herramienta Seleccionar texto y escriba el texto en la parte delantera.

Vamos a aplicar algunos efectos para el texto.

Bisel Relieve

Haga doble clic en la miniatura de la capa de texto en el panel Capas para abrir el cuadro de diálogo Estilo de capa. Vamos a aplicar Bisel Relieve, Primera Cambiar el estilo de bisel exterior y la técnica para Cincel blando, de cambiar los valores de profundidad, dirección, tamaño y suavizar. Elijo Para establecer la profundidad a 130%, dirección en Tamaño de Down en 1px y ablandar a 0px

Parte importante de este tutorial: Mantenga el ángulo de 90 ^°, altitud a 30 ^o

Modo destacado: que yo decida establecer la opacidad al 0%.

Modo de Sombra: elijo para establecer la Opacidad al 50%.

Final Preview

Por último, hemos hecho este tutorial.

Esto es lo que hemos ido hacer hoy

Descargue el archivo de código fuente

Si lo desea, para comprobar su trabajo, usted puede descargar el archivo PSD para este tutorial.

iphone-como-buttons.rar (21,3 KB)

Filed under: Photoshop, Tutoriales por admin