WebXiss - Blog de diseño en la web

Actualmente muchos sitios en Internet ya implementan una barra de navegación en la cuál colocan los links más atractivos para sus visitantes, en este post te enseñare como podemos hacer una elegante barra de navegación.


1. Preparación del lienzo
Como siempre iniciaremos por establecer el lienzo de trabajo, para esta ocasión estableceremos los siguientes valores: un ancho de 800px y un alto de 35px, el fondo sera de color blanco.

2. Agregamos las lineas guias.
Por el momento tenemos que agregar 4 lineas guias, las cuales nos serviran para dibujar la barra de navegación; 1° linea guia 2px en vertical, 2° linea guia 798px en vertical, 3° 2px en horizontal y 4° 33px en horizontal.

3. Dibujamos la barra de navegación
Seleccionamos la herramienta "Rectangulo redondeado" y fijamos un radio de 5px, ahora lo dibujamos en el lienzo apoyandonos en las lineas guias.


4. Configuramos los estilos de capa
Nos dirigimos al menu Capa >> Estilos de Capa >> Opciones de fusión... y modificamos los valores como aparecen en las imagenes.


5. Dividimos la barra en botones
I.- Ahora necesitamos 2 lineas guias; 5° linea guia 50px en vertical y 6° linea guia 750px en vertical, ya con las lineas seleccionamos la herramienta "Línea" y dibujamos una linea en vertical de 1px de grosor sobre la 5° linea guia. La linea debe tener el color #c9ced2.

II.-Ya teniendo dibujada la primera linea nos movemo 1px a la derecha y dibujamos otra linea igual solo que esta vez sera de color blanco.


III.- Repetiremos los pasos 5I y 5II cada 100px hasta llegar a la 6° linea guia.


6. Añadimos texto a los botones
Ya teniendo definidos los botones, escogemos la herramienta "Textoo" (T) y escribimos el nombre de los botones la tiporgrafia puede ser cualquiera, recomiendo arial, o verdana, el color #666666 y el tamaño 14pt, para este ejercicio utilice los siguientes textos:

• Home
• Nosotros
  
• Artículos
  
• Blog
  
• Foros
  
• Recursos
• Taller