Abran un nuevo 683×88px con fondo negro.

Crean una ((New Layer)).´
Comenzarán por dibujar el botón activo.

Seleccionen ((Rounded Rectangle Tool)) con un radio de 15px y dibujen un rectángulo curvo como el que ven abajo.

Hagan doble clic sobre la capa de este rectángulo para abrir ((Layer Styles)) y aplicarle ((Gradient Overlay)). Para este degradado usen los colores #83fc02, #c8e104, #6ead04 y #a2d100.

Acepten los cambios.

Crean otra ((New Layer)).

Dibujen otro rectángulo curvo como el que ven abajo.

Abran un nuevo documento de 200×200px con fondo blanco.

Crean una ((New Layer)).

Seleccionen ((Rounded Rectangle Tool)) con 2px de radio y tracen un rectángulo negro como el que ven abajo.

Hagan doble clic sobre esta capa para abrir y aplicarle ((Layer Styles)).

((Outer Glow)).

((Gradient Overlay)).

Acepten los cambios.

Empezamos por crear un nuevo documento de 200×200px con fondo blanco.

Crean una nueva capa.

Ahora seleccionen ((Rounded Rectangle Tool)) y crean un rectangulo con un ((Radio)) de 5px. Traten de hacerlo igual al que aparece en la imagen de abajo.

Ahora seleccionen ((Rectangular Marquee Tool)) y eliminen 1/4 del rectángulo, empezando desde abajo hacia arriba. Observen la selección que hice en la imagen de abajo.

Luego, parados encima de la capa del rectángulo aplicaremos los siguientes ((Layer Styles)). ((Layer))-((Layer Style))-((Blending Options)).

Bueno, ahora seleccionen la tipografía Arial y escríbanle un texto al botón.

Parados encima de la capa del texto vayan a ((Layer))-((Layer Style))-((Blending Options)). Luego aplicar ((Stroke)).

Les voy a mostrar el resultado pero con bastantes botones.

Abrimos un nuevo documento de 650×500px con fondo negro.

Creamos una ((New Layer)).

Seleccionamos ((Rectangular Marquee Tool)) de tipo ((Fixed Size)) y un tamaño de 600×40px. Luego de colocados estos valores hacemos clic en cualquier parte del documento para que automáticamente aparezca la selección del rectángulo.

Lo rellenamos de blanco.

Hacemos doble clic sobre la capa de la barra para aplicarle ((Blending Options)).

((Gradient Overlay)). Para este degradado usarán los colores: #000000 y #111111.

((Stroke)).

Una vez aceptados los cambios tendremos este resultado.

Ahora apretamos Ctrl + Clic sobre la capa de la barra para activar la selección.

Luego seleccionen ((Rectangular Marquee Tool)), Style: Normal y “Subtract From Selection”. Lo que vamos a hacer será restar la mitad de la selección de la barra.

Crean una ((New Layer)).

Esta nueva selección la rellenan de blanco y le reducen la ((opacity)) a un 5%.

Pasaremos a crear los títulos de los botones. Usé la fuente Arial.

Dejen un espacio entre título y título para colocar el icono.

Crean otra ((New Layer)).

Con ((Rounded Rectangle Tool)), Radius: 7 dibujarán el fondo del ícono. Observen la siguiente imagen.

Hagan doble clic sobre esta capa. Le aplicaremos los siguientes ((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)). Para este degradado usen los colores: #000000 y#464646.

Les quedará así.

Apreten Ctrl + J sobre esta capa para duplicarla y colocarla sobre los demás títulos de la barra.

En este tutorial coloqué iconos que vienen por defecto con Photoshop.

Por supuesto que estos íconos los vamos a colocar en una ((New Layer)).

Con ((Shape Tool)) seleccioné de la lista este ícono y le aplique ((Outer Glow)).

Así nos quedará la barra completa.

En otro resultado veremos que con ((Line Tool)) y ((Outer Glow)) dibujé la zona activa del botón.

Abrimos un nuevo documento de 600×300px con fondo transparente.
Rellenen el fonfo con ((Gradient Tool)) de tipo ((Lineal Gradient)) aplicando los colores #dfdfdf y #f6f6f6.

Crean una ((New Layer))

Con ((Elliptical Marquee Tool)) crean una selección como la que ven abajo, luego la rellenan de negro.

Hagan doble clic sobre esta capa para aplicar ((Layer Styles)).

((Drop Shadow)).

((Gradient Overlay)). Para este degradado apliquen los colores: #ffffff, #d2d1d6 y #9d9da5.

((Stroke)) Y para este degradado usamos los colores: #e0e0e0, #ffffff, #999999, #e7e5e5, #999999 y #e7e5e5.

Luego de aplicar estos Layer Styles llegaremos a este resultado.

Creamos otra ((New Layer)).

Volvemos a crear otra selección circular, pero esta vez, menor a la anterior, luego la rellenan de negro.

Ahora le aplicamos ((Layer Styles)) a esta capa.

((Inner Shadow)).

((Bevel and Emboss)).

((Color Overlay)).

Acepten los cambios para lograr este resultado.

Antes de seguir con el próximo paso descarguen estos ICONOS PNG.

Vamos a crear estado simple que les hablé al principio del tutorial.

Abren uno de los íconos. Lo pegan en este documento, lo adaptan al botón y luego de cambian el modo de la capa a ((Luminosity)).

Y ahora creamos la zona activa.

Para duplicar el botón simplemente seleccionen todas las capas y luego apreten Ctrl + J para duplicarlas.
Repetimos el paso anterior con un ícono diferente pero el modo de la capa será ((Lighten)).

Este es mi resultado final. Espero que les halla gustado. Saludos!

Abrimos un nuevo documento de 600×200px con fondo transparente.

Rellenamos el fondo con el color #01719b.

Creamos una ((nueva capa)).

Seleccionamos ((Rounded Rectangle Tool)) con un ((Radius)) de 15%. Elijan como color frontal en la paleta de colores el #91d5d4. Dibujamos la barra de los botones.

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

((Drop Shadow)).

((Inner Shadow)).

Luego de aplicar ((Blending Options)) les debería estar quedando así.

Dupliquen la capa (Ctrl + J) y le cambian el modo a ((Soft Light)).

Con la fuente Tahoma escriban los nombres de los botones-

Crean una ((nueva capa)).

Seleccionen ((Line Tool)) , ((Weight)): 1px, luego ponen como color frontal el #01719b. Dibujen una línea que separe cada botón y bájenle la ((opacidad)) de la capa a 60%.

En la imagen de abajo ya he colocado las demás líneas separatorias.

Crean otra ((nueva capa)).

Vamos a crearle un reflejo a la barra así que vuelvan a seleccionar ((Rounded Recangle Tool)) con los valores que ya habíamos introducio y dibujen una barra blanca que ocupe la mitad de la altura. Observen la siguiente imagen.

Le reducimos la ((opacidad)) a un 30% u listo!

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

Creamos 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 ((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)). En el degradado usé los colores: #787878 / #424242 / #363636 / #787878.

((Stroke)).

Luego de aplicar estos Layer Styles les tendría que estar quedando así.

Coloquen los títulos de los botones. Usé la fuente Arial.

Crean una ((New Layer)).

Seleccionen ((Line Tool)) y coloquen los valores que puse en la imagen de abajo indicados con flechas rojas.

Dibujan una línea y las demás son duplicadas (Ctrl + J).

Crean otra ((New Layer)).

Con los mismos valores que usamos con ((Rounded Rectangle Tool)) dibujamos otra barra en la parte baja. Observen la imagen de abajo.

Vamos a aplicarle ((Blending Options)), para eso hagamos doble clic en la capa.

((Drop Shadow)).

((Gradient Overlay)). Para el degradado usé los colores #002068 y#477baf.

((Stroke)).

Acepten los cambios.

Por último colocamos los títulos a la barra inferior. También usé la fuente Arial. Pueden probar cualquier otra que ustedes deseen.

Abrimos un nuevo documento 240×165px con fondo blanco.

Creamos una ((New Layer)).

Con ((Rectangular Marquee Tool)) dibujamos un rectángulo. Lo rellenan con el color #e9e9e9.

Seguimos con la misma herramienta, pero le cambian el estilo, deben seleccionar ((Substract From Selection)).

Observen la selección que hice en la imagen de abajo.

La nueva selección la rellenamos con el color #0069cc.

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

((Inner Glow)).

((Gradient Overlay)).

((Stroke)).

Apretamos Ctrl + Clic sobre la capa del botón para activar la selección. Luego con ((Rectangular Marquee Tool)) de tipo ((Subtract from selection)) dejen activa solo la mitad.

Crean una ((New Layer)) y sobre esta rellenan de blanco. Observen la imagen de abajo.

Cambien el modo de esta capa a ((Soft Light)) y le reducen ((opacity)) a un 40%

Escriban el título del botón con la fuente Arial y de color #153997. Es muy importante que ubiquen el texto en el centro del botón para que el siguiente paso salga correctamente.

Estando parados encima de la capa de texto vayan al menu ((Layer))-((Layer Style))-((Blending Options)).

((Gradient Overlay)).

((Stroke)).

Acepten los cambios.

En la siguiente imagen dupliqué las capas. Este es mi resultado.

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.

Abrimos un nuevo documento de 250×400px con fondo blanco.

Creamos una ((New Layer)).

Ponemos el color negro como color frontal.

Seleccionamos ((Rectangle Rounded Tool)) con un ((Radius)) de 8px y dibujamos el botón.

Hacemos doble clic en la capa para entrar a ((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)). Para el degrado usaremos los colores #dcdcdc y #f6f6f6.

((Stroke)).

Luego de aceptar los cambios tendremos este resultado.

Creamos una ((New Layer)).

Con ((Rounded Rectangle Tool)) y un ((Radius)) de 8px dibujamos un pequeño cuadrado que será el ícono del botón

Hacemos doble clic sobre esta capa para editar ((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)). Para este degradado usaremos los colores: #d39100 y #f1ab00.

El ícono del botón nos quedará así.

Ahora con ((Shape Tool)) aplicaremos un identificativo del botón. Este botón se llamará “Contact Us” así que en la barra de opciones de ((Shape Tool)) buscamos el dibujo de una carta. Antes de aplicarlo seleccionamos el color blanco en la paleta de colores.

Como verán abajo ya coloque el título del botón (Fuente Tahoma), el Shape y agregue otro botón

Abrimos un nuevo documento de 400×600px.

Rellenamos el fondo con el color #384243.

Creamos una nueva capa.

Seleccionen ((Rounded Rectangle Tool)) con un ((radio)) de 9px. Tracen un selección con el color #405252como vemos abajo:

Dupliquen la capa (Ctrl + J) de botón.

A la capa duplicada le cambian el color de relleno a #526262 y la corren unos pixeles hacia abajo.

Dupliquen nuevamente la capa y cámbienle el color a #304040.

Coloquen esta capa entre medio de las otras dos.

Luego lo que van a hacer es mover la selección unos pixeles hacia abajo y apretar la tecla ((Suprimir)).

Separen un poco más las capas. Observen como las teníamos en la imagen de arriba y ahora vean la imagen de abajo.

Seleccionamos la capa que rellenamos con el color #304040 y con ((Rectangular Marquee Tool)) hacemos una selección al costado izquierdo del botón, luego apretamos la tecla ((suprimir)).

Creamos otra ((capa nueva)) y con ((Rounded Rectangle Tool)) hagan un pequeño rectángulo en la parte inferior derecha del botón. Luego lo rellenan con el color #304040.

Duplicamos y completamos los títulos de los botones. Utilicé la fuente “Tahoma” tamaño 12px.

Les dejo a disposición la página para descargar los íconos. Hagan clic aquí.

Una vez que coloqué los íconos correctamente mi resultado fue este.

Abrimos un nuevo documento de 500×200px.

Rellenamos el fondo con el color #00e700.

Crean una ((nueva capa)).

Seleccionamos ((Polygonal Lazo Tool)) y hacemos una selección como la que ven abajo. La rellenan de blanco.

Hacemos doble clic sobre la capa para entrar a ((Blending Options)).

((Drop Shadow)).

((Color Overlay)). Usen el color #1dff32.

Una vez que hacemos clic en OK obtenemos este botón.

Deben seguir jugando, probando efectos y agregar los títulos al botón. Observen mi resultado.

Creamos un nuevo documento de 400×400px con fondo negro.

Creamos una ((capa nueva)).

Seleccionamos ((Rounded Rectangle Tool)) con un ((radio)) de 6px. Luego dibujaremos la selección del botón con fondo blanco.

Parados encima de la capa del botón vamos a ((Layer))-((Layer Style))-((Blending Options)).

((Drop Shadow)).

((Inner Shadow)).

((Gradient Overlay)). Como degradado vamos a elegir un rojo oscuro y uno claro.

((Stroke)).

Luego de aplicado ((Layer Styles)) tenemos este resultado.

Apretamos Ctrl + Clic sobre la capa del botón para activar la selección de este.

Crean una ((nueva capa)).

Seleccionen ((Gradient Tool)) estilo ((Radial Gradient)) y de Blanco a transparente. Trazen el degradado de arriba hacia abajo, como muestra la imagen de abajo.

El degradado les tiene que quedar así.

Luego le cambiamos el modo de la capa a ((Overlay)).

Antes de seguir con el último paso les dejo este Pack de Iconos de DeviantArt para que descarguen haciendo clic aquí.

Coloquen los íconos y los títulos a sus respectivos botones. A los títulos pónganle ((Drop Shadow)).