Apuntes de informática

Como dije en la anterior entrada, crear un menú es un poco complicado, aunque si tenemos dos ideas claras y un poco, casi nada, de manejo con el Gimp, nos puede salir bastante bien.

Nosotros vamos a crear un menú horizontal, así que antes de nada tenemos que decidir la altura que queremos que tenga, puede parecer una tontería pero si vamos a crear la imagen de fondo, tendremos que especificar una altura, ya que la anchura de la imagen será de 1px y esta se irá repitiendo.

En mi caso, Sinpastaenelbolsillo.com, la altura del menú son 55px, así que la imagen es de 1x55 px.

Creando las imágenes.

Vamos a crear un fondo con el Gimp, para lo cual, abrimos el programa, y creamos una imagen nueva de, por ejemplo, 1x55 px.

Seguramente tendremos la imagen delante, en la ventana del Gimp, pero como posiblemente no la veamos, haremos zoom sobre ella, hasta que la veamos todo lo grande que podamos, sin que se salga de la pantalla.

Ahora necesitamos un color base, en mi caso el #89b709, pero tu puedes elegir el que quieras, y vamos a rellenar completamente la imagen con ese color, para ello utilizamos la herramienta de relleno (un cubo volcándose).

Una vez hecho esto, vamos a darle relieve a la imagen, para lo cual vamos a crear una nueva capa con transparencia de fondo, vamos a Capa -> Capa nueva y le damos un nombre, relieve por ejemplo.

Ahora tenemos que trabajar sobre la capa que hemos creado, así que vamos al diálogo de capas, si no lo tenemos a la vista lo podemos abrir dándole a Ventanas -> Diálogos empotrables -> Capas, y veremos que hay dos capas, una llamada Fondo, y encima, que en mi caso se llama relieve, haz click sobre esta última.

Para realizar el siguiente paso, tenemos que seleccionar antes la mitad inferior de la imagen, así que cogemos la herramienta de selección cuadrada, y, fijándonos en la posición del cursor abajo a la izquierda, seleccionamos desde 1x27 hasta abajo del todo.

Ahora vamos a crear un degradado sobre la capa relieve, para lo cual tenemos que usar la herramienta que es un cuadrado con un degradado horizontal, y seleccionamos el color negro y le seleccionamos una opacidad de 75.
Vamos sobre la imagen y hacemos click aproximadamente a 3/4  de la parte superior y arrastramos, en vertical hasta 3 px antes de la parte de abajo del todo.
Si todo ha salido bien, tendría que aparecer algo como esto:

Ahora vamos a cambiarle la opacidad a la capa hasta obtener un resultado que nos guste (15 esta bien), todo ello en el diálogo de capas.

Podemos hacer lo mismo que hemos hecho abajo, para la parte de arriba, cambiando el negro por blanco, y haciendo la transparencia desde la parte mas alta, hasta una distancia de 1/4 sobre la parte superior, para ello recomiendo crear otra capa, y cambiar la selección a la parte superior.

Ahora el truco para tener un efecto de pulsar el botón al pasar el raton por encima, es jugar con las opacidades de la parte de arriba y abajo o voltear verticalmente la imagen, pero eso ya, una vez sabes como van los degradados, las capas y la selección, no es más que jugar con opacidades y degradados, pero guarda la imagen que quieres que haga el relieve como, por ejemplo, menhover

Para terminar podemos añadirle unos bordes, pero para eso te recomiendo que te descargues la imagen que uso yo de menú en mi web de ganar dinero, aquí, y hagas un copy&paste de los bordes a tu imagen, y despues ya les cambies el color.

Guarda las dos imágenes en ficheros xcf para editarlas con posterioridad y como ficheros gif o png para mostrarlas en la web.

Editando el CSS

Supongo que ya tienes dos imágenes, una para el fondo normal y otro para el efecto de relieve, y me imagino que todavía no tienes ni idea de cómo quedan porque con 1px de ancho no ves nada, pues bueno, vamos con el CSS.

Buscamos la parte del CSS correspondiente al menú y dejamos el #menu li así:

Ahora vamos a añadir el efecto de presionar, creamos un nuevo selector:

Y ya está, ahora ya tenemos un menú con botones y que cuando pasas el ratón por encima cambia como si hubiese sido presionado.

Si algo no funciona, no dudes en comentarlo, y si necesitas ver un ejemplo de como funciona, en mi web de ganar dinero puedes observar un ejemplo del menú, pero para verlo tendrás que desactivar el javascript de tu navegador puesto que la versión para navegadores que lo tienen activado utiliza JQuery.

Por cierto, si ves el menú de Sinpastaenelbolsillo.com, observarás que tengo los laterales redondeados, y una separación entre cada enlace del menú tengo un "spacer", que no es más que otro <li></li> pero con una imagen de fondo distinta. Si quieres tener una separación, te recomiendo jugar con el atributo margin aplicado a los elementos del menú, y no hacerlo como lo tengo yo puesto, ya que lo tuve que hacer así por el menú con JQuery (cuando explique como se hace, se entenderá), y puedes utilizar las imágenes que tengo puestas de inicio y final para darle esquinas redondeadas, pero observa que en mi CSS utilizo dos clases, una first y otra last para cada elemento, y así ponerle la imagen de fondo correspondiente.
Ten en cuenta que tendrás que poner selectores de hover para el first y el last con la misma imagen, porque si no se te pondrá la imagen que has hecho de botón presionado cuando alguien pase el ratón por encima de alguno de ellos y no queda bien.

Si este tutorial te ha servido para algo, y has hecho un menú en tu web utilizando el tutorial, me encantaría que lo comentases.