Botones de la cabecera
de las páginas de ZARALINUX

 

Material utilizado:

paquetes  gimp-1.1.21 y  gimp-extra-fonts-0.10-4 (este contiene la fuente rootsheavy), disponibles en http://rpmfind.net/linux/RPM/GByName.html

los instalamos si no los teníamos instalados:

# rpm -Uvvh nombredelpaquete

Tras instalar el gimp-extra-fonts deberemos añadir al fichero /etc/X11/XF86Config las lineas siguientes, si es el servidor X quien se encarga de servir las fuentes
 

FontPath "/usr/X11R6/lib/X11/fonts/freefont"

FontPath "/usr/X11R6/lib/X11/fonts/sharefont"

reiniciamos las X y nos aparecerán las nuevas fuentes

Si usamos un servidor externo de fuentes, como xfs,  debemos asegurarnos que se incluye el camino hacia estos dos directorios en la sección cataloge del fichero de configuración de xfs (/etc/X11/fs/config). Acto seguido, copiaremos el fichero fonts.dir de cada uno de los dos nuevos directorios de fuentes a fonts.scale:
 

# cd /usr/X11R6/lib/X11/fonts/freefont

# cp fonts.dir font.scale

(lo mismo para el directorio sharefont)

A continutación, reiniciaremos el xfs:
 

# /etc/rc.d/init.d/xfs restart

(y después reiniciaremos las X)

Ya podemos empezar a crear los gráficos, como ejemplo vamos a ver el botón "asociacion"

Ejecuto el gimp

Defino colores de frente y fondo (un click en cada cuadradito),

de frente, blanco: R,G Y B a 255

de fondo, azul: R y G a 0 y B a 255

y ya tenemos los colores de frente y fondo:

fichero->nuevo, ancho 161, alto 22, Tipo de relleno:fondo

botón derecho sobre la imagen, capas->capas y caminos...

nueva capa transparente

volvemos a la imagen, botón derecho sobre la nueva capa, herramientas->texto
elegimos la fuente roostheavy, tamaño 20
(tenemos como color de frente el blanco)

 

editar->copiar, editar->pegar como nueva, nos creará una nueva imagen que ya usaremos luego

volvemos al primer fichero, y sobre la capa de texto:
botón derecho-> script-fu->decor->add-bevel

 
y nos quedará así:

botón derecho->Capas->Aplanar imagen

De nuevo:
botón derecho-> script-fu->decor->add-bevel

Con este resultado:

fichero->guardar como->asociacion.png

 

volvemos al segundo fichero, botón derecho->filtros->colores->map->color exchange, y cambiamos el blanco
a azul

botón derecho->script-fu->decor->add-bevel

con este resultado:

 y guardamos la imagen como asociacion_on.png.

Luego en la página mediante javascript cambiará la imagen asociacion.png por asociacion_on.png al pasar el cursor por encima de la misma (evento OnMouseOver)

Para los títulos de la cabecera el procedimiento es el mismo, salvo que para el fondo usaremos un degradado azul:
 

Fichero -> Nuevo

Anchura: 468
Altura: 70
Tipo de relleno: Transparente
 

 

Seleccionamos como color de frente (de los dos cuadradicos de abajo a la izquierda, click en el de más arriba)
Ponemos el B (azul en RGB) a 255:

 
Botón derecho en la imagen que hemos creado, Herramientas->Herramientas de Pintura->Gradiente.
Llevamos el cursor al extremo derecho de la imagen, y apretando el botón izquierdo, desplazamos hasta casi el extremo izquierdo de la imagen, y soltamos el botón.
Bien, ya tenemos listo el degradado azul del fondo:

Botón derecho->Capas->Capas, canales y caminos. Nueva capa transparente

Haciendo click en la flechita de dos puntas al lado de los cuadradicos, intercambiamos los colores de "foreground" y "background", de forma que subimos el blanco arriba. Botón derecho sobre la nueva imagen, Herramientas->Texto. Elegimos:

Tipo de letra: roostheavy
Pixels: 60 (ajustar el tamaño para otros títulos, dependerá del nº y longitud de las letras que contenga la palabra)
Texto: ZARALINUX (p.ej.)
Y pulsamos sobre el botón OK

Botón derecho, Script-Fu => Decor => Add Bevel. Ponemos el valor de Thickness a 15, y click en OK

Botón derecho, Capas->Aplanar imagen
Y con esto ya tenemos la imagen lista para guardar:

Botón derecho, Fichero ->Guardar como->zaralinux.png
 

---

Nota: la ubicación  de los directorios  mencionados corresponde a RedHat, para otras distribuciones puede variar ligeramente.