Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Anunciar en SoloPhotoshop

Diseño de Reproductor de Audio en Photoshop | Solo Photoshop

Diseñar un Reproductor de Audio con Photoshop

 

Tutorial por Francisco Delgado

En este tutorial veremos como diseñar un Reproductor de Audio con Photoshop explicado paso a paso de la mano de Francisco.

Seguimos adelante con esta pequeña serie de tutoriales: “Elementos de diseño para Interfaces Web”. En esta ocasión vamos a crear un “Reproductor de Audio Simple” y aunque es simple (sencillo) tiene algunos detalles que debemos cuidar mucho para lograr un aspecto elegante y moderno.

Es importante realizar los tres primeros tutoriales de esta serie para avanzar paulatinamente en el conocimiento y manejo de las técnicas anteriores, algunas de las cuales ya no se detallan en este tutorial.

Base del Reproductor

Iniciaremos creando un nuevo archivo de 500px X 250 px para nuestro diseño. En la siguiente imagen podemos ver los parámetros usados:

Reproductor archivo nuevo

Al igual que en tutoriales anteriores usaremos las “Formas Personalizadas” del photoshop para crear la base de nuestro Reproductor de Audio, en este caso usaremos la “Herramienta Rectángulo Redondeado” con un radio de 5px. Nuestro reproductor tendrás unas dimensiones de 260px de ancho por 40px de alto, utiliza las reglas y guías para apoyarte. En la captura vemos que la forma tiene un color gris, sin embargo no es importante pues eso cambiará.

Reproductor botón redondeado

EL siguiente paso es aplicarle un estilo de capa que nos simule el volumen y sombra del reproductor de Audio. En este caso vamos a aplicar las opciones de “Sombra paralela, Superposición de Degradado y Trazo”. Usa los mismos parámetros de las siguientes capturas.

Sombra Paralela

Sombra Paralela

Superposición de Degradado

Superposicion degradado

Trazo

Reproductor trazo

Tenemos lista nuestra base del Reproductor de Audio

Reproductor estilo botón

Iconos del reproductor

El siguiente paso será agregarle los varios iconos que llevará nuestro reproductor de audio. El primero de ellos será el de Play. Para ello lo primero que debemos hacer es ajustar crear una nueva guía para crear el espacio cuadrado donde irá nuestro triángulo del Play. En la captura podemos ver claramente esto. Utiliza nuevamente las “Formas Personalizadas” del programa para crear el pequeño triángulo, el cual será de color gris oscuro (666666).

Reproductor botón play

El siguiente paso es crea una línea divisoria con el mismo estilo de nuestro reproductor de audio. Esto se logra fácilmente con la herramienta de “selección rectangular” con la cual formaremos una línea de 1px de ancho que cruza nuestra barra completa, pero sin tocar los bordes. Sobre una nueva capa rellenamos de color blanco (ffffff). Luego con esa misma selección pero movida apenas 1px a la derecha la rellenamos de un color gris oscuro (666666). Se entiende muy bien si vemos la siguiente imagen.

Reproductor separador

Bajamos la opacidad de esta capa a un 75% para que luzca mucho más adecuada. Obtendremos el siguiente resultado:

Reproductor play separador

Agreguemos ahora el botón de audio y esto lo haremos con una “Forma Personalizada” que trae el mismo photoshop.

Reproductor icono audio

Es preciso aplicar un “Estilo de capa” de “Sombra Interior” para aumentar la intensidad de este icono.

Sombra Interior

Reproductor icono audio sombra

Y así es como luce hasta ahora el “Reproductor de Audio” el cual ya empieza a tomar forma.

Reproductor icono centrar

El siguiente paso es agregar las barras del audio, las cuales las hacemos de la misma manera que hicimos la separación del botón Play, es decir usando la herramienta de “Selección rectangular”. Para que se note hemos rellenado en esta captura con un gris oscuro, sin embargo lo correcto es rellenar con un color blanco (ffffff).

Reproductor barras audio

Una vez que tenemos las barras del audio listas voy a aplicar un par de estilos de capa. El primero es el de “Superposición de colores” usando como color el blanco (ffffff) esto solo para cambiar el tono que, como habíamos dicho, era mejor de color blanco. También se aplica un trazo de 1px como lo vemos en la otra captura.

Superposición de colores

Reproductor barras color

Trazo

Reproductor barras trazo

Así es como luce nuestra imagen con sus tres iconos:

Reproductor barras play audio

Barra de Avance y Detalles Finales

Primero he movido un poco el icono de las barras del audio, para que me dejen más espacio para el fondo de la barra de avance. Luego he agregado nuevas guías para basarme en ellas y así crear este elemento de manera exacta. Esta barra la haremos con la “Herramienta Rectángulo Redondeado” con un color gris oscuro (666666). Esta barra mide 140px de ancho por 4px de alto.

Reproductor barras tiempo

Haremos ahora una segunda barra con un color naranja (ff6600) y los mismos parámetros de la anterior, esta es para simular el avance que llevaría nuestro audio.

Reproductor barras tiempo naranja

Para generar la ilusión de que la línea naranja va incrustada en la gris le aplicamos un “Estilo de capa de trazo” con los parámetros que muestra la siguiente captura:

Reproductor tiempo trazo

Por decoración, y como un elemento opcional, hemos agregado un pequeño globo que nos indica el tiempo transcurrido y hemos coloreado de naranja (ff6600) el interior de tres de las 5 barras de audio. Y listo, hemos terminado nuestro Reproductor de Audio Simple.

Reproductor de audio diseño final

Deseo que el tutorial te sea de utilidad y te espero en la próxima entrega de la serie de tutoriales “Elementos de diseño para Interfaces Web”. Hasta la próxima…

Comentarios de Diseño de Reproductor de Audio en Photoshop | Solo Photoshop

↑ Tutorial