WebXiss - Blog de diseño en la web

Aqui presentamos otro tutorial para el diseño de botones para web


1. Generamos el lienzo de trabajo Abrimos Photoshop y generamos el lienzo de trabajo, en esta ocasión establecemos el tamaño del liezno a: 100px de ancho por 40px de alto y color de fondo blanco #ffffff.

2. Dibuamos el area del boton Seleccionamos la herramienta "Rectangulo redondeado" (U) y establecemos su radio a 5px, a continuación dibujamos el area del boton en el lienzo de trabajo.


3. Establecemos los estilos de capa Nos dirigimos al menú Capa >> Estilo de capa >> Opciones de fusión... y establecemos los valores como aparece en las imagenes:


4. Agregamos brillo al botón Seleccionamos la herramienta "Rectángulo redondeado" y establecemos un radio de 10px, dibujamos un rectando pequeño como se muestra en la imagen.


5. Cambiamos la opacidad de la capa Primero damos un clic derecho sobre la capa brillo y buscamos la opción "Raterizar capa" y damos clic sobre ella, una vez hecho esto nos dirigimos a la opacidad de la capa y la establecemos en 8%.

6. Añadimos texto Seleccionamos la herramienta "Texto" (T) y escribimos el texto que deseamos sobre el área de botón y establecemos el estilo de capa como aparece en la siguiente imagen.


Y terminamos nuestro botón para web el resultado es el siguiente:


Otros tutoriales de diseño web que te pueden interesar:

• Botones para web en Photoshop