Documentos de Académico
Documentos de Profesional
Documentos de Cultura
02 Gimp Orientado A Elementos Multimedia
02 Gimp Orientado A Elementos Multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
CEFIRE
1 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Conocimientos previos
Pre-conocimiento
En este tema abordaremos el uso la herramienta GIMP orientado a elementos multimedia, esto es crear botones, logos, animaciones,etc. Estas imagenes son de gran utilidad no solo para documentos web,sino que tambien podemos utilizarlas para crear presentaciones multimedia (con openoffice Writter, o con openoffice Impress por ejemplo). Por lo explicado en el prrafo anterior recomendamos como conocimientos previos para el alumnado: - Conocer un uso bsico de GIMP - Saber la diferencia entre una imagen esttica y una dinmica (http://es.wikipedia.org/wiki/Graphics_Interchange_Format)
Si algn alumno quiere saber como crear una pgina web fcilmente donde insertar nuestras imagenes le recomendamos la herramienta Kompozer (http://kompozer.net/), y el siguiente tutorial para la iniciacin de su uso: http://blog.educastur.es/sofwarelibre/2009/05/02/manual-de-kompozer-modulo-3-el-primer-vistazo-a-kompozer/ o bien, si se quiere investigar sobre la creacin de presentaciones digitales http://www.josedomingo.org/web/course/view.php?id=53
2 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Objetivos
Objetivos
El objetivo principal de este tema es ser punto de partida para el uso de GIMP orientado a la creacin de material para presentaciones multimedia (por ejemplo, la web). Ms concretamente los objetivos son: 1. 2. 3. 4. Conocer que son las capas de una imagen Aprender a crear botones web de forma automtica Saber crear un logo, o modificar uno que ya este hecho Poder manipular diferentes partes de una imagen
5. Ser capaces de crear imagenes en movimiento de forma manual o automtica 6. Entender como se crean automticamente mens visuales web (mapa de imagen)
3 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Contenidos
Contenidos
Que nos permitirn alcanzar los objetivos anteriormente descritos, se dividen en 1. Introduccin a las Capas de GIMP 2. Creacin de botones web 3. Crear logos 4. 5. 6. 7. 8. Modificacin del fondo de una imagen Modificar logotipos (Alfa a Logotipo) Crear un gif animado manualmente. Crear un gif animado automticamente. Crea un mapa de imagen
4 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Criterios de evaluacin
Criterios de Evaluacin
Para aprobar esta sesin ser necesario entregar correctamente (con APTO) las actividades propuestas a lo largo de las secciones. En el caso de las actividades de las secciones 3 y 5, ser necesario entregar al menos la mitad de ellas correctamente para considerarse APTO. En caso de que falten actividades por entregar ser el profesor quien decida si considera la sesin aprobada.
Con el objetivo de poder diferenciar las entregas de los alumnos cada entrega se har siguiendo el siguiente patrn: 1- se comprimirn los resultados de cada seccin en un fichero comprimido tipo .ZIP 2- se renombrar con el nombre del alumno, primer apellido y seccin del siguiente modo: nombre1_apellido1_tema1_seccionX.zip (Ej: vicente_rubio_tema2_seccion1.zip) 3- Cada seccin se entregar por separado El examen de autoevaluacin no ser entregado al profesor. Servir al alumnado para comprobar sus conocimientos adquiridos a lo largo de la sesin.
5 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 1
Temporizacin: 20 min.
6 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
1. Seleccin de imgenes. Si tenemos varias Ventanas Imagen abiertas, podemos elegir la imagen sobre la que trabajaremos. 2. Pestaas Capas, Canales, Rutas y Deshacer. Por defecto queda seleccionada la pestaa Capas, que es con la que vamos a trabajar en estos momentos. 3. Los botones especficos de la opcin Capas nos permiten (de izquierda a derecha) crear una nueva capa, cambiar el orden de apilamiento de las capas, hacer una copia de la capa activa, fijar una capa y eliminar capa.
El botn crea una copia de la capa activa a la que llama "nombre de la capa Copia". Haciendo doble clic en el nombre de la capa podemos cambirselo, quedando reflejado en la Paleta de Capas.
Los botones
la eliminamos. Tambin sucede lo mismo si la arrastramos y soltamos dentro del botn Papelera.
7 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
se crear una nueva capa, sobre la que debemos decidir su nombre, anchura, altura y tipo de relleno.
Una vez que hacemos clic en Aceptar, la nueva capa se muestra en la Ventana Capas, Canales, Rutas y Deshacer. Tenemos un nuevo "acetato" sobre el que trabajar
8 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Ampliar conocimientos
http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/07capas.html
ndice. 1. Introduccin. 2. La caja de herramientas. 3. Los mens de la ventana. 4. Crear y guardar imgenes. 5. Las herramientas. 1/ De seleccin. 2/ De transformacin. 3/ De pintura. 4/ Otras herramientas.
6. Rtulos y logotipos. 7. Trabajo con capas. 8. Los filtros. 9. Animaciones. 10. El color. 11. Tutoriales. a/ El bfer. b/ Los mapas de imagen. c/ Tijeras inteligentes y curvas Bzier. d/ La herramienta clonar.
e/ Cambiar el tamao. f/ Dibujar rectas, cuadrados, crculos... g/ Transformar imgenes. h/ De foto a retrato. i/ Uso de filtros. j/ Las curvas de color. 12. Aadir nuevos elementos. 13. Personalizar la caja de herramientas. 14. Diccionario de emergencia.
9 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 2
Temporizacin: 40 min.
10 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
11 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Aconsejamos usar las siguientes caractersticas para crear los botones: Tipo de letra utilizado: AlMateen Bold Tamao: 16 Veamos un par de ejemplos:
No Pulsado
No Pulsado
Paso 2
El segundo paso consiste en guardar los tres botones. Procura que el nombre de los tres archivos sean iguales. Por ejemplo, puedes llamarlos Inicio1, Inicio2, Inicio3 siendo para t el 1=no pulsado, el 2=no pulsado activo y el 3= pulsado. Manten esta norma para todos los botones que crees y no te equivocars. Lo importante es elegir un criterio y seguirlo fielmente. El segundo aspecto que has de tener en cuenta es el tipo de formato que vas a utilizar. Si te fijas en la imagen de los botones, hay un cuadriculado en tonos grises. Esta es la forma que tiene Gimp de indicar la transparencia en una capa. Si te fijas en la zona resaltada de la imagen siguiente vers la zona cuadriculada:
El formato JPG no permite transparencias, por eso elegimos el formato GIF. La transparencia evita que aparezca el molesto color blanco cuando el fondo de la web no lo es. Fjate en la diferencia:
Observa ese fondo amarillo alrededor del botn en la imagen de la derecha. Por eso elegimos GIF y no cualquier formato. Por supuesto, el formato de Gimp (xcf) lo permite pero estamos creando imgenes soportadas por los navegadores de internet y GIF lo es por todos (cosa que XCF no).
12 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Practica
Nota: Este botn se ha creado mediante Archivo / Crear / Botones / Botn Simple Biselado El entregable ser de tipo XCF y de tipo GIF
13 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 3
Crear logos
Temporizacin:50 min
14 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
Crear Logos
Crearemos logos automticamente mediante scripts predefinidos. Estos son una serie de ordenes escritas en un lenguaje llamado Scheme que hacen que GIMP cree determinado efecto. Accedemos a ellos desde la Archivo / Create / Logotipos.
Estos scripts de texto funcionan de forma similar: especificando el texto sobre el que se aplicar el Script, el tipo de letra y los parmetros correspondientes a cada uno de los Script-Fu. Comprobemos su funcionamiento. Es fundamental observar la Ventana de Capas, Canales y Rutas, donde se distribuyen las distintas capas creadas por el Script. Cada una de ellas se puede copiar o traspasar a otra imagen, utilizando los efectos producidos de forma ms creativa. Comprobemos su funcionamiento. Desmenuzar
Texto en movimiento Podemos modificar los colores de fondo y de primer plano, as como la densidad de fundido entre uno y otro
15 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Bsico I Podemos modificar el color de fondo, de primer plano y el tipo y tamao de letra
Bsico II Podemos modificar el color de fondo, de primer plano y el tipo y tamao de letra
Cabecera de pgina Web Sencillo y efectivo. Solo podemos seleccionar el tipo de fuente y el tamao de la misma
Calor resplandenciente Podemos cambiar el tipo de letra, su tamao y seleccionar el color de fondo de la imagen
Texturizado El texto se situa sobre un fondo con textura.Podemos modifical el tipo y tamao de letra, el patrn de relleno de texto, el tipo de textura(tres tipos de poligonos distintos) y los colores de esta textura de fondo.
Contorno en 3D Srive para conseguir letras en tres dimensiones. Muy apropiado para crear un ttulo sobre fotografas. Podemos modificar el tipo de letra, el tamao, el patrn de relleno de las letras y las caractersticas del relieve que proporciona el Script. Tambin podemos aadir sombra a nuestro texto.
Cristal Se trata de un Script muy elaborado y efectista. A las posibilidades habituales se une la eleccin de ula imagen de fondo y de su entorno.
Cromado flipante Su nombre lo dice todo.Podemos modificar distintos parmetros sobre el cromado que se consigue, elegir la imagen de fondo, tipo y tamao de letra, as como el color y brillo del cromado.
Cromado
16 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Sencillo cromado donde podemos modificar el tipo y tamao de letra, as como el color de fondo del ccromado.
Esculpido Si elegimos una imagen que ocupe todo el fondo, podemos contemplar como el texto queda esculpido en marmol. Existe la posibilidad de elegir el tipo y tamao de letra, la imagen de fondo y el espacio alrededor del texto.
Resplandor alienigena Podemos modificar el tipo y tamao de la fuente, as como el color del "fulgor"
Escarchado Nos permite la posibilidad de seleccionar el color de fondo, el tipo de letra y su tamao.
Imigre-26 Podremos seleccionar el color de la fuente de fondo, la de primer plano, as como el tamo y el tipo de las fuente utilizada. Un parmetro propio de este script es el fotograma, a mayor tamao, la fuente de primer trmino tapa a la de segundo trmino.
Libro de comic Adems de elegir la fuente y su tamao tambin nos permite elegir el gradiente para el relleno de texto, el contorno y los colores de fondo.
Metal fro Con pocos cambios conseguimos un resultado espectacular. Solo podemos cambiar el tipo y tamao de la fuente y el gradiente de relleno del texto
17 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Nen alienigena Fuente, tamao, color de fondo y color del fulgor, adems de permitirnos modificar las anchura de los huecos y de las bandas que aparecen alrededor de los textos.
Nen Otra posibilidad para el nen. En esta ocasin permite aadir una sombra al nen, siempre que el fondo no sea negro.
Texto circular El texto escrito se coloca en forma circular. Podemos seleccionar el tipo de fuente, el tamao, el radio de la circuferencia a lo largo de la cual se colocar el texto, as como al ngulo de relleno.
Texto de peridico Simula el textp de un peridico mirado a travs de una potente lupa. Podemos modificar el tamao y tipo de la fuente, color del fondo y texto, as como otro parmetros propios del Script.
Trazado de partculas Nos permite modificar el tipo de fuente y tamao, color de base y fondo, as como diversos parmetros para las partculas.
18 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Bovinado Simula la piel de vaca sobre el texto. Podemos seleccionar la fuente y taao, tambien la densidad de las mancha y su color de fondo.
19 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Prctica Prctica 1:
De los efectos anteriores vistos en teora usa los indicados entre parentesis, con los siguientes textos: Espada (Metal fro). Este quedar como la imagen siguiente:
Cola-Cao, el alimento de los campeones (Texto circular). Este quedar como la imagen siguiente:
20 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Ampliar conocimientos
http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/06rotulos.html
ndice. 1. Introduccin. 2. La caja de herramientas. 3. Los mens de la ventana. 4. Crear y guardar imgenes. 5. Las herramientas. 1/ De seleccin. 2/ De transformacin. 3/ De pintura. 4/ Otras herramientas.
6. Rtulos y logotipos. 7. Trabajo con capas. 8. Los filtros. 9. Animaciones. 10. El color. 11. Tutoriales. a/ El bfer. b/ Los mapas de imagen. c/ Tijeras inteligentes y curvas Bzier. d/ La herramienta clonar.
e/ Cambiar el tamao. f/ Dibujar rectas, cuadrados, crculos... g/ Transformar imgenes. h/ De foto a retrato. i/ Uso de filtros. j/ Las curvas de color. 12. Aadir nuevos elementos. 13. Personalizar la caja de herramientas. 14. Diccionario de emergencia.
6/ Logotipos y rtulos.
1.- Logo sin transparencia. La forma ms sencilla de dibujar un rtulo o logotipo es con la opcin Logotipos del men Archivo > Crear. Por ejemplo:
21 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 4
Temporizacin: 30 min
22 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
Usaremos la siguiente imagen, a la cual modificaremos su colo de fondo. Para ello hemos de descargarla a nuesdtro ordenador y abrirla mediante Gimp.
Primero usaremos el filtro Color a alfa, que est en Colores / Color a alfa
Se nos preguntar qu color queremos transformar en un canal alfa. Para coger el color del fondo podemos usar Coger colores de la imagen ( obtendremos el valor del color del fondo y se lo podremos decir al filtro Color a alfa
). Con ella
NOTA: esta seleccion pone transparente a los colores similares pero os puede quedar el logotipo con partes semitransparentes donde no deseamos. Posible solucion: usar cualquiera de las herramientas de seleccin para seleccionar el logo deseado, una vez seleccionado podemos ir a Seleccionar / Invertir para seleccionar todo menos el logo. De este modo pulsando Supr eliminaremos el fondo, dejando la imagen transparente. AHORA BIEN, puede ser que al recortar no os aparezca transparencia detrs lo cual se soluciona mediante aadir Canal alfa a la capa. Esto es:
23 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Despus de aplicar el filtro obtendremos la misma imagen que al principio, pero con un fondo transparente. La imagen resultante ser esta:
Ahora seleccionaremos el color que queramos para el nuevo fondo. Primero elegimos un color cualquiera y lo ponemos como color de frente mediante pulsar en
Despus crearemos una nueva capa, abriendo el cuadro Capas, canales y caminos y pulsando sobre el botn Crear nueva capa Rutas.En el tipo de relleno elegiremos Frente.
La nueva capa aparecer encima de nuestra imagen original, por lo que la desplazaremos hasta el fondo mediante pulsar
24 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Si queremos volver a cambiar el fondo bastar con editar la nueva capa que hemos creado PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO
25 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Prctica
26 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 5
Temporizacin: 50 min
27 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
CANAL ALFA
El canal alfa se refiere a lo que todos le llamamos transparencia. Esta transparencia en informatica se representa con un tejido liso de cuaadros de color gris claro y gris fuerte. Al abrir el logo anterior con el GIMP observareis la transparencia alrededor del logo. Afa al logotipo es una categoria de filtros para hacer logotipos pero tienen un requisito esencial. Ha de existir canal alfa, transparencia en su alrededor. Por un simple motivo: estos filtros la mayoria se bassan en el trazado de algo a partir de un borde. Para diferenciar bien un borde de forma precisa usar la transparencia.
SIN ALFA
Si escogeis una imagen de un logotipo o algo parecido, y teneis la suerte de que tiene el fondo de un color podeis hacerlo transparente, en caso conterior deberais recortar la imagen. Para ello se utilizara lo aprendido en la Seccin de "Modificar el fondo de una imagen". Empezemos con la modificacin del logo anterior: Abrimos la imagen con el gimp. Haremos transparente el fondo de la imagen, tal y como vimos anteriormente mediante Colores / Color a alfa y hace la transparencia a partir del color blanco:
de este modo tendremos una imagen con transparencia, a la cual aplicaremos el filtro Alfa a Logotipo:
28 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
CONTORNO 3D
Este filtro aade un contorno a partir de una textura. Vamos a Filtros / Alfa al logotipo / Contorno 3D (AVISO: si no nos deja seleccionar ninguno de estos efectos pulsais sobre la capa en si y le dais a "Aadir canal alfa"). Nos saldra el siguiente cuadro:
Donde dice patron podremos elegir entre el que mas nos guste. Si no te quieres complicar no toques las demas opciones pero si eres curisoso ve jugando con ellas. El resultado vendria a ser algo como esto (varia el resultado segun el patron):
CALOR RESPLANDECIENTE
Este da el efecto como si fuera la imagen de un sol resplandeciendo de color naranja potente. Nos dirigimos a Filtros / Alfa a Logotipo / Calor resplanddeciente El men es simple. Solo indicar el color del fondo y abajo el tamao del efecto.
Y el resultado final:
29 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
TIZA
Este simula el logo en pizarras etc... Como los dems: Filtros>Alfa a logotipo> Tiza Nos aparece el menu en el que solo hay que indicar el color que queramos de fondo (facil). El resultado seria este:
NEN
Este crea el efecto de luces de nen. El menu es el siguiente:
Primera opcion para indicar el tamao, la segunda el color de fondo, la tercera para indicar el color de la luz y la ultima es para indicar si quereis que se acabe de golpe o que tenga una sombra que haga un degradado mas elegante. Un resultado con esos mismos datos seria este:
ESCARCHADO
Se accede como todos... Filtros>Alfa a Logotipo>Escarchado . El men es este:
30 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Elegiremos el color de fondo de nuestra imagen y el numero de pixeles que queremos usar para el efecto, el cual contrariamente a lo que podramos pensar, cuanto menor es este numero mayor es el efecto de hielo producido en la imagen final. Resultado final:
31 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Prctica
- Desmenuzar
- Nen alienigena
32 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 6
Temporizacin: 50 min
33 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
En esta prctica aprenderemos como el Gimp permite hacer imgenes animadas. en este caso veremos como hacer un contador de inicio de pelcula. Para ello hemos de crear todas las capas que forman nuestra animacin y despues le indicaremos que se guarde como una animacion. Veamoslo por pasos: 1- Creamos una nueva imagen de 200 x 200:
2- Sobre la capa de la imagen volcamos un cubo de pintura negro. Cambiamos las opciones de la herramienta de texto para que sean como las siguientes:
De este modo escribimos sobre la capa de fondo negro un nmero 5 en blanco. Esto crea las siguientes dos capas:
3- El siguiente paso es hcaer un circulo en blanco dentro del cuadro negro (dentro de este circulo ir el nmero).Para hacer el circulo elegimos la herramienta de seleccion circular . de este modo seleccionamos un crculo y lo rellenamos de blanco.
34 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
4- Una vez hecho lo anterior pasamos a encoger la seleccin en 7 puntos. Para ello vamos a Seleccionar/Encoger
Pintamos el interior de negro. Para esto, una forma diferente a escoger el cubo de pintura, es arrastrar el color negro al interior de la seleccin.
5- Una vez tenemos las dos capas que muestran el nmero en el interior de un crculo , lo que haremos ser hacer 5 copias de cada una de las capas. Una vez hechas las copias modificamos los nmeros de modo que sean 5,4,3,2,1. Esto es:
35 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
6- Lo que debemos hacer a continuacin es combinar las capas para tenerlas tal y como muestra la firua. Para ello lo que debmos hacer es llevar las capas que deseemos combinar lo ms abajo posible y hacer solo visible esas capas. Nos situamos en la penultima capa, pulsamos botn secundario y elegimos "Combinar hacia abajo"
36 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
7- Ya tenemos preparada nuestra imagen. Ahora iremos a Filtros/Animacion/Optimizar para gif. Esto nos crear una nueva imagen con las capas optimizadas. Cambiamos el nombre de las capas para que en vez de durar 100 ms cada capa dure 1000ms, es decir un segundo por cada capa. Esto es:
8- De este modo guardamos la imagen como entrada.gif y eligiremos las siguientes opciones (Atencin a guardar como Animacin)
37 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Guardamos el resultado tambien como entrada.xcf El resultado final ser como el siguiente:
38 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Prctica
Entregad el .XCF resultante (el de despus de aplicar el filtro). Nota: se ha utilizado para crear esta animacin las siguientes capas (antes de combinarlas y usar el filtro)
39 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Ampliar conocimientos
http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/09animaciones.html
ndice. 1. Introduccin. 2. La caja de herramientas. 3. Los mens de la ventana. 4. Crear y guardar imgenes. 5. Las herramientas. 1/ De seleccin. 2/ De transformacin. 3/ De pintura. 4/ Otras herramientas.
6. Rtulos y logotipos. 7. Trabajo con capas. 8. Los filtros. 9. Animaciones. 10. El color. 11. Tutoriales. a/ El bfer. b/ Los mapas de imagen. c/ Tijeras inteligentes y curvas Bzier. d/ La herramienta clonar.
e/ Cambiar el tamao. f/ Dibujar rectas, cuadrados, crculos... g/ Transformar imgenes. h/ De foto a retrato. i/ Uso de filtros. j/ Las curvas de color. 12. Aadir nuevos elementos. 13. Personalizar la caja de herramientas. 14. Diccionario de emergencia.
9.- Animaciones
Una animacin es el efecto visual creado por el movimiento de varias capas superpuestas de la misma imagen a la velocidad suficiente para engaar al ojo humano. El proceso de creacin de animaciones es sencillo: Por ejemplo para hacer un rtulo con la palabra LinEx que vaya apareciendo letra a letra. 1. Creamos una nueva imagen. Archivo > Nuevo > Nueva imagen. 400 x 150 pxeles. Fondo transparente. 2. Elegimos la herramienta Texto 80 Si es necesario, con la herramienta Mover Duplicamos la capa. Seleccionamos de nuevo la herramienta Texto y pulsando sobre la letra L aadimos ahora la i, o mejor espacio + i colocamos la letra L en su sitio. en la caja de herramientas y escribimos en la ventana L Tipografa Serif Bold Italic. Tamao
40 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 7
Temporizacin: 30 min
41 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
42 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Aparece una opcin para indicar la fuerza de la onda y otra para decidir como se comporta la ondulacin en el borde, es decir, cuando se agita se crea un hueco en los lmites de la imagen. Esta opcin te permite decidir como se va a rellenar ese hueco. El nmero de fotogramas es el nmero de fotos que contendr tu animacin para que al pasarlas todas juntas nos de la sensacin de que la imagen ondea. Cuantos ms fotogramas pongas, la animacin ir ms lenta. Aqu te dejo el nmero de fotogramas que gener esta macro al elegir 25 fotogramas. No ponemos todos sino solo una muestra para que se observe como cambia la imagen:
Cuando pulses aceptar vers que la animacin tarda en generarse. Esto depender del nmero de fotogramas que hayas puesto, del tamao de la imagen y del equipo que poseas. Al terminar observars que tienes dos imgenes. La primera es la imagen original y la segunda es la que ha creado Gimp al aplicar la ondulacin. La nueva imagen tiene tantas capas como fotogramas (como puedes observar en la imagen de la izquierda). Al igual a como pasaba con las pelculas de celuloide, la animacin no es ms que una serie de imgenes estticas que al pasarlas muy deprisa te da la ilusin de movimiento.
43 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Ahora te pedir un nombre para la nueva imagen. Llmala Bandera ondeando.gif. Fijense que le hemos puesto .gif. Con sto Gimp tiene suficiente para saber de que formato se trata:
Ahora has de decidir que la imagen GIF sea una animacin. Elije la opcin Guardar como animacin
44 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Por ltimo, aceptas la ltima ventana. La opcin de entrelazado ha dejado de tener sentido ante el aumento de velocidad de nuestras conexiones de internet. Antes, se pagaba a precio de oro la conexin lenta que tena. Si queras ver una imagen debas esperar a descargarla toda para descubrir que no era la que buscabas. La opcin de entrelazado nos permite bajarnos parte de la imagen a baja resolucin. De esta forma podas cancelar la descarga en cuanto adivinabas que no era la que buscabas. Por otra parte, indicaremos el retardo entre fotogramas en 200 milisegundos.
45 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Prctica
llegue a tener una animacin similar a la siguiente. Para ello usar el segundo filtro Ondas (no usado en la teora)
46 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Ampliar conocimientos
http://www.doredin.mec.es/documentos/00820082000092/tem10/hoja1004.htm
Animacin
La animacin es algo muy sencillo en GIMP. Consiste en crear distintas capas sobre las que aplicaremos la opcin " guardar como animacin". El formato en que debemos guardar la imagen animada debe ser GIF, ya que es el nico que nos permite guardar como animacin. Cada capa de nuestra imagen se convierte, en la animacin, en un fotograma que se expone durante un pequeo espacio de tiempo para proporcionar el efecto de animacin. Hagamos una prueba para comprobar el funcionamiento de la animacin en GIMP. 1. Creemos una imagen nueva con el tamao 300 x 100 pixeles y fondo blanco. 2. Vamos a crear una animacin que nos muestre poco a poco el texto "El Gimp". Pongamos unas lneas gua en nuestra Ventana Imagen para que no haya saltos en el alineamiento del texto. Seleccionemos la herramienta texto y con el tipo de letra que viene por defecto y tamao 50 pxeles escribamos la letra "E". Aceptamos y colocamos la letra en las guas que tenemos en la Ventana Imagen. 3. Vamos creando capas de texto para cada una de las letras que componen nuestra imagen hasta obtener...
4. Haciendo clic con el botn derecho sobre la Ventana Imagen seleccionamos Filtros --> Animacin --> Optimizar para GIF. Lo que hace es preparar nuestra imagen en capas transparentes, para que la podamos guardar en este formato. Crea una nueva imagen en la que obtenemos 7 capas, una totalmente blanca y 6 con cada una de las letras. 5. En esta nueva Ventana Imagen accedemos a Archivo --> Guardar como y tras poner el nombre del archivo seleccionamos el formato GIF. Aceptamos.
En esta ocasin vemos que la opcin Guardar como animacin aparece activa y es la que debemos elegir. Exportamos. 6. Nos aparece el cuadro de dilogo Guardar como GIF con las "opciones de GIF animado" activadas.
47 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Seccin 8
Temporizacin: 40 min
48 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Teora
Queremos poner una imagen en una pgina web pero no toda ella como un enlace, sino usar zonas de la imagen para diferentes enlaces. Veamos como se hace con un ejercicio guiado:
Abre la imagen en el Gimp(Archivo -> Abrir). En nuestro caso usaremos la siguiente imagen(debereis descargarla previamente al ordenador)
Se abre una nueva ventana con un nuevo editor. Seleccionaremos una zona con una de las herramientas de la izquierda (rectngulos, crculos o polgonos).
Ve haciendo clicks para crear los nodos de tu seleccin y en el ltimo haz un doble click.
Se abrir entonces una nueva ventana en la que puedes seleccionar el tipo de enlace (sitio web, correo, ftp) donde pondremos la direccin de internet a la que quieres que se dirija el navegador al pulsar sobre esa zona de la imagen.
49 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Una vez le das a aceptar, te crea una entrada para esa zona recin seleccionada en la pila de selecciones, que est a la derecha de la ventana, debajo del ttulo Seleccin. Para editarla, slo tendrs que seleccionarla de ah y darle al iconito de editar
Ahora puedes crear ms zonas diferentes, con sus propios enlaces, que se van agregando a la pila de selecciones.
Cuando ya tengas todas las zonas creadas y sus correspondientes enlaces, ve a Archivo -> Guardar como y gurdalo con el nombre EjmapaImagen.html
50 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Ya puedes abrir ese fichero con tu navegador preferido y comprobar que funciona. PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO
51 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Prctica
Usando la tcnica anteriormente explicada realiza un mapa de imagen( y guardalo como EjmapaImagen-2.html) con la imagen siguiente, de modo que al pulsar en la provincia de :
52 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Ampliar conocimientos
http://docs.google.com/Doc?id=dhs3vfzq_1786db5m72ds
A veces necesitamos crear enlaces en zonas de una imagen y no queremos enredarnos a crear botones. Gimp permite seleccionar las zonas que actuarn como vnculos y nos permitir editar todo lo necesario, como el destino de ese enlace, para poder obtener el cdigo necesario para su perfecta integracin en el diseo de nuestra pgina (que nosotros crearemos con Kompozer). Este proceso se denomina Mapa de imagen. Lo primero es disponer de la imagen que servir de base para el mapa:
53 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Fuentes de informacin
Fuentes de informacin
Las siguientes fuentes se han utilizado para la elaboracin del material de esta sesin, recomendandose su visita por parte del alumnado para la ampliacin de conocimientos. - Bibliografa http://docs.gimp.org/2.6/es/ http://www.gimp.org.es/
- Enlaces http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/09animaciones.html http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/07capas.html http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/06rotulos.html http://www.doredin.mec.es/documentos/00820082000092/tem10/hoja1004.htm http://tecnologiaedu.uma.es/materiales/gimp/archivos/ManualGIMP_Cap2.pdf http://tecnologiaedu.uma.es/materiales/gimp/archivos/ManualGIMP_Cap3.pdf http://docs.google.com/Doc?id=dhs3vfzq_1786db5m72ds - Entradas a Wikipedia http://es.wikipedia.org/wiki/Graphics_Interchange_Format
54 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Resumen final
55 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Autoevaluacin
j Las difentes partes que componen la imagen separadas a modo de hojas que se superponene para formar la imagen. k l m n j Partes de una imagen separadas por color k l m n
Por que se guardan varias versiones de un botn web?
j Por seguridad, no vayamos a perder alguna k l m n j Por los diferentes estado en web: sin pulsar, pulsado o sobre el. k l m n
Que permite la opcin de menu "Color a alfa" del menu Colores?
j Permite refrescar las capas de la imagen para de este modo ver los ltimos cambios realizados k l m n j Permite cambiar un color de la imagen por transparencia k l m n
Que permiten los filtros de tipo "Alfa a logotipo" del menu Filtros?
j Permiten detectar el borde de la imagen y crear a partir de este diferentes efectos k l m n j Permiten recortar las partes transparentes de una imagen k l m n
Cual es la base de un gif animado?
j El color de fondo en el que se visualiza k l m n j Un conjunto de capas que al pasar de una otra crean el efecto de movimiento. k l m n
Un mapa de imagen es una imagen esttica?
j No, ms bien es un conjunto de imagenes que apuntan a diferentes enlaces k l m n j Si, ya que no es una imagen animada k l m n
Respuestas propuestas
56 of 57
21/09/2010 12:05
02_Gimp_orientado_a_elementos_multimedia
http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_...
Este artculo est licenciado bajo Creative Commons Attribution-NonCommercial 2.5 License Formaci del Professorat - CEFIRE
57 of 57
21/09/2010 12:05