Comunidad de diseño web y desarrollo en internet online

Diseñar una barra de navegación con Photoshop

Una parte muy importante de una web es la navegación, si logras unir tanto la funcionalidad como la presencia en el diseño de un menú de navegación estarías ganándote un poco más a tus usuarios.

La parte visual en una web es de mucha importancia, aunque el contenido es lo mas, los usuarios se sienten más cómodos en una web que tenga un diseño agradable.

Por esta razón trataré de explicar paso a paso como crear una barra de navegación en Photoshop, con un efecto hundido para el estado RollOver de los botones, también agregaré una caja de búsqueda en la parte derecha de la navegación.

Empecemos a crear nuestra barra de navegación con Photoshop


Cree un nuevo documento de 880px x 90px. Ahora establezca como color de frontal el color: #d5d1a8 y con la herramienta bote de pintura rellene la capa.

Esta capa solo nos servirá de lienzo para trabajar si quiere puede ponerle el color que le parezca, e puesto este para que contraste con la barra que crearemos.


Ahora seleccione la HERRAMIENTA RECTÁNGULO REDONDEADO crearemos un rectángulo con radio de 7px y con cualquier color, el rectángulo es lo e creado de 850px x 55px.


Ahora le aplicaremos los siguientes estilos de capa al rectángulo que hemos creando en el paso anterior.






Este será el resultado después que apliquemos estos estilos:


Después de haberle aplicado los efectos de capa en los pasos anteriores ya tenemos la base de nuestra barra de navegación lista para agregarles los botones, los textos y la caja de búsqueda.

Creando los Botones


Ahora con la herramienta Rectángulo redondeado y con la configuración de la imagen de abajo crearemos el primer botón, que será home y tendrá el efecto hundido.


Ahora agregaremos los siguientes estilos de capa, para dar el efecto de profundidad al botón.







El botón debería de quedarles de esta forma después de aplicar estos estilos de capa.(Este será el botón en el estado hover)


Ahora agregaremos el texto HOME al botón, de color: #999369, verdana, 14px. y lo colocamos en el centro del botón.


Una forma de alinear el texto es: seleccionar la capa del botón, presionando control + clic sobre la miniatura de la capa del botón, luego seleccionar la capa que quieres alinear con la selección , en este caso la del texto home, ya que la tenga seleccionada ir a: capas – -> Alinear capas con la selección –> centros verticales y volver hacer los mismos pasos y seleccionar centros horizontales.


O selecciona la herramienta selección y presiona en la barra de opciones centrar vertical y horizontalmente.

De esta forma ponernos centrar el texto o cualquier otro objeto en nuestro diseños con relación a una selección.

Ahora duplicaremos el botón home para crear los demás botones de la barra de navegación, estos no tendrán el efecto hundido, le agregaremos unos trazos sencillos que quedaran muy bien.

Primero duplique el botón home y muévalo a la derecha con una distancia prudente entre botones.


Ahora aplicaremos los siguientes estilos de capa ala capa duplicada para crear los demás botones en el estado normal.






Este es el resultado que obtendremos con los estilos de capas que hemos aplicado al botón.


Ahora duplicaremos este botón dos veces más. Duplicar (Control + J).


Ahora agregaremos el texto a los botones. (SERVICES, MY WORK, CONTACT ME). Y agregaremos los siguientes parámetros para el texto.


Con esto ya terminamos la parte de los botones.

Ahora agregaremos una caja de búsqueda y un botón para el buscador a la derecha de la barra de navegación.

Para esto seleccionaremos la herramienta rectángulo redondeado con un radio de 3px y cualquier color.

Para no tener que aplicar estilo por estilo de nuevo a esta capa, copiaremos los estilos aplicados a la capa del botón home. Seleccione la capa del botón home y presione con el botón derecho del ratón y elija copiar estilo de capa.


Seleccione la capa de la caja de texto del buscador y clic derecho –-> pegar estilo de capa.


Haremos lo mismo con el botón del buscador esta vez usaremos uno de los otros botones. Click derecho sobre la capa del botón cervices –> copiar estilo de capa.

Ahora click derecho sobre la capa del botón del buscador –> pegar estilos de capa.

No agrego imágenes de este proceso por que es el mismo del anterior solo que ahora no usamos el botón home sino el botón cervices.

Esté proceso se puede hacer de otra forma arrastrando el símbolo de efecto de capa ala vez que presiona la tecla alt, pero háganlo como explique antes para no liarnos más.

Agreguemos ahora el un texto dentro de la caja de texto del buscador. (¿Buscabas algo?), con las siguientes propiedades para el texto.


Y para el texto del botón copiaremos el estilo de capa que tienen los otros botones del menú. (Me imagino que ya sabrán como copiar estilos. :-)

Este es el resultado del buscador.


Ya la barra de navegación parece estar lista pero a ultima hora se me llego la idea de ponerle unas líneas separando cada botón, si quieren pueden dejarlo hasta aquí ni ya esta cansado, jejeje, yo agregare unas líneas de separación a los botones.

Bien, con la herramienta marco rectangular cree una línea de 1px a todo lo alto de la barra de menú, y rellénela de color # 54441b, luego esa misma selección muévala a la derecha px y rellénela de color # e3dba7, ahora a la capa de la línea cambie el modo de fusión a Luz suave y ya tiene una delicada línea que divide sus botones, ahora solo tiene que duplicar la línea y ponerla entre los demás botones.



Resultado final




Extra


Aquí les dejo un pequeño pack de mis diseños de barras de navegación, son 4 estilos distintos de barra de navegación muy interesantes, espero les guste.

Código :

http://rapidshare.com/files/418506770/Barra-de-navegacion-con-photoshop.rar
http://www.mediafire.com/download.php?861111yk301zc59

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate