Blog

El blog de CaminoCreativo.com con lo ultimo y mas destacdo sobre el diseño.

Efectos

Los mejores tutoriales para Photoshop enfocado sobretodo a crear efectos especiales.

Noticias

Importantes noticias para diseñadores. Tambien algunas novedades de nuestra area.

Recursos

Todos los recursos para poder hacer de tus diseños algo completamente profesional.

Varios

No solo de Photoshop vive el diseñador. Dreamweaver, Illustrator, incluso otros recursos!

Home » Basicos, Dibuja, Web

Botón con lamparita para tu sitio web

Publicado por Luch el Jueves, 16 Octubre 20081 Comentario

Crearemos una atractiva barra con botones web. Al costado de estos aparece una lámparita que cuando supuestamente pasás el mouse sobre el cambia de color.

Creamos un nuevo documento de 400×400px con fondo negro.

Crean una ((nueva capa)).

Con ((Rectangular Rounded Tool)) y con un ((radio)) de 5px dibujamos el botón. Lo rellenan de negro.

Hagan doble clic sobre esta capa para abrir la ventana de ((Blending Options)).

((Inner Glow)).

((Gradient Overlay)) Usen estos dos colores para el gradiente: #10100e y #1e1e1e.

((Stroke)).

Observen la imagen que sigue, les debería estar quedando así.

Crean una ((nueva capa)).

Seleccionen ((Gradient Tool)) con ((Radial Gradient)) y de Blanco a transparente. Trazen el degradado de arriba hacia abajo, como muestra la imagen de abajo.

A la capa del degradado cámbienle el modo de fusión a ((Soft Light)). Observen el resultado hasta acá en la imagen de abajo.

Creamos otra ((nueva capa)). Con ((Elliptical Marquee Tool)) crean un cícrulo pequeño y lo rellenan de blanco tal cual muestra la imagen de abajo.

Hacemos doble clic para entrar a ((Blending Options)).

((Drop Shadow)).

((Inner Shadow)).

((Inner Glow)).

((Gradient Overlay)). Para el degradado utilizen los colores #00f900 y #029f02.

Prácticamente tenemos creado el botón. Nos queda un paso.

Nos acercamos bastante al botón (Zoom: 1600%) y en una ((capa nueva)) con ((Elliptical Marquee Tool)) creamos un círculo blanco (lo pueden ver en la imagen de abajo). Luego le reducen su ((opacidad)) a un 40%.

Nuestro botón quedo terminado! Solamente agreguemos el título al botón y listo.

Hice otras variantes para completar la barra.