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, Web

Botones Web con Iconos

Publicado por Luch el Jueves, 16 Octubre 2008Sin Comentarios

Excelentes botones web identificados con Iconos. Mediante ((Layer Style)) crearemos unos fabulosos botones web con unos atractivos iconos que les dejo disponibles para que descarguen.

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

Creamos una ((capa nueva)).

Seleccionamos ((Rounded Rectangle Tool)) con un ((radio)) de 6px. Luego dibujaremos la selección del botón con fondo blanco.

Parados encima de la capa del botón vamos a ((Layer))-((Layer Style))-((Blending Options)).

((Drop Shadow)).

((Inner Shadow)).

((Gradient Overlay)). Como degradado vamos a elegir un rojo oscuro y uno claro.

((Stroke)).

Luego de aplicado ((Layer Styles)) tenemos este resultado.

Apretamos Ctrl + Clic sobre la capa del botón para activar la selección de este.

Crean una ((nueva capa)).

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

El degradado les tiene que quedar así.

Luego le cambiamos el modo de la capa a ((Overlay)).

Antes de seguir con el último paso les dejo este Pack de Iconos de DeviantArt para que descarguen haciendo clic aquí.

Coloquen los íconos y los títulos a sus respectivos botones. A los títulos pónganle ((Drop Shadow)).