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

Barra de botones con iconos estilo neón

Publicado por Luch el Martes, 18 Noviembre 20083 Comentarios

Excelente barra para colocar en su sitio Web. Se trata de una botonera en el que vamos a aplicarle no solamente los títulos de cada botón sino que también agregaremos íconos con estilo neón.

Abrimos un nuevo documento de 650×500px con fondo negro.

Creamos una ((New Layer)).

Seleccionamos ((Rectangular Marquee Tool)) de tipo ((Fixed Size)) y un tamaño de 600×40px. Luego de colocados estos valores hacemos clic en cualquier parte del documento para que automáticamente aparezca la selección del rectángulo.

Lo rellenamos de blanco.

Hacemos doble clic sobre la capa de la barra para aplicarle ((Blending Options)).

((Gradient Overlay)). Para este degradado usarán los colores: #000000 y #111111.

((Stroke)).

Una vez aceptados los cambios tendremos este resultado.

Ahora apretamos Ctrl + Clic sobre la capa de la barra para activar la selección.

Luego seleccionen ((Rectangular Marquee Tool)), Style: Normal y “Subtract From Selection”. Lo que vamos a hacer será restar la mitad de la selección de la barra.

Crean una ((New Layer)).

Esta nueva selección la rellenan de blanco y le reducen la ((opacity)) a un 5%.

Pasaremos a crear los títulos de los botones. Usé la fuente Arial.

Dejen un espacio entre título y título para colocar el icono.

Crean otra ((New Layer)).

Con ((Rounded Rectangle Tool)), Radius: 7 dibujarán el fondo del ícono. Observen la siguiente imagen.

Hagan doble clic sobre esta capa. Le aplicaremos los siguientes ((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)). Para este degradado usen los colores: #000000 y#464646.

Les quedará así.

Apreten Ctrl + J sobre esta capa para duplicarla y colocarla sobre los demás títulos de la barra.

En este tutorial coloqué iconos que vienen por defecto con Photoshop.

Por supuesto que estos íconos los vamos a colocar en una ((New Layer)).

Con ((Shape Tool)) seleccioné de la lista este ícono y le aplique ((Outer Glow)).

Así nos quedará la barra completa.

En otro resultado veremos que con ((Line Tool)) y ((Outer Glow)) dibujé la zona activa del botón.