Creacion de botones con photoshop

CREACIÓN DE BOTONES CON
PHOTOSHOP
BOTONES SENCILLOS
Con este tutorial, crearemos un botón que podremos usar en cualquier pagina web o aplicación
multimedia de un modo muy sencillo usando la herramienta photoshop.
Para realizarlo siga estos pasos:





Cree un archivo nuevo con el fondo de color blanco.
Sobre el dibujaremos la forma de nuestro botón, en este caso un
botón alargadode forma horizontal para un menú web.
Seleccione la herramienta Rectángulo redondeado.
Introduzca el radio de calado que desee para las esquinas, en este
caso 10 px y rellenelo del color que desee.

Nota: Si desea realizar el mismo del ejemplo, el color es: #A2C6A2





Seleccione la forma creada y cree una nueva capa (layer)
Sobre esta capa y con la forma seleccionada aplique undegradado
de ángulo tomando colores de la gama del verde en distintas
tonalidad para producir el efecto deseado.
Para darle un efecto más vistoso, jugaremos con los efectos de la herramienta: situado en la
capa donde tiene la forma, haga clic sobre los efectos de capa y juegue con ellos haciendo
pruebas hasta conseguir el efecto que desee.

En el caso del ejemplo, le hemos aplicado:

1Este es el efecto del botón hasta el momento.
Para añadir el texto del botón: seleccione la herramienta texto y haga clic sobre el botón. Introduzca el
texto que irá en el botón y seleccione la tipográfia más adecuada.
Este es el resultado final del botón. Recuerde que puede variar formas y colores hasta conseguir
modelos de gran originalidad.

CREAR BOTONES PARA WEB 2.0
En este sencillotutorial vamos a ver cómo crear botones con efecto tridimensional en Photoshop. Se
trata de un práctico tutorial de diseño web que podréis aplicar a la hora de mejorar la estética de
vuestra página web 2.0.
Lo primero que vamos a hacer es crear un documento nuevo de Photoshop con las dimensiones
aproximadas del botón (150 x 50 px aproximadamente).
El siguiente paso será crear una nueva capa(capa > nueva > capa).
Ahora crearemos una forma Rectángulo redondeado con un radio aproximado de 6 px. Es importante
marcar dentro de las opciones de herramienta el icono rellenar píxeles para que la figura quede
coloreada, aunque de momento el color no tiene importancia.
2

El siguiente paso es acceder a las opciones de fusión de la capa. Para ello clicaremos con el botón
derecho sobre lacapa en la paleta capas, seleccionaremos Opciones de fusión y activaremos los
siguientes parámetros:
-

Superposición de degradado: Para establecer las pautas del degradado debemos
hacer doble clic sobre la miniatura del mismo. De esta forma accedemos a los
parámetros, que estableceremos tal y como se ve en la imagen. (2 nodos de gris al
principio y en el centro y 1 nodo negro al final)-

Trazo: Con grosor 1, de tipo exterior y color gris.
Brillo interior: Color blanco, opacidad 30%, suavizado, tamaño 10, rango 50. (ver
imagen).

3

Ahora vamos a crear el reflejo. Para ello insertamos una nueva capa y vamos a dibujar otro rectángulo
con borde redondeado, esta vez de color blanco, en la parte superior de nuestro botón.
Para integrarlo con el botón vamos a utilizar lasposibilidades que nos ofrece la máscara rápida.
Activamos la función máscara rápida desde la barra de herramientas y, con la herramienta degradado y
colores blanco y negro en la paleta, trazaremos una línea vertical desde la parte superior del botón
hacia el centro. Nos debe quedar algo similar a la siguiente imagen:

4

Una vez hecho esto desactivamos la máscara rápida para volver al modonormal (vemos que queda una
selección). Ahora pulsamos la tecla suprimir y vemos cómo queda un degradado de opacidad en el
reflejo, es decir, la parte superior queda nítida y a medida que se acerca al centro va degradando a
transparente. Si no quedamos del todo satisfechos con el efecto podemos reducir un poco la opacidad
de la capa que contiene el reflejo.
Por último vamos a añadir el...