Adobe Photoshop. Crea un botón para web utilizando solo los estilos de capa

Publicado por asktutorial.

Ya hemos hablado en reiteradas ocasiones sobre la importancia de saber manejar los Estilos de capa de Photoshop, así que no vamos a ser reiterativos… pero sí vamos a poner en aplicación uno de sus tantos usos. Vamos a crear un botón para web utilizando exclusivamente los estilos de capa, solo sigue unos pocos pasos.

PASO 1: Inicia Adobe Photoshop en cualquiera de sus versiones y crea un documento nuevo con las dimensiones que prefieras para tu botón; claro que en modo RGB y selecciona un color de fondo blanco.

Bien, ahora creamos una nueva capa presionando [Ctrl+Shift+N]. Tomamos la herramienta “Marco elíptico” y dibujamos un círculo perfecto que abarque la mayor zona posible en nuestra área de trabajo.

TIP: recuerda que para que tu círculo resulte proporcionado, mientras lo dibujas debes mantener presionada la tecla [Shift].

PASO 2: Rellenamos la selección hecha en el paso anterior con el color negro y lo hacemos desde [Edición —-> Rellenar] y elegimos “negro” en la opción “usar”. Aceptamos.

Hacemos doble clic sobre la capa para llamar a la ventana de estilos. Lo primero es activar la opción “Sombra paralela”, con los siguientes valores:

Opacidad: 75%

Distancia: 6

Extensión: 4

Tamaño: 18

El resto de los valores y parámetros quedarán predeterminados por Phtosohop.

PASO 3: Sin cerrar la ventana, activamos ahora “superposición de colores” y colocamos:

Color: blanco

Modo de fusión: normal

Opacidad: 55%

PASO 4: Ahora activamos “Satinado” y elegimos un color azul oscuro. Luego colocamos los valores como en la imagen siguiente:

Adobe Photoshop. Crea un botón para web utilizando solo los estilos de capa

Para ir finalizando vamos a cliquear en “Bisel y relieve” con los siguientes parámetros:

Adobe Photoshop. Crea un botón para web utilizando solo los estilos de capa

No olvides activar la casilla de “Contorno” (estos valores quedarán predeterminados).

PASO 5: Muy bien, ya para ir finalizando con nuestro diseño de botón, activaremos “sombra interior”. Aquí dependerá del aspecto que quieras dar al botón (más o menos profundidad). Juega con los cursores de este estilo para encontrar el resultado deseado. De otra manera puedes colocar los valores como en la siguiente imagen:

Adobe Photoshop. Crea un botón para web utilizando solo los estilos de capa

Ahora solo debes colocar un texto con una tipografía que te guste y con los estilos del mismo aplicar “bisel y relieve” con el modo “relieve acolchado”. Luego juega con los valores hasta conseguir lo que estás buscando.

Adobe Photoshop. Crea un botón para web utilizando solo los estilos de capa

1 Respuestas »

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

Contenido Bloqueado Solo Para Seguidores

Para ver el contenido solo sígueme en cualquiera de estas redes sociales. ¡Muchas gracias por todo!