Crear elegante boton web dark
En esta oportunidad les presento este hermoso botón Web con detalles muy limpios. Vamos a utilizar ((Layer Styles)) como por ejemplo: ((Drop Shadow)), ((Belven and Emboss)), ((Gradient Overlay)) y ((Stroke)). También máscaras, ajustes de capa y transformación.
Abrimos un nuevo documento de 120×45px con fondo transparente.
Rellenamos el fondo con el color #4a4a4a.
Creamos una ((New Layer)).
Seleccionen ((Rounded Rectangle Tool)) de 15px de radio y tracen un rectángulo negro como el que ven abajo.
Hagan doble clic sobre la capa del botón para aplicarle ((Layer Styles)).
((Drop Shadow)).
((Bevel and Emboss)).
((Gradient Overlay)).
((Stroke)).
Acepten estos cambios.
Apreten Ctrl + Clic sobre la capa del botón para acticar su selección.
Con ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) trazamos una selección de la mitad del botón hacia abajo.
Creamos una ((New Layer)).
Esta nueva selección la rellenamos de blanco y le reducimos la ((Opacity)) a 15%.
Ahora apreten Ctrl + Clic nuevamente en la capa del botón para activar su selección. Esta la movemos 1px hacia abajo.
Creamos una ((New Layer)) y la selección la rellenamos de blanco.
A esta capa le reducen la ((Opacity)) a 24%.
Muevan la selección unos píxeles hacia abajo y hacia la derecha como muestra la siguiente imagen.
Se paran encima de la capa con el nuevo relleno y apretan la tecla Suprimir.
Dupliquen esta capa (Ctrl + J).
Con la capa duplicada seleccionada vayan al menu ((Edit))-((Transform))-((Flip Horizontal)) y luego ((Edit))-((Transform))-((Flip Vertical)). La acomodan en la parte inferior del documento. Véanlo en la siguiente imagen.
Luego vayan a ((Layer))-((New Adjustment Layer))-((Curves)). Observen en la siguiente imagen como modifiqué la gráfica.
Vuelvan a apretar Ctrl + Enter para activar la selección del botón.
Crean otra ((New Layer)).
Vayan a ((Select))-((Modify))-((Contract)) (1px).
Y luego ((Edit))-((Stroke)). Coloquen los siguientes parámetros.
Seleccionen ((Erase Tool)) con los valores que aparecen abajo y borren sobre la base superior e inferior del botón.
Repitan los últimos pasos y coloquen el mismo brillo pero esta vez sobre los lados del botón.
Por último escriban el título del botón. Utilicé la fuente Arial Regular tamaño 16px.
Apreten botón derecho sobre la capa de texto y seleccionen ((Blending Options)).
((Bevel and Emboss)).
((Stroke)).
Una vez que aceptemos los cambios del texto tendremos este resultado final.
