jueves, 5 de junio de 2008

Tutorial: Botones web estilo 2.0

Para no ser los únicos, nosotros también queremos estar a la vanguardia de lo que a webs 2.0 se refiere, y para empezar que mejor que crearnos nuestros propios botones con ese estilo.

Navegando por la red encontré un fantástico tutorial de cómo crear botones con efecto de degradado y resplandeciente muy 2.0. Lo expongo aquí de manera traducida y matizando algunos aspectos para llevarlo a cabo.

En principio necesitamos el Adobe Photoshop para este tutorial he utilizado la version CS2, por lo de más cada uno es libre de experimentar con distintas configuraciones, formas, colores y demás.

  • Abra el programa Photoshop y cree un nuevo documento acorde a las dimensiones que desee para su botón.


  • Haz clic en la herramienta con la forma que desees crear tu botón, en este ejemplo utilizaremos la elipse.

  • En la nueva capa creada hacemos clic derecho y pinchamos en Opciones de fusión.

  • Activamos la casilla Superposición de degradado eligiendo el degradado que más nos guste.

  • También activamos la opción de Trazo eligiendo el color y el tamaño que más nos agraden.

  • Por último activamos el Resplandor interior, aplicando un Modo de fusión normal y por lo demás tanto la opacidad el tamaño o el color queda a su disposición.

  • Por otro lado como ya tenemos configurado lo que va a ser en si nuestro botón, creamos otra forma igual a la que eligieron, la cual será el que le dé el efecto resplandeciente.

  • Lo hacemos de menor altura pero aproximadamente del mismo ancho y lo colocamos donde queramos que incida el reflejo. Posteriormente hacemos clic derecho en la capa y pinchamos en Resterizar capa.

  • Añadimos una Máscara rápida.

  • Y con la herramienta degradado, creamos un gradiente de dos colores para crear una ligera transparencia en uno de los extremos.

  • Lo último que nos queda es añadir el texto que queramos e insertar algún icono si queremos. Obteniendo el resultado final.


Fuente: Iris Design

0 Comentarios:

Publicar un comentario