BOTONES

Con la herramienta Gimp ud. podrá crear imágenes personalizadas para agregarlas como
botones en la página Web que estamos diseñando.
Ejercicio
Para comenzar, cree un nuevo documento de 150 x 50px y de fondo transparente.
Para trabajar mejor, aplique un zoom de 400%. Menú Ver > Ampliación 4:1 (400%).
El siguiente paso consistirá en elegir el color del botón. Seleccione dos colores, uno para el
frente y otro de fondo, por ejemplo un color azul para el frente y otro un poco más claro para el
fondo
1Color frente: 0a0a7b
2Color fondo: 7bf1f0

Aplique un degradé y configúrelo de la siguiente manera:

1Modo: normal.
2Opacidad: 100%
3Degradado: Frente fondo (El tercero de la lista)
4Forma: Lineal.

Aplique el degradé empezando por la parte superior central del documento y acabando en la
parte inferior central. Puede ayudarse manteniendo la tecla CTRL pulsada mientras arrastra el
mouse. Si no le convence el resultado pulse CRTL-Z para deshacer los cambios.
El resultado es el siguiente:
1 Creación Material Educativo Multimedia TELECOM - Profesores para el
Futuro
Seleccione toda la imagen pulsando Ctrl +A (Menú Seleccionar > Todo). Vaya al menú
seleccionar y elija la opción Rectángulo redondeado. Se abrirá una nueva ventana en la que
hay que colocar el valor del radio, escriba 55 y pulse aceptar.
Copie la selección mediante Ctrl + C ( Menú Editar > copiar), y luego copie la selección como
una imagen nueva pulsando Mayus + Ctrl + V ( Menú Editar > Pegar como > Imagen Nueva).
Así ha creado un nuevo documento donde tiene el botón con las esquinas redondeadas. Cierre
el primer documento.
A continuación, agregue una nueva capa al documento pulsando Mayu + Ctrl + N (Menú Capa
> Capa Nueva), llámela brillo.
Con la capa brillo seleccionada, tome la herramienta de selección rectangular y haga una
selección en la parte superior del documento.
Repita lo realizado en el paso anterior para redondear las esquinas con un radio de 55,
quedando como se muestra en la siguiente imagen:
Ahora seleccione como color de frente al blanco y seleccionaremos la herramienta de degradé
en la caja de herramientas. Esta vez use el tipo de degradé frente a transparente (el cuarto de
la lista) y marque la casilla invertido . 2 Creación Material Educativo Multimedia
TELECOM - Profesores para el Futuro
Aplique el degradé sobre la selección, igual que antes de manera vertical, y de arriba a abajo.
Puede agregarle un borde, para lo cual debe crear una nueva capa (Mayus + Ctrl + N) llámela
borde, márquela como activa y selecciónela (Ctrl + A).
Redondee la selección tal como se ha explicado en el paso anterior. En el menú Seleccionar >
Bordes > lleve a 1 el valor del borde y marque la casilla de difuminar.
Elija el color: 162303 y con la herramienta de relleno (la que se encuentra al lado del gradiente)
pinte sobre el borde seleccionado.
El resultado es el siguiente:
Ahora aplique el texto.
Pulse sobre las herramientas de texto que se encuentra en la caja de herramientas (icono con
la letra A) y con el mouse dibuje una selección en el botón de manera que ocupe todo su ancho
y quede centrada.
Las opciones de la caja de herramientas debe establecerlas de la siguiente manera:
Escriba el texto el botón, asegurándose de que quede centrado y quite todas las selecciones
para ver mejor el resultado.
Ahora el botón está finalizado. Guarde la base del mismo para utilizarla en su página.
Para Guardar. Para finalizar guarde el documento desde "Archivo" > "Guardar" y elija el formato
"Gimp". Esta opción crea un documento con la terminación ".xcf" (Gimp Document) y le permite
guardar el documento con sus capas, textos y efectos.
Si quiere guardar la imagen en un formato GIF debe ir a "Archivo" -> "Guardar como" >
seleccionar el tipo de archivo (por extensión) > Guardar.
Pulse EXPORTAR.
Pulse GUARDAR.
Vamos a crear otro tipo de botón.
Comience creando un documento de 100 x 100 y con el fondo transparente. Aumente el zoom
al 400% para trabajar mejor.
Aplique una selección circular/elíptico que cubra todo el documento.
Igual que en el ejemplo anterior aplique un degradé, con estas opciones.
Modo: normal.
Opacidad: 100%
Degradado: Frente fondo (El tercero de la lista)
Forma: Lineal.
Color frontal: 0a8807
Color fondo: 49f845
6 Creación Material Educativo Multimedia TELECOM - Profesores para el
Futuro
Aplique el degrade de forma vertical y de arriba a abajo.
Vaya al menú Seleccionar y haga clic sobre Encoger (shrink) y dele un valor de 7. Acepte y
pulse la tecla borrar (Supr), debe obtener un aro.
7 Creación Material Educativo Multimedia TELECOM - Profesores para el
Futuro
Ahora cree una capa nueva (Mayu + Ctrl + N) llámela centro, seleccione un color de frente
(0a0a7b) y otro de fondo (7bf1f0) y aplique la siguiente configuración.
Modo: normal.
Opacidad: 100%
Degradado: Frente fondo (El tercero de la lista)
Forma: Radial
8 Creación Material Educativo Multimedia TELECOM - Profesores para el
Futuro
Aplique el degradé del centro del lienzo hacia abajo.
El resultado es el siguiente:
Cree una nueva capa, llámela brillo, y con el color de frente blanco, aplique un degradé del tipo
Frente a Transparente.
Vaya al menú capa y haga clic sobre escalar capa. Ponga los valores ancho 70, alto 60. Con la
herramienta mover desplace la capa a la parte superior. Para mover la capa activa recuerde
seleccionar la opción Mover la capa Activa que se encuentra en la parte inferior de la Caja de
Herramientas.
Ahora aplique un filtro. Seleccione Menú Filtros > Desenfoque > Desenfoque Gaussiano, con
los valores de 10 tanto en horizontal como en vertical.
Resultado del botón: 11 Creación Material Educativo Multimedia TELECOM -
Profesores para el Futuro
Una vez finalizado el botón abra el Kompozer para insertarlo.
1Si la botonera es horizontal > Debemos crear una tabla con cantidad de columnas según la
cantidad de botones que tenga nuestro sitio.
2Si la botonera es vertical > Debemos crear una tabla con cantidad de filas según la cantidad
de botones que tenga el sitio.

12 Creación Material Educativo Multimedia TELECOM - Profesores para el

Futuro
Posiciónese en la 1 Fila, vaya a la opción IMAGEN > Elegir Archivo... y busque en su carpeta la
imagen del botón “bt_01.png”, alojada en el archivo [Link], que descargo
anteriormente.
Rollovers con Kompozer
Un rollover es un botón dinámico, capaz de cambiar su apariencia en función de determinados
comportamientos del mouse (encima, click, doble click...).
En Kompozer esto puede realizarse a través de una utilidad denominada Eventos JavaScript.
Lo primero, y muy importante, es tener las imágenes necesarias en la misma carpeta para
luego poder hacer los links.
Estas son las imágenes que usaremos:
>> [Link] >> estado activo
>> [Link] >> estado encima u over
>> [Link] >> estado presionado o clic
Los pasos para la creación de un rollover son los siguientes:
1º Inserte la imagen [Link], que es la que queremos que esté presente cuando no ocurra
nada.
Guarde el documento.
2º Posiciónese donde está el botón, haga clic con el botón derecho de mouse > y en el menú
que se despliega, seleccione Propiedades de Imagen... 14 Creación Material Educativo
En el cuadro de Editor avanzado de propiedades haga clic en el botón de Edición avanzada... y
una vez dentro active la pestaña Eventos Javascript.
3º La creación de los eventos:
1Atributo onmouseout: Valor: src=”imagenes/[Link]”, es el nombre del archivo de la imagen
que debe aparecer cuando el mouse no está haciendo operación alguna ni se encuentra sobre
el botón.
2Atributoonmouseover: Valor: src=”imagenes/[Link]”, es la imagen que debe aparecer cuando
el mouse pasa por encima del botón
3Atributoonclick: Valor: src=”imagenes/[Link]”, lógicamente la imagen que debe aparecer en
el momento de hacer click sobre el botón.

Importante: Revise bien los valores, ya que el mínimo error hará que el rollover no funcione.
No se deben dejar espacios en blanco y es imprescindible poner la extensión (jpg, gif) en el
nombre del archivo.