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

Cabezal cuadrado para Sitio Web

Publicado por Luch el Miércoles, 3 Diciembre 2008Sin Comentarios

El 95% de las veces encontramos cabezales que ocupan todo el ancho de la página en forma horizonal. Se me ocurrió crearles un cabezal cuadrado, con botones a los costados y sobre su base. Tiene un diseño simple pero los llevará a crear otros muy interesantes y originales.

Abrimos un nuevo documento de 530×380px con fondo blanco.

Creamos una ((New Layer)).

Elegimos el color #96aed6 como frontal.

Seleccionamos ((Rounded Rectangle Tool)) y trazamos un rectángulo como el que vemos abajo.

Hacemos doble clic sobre su capa y le aplicamos ((Layer Styles)).

((Drop Shadow)).

((Inner Shadow)).

((Stroke)).

Aceptamos los cambios.

Si añadimos sombras utilizando ((Layer Styles)) no vamos a lograr el efecto deseado.

Para ello vamos a utilizar este DIVIZOR HORIZONTAL, lo vamos a aplicar por fuera del rectángulo para lograr la sombra y vean como esta se desvance al llegar a las esquinas.

Escriban el título de la página. Utilicé la fuente Cooper Std.

Se paran encima de la capa de texto y van al menu ((Layer))-((Layer Style))-((Blending Options)).

((Drop Shadow)).

((Gradient Overlay)). Para este degradado usaremos los colores: #cdd9de y #f8fafb.

Acepten los cambios y el nuevo texto quedará así.

Tracen 3 pestañas como las que ven abajo, cada una en una capa nueva diferente.

Las rellenan con el color #5a77a7.

Hagan doble clic en una de las capas para aplicarle ((Layer Styles)).

((Drop Shadow))

((Outer Glow)).

((Stroke)).

Acepten los cambios.

Para aplicarle los mismos ((Layer Styles)) a las otras dos pestañas simplemente hagan clic derecho sobre el nombre de la capa a la que le aplicamos ((Layer Styles)) y elijan ((Copy Layer Styles)). Luego hacen clic derecho sobre el nombre de la capa de otra pestaña y elijen ((Past Layer Styles)).

Por último agregamos los nombres de los botones con la misma fuente y ((Layer Styles)) que utilizamos para el título del cabezal.

Y listo!