Creación de un gráfico de control deslizante de interfaz en Photoshop

Los gráficos de control deslizante se han convertido en una tendencia muy utilizada en el diseño web. Vienen en todas las formas y tamaños, y su aspecto y rendimiento solo están limitados por la imaginación. Crear estos controles deslizantes en Photoshop es extremadamente fácil. En este breve tutorial, explicaré mi proceso para crear un gráfico de control deslizante utilizando estilos de capa.

Avance

Paso 1

Primero, crea un nuevo documento PS del tamaño adecuado para que contenga el cuadro deslizante y espacio para agregar una sombra alrededor del borde. Usa la herramienta Marco rectangular para dibujar un cuadro en una nueva capa y rellénalo con un gris neutro.

Paso 2

Haz doble clic en la capa que contiene el cuadro para abrir la ventana Estilos de capa. Comencemos agregando un trazo blanco con un tamaño de 3 píxeles. A continuación, agreguemos una superposición de degradado usando la configuración a continuación. Elegí estos dos tonos de azul: Azul claro - #34f2f9, Azul oscuro - #0ba0d1 Ahora establezcamos un Resplandor interior con la configuración a continuación. Elegí un azul más oscuro para el efecto. #1178ae Para nuestro último efecto de capa, creemos un Resplandor exterior para que actúe como una ligera sombra alrededor del cuadro. Usa la configuración a continuación para crear la sombra. El cuadro deslizante ahora debería verse así.

Paso 3

Ahora, agreguemos una sombra debajo del cuadro deslizante creando una nueva capa debajo de la capa que contiene el cuadro. Presione Comando y haga clic en la miniatura del cuadro para seleccionarlo, luego asegúrese de que su nueva capa esté seleccionada y rellene la selección con negro. No podrá ver el nuevo cuadro negro ya que está detrás de nuestro cuadro deslizante. A continuación, elija Editar | Transformar | Distorsionar y edite el cuadro negro para darle una forma similar a la que se muestra a continuación. Presione Entrar para transformar el cuadro. Ahora aplique Filtro | Desenfocar | Desenfoque gaussiano como lo hice en la imagen a continuación. Luego, configure la opacidad de la capa al 75%.

Paso 4

Agreguemos controles deslizantes creando un círculo usando la herramienta Marco elíptico, rellenando los círculos con blanco y configurando su opacidad de capa al 50%. Agregué flechas usando en una fuente llamada Technical Forest .

Paso 5

Para terminar, voy a agregar algo de tipografía al control deslizante. Elegí una fuente llamada Ballpark Weiner . Es una excelente fuente de estilo vintage que necesitarás, si no la tienes toda lista. Apliqué los siguientes efectos a la fuente. Color: #525353 Sombra interior Opacidad: 75% Ángulo: 90 Distancia: 3 Estrangulamiento: 0 Tamaño: 7 Resplandor exterior Modo de fusión: Superposición Opacidad: 100% Técnica: Precisa Extensión: 0 Tamaño 2

Paso 6

Supongo que este no sería realmente un tutorial si no fuéramos un paso más allá y aplicáramos un poco de efecto grunge. Elegí la textura n.° 1 del paquete Subtle Grunge Textures Vol. 2. La reduje y la coloqué en una capa sobre la capa del cuadro deslizante. Establecí el modo de fusión en Superposición y la opacidad en 50 % para lograr el resultado final.

Conclusión

Este fue un tutorial muy simple para lograr un resultado muy lindo y limpio. Estas técnicas se pueden usar para crear una variedad de elementos web más allá de los cuadros deslizantes. ¡Espero que hayas aprendido algo nuevo y hayas elegido usar este nuevo conocimiento para el bien! 😉