Elementos comunes utilizados en el diseño de botones de interfaz
Es muy posible que los botones y los elementos de navegación sean los objetos de interfaz más utilizados en el diseño de escritorio y móvil. Arrastran una interfaz, lo que permite a los usuarios llegar de A a B con un solo clic.
Lo más importante, un botón tiene que verse bien. Tiene que gritar "¡Haz clic en mí!", O simplemente no será tan efectivo como debe ser. Los botones se usan comúnmente para "Buscar", "Enviar", "Enviar", "Comprar" y "Subir".
En este artículo, veremos siete elementos de botón comunes en el diseño de interfaz moderno: texturas, patrones, 3D, trazos de píxeles perfectos, fondos con sangría, resplandores y resaltados.
Encontrará 35 fantásticos ejemplos de estas técnicas, así como un puñado de mini-tutoriales para Photoshop.
1. Texturas
Usar texturas es una gran manera de agregar un poco de profundidad a los botones y hacer que sobresalgan un poco del resto de la interfaz (y, en última instancia, hacer que se puedan hacer más clic). A continuación se encuentran algunos excelentes ejemplos de texturas en los botones.
ShelfLuv usa texturas para agregar dimensiones a su interfaz, especialmente en las áreas de botones y campos de texto.
La textura se utiliza en toda esta interfaz, pero es más pesada en el área del botón "Subir", por lo que es un punto focal.
La textura aquí se mezcla bien con el botón biselado, lo que hace que parezca real.
La textura no se usa realmente en este botón de la interfaz de usuario, pero aparece en segundo plano, lo que permite que el botón se destaque.
Crear un botón con textura
Cree un fondo simple usando la herramienta Forma y agregando ruido (Filtro → Ruido → Agregar ruido).
Vuelva a seleccionar la herramienta Forma y dibuje un rectángulo, asegurándose de que la parte superior esté oculta en el borde del lienzo.
Cambie el color de la forma a azul. Usé # 00A3D9.
Duplicar la capa de forma y cambiar el tamaño en la misma posición. Cambia el color a un azul ligeramente más oscuro.
Duplicar la capa una vez más. Coloque la capa debajo de las dos últimas capas de forma y cambie el color a gris claro.
Fotografía o descarga una textura de papel (utilicé una de Perdido y Tomado ) Vaya a Archivo → Lugar y ubique el archivo para colocarlo en el documento. Cambie el tamaño y colóquelo sobre sus formas azules.
Elimine cualquier exceso de textura con la herramienta Marquee y cambie el modo de fusión de la textura. Experimenta con diferentes modos porque las diferentes texturas producen resultados diferentes. También es posible que desee reducir un poco los niveles de opacidad.
Abra la ventana Estilo de capa para su forma azul más oscura y aplique el siguiente estilo Sombra paralela para agregar una sutil sombra blanca.
Ahora aplica un trazo a tu forma usando la configuración a continuación.
Finalmente, agregue una Sombra interna a la forma, para darle más dimensión.
Agrega texto al botón y listo!
2. Patrones
Los patrones son otra gran manera de agregar un poco de interés y profundidad a los botones de la interfaz. A continuación hay algunos ejemplos de patrones en botones, todos sutiles pero efectivos.
Aquí se usa una reflexión diagonal en el lado izquierdo del botón para separar el icono del tipo.
Se usa una línea diagonal en este botón, que se ajusta a la apariencia vintage y agrega dimensión al diseño.
Este es mi uso favorito de un patrón en estos ejemplos. Aunque no se usa en los botones, el patrón en el encabezado gris agrega dimensión a todo el diseño y, en última instancia, ayuda a resaltar los botones naranja.
Crear un botón de cinta con dibujos
Después de crear un fondo con textura usando la técnica en el mini-tutorial anterior, dibuje un rectángulo con la herramienta Forma y llénelo con un color azul verdoso. Usé el color # 008B8D.
Dibuja otra forma con la misma altura y color.
Usando la herramienta Lazo, crea un triángulo, como se ve a continuación. Colóquelo sobre el borde de la nueva forma y presione la tecla "Eliminar" para eliminar el área que no necesitamos.
Duplica la forma y ve a Editar → Transformar → Voltear horizontalmente para que quede mirando en la dirección opuesta.
Coloque las dos formas debajo de la forma más grande, como se ve a continuación.
Haga clic derecho en una de sus formas y abra la ventana Opciones de fusión / Estilo de capa. Aplique una capa de degradado similar a la que se ve a continuación. También puede agregar una sutil Sombra paralela. Una vez hecho esto, haga clic derecho en la capa y seleccione "Copiar estilo de capa". Seleccione su otra forma de pancarta. Haga clic con el botón derecho y seleccione "Pegar estilo de capa". Abra la ventana Estilo de capa y cambie el ángulo de su Superposición de degradado de 180 ° a 0 °.
Usando la herramienta Lazo, crea una selección similar a la que se ve a continuación para hacer coincidir las dos esquinas de nuestras formas. Llénalo con un color aún más oscuro.
Duplique la capa, voltéela horizontalmente y colóquela del otro lado.
Crea un patrón de línea. Alternativamente, podría usar el que hice a continuación.
Pegue el patrón sobre su pancarta completa. Mientras mantiene presionado Comando + Mayús, haga clic en las miniaturas de la capa de todas las capas de pancartas. Esto los seleccionará a todos. Haga clic derecho y seleccione "Seleccionar inverso". Con su capa de patrón de línea seleccionada, presione la tecla "Eliminar" para eliminar las áreas del patrón que no necesita.
Cambie el modo de fusión de la capa de patrón a "Multiplicar" para ocultar el blanco de la capa. Ahora baja la opacidad a un punto entre el 25 y el 75%. Experimenta para el mejor resultado.
Usando la herramienta Shape, crea algunas líneas similares a las siguientes.
Retire las áreas que se encuentran en el fondo de la imagen.
Experimenta con el modo de fusión de cada una de tus líneas. Aquí está el resultado:
3. 3-D
Los botones tridimensionales son geniales porque hacen que los botones se vean mucho más realistas. ¡Son casi imposibles de no hacer clic! El único inconveniente es que el efecto es bastante lúdico y, por lo tanto, no se adapta a todos los sitios web (como los corporativos). A continuación se muestra una selección de algunos adorables botones 3-D.
Las sombras y líneas de 1 píxel aquí resaltan ciertas áreas y hacen que el botón aparezca en 3-D. Esto y algunos buenos efectos CSS crearían un botón súper interactivo.
Nuestro segundo elemento (patrones) también se usa en este diseño para agregar dimensión a un botón ya muy tridimensional.
Este botón adopta un enfoque ligeramente diferente, ya que depende únicamente de los degradados para su aspecto tridimensional.
Este conjunto muestra diferentes alturas para indicar si el botón está en su estado normal, de vuelo estacionario o activo. Las líneas y la textura le dan a los botones una apariencia más realista.
Como algunos otros ejemplos en esta sección, una combinación de degradados y trazos hace que estos botones se vean en 3-D.
Este botón se ve en 3-D debido a su diseño "fuera de la caja", que se envuelve alrededor de la interfaz de usuario.
Crear un botón 3-D
Comience por dibujar una forma con la herramienta Rectángulo, con un radio de esquina de 7 píxeles. Abra la ventana Estilo de capa y aplique una Superposición de degradado que vaya de rojo oscuro a rojo claro. Use un rojo aún más claro al final de la barra de degradado para resaltar la parte superior de lo que será nuestro botón 3D.
Ahora aplique un trazo al botón. Cambie el tipo de relleno a "Degradado" para que pueda cambiar el color de la parte superior e inferior del trazo. Vaya de un rojo claro a rojo oscuro (lo contrario de la Superposición de degradado).
Debería verse algo como esto hasta ahora:
Duplicar la capa de forma. Mueva la capa original hacia abajo unos 10 píxeles.
Aplica una sombra paralela a la capa original usando la configuración que se muestra en la captura de pantalla a continuación.
Además, oscurezca Gradient Overlay haciendo que cada color individual en la barra de degradado sea un poco más oscuro.
Deberías tener algo que se parece a esto:
Seleccione la herramienta Texto y escriba algo en el botón. Abra la ventana Estilo de capa y aplique una Superposición de degradado similar a la que se ve a continuación:
Aplique una Sombra interna usando estas configuraciones:
Aplica una Sombra paralela usando estas configuraciones:
¡Y terminamos! Deberías terminar con algo como esto:
4. Píxeles perfectos
El arte de perfeccionar píxeles se ha convertido en parte integral de todos los aspectos del diseño de la interfaz de usuario, no solo de los botones. Las líneas de un píxel (o trazos) le dan profundidad a los botones y una apariencia ligeramente tridimensional. También hacen que los botones se vean con sangría. Aquí hay algunos ejemplos brillantes de esto.
Puede ver claramente que una línea blanca (superpuesta) de 1 píxel se utiliza como resaltado en la parte superior del botón rojo, con una línea más oscura en la parte inferior. Esto lo hace aparecer ligeramente en 3-D y agrega muchos detalles a la página.
La tipografía en este botón tiene una sombra interior, lo que hace que el botón aparezca como si estuviera sentado encima de la interfaz.
Estos botones de solo CSS3 (absolutamente no Photoshop) tienen trazos de 1 píxel que los destacan del fondo y aparecen sangrados al hacer clic.
Otro ejemplo de un trazo de luz de 1 píxel en la parte superior del botón para resaltar.
Este botón verde muestra un enfoque ligeramente diferente, con un brillo interno que actúa como un resaltado en la parte superior del botón. El trazo en el exterior crea una sombra muy fina.
Otro botón más que combina las técnicas mencionadas anteriormente.
Este botón básico tiene un trazo fino y una delicada sombra para que se destaque del diseño simple.
Este botón tiene un brillo interior sutil para que se destaque desde el fondo. Su estado activo tiene una opacidad reducida, lo que hace el truco.
Olvídese del botón: todo este diseño es perfecto para píxeles, con su tipografía y líneas modernas que hacen que la interfaz del usuario sea hermosa.
Crea un botón perfecto para píxel
Seleccione la herramienta Forma de rectángulo (que se encuentra en la barra de herramientas en la parte superior de Photoshop cuando se selecciona la herramienta Forma) y asígnele un radio de esquina de 5 píxeles. Dibuja un rectángulo negro similar al siguiente.
Abra la ventana Estilo de capa y aplique una Superposición de degradado a la forma. Usé un verde oscuro a un verde ligeramente más claro.
Dale a la forma un trazo de gradiente, pasando de un verde a un verde siempre más oscuro.
Ahora le da a la forma un estilo blanco de Sombra interior, utilizando la configuración que se muestra a continuación.
Y ahora una Sombra paralela, con un tamaño de 0 píxeles y una opacidad de solo el 5%.
Busque un ícono en Internet (o cree uno propio) y colóquelo en su documento yendo a Archivo → Colocar, ubicándolo correctamente. Aplica una capa de degradado a ella.
Dale a la sombra interior de tu icono una distancia de 1 píxel, y la sombra blanca a una distancia de 1 píxel. Esto hace que el icono parezca grabado en el botón.
Agregue texto al botón y aplique un efecto de sombra baja con la ventana Estilo de capa. Este es el resultado:
5. Fondos con sangría
Un fondo con sangría hace que un botón parezca estar enterrado en él, lo que le da profundidad al botón e interés visual. A continuación hay algunos buenos ejemplos de esto.
Este fondo de botón tiene una sombra interior sutil para que aparezca con sangría.
Los degradados invertidos en este fondo hacen que los botones aparezcan sangrados.
Una combinación de trazos y sombras descendentes otorga a estos botones más profundidad.
Este fondo de botón tiene varios estilos, incluidos un degradado, una sombra interna y una sombra paralela.
Este fondo de botón sangrado es mucho más pequeño que lo que hemos visto, pero sigue las mismas técnicas.
Una vez más, una sombra paralela y una sombra interior se utilizan para crear una sangría.
6. Glows
Los resplandores son una técnica bastante difícil de llevar a cabo en el diseño de la interfaz y, por lo general, solo se ven en las interfaces oscuras (aunque veremos un ejemplo ilustrativo a continuación). Estos ejemplos muestran cómo se pueden usar los resplandores de diferentes maneras.
Se usa un brillo en el interior de este botón, lo que le da un toque destacado.
Los resplados se usan inteligentemente para hacer que la tipografía de este botón se destaque del fondo oscuro. Y los resplandores hacen que las barras de carga parezcan reales.
Los resplados se usan comúnmente en interfaces oscuras para iPhone. Aquí vemos un brillo alrededor de la tipografía cuando el botón está en su estado activo.
El brillo ligero y bastante sutil le da a este botón el impulso extra que necesita para volverse hermoso.
Creando un Botón de Luz Brillante
Con la herramienta Rectángulo de forma una vez más, dibuje un rectángulo, esta vez con un radio de esquina de 3 píxeles. Aplique una capa de degradado similar a la siguiente. Dale a tus colores centrales una posición de "49" y "50".
Aplica la siguiente Sombra interna.
Aplica la siguiente Sombra paralela.
Aplica el siguiente Resplandor Exterior.
Agrega alguna tipografía al botón. Deberías terminar con un resultado agradable, limpio e increíblemente fácil de producir como este:
7. Aspectos destacados
Los aspectos más destacados otorgan profundidad de botones, interés visual y capacidad de clics. Los ejemplos a continuación prueban esto.
Se usa una forma blanca simple de baja opacidad en la mitad superior de este botón para darle un poco de profundidad y ayudar a que se ajuste a la interfaz general de rojo y gris.
Al igual que con muchos otros botones en esta publicación, un trazo de 1 píxel resalta este.
Los degradados de claros a oscuros a claros sirven como luces y sombras para estos botones.
Esta publicación fue escrita exclusivamente para WDD por Callum Chapman , el hombre detrás Tienda Picmix y Blog de Circlebox .
¿Qué diseños de botones usas más y por qué? ¿Encontraste un mayor porcentaje de clics en algunos diseños? Por favor comparta abajo ...