InicioHazlo Tu MismoTutorial: Crear un botón para tu web

Tutorial: Crear un botón para tu web

Hazlo Tu Mismo2/8/2014
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.


boton
tipografia -La tipografía que uso en los botones 

pagina -Para seguir el tutorial recomiendo Photoshop CS6 o CC.

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

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

Tutorial: Crear un botón para tu web [PhotoshopCC] -Puedes Seguirme , así verás mis demás aportes.
boton

1-Creamos un documento en Photoshop con estas especificaciones:

tipografia

pagina

2- Tendremos algo como esto:

puedes

traigo

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

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

boton

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

tipografia

pagina

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

puedes

traigo

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":

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

boton

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.

tipografia

pagina

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).

puedes

traigo

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

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

boton

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.

tipografia

pagina

11- Como resultado final obtendremos algo como esto:

puedes

traigo

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

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

boton
Datos archivados del Taringa! original
10puntos
108visitas
0comentarios
Actividad nueva en Posteamelo
0puntos
3visitas
0comentarios
Dar puntos:

Dejá tu comentario

0/2000

Autor del Post

E
Usuario
Puntos0
Posts10
Ver perfil →
PosteameloArchivo Histórico de Taringa! (2004-2017). Preservando la inteligencia colectiva de la internet hispanohablante.

CONTACTO

18 de Septiembre 455, Casilla 52

Chillán, Región de Ñuble, Chile

Solo correo postal

© 2026 Posteamelo.com. No afiliado con Taringa! ni sus sucesores.

Contenido preservado con fines históricos y culturales.