Tema 2. Gimp Orientado A Elementos Multimedia Url

Transcript

02_Gimp_orientado_a_elementos_multimedia 1 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Materials curriculars INF Tema 2 CEFIRE Gimp orientado a elementos multimedia Actividad de Espacios en Blanco Read the paragraph below and fill in the missing words. Enviar 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 2 of 57 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 párrafo anterior recomendamos como conocimientos previos para el alumnado: - Conocer un uso básico de GIMP - Saber la diferencia entre una imagen estática y una dinámica (http://es.wikipedia.org/wiki/Graphics_Interchange_Format) Si algún alumno quiere saber como crear una página web fácilmente donde insertar nuestras imagenes le recomendamos la herramienta Kompozer (http://kompozer.net/), y el siguiente tutorial para la iniciación 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 creación de presentaciones digitales http://www.josedomingo.org/web/course/view.php?id=53 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 3 of 57 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 creación de material para presentaciones multimedia (por ejemplo, la web). Más concretamente los objetivos son: 1. 2. 3. 4. Conocer que son las capas de una imagen Aprender a crear botones web de forma automática 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 automática 6. Entender como se crean automáticamente menús visuales web (mapa de imagen) 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 4 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Contenidos Contenidos Que nos permitirán alcanzar los objetivos anteriormente descritos, se dividen en 1. Introducción a las Capas de GIMP 2. Creación de botones web 3. Crear logos 4. 5. 6. 7. 8. Modificación del fondo de una imagen Modificar logotipos (Alfa a Logotipo) Crear un gif animado manualmente. Crear un gif animado automáticamente. Crea un mapa de imagen 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 5 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Criterios de evaluación Criterios de Evaluación Para aprobar esta sesión 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 sesión aprobada. Con el objetivo de poder diferenciar las entregas de los alumnos cada entrega se hará siguiendo el siguiente patrón: 1- se comprimirán los resultados de cada sección en un fichero comprimido tipo .ZIP 2- se renombrará con el nombre del alumno, primer apellido y sección del siguiente modo: nombre1_apellido1_tema1_seccionX.zip (Ej: vicente_rubio_tema2_seccion1.zip) 3- Cada sección se entregará por separado El examen de autoevaluación no será entregado al profesor. Servirá al alumnado para comprobar sus conocimientos adquiridos a lo largo de la sesión. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 6 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 1 Introducción a las Capas de GIMP Temporización: 20 min. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 7 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría Las capas en GIMP Consideramos muy importante conocer el funcionamiento del sistema de capas en GIMP. Las capas permiten hacer cambios que no afecten a la imagen de partida o a parte de ella y deshacerlos. En este apartado conoceremos como funcionan las capas en GIMP y comenzaremos a trabajar con ellas. ¿Qué son las capas? Las capas son como hojas de acetato que se superponen, para componer juntas. Podemos tratar cada acetato de forma independiente e ir obteniendo distintas imágenes con su combinación. Pero aquí las posibilidades de modificar las capas son mucho mayores que las de un acetato: se pueden cortar, cambiar de tamaño, alinearlas, añadir máscaras, cambiar su posición, moverlas o tener diferente grado de opacidad-transparencia. La Ventana Capas, Canales, Rutas y Deshacer Este es el lugar donde se gestionan las capas para todas las Ventanas Imagen. Se abre pulsando en la Ventana Imagen: Diálogos -- > Crear un empotrable nuevo --> Capas, Canales y Rutas. 1. Selección de imágenes. Si tenemos varias Ventanas Imagen abiertas, podemos elegir la imagen sobre la que trabajaremos. 2. Pestañas Capas, Canales, Rutas y Deshacer. Por defecto queda seleccionada la pestaña Capas, que es con la que vamos a trabajar en estos momentos. 3. Los botones específicos de la opción 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 botón 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 cambiárselo, quedando reflejado en la Paleta de Capas. Los botones nos permiten cambiar de lugar (subir o bajar) la capa seleccionada. Si tenemos seleccionada una capa y hacemos clic en el botón la eliminamos. También sucede lo mismo si la arrastramos y soltamos dentro del botón Papelera. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 8 of 57 Cada vez que presionemos en el botón 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 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 9 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Ampliar conocimientos http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/07capas.html Pablo García Blanco I.E.S. Muñoz-Torrero Cabeza del Buey (Badajoz) Índice. 1. Introducción. 2. La caja de herramientas. 3. Los menús de la ventana. 4. Crear y guardar imágenes. 5. Las herramientas. 1/ De selección. 2/ De transformación. 3/ De pintura. 4/ Otras herramientas. 6. Rótulos y logotipos. 7. Trabajo con capas. 8. Los filtros. 9. Animaciones. 10. El color. 11. Tutoriales. a/ El búfer. b/ Los mapas de imagen. c/ Tijeras inteligentes y curvas Bèzier. d/ La herramienta clonar. e/ Cambiar el tamaño. f/ Dibujar rectas, cuadrados, círculos... g/ Transformar imágenes. h/ De foto a retrato. i/ Uso de filtros. j/ Las curvas de color. 12. Añadir nuevos elementos. 13. Personalizar la caja de herramientas. 14. Diccionario de emergencia. 7.- Trabajo con capas. Toda la potencia de El GIMP se muestra en el trabajo con capas. Las imágenes se organizan en capas superpuestas que son láminas transparentes con porciones de la imagen. Las capas deben ser transparentes para que se puedan ver las que están debajo. La inferior, la última, puede ser transparente y entonces veríamos lo que hay detrás o tener su propio fondo. Una imagen es como una pila de transparencias. Cada transparencia se llama capa. No hay límite para el número de capas que puede tener una imagen: sólo la cantidad de memoria disponible en el sistema. Permiten separar los niveles del gráfico que después se mezclan para formar la imagen final. Las capas son apilables. Se manejan de manera independiente. Pueden tener zonas transparentes (representadas por una cuadrícula en forma de tablero de ajedrez), regiones donde los píxeles no tienen ningún color. Forman el canal alfa. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 10 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 2 Creación de botones web Temporización: 40 min. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 11 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría Crear botones Paso 1 Las páginas web tienen imágenes animadas, botones, animaciones flash, etc. En esta sección Veremos como crear los botones. Normalmente en una web se distinguen entre tres tipos de estados de un enlace. Gimp viene con una utilidad que te permite crear los tres tipos de botones que necesitas: No pulsado. Este tipo de botón es el que aparece en la página tal cual. No está hundido ni está resaltado porque el cursor está encima de él. No pulsado – activo. Este es el caso anterior pero el cursor está justo encima del botón. En internet habrás observado que en este caso el botón ha de “iluminarse”, es decir, aparece resaltado respecto a los demás pero sin estar hundido. Pulsado. Ahora estas en el caso de que has pulsado el botón. Éste ha de aparecer hundido fruto de haber pulsado, normalmente, el botón izquierdo del ratón. Veamos como crear botones. Debes de ir a “Archivo / Crear / Botones / Botón redondo” y se mostrará la siguiente pantalla de configuración: Si pulsas cualquiera de los colores te saldrá el diálogo se selección de color 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 12 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Aconsejamos usar las siguientes características para crear los botones: Tipo de letra utilizado: AlMateen Bold Tamaño: 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 equivocarás. 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 verás 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. Fíjate en la diferencia: Observa ese fondo amarillo alrededor del botón 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 imágenes soportadas por los navegadores de internet y GIF lo es por todos (cosa que XCF no). PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 13 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Practica Cree un botón similar al siguiente: Nota: Este botón se ha creado mediante Archivo / Crear / Botones / Botón Simple Biselado El entregable será de tipo XCF y de tipo GIF 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 14 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 3 Crear logos Temporización:50 min 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 15 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría Crear Logos Crearemos logos automáticamente 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 parámetros 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 más 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 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 16 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Básico I Podemos modificar el color de fondo, de primer plano y el tipo y tamaño de letra Básico II Podemos modificar el color de fondo, de primer plano y el tipo y tamaño de letra Cabecera de página Web Sencillo y efectivo. Solo podemos seleccionar el tipo de fuente y el tamaño de la misma Calor resplandenciente Podemos cambiar el tipo de letra, su tamaño y seleccionar el color de fondo de la imagen Texturizado El texto se situa sobre un fondo con textura.Podemos modifical el tipo y tamaño de letra, el patrón 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 título sobre fotografías. Podemos modificar el tipo de letra, el tamaño, el patrón de relleno de las letras y las características del relieve que proporciona el Script. También podemos añadir sombra a nuestro texto. Cristal Se trata de un Script muy elaborado y efectista. A las posibilidades habituales se une la elección de ula imagen de fondo y de su entorno. Cromado flipante Su nombre lo dice todo.Podemos modificar distintos parámetros sobre el cromado que se consigue, elegir la imagen de fondo, tipo y tamaño de letra, así como el color y brillo del cromado. Cromado 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 17 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sencillo cromado donde podemos modificar el tipo y tamaño 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 tamaño de letra, la imagen de fondo y el espacio alrededor del texto. Paisaje estelar El color de fondo de la estrella es parametrizable Resplandor alienigena Podemos modificar el tipo y tamaño 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 tamaño. Imigre-26 Podremos seleccionar el color de la fuente de fondo, la de primer plano, así como el tamño y el tipo de las fuente utilizada. Un parámetro propio de este script es el fotograma, a mayor tamaño, la fuente de primer término tapa a la de segundo término. Libro de comic Además de elegir la fuente y su tamaño también nos permite elegir el gradiente para el relleno de texto, el contorno y los colores de fondo. Metal frío Con pocos cambios conseguimos un resultado espectacular. Solo podemos cambiar el tipo y tamaño de la fuente y el gradiente de relleno del texto 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 18 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Neón alienigena Fuente, tamaño, color de fondo y color del fulgor, además de permitirnos modificar las anchura de los huecos y de las bandas que aparecen alrededor de los textos. Neón Otra posibilidad para el neón. En esta ocasión permite añadir una sombra al neón, siempre que el fondo no sea negro. Texto circular El texto escrito se coloca en forma circular. Podemos seleccionar el tipo de fuente, el tamaño, el radio de la circuferencia a lo largo de la cual se colocará el texto, así como al ángulo de relleno. Texto de periódico Simula el textp de un periódico mirado a través de una potente lupa. Podemos modificar el tamaño y tipo de la fuente, color del fondo y texto, así como otro parámetros propios del Script. Trazado de partículas Nos permite modificar el tipo de fuente y tamaño, color de base y fondo, así como diversos parámetros para las partículas. Tiza Podemos seleccionar la tipografía, color de fondo y color de la tiza. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 19 of 57 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 tañaño, tambien la densidad de las mancha y su color de fondo. PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 20 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Práctica Práctica 1: De los efectos anteriores vistos en teoría usa los indicados entre parentesis, con los siguientes textos: Espada (Metal frío). Este quedará como la imagen siguiente: Cola-Cao, el alimento de los campeones (Texto circular). Este quedará como la imagen siguiente: Menta (Trazado de partículas). Este quedará como la imagen siguiente: Las Provincias (Texto de periódico). Este quedará como la imagen siguiente: Universo (Paisaje estelar). Este quedará como la imagen siguiente: Entrega los resultados en .xcf, uno por cada logo. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 21 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Ampliar conocimientos http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/06rotulos.html Pablo García Blanco I.E.S. Muñoz-Torrero Cabeza del Buey (Badajoz) Índice. 1. Introducción. 2. La caja de herramientas. 3. Los menús de la ventana. 4. Crear y guardar imágenes. 5. Las herramientas. 1/ De selección. 2/ De transformación. 3/ De pintura. 4/ Otras herramientas. 6. Rótulos y logotipos. 7. Trabajo con capas. 8. Los filtros. 9. Animaciones. 10. El color. 11. Tutoriales. a/ El búfer. b/ Los mapas de imagen. c/ Tijeras inteligentes y curvas Bèzier. d/ La herramienta clonar. e/ Cambiar el tamaño. f/ Dibujar rectas, cuadrados, círculos... g/ Transformar imágenes. h/ De foto a retrato. i/ Uso de filtros. j/ Las curvas de color. 12. Añadir nuevos elementos. 13. Personalizar la caja de herramientas. 14. Diccionario de emergencia. 6/ Logotipos y rótulos. 1.- Logo sin transparencia. La forma más sencilla de dibujar un rótulo o logotipo es con la opción Logotipos del menú Archivo > Crear. Por ejemplo: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 22 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 4 Modificación del fondo de una imagen Temporización: 30 min 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 23 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría 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 selección 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 detrás lo cual se soluciona mediante añadir Canal alfa a la capa. Esto es: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 24 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Después 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 . Seleccionamos el color deseado, por ejemplo lila: Después crearemos una nueva capa, abriendo el cuadro Capas, canales y caminos y pulsando sobre el botón 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 del dialogo de Capas, Canales y de modo que quede: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 25 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Con esto, ya deberíamos obtener nuestra imagen final. Si queremos volver a cambiar el fondo bastará con editar la nueva capa que hemos creado PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 26 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Práctica Mofifica el siguiente logo para que quede semejante a este Entrega el .XCF resultante. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 27 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 5 Modificar logotipos (Alfa a Logotipo) Temporización: 50 min 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 28 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría Descarguemos la siguiente imagen, y abramosla desde GIMP: Veamos un poco de teoría antes de empezar a tratar el logo: 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 deberíais recortar la imagen. Para ello se utilizaría lo aprendido en la Sección de "Modificar el fondo de una imagen". Empezemos con la modificación 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: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 29 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... CONTORNO 3D Este filtro añade 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 "Añadir 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 tamaño del efecto. Y el resultado final: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 30 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... TIZA Este simula el logo en pizarras etc... Como los demás: 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: NEÓN Este crea el efecto de luces de neón. El menu es el siguiente: Primera opcion para indicar el tamaño, 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: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 31 of 57 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 podríamos pensar, cuanto menor es este numero mayor es el efecto de hielo producido en la imagen final. Resultado final: PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 32 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Práctica Usando el siguiente logo modifiquelo mediante los siguientes efectos de Alfa a logotipo: - Calor resplandeciente - Desmenuzar - Neón alienigena Entregue cada efecto en un .XCF por separado. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 33 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 6 Crear un gif animado manualmente. Temporización: 50 min 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 34 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría En esta práctica aprenderemos como el Gimp permite hacer imágenes animadas. en este caso veremos como hacer un contador de inicio de película. Para ello hemos de crear todas las capas que forman nuestra animación 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 número 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 número).Para hacer el circulo elegimos la herramienta de seleccion circular . de este modo seleccionamos un círculo y lo rellenamos de blanco. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 35 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... 4- Una vez hecho lo anterior pasamos a encoger la selección en 7 puntos. Para ello vamos a Seleccionar/Encoger De este modo aparece lo siguiente: 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 selección. 5- Una vez tenemos las dos capas que muestran el número en el interior de un círculo , lo que haremos será hacer 5 copias de cada una de las capas. Una vez hechas las copias modificamos los números de modo que sean 5,4,3,2,1. Esto es: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 36 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... 6- Lo que debemos hacer a continuación 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 más abajo posible y hacer solo visible esas capas. Nos situamos en la penultima capa, pulsamos botón secundario y elegimos "Combinar hacia abajo" De este modo nos queda: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 37 of 57 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: y queda como sigue: 8- De este modo guardamos la imagen como entrada.gif y eligiremos las siguientes opciones (Atención a guardar como Animación) 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 38 of 57 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: PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 39 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Práctica Crea una animación similar a Entregad el .XCF resultante (el de después de aplicar el filtro). Nota: se ha utilizado para crear esta animación las siguientes capas (antes de combinarlas y usar el filtro) 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 40 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Ampliar conocimientos http://iesmunoztorrero.juntaextremadura.net/web/lenix/gimp26/09animaciones.html Pablo García Blanco I.E.S. Muñoz-Torrero Cabeza del Buey (Badajoz) Índice. 1. Introducción. 2. La caja de herramientas. 3. Los menús de la ventana. 4. Crear y guardar imágenes. 5. Las herramientas. 1/ De selección. 2/ De transformación. 3/ De pintura. 4/ Otras herramientas. 6. Rótulos y logotipos. 7. Trabajo con capas. 8. Los filtros. 9. Animaciones. 10. El color. 11. Tutoriales. a/ El búfer. b/ Los mapas de imagen. c/ Tijeras inteligentes y curvas Bèzier. d/ La herramienta clonar. e/ Cambiar el tamaño. f/ Dibujar rectas, cuadrados, círculos... g/ Transformar imágenes. h/ De foto a retrato. i/ Uso de filtros. j/ Las curvas de color. 12. Añadir nuevos elementos. 13. Personalizar la caja de herramientas. 14. Diccionario de emergencia. 9.- Animaciones Una animación es el efecto visual creado por el movimiento de varias capas superpuestas de la misma imagen a la velocidad suficiente para engañar al ojo humano. El proceso de creación de animaciones es sencillo: Por ejemplo para hacer un rótulo con la palabra LinEx que vaya apareciendo letra a letra. 1. Creamos una nueva imagen. Archivo > Nuevo > Nueva imagen. 400 x 150 píxeles. Fondo transparente. 2. Elegimos la herramienta Texto en la caja de herramientas y escribimos en la ventana L Tipografía Serif Bold Italic. Tamaño 80 Si es necesario, con la herramienta Mover colocamos la letra L en su sitio. Duplicamos la capa. Seleccionamos de nuevo la herramienta Texto y pulsando sobre la letra L añadimos ahora la i, o mejor espacio + i 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 41 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 7 Crear un gif animado automáticamente. Temporización: 30 min 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 42 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría Crear una imagen animada automáticamente Para la creación de páginas web, presentaciones digitales, etc. es interesante que dispongas de iconos animados en formato gif. En esta práctica aprenderás a aplicar el efecto de ondulación a una bandera. El efecto final será como si tu bandera estuviera ondeando al viento. Paso 1 – Abrir la bandera Lo primero que harás es abrir la bandera valenciana. Paso 2 – Aplicar el script de animación Ahora vas a aplicar el script de animación. Ves a la opción Filtros / Animación / Ondas 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 43 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Te saldrá la siguiente ventana Aparece una opción para indicar la fuerza de la onda y otra para decidir como se comporta la ondulación en el borde, es decir, cuando se agita se crea un hueco en los límites de la imagen. Esta opción te permite decidir como se va a rellenar ese hueco. El número de fotogramas es el número de fotos que contendrá tu animación para que al pasarlas todas juntas nos de la sensación de que la imagen ondea. Cuantos más fotogramas pongas, la animación irá más lenta. Aquí te dejo el número 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 verás que la animación tarda en generarse. Esto dependerá del número de fotogramas que hayas puesto, del tamaño de la imagen y del equipo que poseas. Al terminar observarás que tienes dos imágenes. La primera es la imagen original y la segunda es la que ha creado Gimp al aplicar la ondulación. La nueva imagen tiene tantas capas como fotogramas (como puedes observar en la imagen de la izquierda). Al igual a como pasaba con las películas de celuloide, la animación no es más que una serie de imágenes estáticas que al pasarlas muy deprisa te da la ilusión de movimiento. Paso 3 – Guardar la imagen como GIF La animación la consigue Gimp al utilizar una capa por cada fotograma. Por tanto, si el formato que elijamos para guardar la imagen ha de soportar las capas. Sin embargo, el único que soporta las capas como animación es el formato GIF. Para guardar la imagen como animación GIF ves a la opción “Archivo / Guardar como” 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 44 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Ahora te pedirá un nombre para la nueva imagen. Llámala “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 animación. Elije la opción “Guardar como animación” 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 45 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Por último, aceptas la última ventana. La opción 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 conexión lenta que tenía. Si querías ver una imagen debías esperar a descargarla toda para descubrir que no era la que buscabas. La opción de entrelazado nos permite bajarnos parte de la imagen a baja resolución. De esta forma podías cancelar la descarga en cuanto adivinabas que no era la que buscabas. Por otra parte, indicaremos el retardo entre fotogramas en 200 milisegundos. Paso 4 – Comprobar la animación con el navegador Para ver la animación puedes hacerlo desde un navegador web cualquiera. PULSA AQUI PARA VER UN VIDEOTUTORIAL EXPLICATIVO 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 46 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Práctica Partiendo de la siguiente imagen llegue a tener una animación similar a la siguiente. Para ello usará el segundo filtro Ondas (no usado en la teoría) Entregue el archivo .XCF 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 47 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Ampliar conocimientos http://www.doredin.mec.es/documentos/00820082000092/tem10/hoja1004.htm Animación y web > Animación Animación La animación es algo muy sencillo en GIMP. Consiste en crear distintas capas sobre las que aplicaremos la opción " guardar como animación". El formato en que debemos guardar la imagen animada debe ser GIF, ya que es el único que nos permite guardar como animación. Cada capa de nuestra imagen se convierte, en la animación, en un fotograma que se expone durante un pequeño espacio de tiempo para proporcionar el efecto de animación. Hagamos una prueba para comprobar el funcionamiento de la animación en GIMP. 1. Creemos una imagen nueva con el tamaño 300 x 100 pixeles y fondo blanco. 2. Vamos a crear una animación que nos muestre poco a poco el texto "El Gimp". Pongamos unas líneas guía 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 tamaño 50 píxeles escribamos la letra "E". Aceptamos y colocamos la letra en las guías 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 botón derecho sobre la Ventana Imagen seleccionamos Filtros --> Animación --> 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 ocasión vemos que la opción Guardar como animación aparece activa y es la que debemos elegir. Exportamos. 6. Nos aparece el cuadro de diálogo Guardar como GIF con las "opciones de GIF animado" activadas. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 48 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Sección 8 Crea un mapa de imagen Temporización: 40 min 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 49 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Teoría Queremos poner una imagen en una página 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) Pulsar en Filtros -> Web -> Mapa de imagen. Se abre una nueva ventana con un nuevo editor. Seleccionaremos una zona con una de las herramientas de la izquierda (rectángulos, círculos o polígonos). Ve haciendo clicks para crear los nodos de tu selección 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 dirección de internet a la que quieres que se dirija el navegador al pulsar sobre esa zona de la imagen. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 50 of 57 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 recién seleccionada en la pila de selecciones, que está a la derecha de la ventana, debajo del título Selección. Para editarla, sólo tendrás que seleccionarla de ahí y darle al iconito de editar Ahora puedes crear más 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 guárdalo con el nombre EjmapaImagen.html en la misma carpeta donde estaba la imagen inicial. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 51 of 57 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 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 52 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Práctica Usando la técnica 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 : Castellón: vayamos a http://www.castello.es Valencia; vayamos a http://www.ayto-valencia.es Alicante: vayamos a http://www.alicante-ayto.es Debereis entregar tanto el .html resultante como la imagen asociada. 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 53 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Ampliar conocimientos http://docs.google.com/Doc?id=dhs3vfzq_1786db5m72ds Licencia Creative Commons El Blog de Joaclint Istgud Kompozer y Gimp: mapa de imagen para una web A veces necesitamos crear enlaces en zonas de una imagen y no queremos enredarnos a crear botones. Gimp permite seleccionar las zonas que actuarán como vínculos y nos permitirá editar todo lo necesario, como el destino de ese enlace, para poder obtener el código necesario para su perfecta integración en el diseño de nuestra página (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: 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 54 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Fuentes de información Fuentes de información Las siguientes fuentes se han utilizado para la elaboración del material de esta sesión, recomendandose su visita por parte del alumnado para la ampliación de conocimientos. - Bibliografía 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 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 55 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Resumen final Reflexión del tema Preguntamos "¿para qué ha servido este tema?" 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 56 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Autoevaluación Examen SCORM - ejemplo ¿Que son las capas de una imagen? 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 botón 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 opción 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 estática? j No, más 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 21/09/2010 12:05 02_Gimp_orientado_a_elementos_multimedia 57 of 57 http://127.0.0.1:51235/temp_print_dirs/eXeTempPrintDir_d8caii/02_... Este artículo está licenciado bajo Creative Commons Attribution-NonCommercial 2.5 License Formació del Professorat - CEFIRE 21/09/2010 12:05