Blog

El blog de CaminoCreativo.com con lo ultimo y mas destacdo sobre el diseño.

Efectos

Los mejores tutoriales para Photoshop enfocado sobretodo a crear efectos especiales.

Noticias

Importantes noticias para diseñadores. Tambien algunas novedades de nuestra area.

Recursos

Todos los recursos para poder hacer de tus diseños algo completamente profesional.

Varios

No solo de Photoshop vive el diseñador. Dreamweaver, Illustrator, incluso otros recursos!

Home » Avanzados, Web

Barra de botones estilo Windows Media Player 11

Publicado por Luch el Miércoles, 5 Noviembre 20084 Comentarios

Excelente tutorial en el que vamos a crear la barra de botones de Windows Media Player 11. Aplicaremos ((Rounded Rectangle Tool)), unos cuantos ((Layer Styles)) y degradados.

Abrimos un nuevo documento de 600×120px con fondo blanco.

Crean una ((New Layer)).

Seleccionamos ((Rounded Rectangle Tool)) con los valores que aparecen en la siguiente imagen. Lo rellenan de cualquier color.

Hagan doble clic sobre la capa para abrir y modificar ((Blending Options)).

((Bevel and Emboss)).

((Gradient Overlay)). Para el degradado usen los colores #012255 y #000000.

((Stroke)).

Les debería quedar así.

Crean una ((New Layer)) y sobre ella apliquen el siguiente degradado.

Apreten doble clic sobre la capa de la barra para activar la seleccion y con ((Gradient Tool)) trazen un degradado lineal de abajo hacia arriba usando los siguientes valores.

Les debe quedar así.

Crean una ((New Layer)).

Ahora con ((Line Tool)) trazen una línea horizontal de color blanca en la zona inferior de la barra.

Luego le cambian el modo de la capa a ((Overlay)). Aumenten el tamaño de la siguiente imagen para ver este resultado.

Crean una ((New Layer)) y sobre ella debemos aplicarle el siguiente paso:

Apreten Ctrl + Clic sobre la capa de la barra para activar la selección. Luego vayan a ((Select))-((Transform Selection)) y reduzcan verticalmente la selección a la mitad.

Ahroa con ((Gradient Tool)) trazen un degradado de blanco a transparente. Si luego de trazarlo les queda muy blanco bajen la ((opacidad)) hasta obtener un resultado como se muestra en la siguiente imagen.

Crean otra ((New Layer)).

Seleccionen nuevamente ((Rounded Rectangle Tool)) con un ((Radius)) de 5px y trazan un botón como el que ven abajo.

Hagan doble clic sobre la capa para aplicar ((Blending Options)).

((Inner Shadow)).

((Gradient Overlay)). Para este degradado use los colores: #16359d y #4769db.

((Stroke)).

Luego de aceptar los cambios el nuevo botón les quedará algo así.

Apretamos Ctrl + Clic sobre la capa de este pequeño botón para activar su selección.

Crean una ((New Layer)).

Luego trazen un degradado lineal de abajo hacia arriba usando el color #10C2FD a transparente.

Con ((Erase Tool)) con un ((Hardness)) del 0%, ((opacity)): 30% y ((Flow)): 20% borren parte del degradado en las esquinas superiores del pequeño botón.

Si quieren pueden agregar los siguientes detalles. Los hice con ((Line Tool)) y ((Polygonal Lazo Tool)).

Luego crean una ((New Layer)) y apreten Ctrl + Clic en la capa del botón pequeño para activar su selección, y con ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) resten casí 1/3 de la selección y dentro de este apliquen un degradado de blanco a transaparente. Si les queda muy blanco acuérdense que pueden reducir la ((Opacity)).

Agregué otros pequeños detalles, con ((Line Tool)) trazé una línea blanca y otra negra, una pegada a la otra, y con ((Erase Tool)) hice el efecto transparente sobre ellos.

Finalmente, con la fuente Verdana agregué el título de los botones

Ya tenemos nuestra fantástica barra de botones estilo WMP 11.