En este tutorial, le mostraré una manera fácil de hacer algunos botones de navegación bastante simples, pero agradables y brillantes, ¡como los que se muestran a continuación!
1. Nuevo documento / lienzo
En primer lugar, creemos un nuevo documento en Photoshop. Para este tutorial estoy usando un tamaño muy pequeño de 400 x 100 píxeles, con todas las configuraciones predeterminadas.
2. Crear forma de botón
Crea tu forma de botón usando el Herramienta Forma de rectángulo redondeado, luego aplique un degradado dentro de su forma / selección. Los colores que usé aquí fueron # 6c7c84 y # 5a676d.
3. Aplicar estilos / efectos de capa
Muy bien, agreguemos algunos detalles al botón. Comience haciendo clic con el botón derecho en la capa del botón en la paleta de la capa y vaya a Opciones de fusión. Haga clic y aplique la siguiente configuración:
- Sombra paralela
- Sombra interior
- Brillo interior
- Gradiente de superposición
Y ahora debería tener un botón como este:
¿Te ves bien hasta ahora?
4. Agregue brillo / resalte
Crea una nueva capa (Capa> Nueva> Capa…) luego seleccione los píxeles de la capa del botón principal manteniendo presionado control y haciendo clic en la miniatura de la capa. O tu nueva capa dibuja un Blanco a transparente degradado desde la parte superior del botón hasta la parte inferior.
Corta el degradado recién creado por la mitad usando la herramienta de selección.
Cambie el modo de capa de su capa de brillo a Luz tenue y baje la opacidad a alrededor 25-40%.
5. Toques finales
Nuevamente, cree una nueva capa, ahora seleccione nuevamente los píxeles de la capa del botón principal. Contrae la selección en 1 píxel (Seleccione> Modificar> Contrato) y rellene la selección con blanco. Contrae la selección en otro 1 píxel y luego presione eliminar.
Con un pincel grande y suave, borre la mitad inferior de su trazo interior. Cambie el modo de capa para esta capa a Cubrir o Luz tenuey baje la opacidad a alrededor 80-100%, si necesario.
Usando estos mismos métodos, haga un trazo interior para la mitad inferior del botón, tal vez incluso use un color oscuro en lugar de blanco.
6. Agregar texto
Ahora solo necesita agregar algo de texto a sus botones, lo que normalmente debe hacer al crear estos botones para su sitio web (usando HTML y CSS). Para mi texto he usado Tahoma, 12pt, negrita. También terminé agregando un estilo de capa de Sombra paralela simple al texto.
Gracias por leer este tutorial, ¡espero que lo hayas disfrutado! Si desea aprender cómo convertir estos botones en HTML / CSS, puede consultar algunos de los siguientes sitios web:
🙂
¿Todavía no eres usuari@ de Fiverr ?
Tenemos un post sobre Fiverr donde te contamos cono funciona.