| Diseñando un boton web al estilo 2.0 |
|
|
| Escrito por leitox | |||||||
|
Actualmente, con el auge del diseño de sitios web al estilo 2.0, nos vemos casi obligados a encontrar, y a aprender nuevas formas y técnicas de diseño... En fin, este tutorial va a partir de un rectángulo redondeado simple, y va a llegar a ser algo totalmente innovador... Lo primero que tenemos que hacer, es abrir el Photoshop, en nuestro caso el CS2, que es el que recomendamos para trabajar... Vamos a la parte de herramientas, y creamos una forma de rectángulo redondeado, en el radio podemos ir especificando el que queramos, depende de nuestro gusto para diseñar... Una vez hecho el rectángulo, nos quedará lo siguiente:
Luego hacemos click con el botón derecho en la capa del rectángulo y vamos a Blending Options (2º Opción desde arriba) y Seleccionamos Gradient Overlay
Elegimos el 1º y 2º color como #434343 y el 3º color #000000 Luego vamos a la parte de Stroke y elegimos 1px y color #363636 
Seteamos el Inner Glow con los parámetros de la imágen.
Y nos quedará lo siguiente:
Creamos otro rectángulo redondeado que lo llamaremos Glare y lo disponemos asi
Luego presionamos el click derecho en la capa de este nuevo rectángulo y presionamos Rasterize Layer, y vamos luego a editar en modo de Máscara Rápida (Quick Mask) y con la herramienta de degradado creamos algo asi:
Luego de salir del modo Quick Mask, quedará una selección hecha, y presionamos la tecla Suprimir (Del o Supr), y lograremos este efecto:
Creamos una nueva capa de texto, donde, por ejemplo introducimos "Feeds RSS" y le agregamos un iconito de RSS, que se pueden descargar desde FeedIcons.com y le seteamos los siguientes parámetros de Drop Shadow (Sombra)
Y nos quedará lo siguiente:
Luego, podemos dejar volar nuestra creatividad y lograr algo distinto, como esto:
Y si cambiamos colores, textos y tamaños, llegamos a un ícono de RSS, CSS y HTML válido, contacto y demás, como los que tenemos en la zona de pie de página en ZonaTecno, si quieren los pueden copiar y usar para propósitos propios...
    
Basado en tutoriales diversos y trabajos personales.
Cualquier error en este texto, remitirsela a cualquier miembro del Staff de ZonaTecno.net
 Esta obra está bajo una licencia de Creative Commons.
¡Sólo los usuarios registrados pueden escribir comentarios!
Powered by !JoomlaComment 3.26
3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved." |
|||||||
| < Anterior | Siguiente > |
|---|
