Share
Vamos a construir un elemento de la interfaz de usuario cambiante. Usaremos Photoshop para explorar texturas sutiles y juntar un dial de volumen de excelente apariencia. Vamonos!
Abra un nuevo documento RGB de tamaño 800x600px y resolución de 72dpi.
Seleccione un color azul oscuro caprichoso para el fondo (en este caso, el código de color es # 1b1c20) y luego use la herramienta Bote de pintura para llenar el fondo.
Aplique algo de ruido al fondo, para darle una textura suave (1% de ruido gaussiano y monocromático).
Ahora compruebe la descarga de origen: encontrará un archivo de patrón allí que tendrá que hacer doble clic para instalar en Photoshop. Aplicar el patrón a una nueva capa y rellenar toda la capa con el patrón.
Gire la opacidad de la superposición del patrón a un 15-20% según su gusto, para terminar con algo como esto:
Cree un nuevo grupo con el nombre "botón" y agregue una forma de círculo (haga esto seleccionando la herramienta de forma elíptica y manteniendo presionada la tecla Mayús para que sea perfectamente circular). Dale un color vivo para que puedas ver la capa claramente más abajo en la línea?
Cambie la opacidad de relleno de la capa a 0% y aplique una sombra paralela con las siguientes propiedades:
A continuación, aplique una ligera sombra interior para que se vea con sangría.
Después de eso, aplica un brillo interior para que la base se vea llena..
Para el siguiente paso, haz otro círculo y dale un color blanco, esta será la forma básica de nuestro elemento de la interfaz de usuario y servirá para un par de capas de detalles más, ¡así que haz un tamaño con el que estés realmente contento! Nombra "button_base" o algo similar.
Aplique una superposición de degradado en ángulo, comience con blanco y agregue dos paradas de un color gris claro. Usa los dos topes blancos en el medio para jugar con la nitidez del botón, y mientras trabajas sigue previsualizando el elemento para ver cómo se ve.
Aplica un bisel y realza en la base, para que se vea un poco en 3D..
Ahora para los detalles. Haga una copia de la capa base y colóquela debajo de la base del botón. Ahora gire el relleno al 0% para ver solo los filtros que aplica a esa capa, y no el contenido. Crea una sombra paralela con la siguiente configuración:
Para hacer que el botón salte un poco más, vuelva a copiar la base del botón, colocándolo debajo de la base del botón y por encima del sombreado. Dale una capa de color oscuro para que se vea impresionante.
Ahora haga otra copia de la capa base del botón, pero transforme a un tamaño más grande. Colóquelo encima de la capa base del botón y rasterícelo.!
Una vez hecho esto, ve al panel de filtros y dale un filtro de ruido máximo (por lo que crees que estás mirando un televisor roto).
Luego, aplique un filtro de Desenfoque radial y ajústelo al valor máximo para obtener un buen efecto..
Debería reducir la opacidad de esta capa a alrededor del 20-40%, y luego centrar el centro con el botón. Cuando lo tenga en el centro, seleccione la capa de botón y vaya a seleccionar> inversa. A continuación, seleccione la capa de rascado y presione eliminar. Deberías quedarte con un bonito efecto de rayado en el botón..
Para comprobar que estamos haciendo todo bien, deberías tener algo similar a esto:
Haga un pequeño círculo para la muesca (o indicador) en el botón.
Dale una sombra blanca para darle un aspecto en relieve.
Dale a la muesca una pequeña sombra interior.
Y finalmente dale vida con el color que elijas..
Deberías tener algo como esto:
¡Ahora quedemos atrapados en los pequeños detalles finales! Haz un pequeño rectángulo para las muescas en la base del botón..
Vuelve a colocar el relleno en 0% y dale una sombra blanca.
También necesita un poco de sombra en el interior, así que dale una pequeña sombra interior.
Ahora cópialo y voltéalo al otro lado..
Coloque su contenido textual allí, utilizando una fuente de su elección (opté por Myriad Pro).
Aplica una sombra paralela al texto para que se vea sangrada..
Luego aplica una ligera sombra interior..
Esto debería ser lo que estás viendo en tu archivo:
Y este es nuestro elemento final de la interfaz de usuario, un simple control de volumen para aumentar la música.!
Espero que te haya gustado este tutorial, será el primero de muchos, así que siéntete libre de seguirme en Twitter o suscribirte al boletín de mi sitio. Feliz diseño y mantente fresco.!
Accentsconagua