skip to main |
skip to sidebar
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