Botones

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 imagenes.zip, 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: >> bt01.gif >> estado activo >> bt02.gif >> estado encima u over >> bt03.gif >> estado presionado o clic Los pasos para la creación de un rollover son los siguientes: 1º Inserte la imagen bt01.gif, 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/bt01.gif”, 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/bt02.gif”, es la imagen que debe aparecer cuando el mouse pasa por encima del botón 3Atributoonclick: Valor: src=”imagenes/bt03.gif”, 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.