En este sencillo tutorial paso a paso, le mostraré cómo diseñar un botón «Descargar» simple, profesional y brillante. Solo estoy usando la descarga como ejemplo aquí, es realmente un botón multipropósito 😉 Este tipo de botones también se usan mucho en los sitios «Web 2.0» últimamente, ¡así que ponte al día! (No seriamente)

1. Creando tu Botón

Comience creando un nuevo documento para hacer su botón, de lo contrario, abra un diseño de sitio web en el que ha estado trabajando. Creé un documento pequeño tamaño 400×110, solo para hacer que mi(s) botón(es) entren.

Ahora necesita hacer la forma de su botón, puede hacerlo usando el Herramienta Rectángulo redondeado (que es el más común) o puede usar los canales para crear una bonita caja redondeada uniforme. Sin embargo, será mejor si solo usa la herramienta Rectángulo redondeado.

Para los ajustes, utilice un radio de aproximadamente 10-15px, puede ver las otras configuraciones que he usado a continuación:

Ahora, dibuje su botón en el lienzo en el color que desee. (no importa el color que uses)

2. Aplicar estilos de capa

Haga clic con el botón derecho en la capa de su botón en la paleta de su capa y luego vaya a la Opciones de fusión, haga clic en y aplique la siguiente configuración:

1. Sombra interior
2. Gradiente de superposición

Puede usar los colores que desee en los estilos de capa anteriores, pero su botón ahora debería verse así de todos modos:

3. Efecto Resaltado/Brillo

Ahora es el momento de agregar un brillo agradable y brillante al botón. Comience haciendo una selección alrededor de su botón (Seleccionar > Cargar selección) luego contrae su selección por aproximadamente 5 píxeles (Seleccione > Modificar > Contrato) ahora deberías quedarte con una selección como esta:

Cree una nueva capa y luego arrastre una blanco a transparente degradado desde la parte superior de la selección hasta la parte inferior, como se muestra en la siguiente imagen:

Ahora necesitas hacer un camino con curvas usando el Lapicera, convierta su ruta en una selección y luego elimine la mitad inferior del degradado, algo como esto:

También usé un cepillo grande y suave para borrar los bordes inferiores, esto le da una sensación muy agradable y suave.

4. Texto y detalles

¡Ahora es el momento de agregar su texto al botón! Comience por salir del Herramienta de tipo horizontal (T) luego escribe tu texto.

La fuente que he usado arriba se llama innumerables profesionales, para la línea superior de texto que usé: cursiva negra, 24 puntos, Afilado, #fff.

Para la última línea de texto usé: Cursiva seminegrita, 12 puntos, Afilado, #fff. Terminé agregando esta Sombra paralela a la capa de texto.

Por último, para darle un toque agradable, agregué un reflejo al botón y un engranaje descolorido en la esquina inferior izquierda. Agregue la sombra/reflejo duplicando su botón principal más tarde, moviéndolo debajo de la capa de su botón y luego borre todo menos la parte superior.

Puede descargar la forma de engranaje que usé de: Cog Shape File.

5. Terminado

Y eso es todo. Sin embargo, también creé una versión roja del botón.

Gracias por leer, espero que hayas disfrutado el tutorial.

6. Marcado HTML y CSS

También hice la versión codificada de este botón de rollover, para aquellos que puedan estar interesados.

Código CSS:

#botón margen: 0; relleno: 0;
#botón a ​​pantalla: bloque; fondo: url (./button_off.gif) sin repetición; ancho: 200px; altura: 0px !importante; altura /**/:72px; relleno: 72px 0 0 0; desbordamiento: oculto;
#button a: hover background: url(./button_on.gif) sin repetición; ancho: 200px; altura: 0px !importante; altura /**/:72px; relleno: 72px 0 0 0; desbordamiento: oculto;

Código HTML:

Botón

Ver la salida.