Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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.
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
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
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/