Crear un Botón de Agua | Solo Photoshop

Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Anunciar en SoloPhotoshop

Crear un Botón de Agua | Solo Photoshop

Tutorial Photoshop de Interfaces y Diseño Web

Tutorial por Jorge Antonio

Nuevo Tutorial de Jorge Antonio en el que nos muestra los pasos a seguir para crear un botón de agua.

1; Primero creamos un archivo nuevo con fondo transparente, yo lo hice de 80 X 80 pixeles, y use el zoom para que se notará mejor, una vez creado vamos a la herramienta MARCO ELIPTICO y creamos un circulo, yo use el color que se muestra abajo en la imagen.

´tutorial Photoshop Botón de agua 01

´tutorial Photoshop Botón de agua 02

2; Ahora elije el siguiente color y degradan la imagen de la siguiente forma, de abajo hacia arriba. Señale con una línea roja la distancia que use para el degradado.

´tutorial Photoshop Botón de agua 03

3; Luego ve hacia filtro/Desenfocar/Desenfoque Gaussiano y elegimos el “radio” que se muestra abajo y pongo una imagen de como debe de quedar.

´tutorial Photoshop Botón de agua 04

4; Ahora escojemos el siguiente color que se muestra abajo, y seleccionamos la herramienta de DEGRADADO (Degradado Lineal). y muestro con una línea roja la distancia del degradado que use, De la mismo forma de abajo hacia arriba.

´tutorial Photoshop Botón de agua 05

5; Despues vamos a filtro/Desenfocar/Desenfoque Gaussiano. y elegimos el siguiente radio. Puse una imagen de como debe de quedar.

´tutorial Photoshop Botón de agua 06

6; Vamos a la pestaña selección, y pulsamos (Deseleccionar).creamos una nueva capa y vamos a la herramienta marco elíptico,hacemos un ovalo mas o menos del tamaño como lo muestra la imagen de abajo y lo acomodamos.

Luego escojemos el color blanco,

´tutorial Photoshop Botón de agua 08

Ahora degradamos de arriba hacia abajo, puse una imagen de como debe de quedar.

´tutorial Photoshop Botón de agua 09

7; Por ultimo vamos a la capa 1, con la que trabajamos al principio, la seleccionamos y ponemos los siguientes valores a la capa,

´tutorial Photoshop Botón de agua 10

8; Este es el resultado final,y lo pueden agregar fácilmente a sus webs. espero les haya gustado y entendido, bye.

´tutorial Photoshop Botón de agua 11

Comentarios de Crear un Botón de Agua | Solo Photoshop

↑ Tutorial

cielosepultado

2007-11-26 16:43

gracias, im learning y esto is gonna help me a lot!!M
jamart41

2007-11-28 17:42

de argentina,gracias,muy bueno.JUANM
Juan Mauricio

2007-11-30 11:02

Muy creativo y excelenteM
mod

2007-12-01 16:24

esta bueno el tutorial pero una cosa cual es el marco eliptico ni weba q esM
nano84

2007-12-02 17:10

Jorge antonio, muy bueno el tutorial, pero tengo un inconveniente, la verdad que no uso photoshop pero estoy aprendiendo de a poco. Cuando creo la nueva capa y quiero utilizar la herramienta de degradacion lineal me lo hace en forma cuadrada y no circular como te aparece a vos. Quiero saber que estoy haciendo mal. Muchas GraciasM
kike_hbk

2007-12-03 10:13

Muy buen tutorial carnal, muy detallado y util... MIS PEORES DESEOS Y KE SUEÑES CON LO PEOR Kike 619M
robjosh

2007-12-14 14:52

esta super chido la gota de aguaM
C-ZAR

2007-12-17 14:06

FIJATE QUE ESTOY EN ESTA PAGINA PORQUE LO TUTORIALES EN REALIDAD SON MUY EXPLICATIVOS Y FACILES DE SEGUIR. MUY BUENO EL TUTORIAL PERO FIJATE QUE TENGO EL MISMO PROBLEMA QUE NANO84... SALUDOSM
jamm

2007-12-19 20:53

para NANO84 y C-ZAR lo que puede estar sucediendo es que no tienen seleccionado el circulo, en circulo debe estar seleccionado de lo contrario degradara todo el cuadro. para seleccionarlo desde el principio, se puede usar esta forma,(OJO, esto deve ser antes de crear la primera capa) primero van a varita magica que se encuentra entre las herramientas de arriba y es muy facil de identificar, y hacen un clic en la zona azul del circulo, y listo tienen la zona seleccionada, ahora si pueden crear la primera capa y seguir trabajando, espero haberlos ayudado. bye, y feliz navidad y feliz año nuevo a todos, Bye!!M
otreb

2007-12-21 11:37

hola soy nuevo en este foro y un aprendiz en photoshop, y esta pagina me ayuda muchisimo M
andreirogalik

2007-12-27 14:26

¿¿¿Como pener el fondo transparente???M
anmn

2007-12-27 15:12

no tengo idea de como hacer eso soy ueva aqui y la verdad no se ni de donde sacan todo tengo que bajar un programa?? ayudenme porfavor adiosM
andreirogalik

2007-12-27 18:47

¿¿¿Como pener el fondo transparente???< ahora ya se como, no hacefalta que me lo digan xD.M
halio14

2008-01-05 20:15

Gracias por el tuto, se ve medio complicado, aver que sale...M
donking

2008-01-21 13:31

Muy bueno, facil y creativo. FELICITACIONES !!!M
ery

2008-02-26 18:01

Esta chido tu tutorial, lo que me gustaria es que implementes mas...GraciasM
vikma

2008-03-13 14:23

muy bueno,entendible, aunque me omo un poco de tiempo...graciasM
mike890

2008-03-27 22:50

super bien explicado y entedible Gracias n_nM
phelipe

2008-04-03 10:47

eh que bn facil rapido y divertido jejeM
elChapin

2008-04-03 20:23

Esta bien explicado, gracias te quedo bien bien.M
neo_arenivas

2008-08-24 23:56

ke buen trabajo, muy sencillo y muy chido, sigue asi. M
cammii

2008-12-08 22:09

facil el tuto,graciasM
neilhenao

2009-04-27 08:09

Bien facil y prático. GraciasM
Alitan

2009-06-19 00:31

Muchas Gracias, Jose Antonio. muy PracticoM