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

Hagan clic en la pestaña ((Path)) o vayan al menu ((Window))-((Path)) para encontrarla.

Crean una nuevo canal Alpha.

Seleccionen ((Rectangular Marquee Tool)) y tracen una selección rectangular para luego rellenarla de blanco.

Deseleccionen (Ctrl + D).

Vayan a ((Filter))-((Blur))-((Gaussean Blur)).

Luego apreten Ctrl + L para editar ((Levels)).

Abran un nuevo documento de 500×500px con fondo transparente.

Seleccionen ((Gradient Tool)) de tipo ((Radial Gradient)) y tracen un degradado de gris oscuro a gris medio sobre la primera capa del documento.

Crean una ((New Layer)).

Con ((Rounded Rectangle Tool)) de 30px de radio tracen un rectángulo curvo blanco como el que ven abajo.

Ahora lo que tendrán que hacer será dibujar un pequeño rectángulo y colocarlo en la esquina superior derecha del rectángulo, esto hará que el botón tenga una aspecto más moderno fresco, cuando hayan terminado, presionen CTRL + J (duplicados) y muevan el rectángulo duplicado a la esquina inferior izquierda para crear el mismo efecto:

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

((Inner Shadow)).

Abran un nuevo documento de 450×350px con fondo negro.

Seleccionen ((Elliptical Marquee Tool)) de tipo ((Fixed Size)) para trazar una selección circular de 194×194px.

Crean una ((New Layer)).

Rellenen esta selección con el color #003637.

Ahora hagan doble clic sobre la capa del círculo para abrir y aplicarle ((Layer Styles)).

((Inner Shadow)).

((Inner Glow)).

((Gradient Overlay)).

Abran un nuevo documento de 400×400px con fondo transparente.

Rellenen el fondo con el color #eac0c1.

Crean una ((New Layer)).

Seleccionen ((Rounded Rectangle Tool)) con 10px de radio y tracen un cuadrado blanco como el que ven abajo.

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

Seleccionen ((Gradient Tool)) de tipo ((Radial Gradient)) y tracen un degradado usando los colores: #e9979b y #c11717.

Con la selección del cuadrado activa vayan a ((Select))-((Modify))-((Contract)): 4px.

Ahora seleccionen ((Elliptical Marquee Tool)) de tipo ((Intersect With Selection)) y tracen una selección óvalada como la que ven abajo.

Abran un nuevo documento de 500×400px con fondo negro.

Crean una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) de tipo ((Fixed Size)) para trazar un círculo de 118×118px.

Rellenen la selección circular con el color #5F9AC1.

Hagan doble clic sobre la capa del círculo para abrir y aplicarle ((Layer Styles)).

((Inner Glow)).

((Gradient Overlay)).

Acepten los cambios.

Abran un nuevo documento de 265×150px con fondo transparente.

Rellenen el fondo con el color #252a38.

Crean una ((New Layer)).

Seleccionen ((Rounded Rectangle Tool)) de 15px de radio para trazar el siguiente rectángulo con cualquier color de relleno.

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

Crean una ((New Layer)).

Elijan el color #3a4056 como frontal y el #303548 como color de fondo.

Seleccionen ((Gradient Tool)) y tracen un degradado lineal de arriba hacia abajo usando los colores que les indiqué.

Con la selección todavía activa vayan a ((Select))-((Modify))-((Contract)): 1px.

Crean una ((New Layer)).

Rellenen la nueva selección con cualquier color.

Abran un nuevo documento de 300×250px.

Rellenen el fondo con el color #7c7c7c.

Crean una ((New Layer)).

Elijan el color blanco como frontal.

Seleccionen ((Rounded Rectangle Tool)) con un ((Radius)) de 40px y tracen la siguiente forma.

Hagan doble clic sobre la capa para abrir ((Layer Styles)).

((Drop Shadow)).

((Inner Glow)).

((Gradient Overlay)). Para este degradado usen los colores: #b7b7b7, #969595 y #ffffff.

Acepten los cambios.

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

Luego seleccionen ((Rectangular Marquee Tool)) de tipo ((Intersect With Selection)) y crean esta nueva selección.

Crean una ((New Layer)).

Rellenen esta selección de color blanco.

Hagan doble clic sobre la capa para aplicarle ((Layer Styles)).

((Drop Shadow)).

((Inner Glow)).

((Gradient Overlay)). Para este degradado usen los colores: #c0c0c0 y #eeeded.

Acepten los cambios.

Escriban el texto que quieran para el botón y le aplican los siguientes ((Layer Styles)).

((Drop Shadow)).

((Gradient Overlay)). Para este degradado deben usar los colores: #2280be, #2280be, #2876aa, #244c75 y #7294b7.

Este es mi resultado final.

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

Crean una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) con Alt + Shift apretados (aumenta proporcionalmente desde el centro) y dibujen una selección como la que ven abajo.

Hagan doble clic sobre esta capa para abrir la ventana de ((Layer Styles)).

((Inner Shadow)).

((Inner Glow)).

((Gradient Overlay)). Para este degradado usen los colores: #000000, #88a4bd y #ffffff.

((Stroke)). Y para este degradado usen los colores: #bcd5ee y #35424d.

Acepten los cambios y vean el resultado.

Crean una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) para dibujar una selección circular como la que ven abajo.

Luego la rellenan de negro.

Hagan doble clic sobre esta capa para abrir la ventana de ((Layer Styles)) y aplicarle ((Gradient Overlay)). Para este degradado van a usar los colores: #000000, #000000, #ffffff, #5298d8 y #000000.

Acepten los cambios.

Ahora vamos a rasterizar los dos circulos. Para ello hagan clic derecho sobre el nombre de la capa del primer círculo y en el menu que se despliega elijan ((Convert To Smart Object)). Vuelvan a hacer clic derecho y esta vez elijan ((Rasterize Layer)).

Repitan el paso anterior para el otro círculo.

Luego mantengan presionada la tecla Alt y hagan clic izquierdo del mouse entre medio de las dos capas. Esta zona aparece marcada en la siguiente imagen con una línea roja.

Crean otra ((New Layer)).

Con ((Elliptical Marquee Tool)) dibujen una selección circular como la que ven abajo.

La rellenan de blanco.

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

Acepten y vean el resultado.

Crean una ((New Layer)).

Dibujen una selección ovalada en la parte superior del botón.

La rellenan de color blanco.

Vuelvan a crear una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) y dibujen la siguiente selección circular en el centro del botón.

La rellenan con el color #212530.

Hagan doble clic sobre la capa para abrir ((Layer Styles)).

((Outer Glow)).

((Inner Glow)).

((Stroke)).

Acepten los cambios.

Nuevamente crean una ((New Layer)).

Seleccionen ((Elliptical Marquee Tool)) y dibujen otra selección circular en el centro del documento.

La rellenan de blanco.

Hagan doble clic para entrar a ((Layer Styles)).

((Inner Glow)).

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

((Stroke)).

Acepten los cambios.

Escribimos un texto sobre el botón.

Se paran sobre la capa de texto y vayan al menu ((Layer))-((Layer Style))-((Inner Shadow)).

Acepten los cambios para obtener este fantástico botón.

Abrimos un nuevo documento de 120×45px con fondo transparente.
Rellenamos el fondo con el color #4a4a4a.

Creamos una ((New Layer)).

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

Hagan doble clic sobre la capa del botón para aplicarle ((Layer Styles)).

((Drop Shadow)).

((Bevel and Emboss)).

((Gradient Overlay)).

((Stroke)).

Acepten estos cambios.

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

Con ((Rectangular Marquee Tool)) de tipo ((Subtract From Selection)) trazamos una selección de la mitad del botón hacia abajo.

Creamos una ((New Layer)).

Esta nueva selección la rellenamos de blanco y le reducimos la ((Opacity)) a 15%.

Ahora apreten Ctrl + Clic nuevamente en la capa del botón para activar su selección. Esta la movemos 1px hacia abajo.

Creamos una ((New Layer)) y la selección la rellenamos de blanco.

A esta capa le reducen la ((Opacity)) a 24%.

Muevan la selección unos píxeles hacia abajo y hacia la derecha como muestra la siguiente imagen.

Se paran encima de la capa con el nuevo relleno y apretan la tecla Suprimir.

Dupliquen esta capa (Ctrl + J).

Con la capa duplicada seleccionada vayan al menu ((Edit))-((Transform))-((Flip Horizontal)) y luego ((Edit))-((Transform))-((Flip Vertical)). La acomodan en la parte inferior del documento. Véanlo en la siguiente imagen.

Luego vayan a ((Layer))-((New Adjustment Layer))-((Curves)). Observen en la siguiente imagen como modifiqué la gráfica.

Vuelvan a apretar Ctrl + Enter para activar la selección del botón.

Crean otra ((New Layer)).

Vayan a ((Select))-((Modify))-((Contract)) (1px).

Y luego ((Edit))-((Stroke)). Coloquen los siguientes parámetros.

Seleccionen ((Erase Tool)) con los valores que aparecen abajo y borren sobre la base superior e inferior del botón.

Repitan los últimos pasos y coloquen el mismo brillo pero esta vez sobre los lados del botón.

Por último escriban el título del botón. Utilicé la fuente Arial Regular tamaño 16px.

Apreten botón derecho sobre la capa de texto y seleccionen ((Blending Options)).

((Bevel and Emboss)).

((Stroke)).

Una vez que aceptemos los cambios del texto tendremos este resultado final.

Antes de comenzar el tutorial les recomiendo aumentar de tamaño las imágenes que aparecerán a continuación ya que el botón es reducido y cuesta visulalizarlo.

Abrimos un nuevo documento de 120×50px con fondo transparente.

Rellenen el fondo con el color #807e7e.

Creamos una ((New Layer)).

Elegimos el color negro como frontal.

Seleccionamos ((Rounded Rectangle Tool)) de 10px y dibujamos un rectángulo como el que vemos abajo.

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

((Drop Shadow)).

((Bevel and Emboss)).

((Inner Glow)).

((Gradient Overlay)).

((Stroke)).

Acepten los cambios y vean el resultado parcial.

Crean una ((New Layer)).

Elijan el color eee1cd como frontal.

Seleccionen ((Line Tool)) de 2px de ancho y tracen una línea en la zona inferior del botón. Observen la siguiente imagen.

Hagan doble clic sobre la capa de esta línea para aplicarle los siguientes ((Layer Styles)).

((Inner Shadow)).

((Outer Glow)).

Acepten los cambios.

Crean una máscara. Para aplicarla vayan a ((Layer))-((Layer Mask))-((Reveal All)).

Elijan el color blanco como frontal.

Se paran encima de la máscara, seleccionan ((Erase Tool)) con los valores que aparecen en la barra de opciones de la siguiente imagen y borran sobre las puntas de la línea.

Escriban el texto del botón. Utilicé la fuente Franklin Gothic Medium de tamaño 13px.

Por último le aplicaremos al texto ((Layer))-((Layer Style))-((Blending Options)).

((Drop Shadow))-Dejen los valores que aparecen por defecto.

((Gradient Overlay)).

Acepten los cambios y vean el resultado final.

Abrimos un nuevo documento de 80×15px con fondo blanco.

Ahora vamos a ((Layer))-((Layer Style))-((Blending Options)). Le aplicaremos un ((Stroke)) al botón.

Volvemos a rellenar el boton con el color que quieran. Yo lo rellené de rojo.

Ahora con ((pencil tool)) pintamos otro borde pero esta vez de blanco. Les pongo la imagen abajo paraque tengan una idea de los que les digo.

Ahora busquen una fuente en internet llamada “Silkscreen”. Escriban el texto de su botón. También pueden agregar un icono al costado izquierdo del botón para que no quede tan vacío.

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

Empezaremos por crear un degradado de gris claro a blanco en forma vertical.

Vamos a hacer una ((nueva capa)).

Con ((Rectangular Marquee Tool)) creamos un cuadrado y lo rellenamos con el color 016cbc.

Apretamos Ctrl + Clic sobre la capa para activar la selección del cuadrado.

Ahora ((Select))-((Modify))-((Contract)) y ponemos un valor de 5px.

Vamos a hacer una ((Nueva capa)).

Sobre ella pasaremos a crear un degradado de blanco a transparente, de arriba hacia abajo.

Creamos una ((nueva capa)).

Con ((Elliptical Marquee Tool)) hacemos una circunferencia (observen la imagen de abajo) y apretando Alt + Ctrl + Shift nos quedará una selección como la que vemos en la siguiente imagen.

Luego trazamos el mismo gradiente que el anterior (blanco a transparente y de arriba hacia abajo). Si les quedó muy claro le pueden bajar la opacidad

Seleccionen ((Shape Tool)), elijan el dibujo de la carta de color, blanco ya que será un botón de “Contacto”.

Por último agregaremos el título al botón. (Tahoma, Bold, tamaño 11px).

A la capa de texto le aplicamos ((Layer))-((Layer Style))-((Blending Options)), marcamos ((Drop Shadow)).

Abirmos un nuevo documento de 440×110px con fondo transparente.

En la paleta de colores ponemos como color frontal el d8d8d8 y de fondo el color blanco.

Vamos a crearle un fondo al documento para que contraste con el botón. Seleccionamos ((herramienta degradado)) y creamos un ((Lineal Gradient)) de arriba hacia abajo.

Luego seleccionen ((Rounded Rectangle Tool))y dibujen la forma del botón, usen un ((radio)) de 12px, al final lo rellenan de negro.

Hagan doble clic sobre esta capa para abrir la ventana de ((Blending Options)).Aplicaremos Inner Shadow y Gradient Overlay.

En Inner Shadow usen el color 53e04c.

Para el degradado utilizaremos los colores 31d854 y 64df78

Nos quedaría así.

Ahora apretamos Ctrl + Clic sobre la capa de texto para que se nos active la selección. Luego vayan a ((Select))-((Modify))-((Contract)) y reduzcan la selección unos 5px.

Crean una ((nueva capa)).

Volvemos a seleccionar ((herramienta degradado)) y con la selección activa hagan un gradiente blanco a transparente de arriba hacia abajo exactamente como marca la flecha roja que vemos en la imagen.

Con ((Pen Tool)) crearemos un trazado como el que vemos en la siguiente image. Lo que vamos a hacer es crearle un efecto de reflejo ondulado.

Vayan a ((Select))-((Load Selection)) para activar la selección. Luego aceptar y apreten la tecla suprimir.

Reduzcan la ((opacidad)) a un 60% y cambien el modo de la capa a ((Soft Light)).

Por último escribiremos el título de texto. Elegimos la ((fuente)) Arial Bold de tipo Italic tamaño 24.

Hacemos click derecho a la capa del texto y en el menu desplegable seleccionamos ((Drop Shadow)). Copien los valores que aparecen a continuación.

Para darle una terminación más profesional a nuestro botón tendremos que aplicarle un reflejo al estilo Web 2.0. Así que duplicaremos solamente la capa del botón, lo colocamos pegado y debajo del primero.
Hacemos Ctrl + Click en la capa recientemente duplicada, creamos una ((nueva capa)) y sobre ella aplicamos un gradiente blanco a transparente de abajo hacia arriba.

Observen el resultado final.

Abrimos un nuevo docuemento de 140×140px con fondo gris oscuro.

Seleccionamos ((Rounded Rectangle Tool)) y con un radio de 5px crean un rectángulo relleno de negro.

Vamos a ((Layer))-((Layer Style))-((Blending Options)).

Les debería quedar así luego de aplicar ((Layer Styles)).

Hagan una ((Nueva capa)).

Creamos el triángulo de Play con ((Pen Tool)) y lo rellenan de negro.

Vuelven a ((Blending Options)) y aplican estos estilos.

Les va quedando asi?, entonces sigamos!

Por último seleccionamos ((Line Tool)) y con un radio de 1px trazen dos líneas negras, una sobre el contorno de la base del triángulo y otra sobre uno de los lados, exactamente el superior. Si este paso no les quedo claro aumenten la imagen que sigue a continuación para darse cuenta de los que les digo.

Ya tenemos en nuestro poder el famoso botón de Play de You Tube.

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

Creamos una ((nueva capa)).

Seleccionamos ((Rectangle Rounded Tool)) con un ((radio)) de curvatura de 8px.

Vamos a ((Layer))-((Layer Style))-((Blending Options)).

Luego de aplicados los ((Layer Styles)) nuestro botón debería estar quedando así.

Por último seleccionamos ((herramienta texto)) y escribimos el título del botón con la fuente Arial Bold tamaño 12px.

Aplicamos ((Layer))-((Layer Style))-((Drop Shadow)). Ponemos el color 7d0000. Distance 1/Spread 0/Size 0.

Ya tenemos nuestro botoón.