Share
Hoy les mostraré cómo diseñar un botón algo diferente, pero muy bonito en Photoshop. Aunque puede parecer bastante simple, todavía tiene algo que otros botones no tienen; Es un botón desplegable. ¿Estás listo? Aquí vamos!
Lanzar Photoshop. Crea un nuevo documento, usaré un documento que es 600x350px.
Seleccione la "Herramienta Rectángulo Redondeado" y use un Radio de 2. Esto le dará al botón una apariencia nítida con un borde redondo limpio. Sin embargo, no importa el tamaño que elija para hacerlo, asegúrese de no tenerlo demasiado grande, ya que podría quedar fuera de lugar. Mi botón tiene 104 px de ancho y 30 px de alto.
Ahora vamos a añadir un poco de estilo al botón. Comenzaremos con la "Superposición de degradado" para darle algo de dimensión. Aquí está la configuración que vamos a utilizar:
Continúe para agregarle un "Trazo", tendremos que darle algún tipo de marco para enfatizarlo. Usa estos ajustes y el color # F8F8F8 para hacerlo resaltar.
Ahora agregaremos un "Resplandor interno" para un pulido menor del botón. Utilice estos ajustes:
Así es como debería verse el botón, después de agregar un poco de texto:
Echemos un vistazo a la pestaña desplegable azul, este paso es más complicado ya que usaremos la "Herramienta Pluma" para personalizar un poco la forma. Si no está familiarizado con la "Herramienta Pluma", lea atentamente para no perderse nada..
Puede copiar la capa de botón o crear una nueva capa. Crearé una nueva capa con la misma herramienta que antes (herramienta Rectángulo redondeado). Sin embargo, esta vez debería ser un poco más pequeño que antes, preferiblemente no más de 100px, ya que queremos que esta forma quede debajo del botón. Rellena esta capa con el color # 57A0FA. Esto es lo que deberías tener ahora:
Pasemos a la "Herramienta Pluma" y personalicemos la forma un poco. Asegúrese de que está utilizando la "Herramienta de agregar punto de anclaje" y seleccione la capa. Para facilitar las cosas a los principiantes, usaré guías para ubicarlas correctamente. Desea asegurarse de tener una guía en el centro del botón y luego colocar una guía adicional a cada lado. Así es como debe verse:
Ahora amplíe y seleccione la capa más reciente con la "Herramienta Agregar punto de anclaje" y coloque los puntos de anclaje en las guías. Tome el ancla central y arrástrelo hasta el tamaño deseado. Solo unos pocos píxeles harán lo que queremos que sea un efecto sutil..
Para hacer que la pestaña desplegable sea aún más bonita, agregaremos un agujero en ella (manténgala ampliada, ya que es más fácil ver dónde colocar el agujero). Para hacer esto, simplemente haga clic en "Agregar máscara de capa" en la capa que se creó más recientemente y seleccione la "Herramienta de recuadro elíptico" para hacer una selección. Pulse la tecla de retroceso y elimine esa parte de la pestaña. Así es como debe verse.
Para ayudar a que la pestaña se vea bonita y haga coincidir el botón, ahora le agregaremos un poco de estilo. Comience con el "Trazo" y use estos ajustes:
Vaya a la "Sombra interior" y use la siguiente configuración para limpiarlo un poco y profundizar en la pestaña:
Si todo se hace correctamente, debe tener un resultado que se vea así, si no, entonces debe haber hecho algo mal.!
Para crear el menú desplegable de "desplazamiento" simplemente duplique el estado normal, aumente su altura y use las mismas técnicas que antes. Agrega un poco de texto y listo.!
Así es como se ve el botón desplegable en varios colores, deleita tus ojos con estas golosinas!
Rápido y directo, espero que haya disfrutado de este diseño Sugerencia rápida!
Accentsconagua