SESIÓN DE COMPONENTES GRÁFICOS INTERACTIVOS

CLASE CON GIMP

CAPACIDAD
• El participante al final de esta sesión será capaz de producir
componentes gráficos interactivos con GIMP, aplicando
animación en la creación de banners y botones de manera
organizada y creativa
Animación de objetos
Una de las partes llamativas del trabajo con páginas web, es el uso de imágenes que cambien de estado, justo
ésta es la característica a la que llamamos animación. Proceso que logra dar movimiento a dibujos u objetos
inanimados. Esto es posible gracias a una secuencia de dibujos o fotografías implantados en capas que al estar
ordenadas consecutivamente logran generar una sensación de movimiento, lo que nos sirven para mostrar
publicidad donde los elementos que la conforman se modifican dando una apariencia de renovación y que al
mismo tiempo alegra la vista de nuestra página web.
Banners
Banner de contenido
Es aquel que te invita a navegar en el mismo sitio web, manteniendo siempre el interés de los
visitantes, para luego invitarte a compartirlo por las redes sociales.
Animación de botones
Al igual que otras aplicaciones de diseño gráfico, los botones son símbolos que funcionan como objetos
interactivos que emplea el usuario para la ejecución de una determinada acción. GIMP permite diseñar dos
tipos de botones:

Tipos de botones:
1. Botón redondo… Son botones de forma rectangular y bordes redondeados; este
tipo de botón, GIMP los crea en tres estados:
Creación de un botón redondo animado:

Para crear un botón redondo debe seguir los siguientes pasos:

1. Hacer clic en el menú Archivo
2. Seleccionar la opción Crear
3. Elegir la opción Botones
4. Seleccionar el tipo de botón a crear. Ej. : Botón redondo…
Aparecerá la ventana Script-Fu: Botón redondo, donde
personalizará las opciones que tendrá su botón. Ej.:

a) Texto que aparecerá en el botón.

b) Tamaño de la letra.
c) Tipo de letra.
d) Color superior del botón
e) Color de fondo del botón.
f) Color del texto
g) Color del botón al colocarle el mouse.
h) Color de fondo del botón
i) Color del texto al colocarle el mouse.
j) Ancho del botón
k) Alto del botón.
l) Anchura de la sombra biselado.
m) Radio de la redondez del botón
n) Crea un botón del color del ítem g
o) Crea un botón del color del ítem h.
p) Crea un botón del color del ítem h
q) Cancela la configuración realizada
r) Ejecuta los cambios realizados
s) Restaura a la configuración inicial del botón.
t) Se abre un manual de ayuda en línea
Botones simples biselados

Son botones rectangulares con aspecto 3D, con un bisel y relleno con colores matizados y
únicos en caso que el usuario desee, además son más sencillas de elaborar:
Creación de un botón simple biselado: Para crear un botón simple biselado debe seguir los
siguientes pasos:
1. Hacer clic en el menú Archivo
2. Seleccionar la opción Crear
3. Elegir la opción Botones
4. Seleccionar el tipo de botón a crear. Ej. : Botón simple biselado…
• Aparecerá la ventana Script-Fu: Botón simple biselado,
donde personalizará las opciones que tendrá su botón. Ej.:

a) Texto que aparecerá en el botón.

b) Tamaño de la letra.
c) Tipo de letra.
d) Color superior izquierda del botón
e) Color inferior derecho del botón.
f) Color que tendrá el texto en el botón.
g) Altura del botón.
h) Anchura de botón.
i) Crea botón con apariencia hundida.
j) Cancela la configuración realizada.
k) Ejecuta los cambios realizados.
l) Restaura la configuración inicial del botón.