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:
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á.
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
Superposición de Degradado
Trazo
Tenemos lista nuestra base del Reproductor de Audio
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).
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.
Bajamos la opacidad de esta capa a un 75% para que luzca mucho más adecuada. Obtendremos el siguiente resultado:
Agreguemos ahora el botón de audio y esto lo haremos con una “Forma Personalizada” que trae el mismo photoshop.
Es preciso aplicar un “Estilo de capa” de “Sombra Interior” para aumentar la intensidad de este icono.
Sombra Interior
Y así es como luce hasta ahora el “Reproductor de Audio” el cual ya empieza a tomar forma.
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).
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
Trazo
Así es como luce nuestra imagen con sus tres iconos:
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.
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.
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:
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.
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