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

Photoshop Que es tablet pc Tablet pc reviews Blackberry playbook 4g Charger for laptop Unlock iphone 3gs

Seguimos adelante con esta pequea serie de tutoriales: Elementos de diseo para Interfaces Web. En esta ocasin 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 tcnicas 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 diseo. En la siguiente imagen podemos ver los parmetros 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 Rectngulo Redondeado con un radio de 5px. Nuestro reproductor tendrs unas dimensiones de 260px de ancho por 40px de alto, utiliza las reglas y guas 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, Superposicin de Degradado y Trazo. Usa los mismos parmetros de las siguientes capturas.

Sombra Paralela

Superposicin 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 gua para crear el espacio cuadrado donde ir nuestro

tringulo del Play. En la captura podemos ver claramente esto. Utiliza nuevamente las Formas Personalizadas del programa para crear el pequeo tringulo, el cual ser de color gris oscuro (666666).

El siguiente paso es crea una lnea divisoria con el mismo estilo de nuestro reproductor de audio. Esto se logra fcilmente con la herramienta de seleccin rectangular con la cual formaremos una lnea 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 seleccin 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 ms adecuada. Obtendremos el siguiente resultado:

Agreguemos ahora el botn 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 separacin del botn Play, es decir usando la herramienta de Seleccin 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 Superposicin de colores usando como color el blanco

(ffffff) esto solo para cambiar el tono que, como habamos dicho, era mejor de color blanco. Tambin se aplica un trazo de 1px como lo vemos en la otra captura.

Superposicin 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 ms espacio para el fondo de la barra de avance. Luego he agregado nuevas guas para basarme en ellas y as crear este elemento de manera exacta. Esta barra la haremos con la Herramienta Rectngulo 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 parmetros de la anterior, esta es para simular el avanceque llevara nuestro audio.

Para generar la ilusin de que la lnea naranja va incrustada en la gris le aplicamos un Estilo de capa de trazo con los parmetros que muestra la siguiente captura:

Por decoracin, y como un elemento opcional, hemos agregado un pequeo 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 prxima entrega de la serie de tutoriales Elementos de diseo para Interfaces Web. Hasta la prxima
http://www.solophotoshop.com/tutorial/reproductor-de-audio-en-photoshop/730/