Tutorial: Crear un botón para tu web [PhotoshopCC]




-Bienvenidos a este nuevo post , esta vez les traigo un tutorial propio sobre como crear un botón en photoshop para usarlo por ejemplo en una página web o en un post.



 -La tipografía que uso en los botones puedes descargarla acá.

 -Para seguir el tutorial recomiendo Photoshop CS6 o CC.

 -En caso de link caído avísenme por MP.

 -Al final , si te gusta el post puedes dejar puntos, añadirlo a favoritos y también compartirlo.

 -Puedes Seguirme , así verás mis demás aportes.


1-Creamos un documento en Photoshop con estas especificaciones:





2- Tendremos algo como esto:





3- Luego nos dirigiremos a la herramienta de formas y seleccionaremos rectángulo redondeado: 





4- Cuando hayamos seleccionado la herramienta vamos al documento y cremos un rectángulo así:





5- Cuando tengamos la forma creada vamos a la parte superior para establecer el color y el trazo de nuestro botón:





6- Luego de que tenemos el color y el trazo de nuestro botón , vamos a añadirle un texto, para esto vamos a la herramienta texto horizontal (o presionamos la tecla "T"):





7- Vamos a proceder a crear el texto dando clic afuera del botón (en la parte blanca que es el fondo) , escribimos el texto y lo movemos a donde creamos que esté centralizado, también podemos ir a la parte superior (como en el fondo del botón) para cambiar el color del texto.





8- Ahora quiero que presten mucha atención, vamos a proceder a eliminar la capa de fondo que tenemos en la pestaña capa, la arrastraremos hasta el bote de basura que está en la esquina inferior derecha de la pestaña, hago esto para que la imagen al ser guardada en formato PNG guarde transparencia y no tenga el fondo blanco, y así los bordes quedarán perfectamente redondeados en las esquinas (esto es opcional).





9- Luego procederemos a guardar nuestro botón, iremos al menú ARCHIVO--> GUARDAR COMO:





10- Nos saldrá una ventana como esta en la que pondremos en la opción "TIPO" .PNG , y en nombre el que deseemos , luego haremos clic en guardar.





11- Como resultado final obtendremos algo como esto:







-Esto fue todo, espero que les haya sido de ayuda y que también les haya gustado.





Tutorial: Crear un botón para tu web [PhotoshopCC]
50 Puntos Score: 5/10
Visitas: 825 Favoritos: 8
Ver los usuarios que votaron...
8 Comentarios Tutorial: Crear un botón para tu web [PhotoshopCC]
@The_Seeker Muchas Gracias!!    
Simple y Elegante muy bueno amigo  
@.J.N.1. Gracias por pasar!!
Igual que si lo haces en paint
se ve muy limpio *-*
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!