Abran un nuevo documento de 800×600px y rellenen el fondo con el color #1b1b1b.

Seleccionen ((Rectangular Marquee Tool)) y dibujen una selección rectangular como la que ven abajo.

Crean una ((New Layer)).

Rellenen el fondo de esta selección con el color #232323.

Hagan doble clic sobre la capa del rectángulo para abrir ((Layer Styles)) y aplicarle ((Stroke)).

Acepten los cambios.

Apreten Ctrl + Clic sobre la capa del rectángulo para activar su selección.

Ahora con ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) resten la mitad de la selección del rectángulo. Vean la siguiente imagen.

Abran un nuevo documento de 750×120px con fondo negro.

Crean una ((New Layer)).

Seleccionen ((Rounded Rectangle Tool)) con un radio de 15px y tracen un rectángulo curvo con el color #af005f. Vean la siguiente imagen.

Hagan doble sobre la capa del rectángulo para aplicarle los siguientes ((Layer Styles)).

((Drop Shadow)).

((Outer Glow)).

((Inner Glow)).

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 400×400px con fondo blanco.

Crean una ((New Layer)).

Seleccionen ((Rounded Rectangle Tool)) con un radio de 10px y tracen un rectángulo como el que ven abajo, no importa el color.

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

((Gradient Overlay)). Para este degradado usen los colores #dce5ec y #ffffff.

((Stroke)).

Acepten los cambios.

Abran un nuevo documento de 540×220px.

Rellenen el fondo con el color #0d0d0d.

Crean una ((New Layer)).

Seleccionen ((Rounded Rectangle Tool)) con 5px de radio y dibujen una barra blanca como la que ven abajo.

Hagan doble clic sobre su capa para aplicarle los siguientes ((Layer Styles)).

((Outer Glow)).

((Gradient Overlay)). Para este degradado usen los colores #151515 y #050505.

Antes de empezar descarguen la imagen de fondo haciendo clic ACÁ y la abrimos en Photoshop.

Creamos una ((New Layer)).

Seleccionamos ((Rectangular Marquee Tool)) y dibujamos una selección como la que vemos abajo.

La rellenamos de blanco.

Hagan doble clic sobre la capa para aplicarle ((Inner Shadow)).

((Gradient Overlay)). Para este degradado usaremos los colores #36691a y #7dba1b.

((Stroke)).

Acepten los cambios.

Crean una ((New Layer)).

Seleccionen ((Gradient Tool)) de tipo ((Radial Gradient)) y tracen un degradado de blanco a transparente en el costado izquierdo del botón como aparece en la siguiente imagen.

Cambien el modo de capa a ((Overlay)).

Apreten Ctrl + Clic sobre la capa del botón para activar su selección.

Luego con ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) resten la mitad de la selección total del botón. Observen la siguiente imagen.

Crean una ((New Layer)).

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

Dupliquen el botón unas cuatro veces más. Para ello primero arrastren todas las capas hacia el botón de ((Create a New Layer)) y luego con las capas duplicadas seleccionadas apreten Ctrl + E para unirlas en una capa independiente. Esta capa la duplican tres veces más.

Ahora le colocan el título a los botones. Utilicé la fuente verdana.

Por último seleccionen ((Shape Tool)) y en su barra de opciones elijan formas para colocarle a los botones.

Abrimos un nuevo documento de 800×400px con fondo transparente.

Rellenamos el fondo con el color b1c2e0.

Creamos una nueva capa.

Seleccionamos ((Rectangular Marquee Tool)), creamos un rectángulo de lado a lado del documento y lo rellenamos de color 52a1c4.

Hacemos doble clic sobre la capa para que se nos abra ((Blending Options)). Marcamos ((Gradient Overlay)) y usen estos valores y colores.

Luego apretamos Ctrl + Clic sobre la capa para activar la selección de la barra y con la ((Herramienta degradado)) trazamos una gradiente de blanco (superior) a transparente (inferior).

Ahora le bajamos la ((opacidad)) a 70% y cambien el modo de la capa a ((Overlay)).

Escribimos el texto que usaremos para los botones. Seleccionen la fuente Verdana. Ahora vayan a ((Layer))-((Layer Style))-((Drop shadow)).

Una vez terminado este paso tendremos finalizado la barra de navegación.

Abrimos un nuevo documento de 470×130px con fondo blanco.

Seleccionamos ((Rounded Rectangle Tool)) y creamos un rectángulo con un ((Radio)) de 20px y fondo gris. Guíense por la imagen que aparece abajo.

Encima de la capa del rectángulo gris, vamos a ((Layer))-((Layer Style))-((Blending Options)).

Escriban tres títulos a sus botones. Esto va en cada uno, si quieren poner 4, 5, 6 están en todo su derecho!

Ahora crearemos unas líneas para separar los botones. Primero debemos hacer un zoom en los botones para trabajar más fácil. Creamos una ((nueva capa)) y trazamos una línea blanca de forma vertical como vemos en la imagen, le damos 1px de ((desenfoque gausseano)). Duplicamos la capa y la colocamos en el otro extremo. Nos van a quedar 2 líneas.

A estas líneas le aplicamos un degradado oscuro a claro. ((Layer))-((Layer Style))-((Blending Options)).

Ya tendremos creada nuestra barra de navegación. Yo le apliqué un fondo degradado para darle más elegancia a los 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 400×150px con fondo transparente.

Rellenamos el fondo con el color #d8d1c4.

Ahora con ((Rectangular Marquee Tool)) dibujamos una selección como la que vemos en la imagen de abajo.

Creamos una ((New Layer)).

Seleccionamos ((Gradient Tool)) de tipo lineal y trazamos un degradado dentro de la selección de abajo hacia arriba usando los colores #E6DED0 y #C4BA9A.

Crean otra ((New Layer)).

Seleccionen ((Line Tool)) con 1px de grosor. En la base superior de la barra tracen dos líneas horizontales de lado a lado: una de color blanco y la otra negra.

En la base inferior de la barra tracen solo una línea horizontal pero de color negro.

Luego a esta capa le cambian el modo a ((Soft Light)).

Vuelvan a crear otra ((New Layer)).

Con ((Rectangular Marquee Tool)) dibujen una selección que ocupe la mitad de la barra. Observen la imagen de abajo.

Luego la rellenan de blanco.

A esta capa también le cambian el modo a ((Soft Light)) y le reducen la ((opacity)) a un 30%.

Ahora pasaremos a crear la zona activa de uno de los botones.

Con ((Rectangular Marquee Tool)) dibujen una selección como la que ven abajo y la rellenan de negro.

A esta capa le aplican lo mismo. Cambian el modo a ((Soft Light)) y redúzcanle la ((opacity)) a un 30%.

Solo nos queda agregar los títulos a los botones.

Elijan el color negro como frontal.

Seleccionen la fuente Times New Roman y escriban el título del botón con la zona activa.

Ahora le aplicaremos un pequeño ((Drop Shadow)). ((Layer))-((Layer Style))-((Drop Shadow)).

Repitan el paso anterior para los demás titulos de los botones y listo!

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

Rellenamos el fondo con el color #1b2831.

Elegimos el color blanco como frontal en la paleta de colores.

Seleccionamos ((Rounded Rectangle Tool)) con un radio de 8px y luego dibujamos la barra como la que vemos abajo.

((Gradient Overlay)). Para el degradado usamos los colores #dadada y #ffffff.

Nos quedará así.

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

Seleccionamos ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) y dejamos la selección como la vemos abajo.

Creamos una ((New Layer))

A esta nueva selección la rellenamos de negro.

Ahora le aplicamos ((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)). Usaremos los siguientes colores para el degradado: #e75b1e y #f4864e.

Luego de aceptar los cambios nos quedará así

Nuevamente seleccionamos ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) y dejamos la selección como la vemos abajo.

Creamos una ((New Layer))

A esta nueva selección la rellenamos de blanco.

Hacemos doble clic sobre esta capa y aplicaremos los siguientes ((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)).

Quedará así.

En otra ((New Layer)) y con ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) repiten los mismos procesos anteriores pero esta vez lo que queremos hacer es aplicar un reflejo en la barra que verán en la siguiente imagen. Tendrán que rellenarla de blanco y reducirle la opacidad a un 30%.

Crean una ((New Layer)).

Luego seleccionen (Line Tool) de 1px de grosor y dibujen las dos líneas separatorias que aparecen debajo.

Con ((Polygonal Lazo Tool)) dibujamos una flecha y la rellenamos de blanco. Observen la siguiente imagen.

Seleccionamos la fuente Helvetica y escribimos los títulos de los botones

Por último colocamos un pequeño ícono de buscador que pueden descargar en www.deviantart.com.

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.

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 700×300px con fondo blanco.

Creamos una ((nueva capa)).

Seleccionamos ((Rounded Rectangle Tool)) con un ((Radius)) de 20px y dibujan la barra con el color #001735.

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

((Gradient Overlay)).

Les quedará así.

Volvemos a ((Blending Options)).

((Bevel and Emboss)).

((Drop Shadow)).

Acepten los cambios.

Dupliquen la capa de la barra (Ctrl + J).

Quiten los ((Blending Options)) arrastrando ((Effects)) a la ((Delete Layer)).

Vamos a aplicarle ((Blending Options)), así que haremos doble clic sobre ella.

((Gradient Overlay)). Usen estos colores: #DDE8F4 y #7C8B9D.

((Bevel and Emboss)).

((Drop Shadow)).

Una vez que acepten los cambios les quedará así.

Con ((Ellipse Tool)) de tipo ((Path)).

Apreten Ctrl + T para rotarlo.

Lo transforman en selección y apreten la tecla ((Suprimir)).

Repetimos los últimos dos pasos para crear los botones restantes.

Agreguen los títulos a los botones y listo!

Empezaremos por crear un documento de 350×19 con fondo transparente.

Ahora en la selección de color ponemos rojo como primario y blanco como secundario.

Seleccionamos la ((herramienta degradado)) y trazamos uno como el que aparece abajo.

Abrimos la otra imagen correspondiente al tutorial, en este momento tenemos los dos documentos abiertos. Lo que haremos será arrastrar la imagen del personaje de Super Campeones y la arrastraremos al otro documento.

Vamos a tener que reducirle el tamaño con ((transformación libre)) o Ctrl + T.

Crearemos otro documento de 6×6 para crear el Pattern que pondremos de fondo.

Seleccionamos el la ((herramienta lápiz)) con color negro (1px) y hacemos un trazado como el que vemos en la imagen inferior.