Vamos a aprender a hacer un menú simple en Adobe Fireworks CS4. Fireworks es una herramienta impresionante a la hora de crear interfaces para tu diseño web, así que vamos a estar usando este programa muy a menudo aquí en Jacovox.

Primero creamos un nuevo documento de 600px de ancho por 200px de alto (pueden utilizar cualquier otra medida).

En el nuevo documento dibujamos un rectángulo de 600x40px de color negro por ejemplo.

Seleccionamos en rectángulo y en la barra de propiedades le damos un relleno con los siguientes valores: Gradient>linear

Una vez escogida la opción “Linear” hacemos click en la paleta de colores que esta al lado de la opción que acabamos de escoger y en la pequeña ventana que se abre vemos dos colores por defecto, el blanco y negro. Estos colores son los que vamos a cambiar para darle un degradado a nuestro menú.
Hacemos click en el primero color de la izquierda en este caso el blanco y escogemos la opción gris que tiene un valor de: #666666

El segundo color lo podemos dejar en negro #000000.

Esto hace que el menú tenga un degradado de gris a negro vertical (asumiendo que estas utilizando Fireworks CS4) en otras versiones de fireworks lo que hace es crear el degradado horizontal el cual puede ser modificado cambiándole la dirección del degradado.

El resultado es una barra horizontal como en esta imagen

El paso siguiente es crear las divisiones que vamos a tener entre cada link, para esto seleccionamos la herramienta de línea (N) y dibujamos una línea vertical de la misma altura de la barra de color #666666, copiamos la línea Ctrl+C la pegamos Ctrl+V le damos color negro #000000 y la movemos un pixel a la derecha como podemos ver en la imagen.

Agrupamos las dos líneas seleccionándolas y presionando Ctrl+g, copiamos Ctrl+C y pegamos dándole un espacio entre cada pestaña como se ve en la imagen. (esto varía dependiendo del ancho de cada link que queramos insertar)

Ahora vamos a poner los textos de los links. En mi caso escogí la fuente Berlin Sans FB tamaño 14 centrando cada texto entre las líneas verticales y si quieren pueden ponerle algún efecto a las letras para hacerlas más llamativas, en este menú las dejé simples para ver el resultado más claramente.

Este simple menú es bastante funcional a la hora de ponerlo en cualquier diseño ya que es recto y no tiene formas especiales. Puedes probar otros colores que combinen con el diseño que quieras.

Espero les agrade este simple tutorial y es el primero de una serie de cursos básicos que vamos a dar aquí en Jacovox para darle buena presencia a nuestros sitios.

Posts Relacionados:

1. Por fin! Gmail te deja hacer selección múltiple de archivos adjuntos
2. ¿Cómo se hace una portada de Macworld?