Parte 1 Botn Circular en Photoshop Botn con Estilos en Photoshop Botn Cuadrado en Photoshop Botn de Agua (otra manera)

era) en Photoshop Botn de Agua en Photoshop Botn de Cristal en Photoshop Botn de Goma en Photoshop Botn de Insercin en Photoshop Botn de Men en Photoshop Botn de Metal en Photoshop Botn de Plstico (otra manera) en Photoshop Botn de Plstico en Photoshop Botn Estilo Mac en Photoshop Botn Interior en Photoshop

Botn Circular en Photoshop Crea una nueva imagen de 200 X 200 px con fondo blanco, en modo RGB (RVA en castellano) Crea un nuevo layer Layer > New > Layer Toma la herramienta Eliptical Marquee y crea una seleccin circular sobre el Nuevo Layer con las siguientes caractersticas: Feather = 0 px Anti-alised = Verificado (con tilde) Style = Fixed Size Width = 160 px Height = 160 px

Aplica un Degradado con estas caractersticas:

Te quedara algo asi :

La siguiente etapa es crtica. Se preciso. Select > Modify > Contract Contract By = 15 px Select > Modify > Smooth Sample Radius = 20 px Aplica el degradado nuevamente, solo que esta vez en direccin contraria y proporcin a esta nueva seleccin que es mas pequea.

Repetimos la dosis, pero esta vez con pequeas variaciones Select > Modify > Contract Contract By = 5 px Select > Modify > Smooth Sample Radius = 20 px Este paso es opcional. Cuestin de gustos. Select > Feather Feather Radius = 1 px (Opcional) Rellenamos la seleccin por ltima vez con la direccin que usaste la primera ocasin.

Hasta este momento tienes un bonito botn, pero sin vida. Pues hay que drsela. Primero al centro, que ya esta seleccionado Edit > Fill

Image > Adjust > Hue / Saturation Colorize = Verificada (con tilde) Hue = 0 Saturation = 100 Lightness = 0

Ahora el borde Select > Inverse Image > Adjust > Hue 7 Saturation Colorize = Verificada (con palomita) Hue = 5 Saturation = 70 Lightness = 0 Deselecciona Select > Deselect

Para Fondos Claros: Carga la seleccin de tu botn Select > Load Selection Channel = Layer 1 Transparency Crea un Nuevo Layer y ponlo entre el Layer 1 y el Background Layer > New > Layer Rellnalo de negro y difumnalo Select > Deselect Filter > Blur > Gaussian Blur Radius = 2-3 px

El resto corre por tu cuenta

Botn con Estilos en Photoshop Abre un nuevo documento de 210 X 210 con fondo negro, en modo RGB (RVA en castellano) Crea un nuevo layer - Layer > New > Layer Toma la herramienta Selection y crea un circulo con los siguientes. parmetros: - Feather = 0 px - Anti-alised = Verificado (con palomita) - Style = Fixed Size - Width = 130 px Height = 130 px Y rellenamos de Blanco con la herramienta Paint Bucket, Debemos ver esto.

Deselecciona Select > Deselect Ahora viene lo bueno, usando los estilos de capa de Photoshop obtendremos el resultado final. simula los parmetros de las imgenes. - Layer > Layer Style > ...

Y eso es todo.

Botn Cuadrado en Photoshop 1) Hacemos una nueva Capa: Ctrl+N Con la herramienta de la seleccin rectangular. Mantenemos la tecla mayscula y hacemos un cuadrado pequeo.

2) Pulsamos "D" y luego "X" en el teclado para poner en primer plano color blanco y fondo negro. 3) Seleccionamos la herramienta de degrad. Mantenemos la tecla mayscula y pulsamos el botn arriba en la esquina izquierda y arrastramos un poco pasando la parte inferior de la esquina derecha como se muestra en la figura.

4) Select>Modify>Contract . Aproximadamente 5 y pulsamos el botn OK. Vamos a Select>Feather , entramos 1 y pulsamos el botn OK.

5) Luego elegimos la herramienta degrad y llenamos como en el Paso 3, pero a la inversa de abajo hacia arriba. Ahora Deseleccionamos: Ctrl-D

6) Luego colorizamos el botn: Yendo a Image >Adjust> Hue/Saturation . Tildamos la casilla donde dice "Colorize." Saturacin 70. Movemos el Color hasta que encontremos uno que nos gusta.

7) Por ltimo agregu una sombra yendo a la Sombra de Layer>Effects>Drop .

8) Agregarle lo que ustedes quieran!

Botn de Agua (otra manera) en Photoshop Abre un nuevo documento de 150 X 150 px con fondo blanco, en modo RGB (RVA en castellano) Crea un nuevo layer - Layer > New > Layer Toma la herramienta Heliptical Marquee - Feather = 0 - Antialias = Verificado - Style = Fixed Size - Width = 100 px Height = 100 px y crea una seleccin circular con los siguientes parmetros:

Ahora con la herramienta de Degradado Este es el gradiente usado

y aplicamos de arriba haca abajo, dentro de la seleccin.

y este el resultado

Sin perder la seleccin, crea un nuevo Layer - Layer > New > Layer Reduce la seleccin en 5 px. - Select > Modify > Contract Aplica un poco de Feather - Select > Feather - Radius = 5 px Ahora pon al blanco como tu color de frente, luego, con la herramienta Gadient selecciona Foreground to Transparent, como ves en la imagen.

Deselecciona - Select > Deselect Y obtienes este que es un muy bonito botn de agua al al cual ahora nos resta agregarle un poco mas de realismo. Posicinate sobre la capa del gradiente azul, y aplica una ligera sombra.

Layer > New Layer Style > Drop shadow Aplica los siguientes valores:

Y llegamos a un primer resultado.

Si tu botn lo usaras sobre un fondo con textura solo reduce la transparencia de la capa del gradiente azul a valores de entre 90 y 80%, en este caso se redujo a un 85%.

Botn de Agua en Photoshop Vamos a crear un espectacular botn que aparentar estar hecho con agua. 1. Crea un nuevo dibujo y en "Channels" haga con la ayuda de "Rectangle Marquee Tool" un rectangulo.

2 . Luego haga "Filters > Blur > Gaussian Blur" con "radius=9.2 pix."

3. Ahora nos trasladamos a "Image>Adjust>Levels". Y hacemos de acuerdo al dibujo de abajo.

Nuestro boton ya esta casi listo.

4 . Presionando "Ctrl" hagan click en el canal "Alpha 1". Luego volvemos a Layers. Crea una nueva capa (Ctrl+Shift+N) y pinte la seleccion con el color azul (N= 006BFD)

5. Ahora use el instrumento "Rectangle Marquee Tool" y presionando "Shift" traslade lo seleccionado con botones "Arriba" "Abajo". Luego presionando "Ctrl+Alt " haga click en "Layer 1".

6. Ahora de vuelta presionando "Shift" y el boton "Abajo" en su teclado para trasladar su seleccion abajo. Crea una nueva capa "(Ctrl+Shift+N)" "Layer 2". Presione "D" y luego "X" para elegir el color.

7. Ahora vamos a "Gradient Tool". Luego regule la intensidad de color de acuerdo al dibujo de la derecha. El "gradient" tiene que tener lo siguiente "Foreground to Transparent" .

8. Pintamos la seleccion con el "gradient". Saque la seleccion (Ctrl+D). Luego haga una copia de la capa (Layer > Duplicate Layer) y haga "Edit > Transform> Rotate 180". Trasladamos la seleccion abajo. Cambiamos "Layer" de "Normal" a "Color Dodge" con opacity "Layer 2 Copy" igual a 62.

9. Haga click en "Layer 2 Copy" y vaya a Filters > Blur > Gaussian Blur" con radio de 1.6 pix. Solo queda hacer la sombra "Layer>Effects>Drop Shadow". Eso es todo! Nuestro boton de agua esta listo!

Botn de Cristal en Photoshop Abrimos una imagen de fondo blanco, hacemos una capa nueva y con la herramienta de marco rectangular seleccionamos un rectangulo mas o menos fino depende de como queramos el botn y nos vamos a seleccin>modificar>suavizar marcamos 5 pixels o mas dependiendo del tamao del botn y lo rellenamos de negro:

Bien ahora lo mas entretenido, nos vamos a opsiones de fusin en la capa del botn y configuramos siguiento estos pasos:

A continuacin procedemos a modificar los parmetros de la sombra para darle volumen. Los parmetros se pueden ver en la imagen que viene justo debajo:

A continuacin aplicaremos las opciones de Bisel y Relieve que veremos en la imagen que hay debajo. A partir de aqu el botn ya tendr buen aspecto.

En los siguientes dos pasos aplicaremos satinado y superposicin de colores a nuestro botn. Ya casi hemos llegado al final.

Y ya esta, ya tenemos nuestro botn de cristal, ahora dependiendo de la capa de fondo le daremos un

toque diferente:

Supongo que te habras dado cuenta de las posibilidades que tiene este tutorial no?

Botn de Goma en Photoshop Vamos a realizar un botn que aparentear estar hecho de Goma en unos sencillos pasos. Para ampezar abrimos el fondo donde queremos poner este tipo de botn:

En una capa nueva. Cojemos la herramienta de marco eptico y manteniendo pulsada la mayscula hacemos un cculo perfecto que lo rellenaremos con la herramienta de degradado radial de esta forma:

Dejamos la seleccin aun, ya que ahora nos tenemos que ir a seleccin>modificar>contraer y lo ajustamos a 10 pixel en nuestro caso (en tu caso depende de como hayas hecho de grande el botn) y rellenamos la seleccin ahora mas pequea con el graduado radial en una esquinita para que nos quede este efecto:

Bien ya tenemos casi hecho nuestro botn, ya solo configuramos lo siguiente en opciones de fusin en la capa donde tenemos el botn y listo:

Aplicamos los estilos de bisel y relive para que el botn sobresalga del plano y tenga ms aspecto de botn.

Los ajustes dependiendo del botn podran variar un poquitin , de manera que ya tenemos hecho nuestro botn de goma

Botn de Insercin en Photoshop Abrimos una imagen de 300x100 pixels de fondo blanco, hacemos una barra con la herramienta de degradado y abrimos una capa nueva donde hacemos una seleccin rectangular como se ve en la siguiente imagen:

Ahora nos vamos a seleccin>modificar>suavizar y lo ajustamos a 3 pixels:

Vemos que nuestro rectngulo se redondea y lo rellenamos con la herramienta de degradado, despues de rellenarlo deseleccionamos y hacemos dos barritas de 1pixel de ancho a los lados del botn as:

Ahora nos vamos a opciones de fusin en la capa del botn y las barritas y lo configuramos siguiendo estos pasos:

Aplicamos los estilos de bisel y relive para que el botn sobresalga del plano y tenga ms aspecto de botn.

Y ya esta ya solo nos queda poner nuestro texto dentro del botn ajustarlo y en la capa del texto irnos a opciones de fusin para configurarla asi:

Y de END !! ya tenemos nuestro botn de insercin acabadoooo

Botn de Men en Photoshop Vamos a realizar una botonera, o men, en forma horizontal, como podemos ver justo debajo de este texto. Como viene siendo habitual, todo se har paso a paso, de forma sencilla.

1. Crea un nuevo dibujo con el tamano 500x40 pix.

2. Haga una nueva capa y con Rectangular Marquee Tool haga una seleccion.

3. Pinte la seleccion con Gradient Tool.

4. No sacando la seleccion, haga una nueva capa y vaya a Select > Modify > Contract 3 pix. Ahora disminuimos nuestra seleccion y ahora hay que bajarla por 3 pix. con la tecla "abajo".

5. Pinte la seleccion con Gradient Tool.

6. Haga una nueva capa y con Rectangular Marquee Tool haga una seleccion para los botones.

7. Pinte la seleccion con Gradient Tool.

Eso es todo! Solo falta hacer sombras. Vaya Layer > Layer Style > Drop Shadow o Bevel and Emboss.

Botn de Metal en Photoshop 1. Haga un nuevo dibujo con el tamao aproximado de 240*70 pix., y luego crea una nueva capa. Con Restangular Marquee Tool haga un rectangulo. Con la ayuda de Reflected Gradient pinte asi como se muestra en el dibujo de la derecha. Despues saque la seleccion (Ctrl+D).

2. Ahora haga otro rectangulo, pero mas pequeo.

3. Vaya a Channels y haga un nuevo channel Alpha 1. Pinte la seleccion con color blanco. Despues Deselect (Select > Deselect). Y ahora Filter > Blur > Gaussian Blur > Radius (5 pix., el radius depende del tamao del boton).

4. Ctrl+L con las parametros de acuerdo al dibujo de abajo. 5. Apretando Ctrl haga click en el channel y vaya al menu de capas. Haga una nueva capa (Ctrl+Shift+N) y pintela con gradient de color negro-blanco.

6. Haga una nueva capa (Ctrl+Shift+N). Luego Select > Modify > Contract=2 pix. Haga Set Foreground de color que quiera, pero Set Background tiene que ser blanco (R:255 G:255 B:255). Luego tome Linear Gradient Tool y pinte la seleccion de arriba por abajo. Ahora haga Edit > Stroke con los siguintes parametros : Width: 1 px Color:negro Location: Inside Mode: Normal Opacity: 100 %.

7. Haga una nueva capa (Ctrl+Shift+N). Con Restangular Marquee Tool y apretando ALT elimine la parte de abajo de la seleccion y luego Select > Modify > Contract : 2px. Con Linear Gradient Tool pinte la seleccion de arriba por abajo. Set Foreground R:255 G:255 B:255 y Set Background de color que quiera. Ahora haga Duplicate de la capa donde tiene la seleccion. Edit > Transform > Rotate=180. Esto hicimos para poner la parte de arriba por abajo. Hay muchos metodos para hacer un boton de plastico, pero yo les

digo el metodo mas facil.

Esto es lo que tenemos como resultado final, con color azul y con color rojo!

Botn de Plstico (otra manera) en Photoshop Abre un nuevo documento de 250 X 250con fondo blanco, en modo RGB (RVA en castellano) Crea un nuevo layer Layer > New > Layer Toma la herramienta Selection y crea un circulo con los siguientes. parmetros: Feather = 0 px Anti-alised = Verificado (con tilde) Style = Fixed Size Width = 200 px Height = 200 px

Guarda la Seleccin Select > Save Selection Nmbrala Seleccin "uno" o como quieras

Rellnalo con color blanco con el Paint Bucket . Crea un Nuevo Layer Layer > New > Layer Toma la Herramienta Radial Gradient y rellena el circulo:

Crea un Nuevo Layer

Layer > New > Layer Toma la herramienta Radial Gradient y rellena el circulo

Ahora ajusta la opacidad de estos dos ltimos layers al 75% Crea otra Nueva Capa Layer > New > Layer Reduce la seleccin Select > Modify > Contract Contract by: 10 px. Toma la herramienta Eliptical Marquee Feather = 0 px Anti-alised = Verificado (con palomita) Style = Fixed Size Width = 250 px Height = 250 px Con la tecla Alt presionada corre del extremo inferior derecho hacia el superior izquierdo formando una luna casi menguante como ves en la imagen. y ajusta sus parmetros as:

Aplica un poco de Feather

Select > Feather Radius = 5 Rellena la seleccin de color blanco y esto resultar.

Duplica la capa de la media luna. Layer > Duplicate Layer Luego presiona Ctrl + T y gralo, bjalo y redcelo hasta quedar como ves.

Presiona Enter para quitar el recuadro de Transformacin y Deselecciona presionando Ctrl + D. Reduce la opacidad de la luna superior al 90% y al 60-70% el de la luna inferior (menor). Ahora colcate en la primera capa que creaste y carga la seleccin que gravaste al inicio del tutorial. Select > Load Selection Selection = Uno (en mi caso) Rellnala con el Color que desees para tu botn que es rojo en este caso.

Hasta este punto luce extraordinariamente bien, pero le falta un poco de realismo. Sobre esta misma capa aplica Sombra y Bisel Layer > Layer Style > Drop Shadow Layer > Layer Style > Bevel and Emboss No hagas ningn cambio, en ambos casos los parmetros son correctos. Y si no lo cree, echa un vistazo al agregarle un poco de letras.

Botn de Plstico en Photoshop Abre un nuevo documento de 100 X 80 con fondo blanco, en modo RGB (RVA en castellano) Crea un nuevo layer - Layer > New > Layer Toma la herramienta Rounded Rectangle Luego forma el botn como ves en la imagen. y selecciona el color deseado (preferentemente oscuro).

Con la herramienta Magic Wand

toca la figura para seleccionar el campo.

Aplica un efecto Blur - Filter > Blur > Gaussian Blur - Con un valor de 4 (ajustable a tus necesidades)

Sin perder la seleccin, crea un nuevo Layer - Layer > New > Layer Toma nuevamente la herramienta Rounded Rectangle y selecciona el color que deseas para el brillo

(regularmente es blanco o colores muy claros) y crea una lnea gruesa como ves en la grfica.

Difumnala con Blur - Filter > Blur > Gaussian Blur - Con un valor de 4

Crea otro Layer Layer > New > Layer Dibuja una segunda lnea con el mismo color claro, solo que esta vez en la parte inferior del botn.

Desactiva el Layer Background como lo muestra la primera imagen. Luego une el resto de los Layers - Ctrl + Shift + E

Reduce la seleccin - Select > Modify > Contract - Con un valor de 2 Ahora asegurate de que el botn este perfectamente redondeado - Select > Modify > Smooth - Con un valor de 3 - 4 Invierte la seleccin - Ctrl + Shift + I Presiona la tecla Supr (delete) para borrar. Deselecciona luego - Crtl +D

Y listo. He all el susodicho Botn Plstico. Puede funcionar con casi cualquier combinacin de color. Para el texto selecciona preferentemente colores que contrasten con el azul.

Si le agregas sombra (Layer > Layer Style > Drop Shadow) puede agradarte mas.

Botn Estilo Mac en Photoshop Creamos una imagen del tamao que queramos, yo le he hecho de 200 x 200 y dentro creamos un cuadrado pero con las esquinas redondeadas, para eso utilizaremos esta herramienta y hacemos el .

rectangulo con las esquinas redondeadas no muy grande. En el panel de Path clicamos en este boton Lo rellenamos de cualquier color . Y ya podemos empezar a darle estados de fusion [ Bleding options ]

Aadimos sombra exterior muy suave y corta, que prcticamente no se notar y luego, la sobra interior, que se apreciar mucho ms que la sombra exterior.

Finalmentente aadimos un degradado y efecto de movimiento para acabar con un botn al estilo Mac.

Resultado... Fcil no?

Botn Interior en Photoshop Crea una imagen de 125 x 125 px con fondo blanco, en modo RGB (RVA castellano) Crea un Nuevo Layer - Layer > New > Layer Toma la Herramienta Marco Elipse y crea una seleccin circular sobre el Nuevo Layer con las siguientes caractersticas: - Feather = 0 px - Anti-alised = Verificado (con tilde) - Style = Fixed Size - Width = 100 px y - Height = 100 px.

Aplica un Gradiente Radial parecido a este..

Ahora tienes algo as

Guarda la seleccin - Select > Save Selection Crea una Nueva Capa - Layer > New Layer Rellnalo con color negro con la herramienta Paint Bucket

Toma ahora la Herramienta Elliptical Marquee prsiona Supr (delete)

y crea una seleccion como ves en la imagen, luego

Deselecciona - Select > Deselect Desenfoca ahora - Filter > Blur > Gaussian Blur - Radius = 15 px

Cambia la opacidad esta capa al 50% Carga su seleccin que guardaste - Select > Load Selection Invierte la seleccin - Select > Invert Presiona Supr (delete) para eliminar el exceso despus del blur.

Invierte la seleccin una vez mas - Select > Invert Crea un Nuevo Layer

- Layer > New > Layer En la paleta de Layers baja este ltimo y colcalo entre el Layer 1 y el Background como se te muestra en la imagen.

Aumenta el tamao de la seleccin - Select > Modify > Expand - Expand By = 3 px

Rellnalo con color negro con la herramienta Paint Bucket Deselecciona - Select > Deselect Y finalmente desenfoca un poco - Filter > Blur > Gaussian Blur - Radius = 3 px