Diseño web con el GIMP.

8 03 2012

Podemos usar el GIMP para diseñar los elementos gráficos de nuestra página web o blog: personalizar la cabecera, hacer animaciones (gif animados) imágenes con zonas “sensibles”, o diseñar nuestros propios botones, flechas, etc.Lo primero vamos a crear un blog en educastur, en el que poder “subir” todas nuestras creaciones, si ya disponemos de él vamos a personalizarlo.El blog que he creado se llama “Viaje estudios de mi cole” y su finalidad será recoger en él toda la información relativa al viaje de estudios, destino, formas de recaudar dinero, avisos de reuniones, gestión de autorizaciones, y una vez regresado del viaje subiremos algún comentario y fotografías.Personalizar la cabecera del blog Para poder eleborar nuestra propia cabecera debemos saber primero las dimensiones que debe tener, y además elegir una presentación de blog que nos permita modificar la cabecera.Elegimos la opción Freshy, una vez activada vamos a las opciones del tema: en ellas me permite seleccionar la imagen que está en la cabecera, y que nosotros vamos a personalizar con el GIMP, una vez nos muestra las opciones que propone el diseño del blog nos dice ” o bien teclea la URL absoluta de tu propia imagen (780 x 95)”, bueno pues ahí nos da a conocer las dimensiones de la imagen y ya podemos empezar a trabajar con el GIMP.

torre_eiffel.jpg

  1. Creamos una imagen nueva con esas dimensiones en píxeles 780 x 95 y color de relleno negro.
  2. Como el destino de nuestro viaje es Francia vamos a buscar en la web una imagen de la torre Eiffel, en este caso la imagen eiffel.jpg que abrimos y pinchamos y arrastramos la capa fondo sobre la otra imagen para que se nos coloque como una capa que renombramos como eiffel.
  3. Rotamos la capa eiffel un ángulo de -35.
  4. Escalamos la capa con la cadena unida y una altura de 200 píxeles.
  5. Desplazamos la capa eiffel a la parte izquierda de la imagen.
  6. Ahora vamos a crear un texto con los logotipos, archivo, create, logotipo, calor resplandeciente, escribimos el texto: Viaje a París; se nos genera una imagen nueva con tres capas, ocultamos la capa fondo, pinchamos con el botón derecho y elegimos la opción: combinar las capas visibles; a continuación pinchamos y soltamos esta capa sobre la otra imagen.
  7. Como vemos nos queda muy grande por lo que vamos a escalarla también a un tamaño más adecuado, manteniendo las proporciones de la imagen, le ponemos una altura de 80 píxeles.
  8. Guardamos nuestro trabajo como cabecera.xcf para tener una versión con la que poder hacer cambios.
  9. Aplanamos la imagen, pinchando con el botón derecho en la pestaña de capas.
  10. Guardamos la imagen como cabecera.jpg
  11. Para poder emplear la imagen como cabecera, previamente debemos subir ese archivo, para ello, entramos en nuestro blog, elegimos la opción escribir, y más abajo nos da la opción de subir archivos, lo subimos, a continuación vamos a gestionar y elegimos archivos subidos, hacemos click sobre la imagen que acabamos de subir para conocer su URL, la seleccionamos y la copiamos, posteriormente vamos a la opción presentación, opciones del tema y más abajo nos dice que escribamos la URL de la imagen que queremos que sea la cabecera, pegamos ahí y guardamos opciones. Ya tenemos la nueva cabecera de nuestro blog.

Crear gif animadosCon GIMP es muy sencillo crear gif animados, lo único que necesitamos es una imagen con varias capas y guardarla con la extensión gif, y en el proceso de guardado guardar como animación.

  1. Vamos a crear un nuevo logotipo, archivo, create, logotipos, IMIGRE-26 y cambiamos el tamaño de la tipografía por 40, escribimos el texto: COLABORA.
  2. Una vez generado el logotipo, se forman tres capas que tendremos que aplanar sólo en una, botón derecho, aplanar imagen.
  3. Ahora aplicamos el filtro animación ondas con los siguientes parámetros fuerza de ondulación 5, número de fotogramas 15 y desformar, se nos genera una nueva imagen con 15 capas.
  4. Para ver los efectos del filtro debemos ir a filtros, animación, reproducir, si nos gusta el resultado guardamos la imagen, pero debemos guardarla como gif, y permitir la animación, si queremos conservar los colores, hay que convertirlo a indexado, el gif no permite el modo rgb.
  5. Luego subiríamos esta imagen a la web o blog,  entramos en nuestro blog, elegimos la opción escribir, y más abajo nos da la opción de subir archivos, lo subimos, y lo enviamos al editor con el tamaño completo.

Los gif animados pueden ser textos o imágenes:

mapa_francia.gif louvre.jpgdisneyland.jpgtorre_eiffel.jpg

  1. Abrimos las siguientes imágenes:  mapa_francia.gif, torre_eiffel.jpg,  disneyland.jpeg y louvre.jpeg
  2. Pinchamos y arrastramos las capas de las otras tres a la imagen de mapa_francia.gif, de este modo esa imagen quedará con cuatro capas, podemos cerrar las otras tres imágenes. Renombramos las capas como: mapa, louvre, eiffel y disneyland
  3. Ahora vamos a escalar las capas para que tengan todas la misma altura, en este caso la de la más pequeña que es la del mapa_francia, nos situamos sobre la capa a escalar y elegimos la herramienta escalar capa y uniendo la cadena le damos un valor de ancho de 179.
  4. Colocamos las capas con la herramienta mover, para que estén todas a la misma altura y centradas.
  5. Con la herramienta recortar recortamos la imagen para que tenga el mismo tamaño que la capa mapa.
  6. Nos situamos sobre la capa mapa, seleccionamos con la varita mágica y seleccionamos el fondo, editar limpiar, seleccionar invertir, ahora tenemos una selección con la forma del mapa de Francia.
  7. Nos situamos sobre cada una de las otras capas, sin soltar la selección y elegimos editar copiar, editar pegar como new layer.
  8. Soltamos la selección y borramos las capas originales.
  9. Ahora tenemos cuatro capas nuevas una del mapa de Francia y las otras tres con la forma del mapa de Francia, pero con la imagen del louvre, la torre eiffel y disneyland.
  10. Las recolocamos para tenerlas justo una encima de otra, la del mapa de Francia debajo de todas.
  11. Pintamos el mapa de Francia entero de negro.
  12. Vamos a filtros, animación, fundir y le damos unos valores de 18 para los fotogramas intermedios y de cero para el desenfoque.
  13. Nos genera una nueva imagen, visualizamos el efecto en filtros animación, reproducir.
  14. Guardamos como gif y como animación.

Cambiar el tamaño de un archivo de imagen, sin cambiar sus dimensiones.En ocasiones nos limitan el tamaño del archivo de imagen que queremos subir a la web, o simplemente queremos archivos más pequeños para que los abra pronto o porque tenemos poco espacio disponible, vamos a modificar el tamaño de archivo de una imagen, sin modificar las dimensiones de la misma, para que éste sea válido para subir a la web:

  1. Abrimos la imagen cabecera.jpg, y vamos a ver sus propiedades, en esa ventana nos especifica las dimensiones de la imagen, la resolución de pantalla y el tamaño del archivo.
  2. Duplicamos esa imagen y ahora la volvemos a guardar como cabecera2.jpg, pero ahora le vamos a bajar la calidad, hasta el 30%, el formato jpg, es un formato de compresión de las imágenes, que puede comprimirlas en distinto grado, si la compresión es muy grande el espacio que ocupa la imagen es muy pequeño pero puede perder mucha calidad.
  3. Abrimos la ventana de propiedades para cabecera2 y comprobamos ahora que las dimensiones de la imagen siguen siendo las mismas y que el tamaño del archivo se ha visto reducido.

Cambiar las dimensiones de una imagen para la pantallaCuando una imagen la estamos viendo en una pantalla de ordenador, ésta tiene que “adaptarse” al dispositivo, es decir, si mi imagen tiene una resolución de 150 píxeles por pulgada, y mi monitor tiene una resolución de pantalla de 72 píxeles por pulgada (que es lo más habitual en monitores con cierta antigüedad), el propio monitor no me va a dejar “meter” 150 píxeles en una pulgada por lo que veremos la imagen más grande de lo que es en realidad; y viceversa, si para el mismo monitor con 72 píxeles por pulgada, nuestra imagen tiene 30 píxeles por pulgada se va a ver más pequeña.Para cambiar las dimensiones de una imagen se elige la opción, imagen  escalar la imagen, si decidimos ampliar las dimensiones o aumentar la resolución lo que estamos haciendo es una interpolación a la alza, es decir, el programa se “inventa” píxeles. Si por el contrario, decidimos reducir las dimensiones o disminuir la resolución lo que estamos haciendo es una interpolación a la baja, es decir, el programa está “eliminando” píxeles.En ambos casos si los saltos respecto a la imagen original son muy grandes se puede apreciar ese remuestreo, viendo la imagen borrosa o pixelada.Al aumentar las dimensiones de la imagen o su resolución aumenta el tamaño del archivo y viceversa.Cambiar las dimensiones y la resolución para imprimir.En ocasiones imágenes que han sido tomadas con la cámara digital o escaneadas a mucha resolución, nos dan unas dimensiones de impresión muy grandes, por lo que queremos modificarlas. Debemos recordar que para la impresión si queremos aumentar las dimensiones con respecto al original, perderemos resolución, por lo tanto si queremos mejorar la resolución siempre tendremos que ir a dimensiones más pequeñas.Una buena calidad de impresión se consigue por encima de las 300 píxeles por pulgada, entre los 15o y 300 se considera aceptable, aunque se notarán algo los píxeles, y por debajo de 150 la calidad es mala.Para ilustrar el cambio de dimensiones para la impresión, vamos a ver un ejemplo.

girasoles.jpg

  1. Abrimos el archivo girasoles.jpg.
  2. Duplicamos la imagen y a la duplicada la llamamos girasoles2.jpg.
  3. Vamos a imagen, tamaño de la impresión y observamos las dimensiones de la imagen en milímetros, y su resolución (72 píxeles por pulgada, que es la que se da por defecto en una imagen digital), si manteniendo estas opciones imprimiésemos la imagen, esta tendría las dimensiones que nos indica aquí, pero con la resolución de 72 se verían los píxeles en el papel.
  4.  Debemos por tanto reducir las dimensiones de la imagen, al hacerlo, vemos como aumenta la resolución, si queremos una resolución óptima (300 píxeles por pulgada) debemos reducir las dimensiones hasta 42.39 x 29.08 milímetros.
  5. Ahora abrimos la ventana de propiedades para las dos imágenes y observamos los cambios.


Los canales

6 03 2012

Los canales representan los tres colores primarios luz que componen una imagen, es decir, el rojo, verde y azul, cada canal representa la cantidad de color de cada uno de esos tres que tiene cada parte de la imagen.Para ver mejor todo vamos a realizar una práctica:

  1. Creamos una imagen nueva de 500 x 500 píxeles y color de relleno transparencia.
  2. Colocamos guías verticales en las siguientes posiciones: 100, 200 y 400.
  3. Colocamos guías horizontales en la posición 200.
  4. Elegimos el color de frente con los siguientes valores rojo:255 verde: 0 y azul: 0 y creamos una capa nueva de dimensiones 300 x 300 y relleno color de frente, que llamaremos roja.
  5. Elegimos el color de frente con los siguientes valores rojo:0 verde: 255 y azul: 0 y creamos una capa nueva de dimensiones 300 x 300 y relleno color de frente, que llamaremos verde.
  6. Elegimos el color de frente con los siguientes valores rojo:0 verde: 0 y azul: 255 y creamos una capa nueva de dimensiones 300 x 300 y relleno color de frente, que llamaremos azul.
  7. Colocamos las capas ajustándonos a las guías, la roja en la parte superior izquierda, la verde en la parte superior derecha y la azul en la parte inferior centrada.
  8. Nos situamos sobre la pestaña de canales, que nos muestra las partes de la imagen que están constituidas por cada uno de esos colores, además  nos aparece un canal alfa, es decir, que la imagen tiene partes que son transparentes. Al igual que en las capas podemos visualizar el contenido de cada canal haciendo click en el ojo.

Duplicamos esa imagen, para ello hacemos imagen, duplicar.

  1. Nos situamos sobre la pestaña de capas y vamos a cambiarle los colores a cada una de ellas.
  2. Nos situamos sobre la capa roja, que renombramos como magenta: elegimos el color de frente con los siguientes valores rojo:255 verde: 0 y azul: 255 y rellenamos con el color de frente.
  3. Nos situamos sobre la capa azul, que renombramos como cian: elegimos el color de frente con los siguientes valores rojo:0 verde: 255 y azul: 255 y rellenamos con el color de frente.
  4. Nos situamos sobre la capa verde, que renombramos como amarillo: elegimos el color de frente con los siguientes valores rojo:255 verde: 255 y azul: 0 y rellenamos con el color de frente.
  5. Ahora accedemos nuevamente a la pestaña de canales, y vemos ahora que partes corresponden a cada color.

Duplicamos nuevamente esa imagen, para ello hacemos imagen, duplicar.

  1. Nos situamos sobre la pestaña de capas y vamos a cambiarle los colores a cada una de ellas.
  2. Nos situamos sobre la capa magenta, que renombramos como azulada: elegimos el color de frente con los siguientes valores rojo:75 verde: 100 y azul: 255 y rellenamos con el color de frente.
  3. Nos situamos sobre la capa cian, que renombramos como salmón: elegimos el color de frente con los siguientes valores rojo:255 verde: 75 y azul: 100 y rellenamos con el color de frente.
  4. Nos situamos sobre la capa amarillo, que renombramos como verdosa: elegimos el color de frente con los siguientes valores rojo:100 verde: 255 y azul: 75 y rellenamos con el color de frente.
  5. Ahora accedemos nuevamente a la pestaña de canales, y vemos ahora que partes corresponden a cada color.

Los canales son algo exclusivo del modo de color rgb, no obstante podemos cambiar el modo de color (escala de grises, indexado) de cualquier imagen al modo rgb, y de esta forma trabajar con colores, teniendo en cuenta que una imagen en modo escala de grises, si la pasamos a rgb, no por ello va a verse en color, sino que permite poder añadirle color. El modo indexado también puede ser en color, pero no dispone de tres canales de color con 256 tonos diferentes del mismo, que combinados dan más de 16 millones de colores diferentes, sino que dispone de 256 tonos diferentes en un solo canal.

chica-pensativa.jpgchica_pensativa_grises.jpgchica_pensativa_indexado.gif

  1. Abrimos los archivos: chica_pensativa.jpg, chica_pensativa_grises.jpg y chica_pensativa_indexado.gif.
  2. Accedemos a la pestaña de canales y vemos qué ocurre en cada una de ellas, como observamos únicamente tienen los tres canales la imagen en rgb, además en este caso no hay canal alfa porque no hay partes transparentes de la imagen.
  3. Nos situamos ahora sobre la imagen en escala de grises, seleccionamos cualquier color para el frente e intentamos pintar con ese color, observamos que nos pinta en un tono determinado de gris.
  4. Ahora vamos a cambiar el modo de color de escala de grises al modo rgb, como vemos la imagen continúa en grises, pero si ahora intentamos pintar sobre ella con un color nos permite hacerlo.
  5. Si nos situamos sobre la imagen en modo indexado vemos que está en color pero sin embargo no hay canales.

La principal diferencia entre el modo de color rgb y el indexado, es que el primero permite tener una cantidad mucho mayor de matices que el segundo, lo cual hace que en determinadas fotografías con una gama muy amplia de tonos si las transformamos a indexado pierden calidad, pero sin embargo ganamos en espacio, puesto que las imágenes en indexado son de un tamaño menor. En el caso de imágenes con colores planos (como es el caso de la que estamos observando) la diferencia entre indexado y rgb es prácticamente nula.Los canales se emplean no sólo como fuente de información sobre el contenido de color de una imagen, sino como medio para realizar selecciones basándose en criterios de color y para realizar máscaras.



Los filtros.

6 03 2012

Los filtros modifican la imagen, la capa activa o la selección de formas muy variadas, algunas de ellas muy espectaculares.

Para acceder a los distintos filtros de los que dispone GIMP, debemos ir al menú, filtros, o botón derecho sobre la imagen, filtros.

menu_filtros1.jpg

Los filtros se agrupan por categorías:

  • Filtros de desenfoque.
  • Filtros de realzar.
  • Filtros de distorsiones.
  • Filtros de luces y sombras.
  • Filtros de ruido.
  • Filtros de detectar bordes..
  • Filtros genéricos.
  • Filtros de combinar.
  • Filtros artísticos.
  • Filtros decorativos.
  • Filtros de mapa.
  • Filtros de renderizado.
  • Filtros web.
  • Filtros de animación.
  • Filtros alfa a logotipo.

Cada categoría se compone de varios filtros, y cada uno de ellos tiene parámetros propios que podemos modificar, por lo que todo ello hace que las posibilidades de modificar una imagen mediante filtros son infinitas, y por tanto, imposibles de abarcar en un curso de estas características, por lo que os invito a experimentar por vosotros mismos para profundizar en el conocimiento de los filtros.

Cuando aplicamos determinados filtros que ocupan demasiada memoria, impide que podamos acumular órdenes en el historial de deshacer, incluso hay algunos que no permiten ni deshacer una sóla vez.

Alguno de los filtros ya los hemos aplicado en prácticas anteriores, vamos tan solo a ver unos cuantos ejemplos, aplicados sobre las siguientes fotografías:

castillo.jpg

grupo-alumnos.jpg

ojos_rojos.jpg

pelicula.jpg

Filtro de desenfoque pixelizar, que podemos emplear sobre una capa o selección, y que nos puede ser útil  por ejemplo para que no se reconozca a un alumno en una foto de grupo.

  1. Abrimos el archivo grupo alumnos.jpg.
  2. Mediante la herramienta selección ovalada, realizamos la selección del alumno que no desea aparecer en la revista o en la web del centro.
  3. Aplicamos el filtro, desenfoque, pixelizar, y mediante la vista previa podemos elegir el tamaño de píxel que queramos.
  4. Por último soltamos la selección y guardamos nuestro trabajo.

Filtro de realzar, quitar ojos rojos, cuando en una imagen nos salen los ojos rojos, podemos corregirlo a posteriori:

  1. Abrimos el archivo ojos_rojos.jpg
  2. Mediante una herramienta de selección, seleccionamos en las proximidades de la pupila que ha salido roja.
  3. Aplicamos el filtro, realzar, quitar ojos rojos.
  4. Por último soltamos la selección y guardamos nuestro trabajo.

Filtros de distorsiones, vamos a aplicar el de repujado:

  1. Abrimos el archivo castillo.jpg
  2. Aplicamos el filtro distorsiones, repujado con los siguientes valores: azimut 25, elevación 60 y profundidad 4.
  3. Guardamos nuestro trabajo.

Filtros de luces y sombras, vamos a emplear el de sombra arrojada, que se puede aplicar sombre una capa o sobre una selección, en este caso lo emplearemos para sombrear un texto.

  1. Creamos un archivo nuevo, de dimensiones 575 X 150 con fondo blanco.
  2. Escribimos el texto “SOMBREADO”, con un tipo de letra “Impact condensed”  a un tamaño de 90 y con un espaciado entre letras  de 10, en cualquier color distinto de negro, situamos la nueva capa de texto centrada sobre el fondo blanco.
  3. Nos situamos sobre la capa texto y a continuación elegimos el filtro, luces y sombras, sombra arrojada, nos va a crear una sombra con la misma forma que el texto.
  4. Guardamos nuestro trabajo.

Filtros de detectar bordes, se basan en los cambios de color para detectar los contornos, a veces pueden servirnos de paso previo para realizar una selección con las tijeras inteligentes.

  1. Abrimos nuevamente el archivo castillo.jpg
  2. Duplicamos la capa fondo.
  3. Sobre la capa copia de fondo vamos a aplicar el filtro, detectar bordes, arista, dejamos los parámetros que trae por defecto y aceptamos.
  4. Ahora seleccionamos con las tijeras inteligentes el castillo, una vez completada la selección nos situamos en la capa fondo y elegimos la opción editar copiar, editar pegar como new layer, soltamos la selección.
  5. Ocultamos las capas fondo y copia de fondo para ver los resultados.
  6. Guardamos nuestro trabajo.

Filtros de combinar, vamos a emplear el filtro película.

  1. Abrimos la imagen pelicula.jpg
  2. Seleccionamos el filtro, combinar, película, seleccionamos la opción: ajustar  altura a las imágenes y aceptamos, nos genera una nueva imagen en la que la imagen inicial aparece como en un fotograma.
  3. Guardamos nuestro trabajo.

Filtros artísticos, muchos de ellos permiten dar a la fotografía la apariencia de una pintura.

  1. Abrimos la imagen castillo.jpg
  2. Seleccionamos el filtro, artísticos GIMPresionista, este filtro por si sólo ofrece infinitas combinaciones, en este caso vamos a elegir, papel: canvas2, pincel: crayon05, el resto de los parámetros los mantenemos en sus valores por defecto y le damos a aceptar.
  3. A continuación vamos a aplicarle un nuevo filtro, filtros artísticos, brillo suave, poniendo un valor de 60 en el brilo.
  4. Guardamos nuestro trabajo.

Filtros decorativos.

  1. Abrimos nuevamente la imagen castillo.jpg
  2. Aplicamos el filtro decorativo, foto antigua que nos crea una nueva imagen, que ya tiene el filtro aplicado.
  3. A continuación sobre la imagen de la foto antigua, aplicamos un nuevo filtro, decorativo el de manchas de café.
  4. Guardamos nuestro trabajo.

Filtros de mapa.

  1. Abrimos nuevamente la imagen castillo.jpg
  2. Aplicamos el filtro de mapa, mapear al objeto, con las siguientes opciones: mapear a cilindro, y en la pestaña de orientación damos los siguientes valores: 0,5 para las posiciones de la x y la y, 0 para la z, rotación 50 para la x, y 25 para la y y la z.
  3. Siempre podemos ver cómo va a quedar nuestro trabajo activando la vista previa, cuando hemos terminado aceptamos.
  4. Guardamos nuestro trabajo.

Filtros de renderizado.

  1. Abrimos nuevamente la imagen castillo.jpg
  2. Con la varita mágica en un umbral de 75 seleccionamos el cielo, editar copiar, editar pegar como new layer, que renombramos como cielo.
  3. Nos situamos en la capa fondo, ocultamos la capa cielo, y la vamos a oscurecer, para ello vamos al menú colores, curvas y pinchamos y arrastramos con el ratón hasta que tiene el aspecto que deseamos.
  4. Hacemos visible la capa cielo, nos situamos sobre ella, y con el botón derecho seleccionamos, alfa a selección, de esta forma volvemos a tener seleccionado el cielo.
  5. Ahora le vamos a aplicar un filtro, renderizado, lava, con los siguientes valores: semilla 3, tamaño 20, rugosidad 10 y un degradado de frente a transparente siendo el color de frente el negro.
  6. Soltamos la selección.
  7. Guardamos nuestro trabajo.


Textos y Rutas.

1 03 2012

Se puede convertir un texto en una ruta, o escribir texto siguiendo la dirección de una ruta, vamos a ver ambos casos:

Convertir texto en ruta:

  1. Creamos una imagen nueva de tamaño 1000 x 500 píxeles y fondo negro.
  2. Escribimos un texto de color blanco con la tipografía arial heavy, tamaño 200 y un espaciado entre letras de 35.
  3. Creamos una ruta a partir del texto.
  4. Ocultamos la capa texto, y hacemos visible la ruta.
  5. Seleccionamos la herramienta de inclinación, y en su opción transformar, seleccionamos la referente a la ruta, hacemos clic sobre la imagen y en la ventana emergente elegimos para la magnitud x un valor de -340 y cero para la y.
  6. Creamos una nueva capa transparente que llamaremos texto.
  7. Elegimos como color de frente: ff0000, hacemos ruta a selección y rellenamos la selección con el cubo de pintura, soltamos la selección.
  8. Creamos otra capa transparente que llamaremos contorno.
  9. Ahora elegimos como color de frente: ff6600 y trazamos la ruta con la línea de trazado de grosor 6 y color sólido.
  10. Creamos otra capa transparente que llamaremos velocidad.
  11. Elegimos como color de frente: ffb400, hacemos ruta a selección y rellenamos la selección con el cubo de pintura, soltamos la selección.
  12. Aplicamos el filtro distorsiones, viento con unos parámetros de dirección a la derecha, umbral 4 y fuerza 20.
  13. Duplicamos la capa que denominamos velocidad y la nombramos como fuego, y la rotamos 90º, para ello vamos a capa, transformar, rotar 90º en sentido antihorario.
  14. A esta capa le vamos a aplicar el filtro, distorsiones, desplazamiento, elegimos desplazar verticalmente y un valor de 75.
  15. A continuación otro filtro, distorsiones, ondas, con unos valores de amplitud 5, fase 0 y longitud de onda 50.
  16. Otro filtro, desenfoque, desenfoque gaussiano, con un valor de 5.
  17. Volvemos la capa a su posición original, es decir, hacemos capa transformar, rotar 90º en sentido horario.
  18. Duplicamos la capa fuego y la denominamos fuego 2, activamos la opción mantener transparencia y vamos a pintarla con el color  ff3600 y el pincel circle (19) a una escala de 5, como vemos al tener activa la opción mantener transparencia, no nos permite salirnos del contorno.
  19. Colocamos la capa fuego 2 encima de la capa fuego, y elegimos para la capa fuego 2 el modo de combinación solapar.
  20. Guardamos nuestro trabajo como texto_con_efecto.xcf.
  21. Ahora vamos a guardar dos versiones diferentes del mismo:
  • Duplicamos la capa texto y la capa fondo.
  • Hacemos visibles las siguientes capas: velocidad, texto y fondo y con el botón derecho elegimos la opción combinar las capas visibles.
  • Ocultamos la capa que se nos crea, junto con la capa de texto veloz, y mantenemos visibles todas las demás, y volvemos a combinar las capas visibles.
  • Elegimos la opción aplanar y guardamos como fuego.jpg
  • Deshacemos el paso de aplanar.
  • Ocultamos la capa copia de fondo y con el botón derecho elegimos la opción aplanar, y luego guardamos como velocidad.jpg

Escribir un texto siguiendo una ruta.

  1. Abrimos el archivo mariposa_rutas.xcf
  2. Puesto que lo habíamos guardado con extensión xcf, nos ha guardado la ruta creada a partir de la selección de la mariposa.
  3. Creamos una imagen nueva de 500 x 500 píxeles y fondo blanco, que vamos a guardar como transformaciones_rutas.xcf.
  4. Desde la pestaña de rutas de la imagen mariposa_rutas.xcf pinchamos y arrastramos la ruta a la nueva imagen, comprobamos que nos crea ruta en esa imagen.
  5. Cerramos la imagen mariposa_rutas.
  6. En la imagen transformaciones_rutas vamos a crear 6 capas transparentes con los siguientes nombres: mariposa grande, mariposa girada, mariposa inclinada, mariposa perspectiva, mariposa volteada y mariposa textos.
  7. Ahora nos situamos en la pestaña rutas y duplicamos la ruta que tenemos hasta tener 6 rutas, que renombraremos con los mismos nombres que dimos a las capas.
  8. Seleccionamos la ruta, mariposa grande y la vamos a escalar, elegimos la herramienta de escalado y le damos un valor de 750, manteniendo las proporciones, nos situamos sobre la capa mariposa grande, luego de nuevo en la ruta mariposa grade y vamos a trazar ruta con el color rojo: ff0000 y un grosor de 2.
  9. Luego vamos a la ruta que llamamos mariposa girada, le aplicamos la herramienta de giro con un ángulo de 30º, nos situamos en la capa mariposa girada y vamos a ruta a selección, y rellenamos con el cubo de pintura con el color:5b00ff, seleccionar nada.
  10. Luego vamos a la ruta que llamamos mariposa inclinada, le aplicamos la herramienta de inclinación con una inclinación de 500 para la x y cero para la y, nos situamos en la capa mariposa inclinada y activamos ruta a selección y la vamos a rellenar de nuevo con el color: ff00e5, seleccionar nada.
  11. Luego vamos a la ruta que llamamos mariposa perspectiva, le aplicamos la herramienta de perspectiva tirando de los rectángulos que aparecen en los extremos, nos situamos en la capa mariposa perspectiva y la vamos a trazar de nuevo con el color: ffb300 y un grosor de 2.
  12. Luego vamos a la ruta que llamamos mariposa volteada, le aplicamos la herramienta de volteo vertical, nos situamos en la capa mariposa volteada y la vamos a trazar de nuevo con el color: fffe00 y un grosor de 2.
  13. Seleccionamos la ruta que llamamos texto y vamos a escalar hasta un valor de 1000 píxeles, con esta ruta seleccionada y visible, vamos a la herramienta textos y en el editor escribimos el siguiente texto: “una mariposa se posó en mi ventana, abrió sus alas, revoloteó y desapareció”, con un tipo de letra sans de tamaño 30, luego elegimos la opción texto siguiendo una ruta, nos aparece una ruta nueva con el texto.
  14. En la ventana capa nos situamos sobre la que habíamos llamado texto, volvemos a la pestaña de rutas, seleccionamos la ruta que nos acaba de crear con el texto y damos a la opción trazar ruta, con la herramienta pincel, en la ventana de herramientas elegimos el pincel de tamaño 1 y color de frente negro, trazamos la ruta.
  15. Finalmente con la herramienta mover colocamos todas las capas, realizando una composición a nuestro gusto.
  16. Guardamos nuestro trabajo.


Las rutas.

1 03 2012

Las rutas son líneas, generalmente curvas, que se crean utilizando la herramienta rutas (también conocida como curvas Bézier); las rutas se almacenan de un modo similar a las capas, que podemos ver seleccionando la pestaña correspondiente a las rutas en el empotrable: capas, canales, rutas y deshacer.

Las opciones que nos ofrece la pestaña rutas son: crear una ruta nueva, subir o bajar una ruta, duplicar la ruta (del mismo modo que las capas) las rutas se pueden transformar en una selección, y viceversa, es decir, transformar una selección en una ruta (eso nos permite “guardar” las selecciones), trazar la ruta y borrarla.

Las rutas si no se trazan no forman parte de la imagen, en ese aspecto son como las guías, nos ayudan a dibujar, las podemos ver en la pantalla, pero no salen si guardamos el archivo con una extensión distinta a xcf, o imprimimos la imagen.

Para dibujar una ruta vamos haciendo sucesivos clics sobre la imagen, cada clic me crea un punto nuevo, si nos aproximamos a un segmento de la ruta, el puntero del ratón cambia y nos permite tirar del segmento creando un tramo curvo.

También podemos desplazar la ruta de un sitio a otro de la imagen.

  1. Abrimos un archivo nuevo de 500 x 500 píxeles y fondo negro.
  2. Elegimos la herramienta rutas y hacemos dos clics separados en la imagen.
  3. Ahora vamos a tirar del segmento que hemos formado y nos va formando una curva, también podemos modificar la curva con los tiradores de los puntos de los extremos.
  4. Trazamos la ruta, al elegir esta opción nos aparece una ventana emergente en la que nos permite elegir con qué vamos a trazar la ruta, si con un color sólido o un patrón, o bien eligiendo la herramienta de pintura, en este caso con los parámetros que tenga seleccionados esa herramienta de pintura. En este caso vamos a elegir trazar con un patrón, que previamente hallamos elegido en la caja de herramientas con la herramienta cubo de pintura, en este caso blue web y un grosor de 6.
  5. Guardamos nuestro trabajo como ruta_inicial.xcf

Para ver como funcionan las opciones de selección a ruta o ruta a selección emplearemos una de las mariposas de una práctica anterior:

mariposa_blanca_amarilla.jpg

  1. Abrimos la imagen mariposa_blanca_amarilla.jpg.
  2. Creamos una capa nueva con fondo negro y la situamos debajo de la mariposa.
  3. Renombramos las capas como mariposa y fondo.
  4. Nos situamos en la capa mariposa y con la herramienta varita mágica con un umbral de 15 pinchamos sobre el fondo negro esa capa, de esta forma nos selecciona todo el fondo, editar limpiar.
  5. Seleccionar, invertir, ahora tenemos seleccionada la mariposa, editar copiar, editar pegar como new layer, renombramos como mariposa sola.
  6. Borramos la capa mariposa.
  7. Vamos a la pestaña de rutas elegimos la opción selección a ruta, nos aparece una ruta que renombramos como mariposa.
  8. Soltamos la selección, seleccionar nada.
  9. Para ver la ruta que hemos creado, ocultamos la capa mariposa y hacemos visible la ruta.
  10. Volvemos a la pestaña de capas y creamos una capa nueva transparente, que denominaremos contorno.
  11. Con la herramienta recoge color (chupete) seleccionamos el amarillo más luminoso de la mariposa que se corresponde con el color f6eb44.
  12. En la herramienta pincel elegimos el circle fuzzy (15).
  13. Nos situamos en la capa contorno y vamos a la pestaña rutas y elegimos trazar ruta, utilizando la herramienta pincel.
  14. Volvemos a la ventana de capas y movemos la capa contorno para ver lo que acabamos de hacer, escalamos esa capa, con la cadena unida, y un ancho de 200 píxeles.
  15. Creamos una capa nueva transparente a la que llamamos color plano.
  16. Volvemos a la pestaña rutas y ahora vamos a la opción ruta a selección, elegimos el color de primer plano red 255, green 0 y blue 0,  y con la herramienta cubo de pintura rellenamos la selección, escalamos la capa a un valor de ancho de 300 y manteniendo las proporciones.
  17. Guardamos nuestro trabajo como mariposa_rutas.xcf, al guardarlo en este formato nos conserva la información sobre las rutas en la pestaña correspondiente.

Como hemos visto la ruta nos permite recuperar una selección que habíamos hecho con anterioridad, lo cual puede resultarnos muy útil, también nos permite dibujar una línea sobre los límites de la selección.

Las herramientas de transformación también se pueden aplicar sobre rutas, como veremos en la siguiente práctica.



Los textos en GIMP.

1 03 2012

En el diseño gráfico son muy importantes los textos, en muchas ocasiones el texto, su tipografía componen únicamente la imagen.

La elección del tamaño, la tipografía y la ubicación de los textos en un cartel es determinante en su composición y en la comprensión del mensaje que se desea transmitir; en este aspecto debemos huir de tipografías que dificulten la lectura, como es el caso de algunas góticas o caligráficas.

Al igual que hicimos con los pinceles podemos descargar tipografías o fuentes de la web, la palabra en inglés que se utiliza para las tipografías del ordenador es “font”, el sistema operativo Windows tiene una carpeta destinada a las fuentes, de la que el GIMP las toma , si añadimos en ella alguna fuente nueva, o en la propia carpeta de fonts del GIMP, el programa la detectará y podremos usarla.

En las siguientes webs puedes descargarte gratis fuentes y símbolos:

Si abrimos un archivo con extensión xcf y con capas de texto independientes, que hemos creado con nuestro ordenador, en otro que no tenga instalada esa fuente, nos la va a convertir en otra, al no disponer de ella.

Vamos a descargar una nueva fuente de cualquiera de estas páginas y guardarla en la carpeta de fonts, a continuación abrimos el GIMP.

  1. Creamos una imagen nueva con unas dimensiones de 500 x 1200 píxeles.
  2. Elegimos la herramienta texto, y el tipo de letra que acabamos de instalar “kidTYPERuler” en un tamaño 18, aunque ya la hemos utilizado en diversas ocasiones vamos a conocerla un poco más en profundidad. Una vez seleccionada la herramienta texto si pinchamos sobre cualquier parte de la imagen nos aparece un cuadro con el editor de textos.
  3. En este editor de textos podemos escribir directamente, o bien pegar el texto procedente de otro lugar (un archivo de word, algo que hayamos seleccionado de una página web, etc.), en este caso vamos a copiar un poema de Miguel Hernández, “Las nanas de la cebolla” que encontraremos en numerosas páginas web, por ejemplo:  http://www.los-poetas.com/a/miguel1.htm#NANAS DE LA CEBOLLA lo seleccionamos, pinchamos con el botón derecho, copiamos y luego pegamos en nuestro editor de textos.
  4. Como vemos automáticamente la caja de texto se adapta al tamaño del mismo, pero podemos modificar las dimensiones de dicha caja, pinchando y arrastrando en los rectángulos que aparecen en las esquinas de la caja de texto. Además si dejamos el puntero del ratón en el interior de la caja, este se transforma en el de la herramienta mover y nos permite desplazar el cuadro de texto a cualquier posición.
  5. Al igual que en los editores de texto (word, openoffice, etc.), la herramienta texto del GIMP permite  justificar el texto a la izquierda, centrado, a la derecha o justificado por la izquierda y la derecha. En este caso vamos a seleccionar centrado. Las siguientes opciones son para el sangrado de la primera línea, que vamos a dejar como está, el espaciado entre líneas que vamos a situar en -7, por último el espaciado entre letras que también lo vamos a dejar como está.
  6. Guardamos nuestro trabajo como textos.xcf

Las opciones del editor de texto:

  • Abrir: al seleccionar esta opción nos permite abrir un archivo de texto que tengamos guardado en nuestro ordenador y copiará todo el texto del archivo al editor de textos.
  • Limpiar: Al pulsar este icono se elimina todo el texto del editor
  • De izquierda a derecha: esta opción hace que el texto se introduzca de izquierda a derecha, como en la mayoría de los lenguajes occidentales.
  • De derecha a izquierda: esta opción permite introducir el texto de derecha a izquierda, como en algunos lenguajes orientales, como el árabe.

Las otras opciones de la herramienta texto, las veremos cuando véamos las rutas.

Otra forma de crear textos, en este caso con unas características particulares, que nos pueden servir para hacer títulos o carteles es mediante la opción: archivo, create, logotipos, aquí nos muestra una serie de opciones, al seleccionar cada una de ellas nos aparece una ventana emergente en la que podemos modificar determinados parámetros, dependiendo de la opción elegida, en todas ellas nos da la opción de escribir un texto, que tendrá el diseño prefijado del logotipo seleccionado.

Probamos diferentes logotipos para conocerlos.

  1. Vamos a elegir la opción de logotipo cromar, dejamos las opciones que trae por defecto y escribimos el texto: “Miguel Hernández”, le damos a aceptar.
  2. Todos los textos creados con la opción de logotipos aparecen en una nueva ventana imagen, dependiendo del logotipo elegido, esta nueva imagen tendrá más o menos capas.
  3. Pinchando con el botón derecho, en cualquier parte de la ventana capas, nos aparece un menú en el que seleccionamos combinar las capas visibles, nos aparece una ventana emergente en la que elegimos la opción combinar.
  4. Una vez que la imagen está en una sola capa pinchamos y arrastramos la misma a la imagen inicial donde tenemos el poema.
  5. Ahora en la imagen tenemos que tener 3 capas, aunque la última contiene un texto, éste no se comporta como tal sino que es una imagen, es decir, no puedo modificar el texto.
  6. Elegimos el menú capa, transformar, rotar 90º en sentido antihorario, y situamos esa capa a la izquierda del poema.
  7. Con la herramienta selección de color (el chupete) seleccionamos el color del fondo y vamos a rellenar la capa fondo con dicho color. empleando la herramienta cubo de pintura.
  8. Guardamos nuestro trabajo como textos.xcf

Vamos a crear un texto a partir de una imagen:

amapolas.jpg

  1. Abrimos la imagen amapolas.jpg.
  2. Añadimos dos guías horizontales, una en la posición 50 y otra en 150, y dos verticales en las posiciones 20 y 620, que nos delimitan un rectángulo en la imagen.
  3. Siguiendo ese rectángulo vamos a recortar la imagen con la herramienta de recorte, la nueva imagen tiene unas dimensiones de 601 x 100.
  4. Seleccionamos la herramienta texto, tipografía “tahoma bold”, tamaño 100, escribimos el texto amapolas y estiramos la capa de texto hasta los límites laterales de la imagen y de modo que leamos correctamente el texto.
  5. Vamos a separar más las letras entre sí, hasta un valor de 17.
  6. Ahora nos situamos sobre la capa texto en la ventana de capas y con el botón derecho seleccionamos la opción alfa a selección, de esta forma nos selecciona todo lo que no es transparente en esa capa.
  7. Sin soltar la selección nos situamos en la capa fondo, elegimos la opción editar copiar, editar pegar como new layer, renombramos la capa como letras.
  8. Ocultamos la capa fondo y la capa texto (pinchando en el ojo), y vemos que ahora tenemos las letras con el fondo de la imagen, cabe destacar que esto no es una capa de texto y no la puedo editar como tal, no puedo cambiar el texto por otro.
  9. Creamos una capa nueva con el color de relleno blanco, a esa capa la llamamos fondo blanco y la situamos debajo de la capa letras.
  10. Duplicamos la capa letras y la renombramos como sombra.
  11. Nos situamos sobre la capa sombra y con el botón derecho elegimos alfa a selección.
  12. Rellenamos con la herramienta de pintura y color de frente, negro, soltamos la selección, seleccionar nada.
  13. Aplicamos un filtro de desenfoque, gaussiano y le damos un valor de 10.
  14. Situamos la capa sombra por debajo de la capa letras y la desplazamos 7 píxeles y a la derecha y 3 hacia abajo (con las flechas del teclado).
  15. Por último a la capa fondo blanco le aplicamos un modo de combinación claridad suave.
  16. Guardamos nuestro trabajo como amapolas.xcf


Herramientas de color.

28 02 2012

Las herramientas de color son las siguientes:

herramientas_color.jpg

Todas ellas nos permiten cambios espectaculares sobre la imagen, y grandes posibilidades desde un punto de vista estético o artístico. También nos permiten mejorar la calidad de nuestras fotografías si éstas no han sido correctamente tomadas.

Vamos a realizar un tutorial tomado de la página web  http://dglibre.com, en el que mejoramos una imagen empleando algunas de las herramientas de color, partiendo de la siguiente imagen, que como vemos está muy oscura y ligeramente teñido todo de verde:

original.jpg

  1. Abrimos la imagen con el GIMP, elegimos editar copiar, editar pegar como imagen nueva, de esta forma tenemos dos ventanas imagen, una con la original y otra con la que vamos a modificar.
  2. Elegimos la herramienta, colores, niveles, nos aparece una ventana emergente en la que vemos los niveles de entrada reflejados en una curva, para las sombras, tonos medios y luces, pinchando en la herramienta recoge color correspondiente a las sombras vamos a una parte de la imagen que debería ser negra, vemos que nos cambia el valor de cero, repetimos lo mismo para las luces, pinchando en una zona que debería ser blanca, posteriormente retocaríamos los niveles medios, para tener todos lo mismo vamos a dar directamente los valores de: 5, 1,36 y 163 para las sombras, tonos medios y luces respectivamente y aceptamos.
  3. La imagen ya es más luminosa, ahora vamos a modificar el tono verdoso que predomina, para ello empleamos la herramienta balance de color, pero antes vamos a recoger información sobre el color de la imagen, para ello empleamos la herramienta recoge color (el chupete) y en las opciones de la misma activamos usar la ventana de información, pinchamos sobre una zona que debería ser blanca, por ejemplo la espuma del agua, como podemos ver el verde está en un porcentaje superior al de los otros dos colores rojo y azul, que juntos componen el blanco, confirmamos así que la imagen está más verde de lo que debería.
  4. Elegimos la herramienta balance de color, nos aparece una ventana emergente en la que aplicamos los siguientes valores para los tonos medios: el primer deslizador en un valor de 8, el segundo en -30 y el tercero también en 8.
  5. Vamos a mejorar la nitidez de la fotografía para ello empleamos un filtro: realzar, enfocar y le damos un valor de 10.
  6. Finalmente debemos retocar el encuadre, pues obviamente el dedo no debe salir para ello empleamos la herramientade recorte, que nos redimensiona la imagen y si tuviésemos varias capas, todas ellas.


Herramientas de pintura.

28 02 2012

Las herramientas de pintura son las siguientes:

herramientas_pintura.jpg

En este apartado sólo vamos a hablar de las herramientas de dibujo más utilizadas, algunas de ellas ya las hemos empleado en prácticas anteriores.

Un subgrupo dentro de estas herramientas de pintura lo componen las herramientas: lápiz, pincel, aerógrafo y tinta:

  • Todas ellas permiten dibujar sobre la capa activa pinchando y arrastrando el ratón, lo cual puede resultar bastante difícil dibujando “a pulso”, pero se pueden emplear para trazar una selección o una ruta (que veremos más adelante), en cualquier caso si se emplean estas herramientas sobre un ordenador tipo tableta se gana mucho en precisión.
  • Entre las opciones de estas herramientas podemos seleccionar el tipo de pincel que queremos emplear, hay algunos que, digamos, no son pinceles al uso sino tipo “fantasía” con formas predefinidas, que también podemos bajar de internet y guardar en la carpeta “brushes” de los archivos del programa GIMP, para luego poder usarla con el programa.

Resulta muy interesante el poder descargar pinceles (brushes), patrones (patterns), o tipografías (fonts) ya que hay webs que los ofrecen gratuitamente, por ejemplo: http://qbrushes.net. Además hay gran variedad de diseños y pueden resultarnos útiles para nuestros trabajos.

Vamos a realizar una pequeña práctica de como instalar un nuevo pincel para usar con el GIMP:

  1. Entra en la web qbrushes.net, siguiendo el enlace.
  2. Vamos a elegir un pincel, tienes varias categorías: abstractos, motivos naturales, etc. en este caso seleccionaremos el llamado particles & Stars y haz clic sobre él.
  3. Puedes previsualizarlo, para ver cuantos pinceles trae y de que tipo.
  4. Descargalo (pincha sobre download), al descargar el ordenador lo guarda en la carpeta que haya sido designada para las descargas, habitualmente en: “mis documentos, descargas”.
  5. Accedemos al archivo descargado, si está comprimido (como zip o rar) lo descomprimimos y copiamos la carpeta que debemos pegar en la carpeta correspondiente del programa.
  6. Seguimos la siguiente ruta: C, archivos de programa, gimp 2.0, share, gimp, 2.0, brushes y pegamos la carpeta con el pincel.
  7. Los archivos correspondientes a los pinceles del GIMP tienen, en su mayoría, una extensión vbr,
  8. Abrimos el GIMP, creamos una imagen nueva de 500 x 400 píxeles y color de fondo negro.
  9. Creamos una nueva capa transparente que renombramos como star 009 y seleccionamos como color de frente: fd2d83, elegimos la herramienta pincel y seleccionamos el pincel: particlesandstar009 a una escala 1.32 y pinchamos más o menos en el centro de la imagen.
  10. Creamos una nueva capa transparente que renombramos como star 004, con el mismo color que antes y con el pincel particlesandstar004 a una escala 0,5, pintamos un poco a la izquierda del anterior.
  11. Creamos una nueva capa transparente que renombramos como star 003 seleccionamos como color de frente: fee92c, elegimos la herramienta pincel y seleccionamos el pincel: particlesandstar003 a una escala 1 y pinchamos un poco hacia la derecha del pincel anterior.
  12. Creamos una nueva capa transparente que renombramos como star 002, con el color de frente blanco seleccionamos el pincel particlesandstar002, con una opacidad del 60% y dando distintos valores a la escala y vamos colocando distintas “estrellas”.
  13. Creamos una nueva capa transparente que renombramos como star 010, seguimos con el color de frente blanco, seleccionamosel pincel particlesand010 y con una opacidad del 60% y dando distintos valores a la escala y vamos colocando un par de “estrellas”.
  14. Creamos una nueva capa transparente que renombramos como star 01, seguimos con el color de frente blanco, seleccionamosel pincel particlesand01 y con una opacidad del 60% y con una escala de 1,25 dibujamos una estrella en el centro de la imagen.
  15. Guardamos nuestro trabajo como pinceles_estrella.xcf. El resultado final es más o menos el siguiente:

pinceles_estrella.jpg

También podemos crear nosotros una herramienta pincel y añadirla a la colección de pinceles de GIMP. Vamos a hacer una muy sencilla:

  1. Creamos una imagen nueva de 500 x 500 píxeles y fondo transparente.
  2. Colocamos en ella las siguientes guías tanto horizontales como verticales: al 50% de porcentaje, y en las posiciones 10 y 490 píxeles.
  3. Con la herramienta selección elíptica y la opción expandir desde el centro, hacemos una selección pinchando en el centro de la imagen, donde se cortan las dos guías, y arrastrando hasta que la selección quede encajada en las otras cuatro guías.
  4. Elegimos la herramienta cubo de pintura y rellenamos la selección de negro.
  5. Vamos al menú seleccionar encoger y le damos un valor de 100 píxeles.
  6. Menú editar limpiar, de esta forma nos queda una especie de anillo.
  7. Sólo nos queda guardar nuestro trabajo para que esta imagen nos sirva como pincel, seleccionamos archivo, guardar como, le ponemos de nombre anillo y seleccionamos el tipo de archivo por extensión: PincGIMP, cuya extensión es cbr.
  8. Si lo guardamos en cualquier carpeta, para que nos funcione como pincel debemos copiarlo a la carpeta que mencionábamos en la práctica anterior: C, archivos de programa, gimp 2.0, share, gimp, 2.0, brushes.
  9. Cerramos y abrimos nuevamente el programa para comprobar que nos ha cargado este nuevo pincel.
  10. Abrimos una imagen nueva de 1000 x 1000 píxeles  con fondo blanco, y probamos nuestro nuevo pincel, el tamaño del mismo a escala 1 se corresponde con el tamaño en el que lo diseñamos, es decir una imagen de 500 x 500 píxeles.

Las herramientas de relleno y mezcla, más conocidas como cubo de pintura y degradado, respectivamente:

Estas herramientas nos permiten aplicar un color o un degradado a la capa activa o a una selección, son unas herramientas muy sencillas que ya hemos utilizado en numerosas ocasiones, por lo que os remito a las prácticas que ya hemos hecho.

Herramienta de  sanaeado y clonado:

Entre las herramientas de dibujo restantes, únicamente vamos a destacar las herramientas de saneado y clonado, que se emplean sobre todo para hacer “desaparecer” partes de la imagen y que queden mimetizadas con su entorno, por ejemplo un lunar de la cara, o un pequeño tatuaje, un poste de la luz que nos estropea el fondo de una imagen, o como en el ejemplo que vamos a realizar aquí, los “desperfectos” ocasionados por el paso del tiempo en una fotografía antigua.

foto_antigua.jpg

  1. Abrimos el archivo foto_antigua.jpg.
  2. Duplicamos la capa fondo y vamos a trabajar con la copia.
  3. La restauración de imágenes muy dañadas conlleva mucho trabajo y cierta dosis de paciencia, para que el resultado final sea el deseado.
  4. Primero vamos a restaurar el fondo de la imagen, empleando la herramienta saneado, la forma de trabajar con la herramienta es la siguiente:
    • Debemos buscar una zona “sana” lo más próxima posible a la zona dañada que queremos recuperar.
    • Hacemos zoom con la herramienta lupa para trabajar más cómodamente.
    • Pulsamos simultáneamente con el ratón y la tecla control vemos como cambia el curso, soltamos y pinchamos sobre la zona “a tratar”.
    • Notar como a medida que desplazamos el ratón el punto de origen también se desplaza, si queremos volver al principio debemos soltar y volver a pinchar.
    • Para cambiar el punto de origen hay que pinchar en una nueva zona de la imagen pulsando simultáneamente control.
    • De vez en cuando reducimos el zoom para ver cómo va quedando.
  5. Para las partes de la cara empleamos mayor nivel de zoom y la herramienta clonado, que funciona de un modo similar a la de saneado, en este apartado hay que trabajar a nivel de píxel si queremos unos buenos resultados.
  6. Finalmente aplicamos unos retoques en cuanto al color.
  7. Elegimos colores - desaturar, de esta forma la fotografía ahora es totalmente en blanco y negro.
  8. Colores - niveles y damos un valor de 83 al primer nivel de entrada.
  9. Colores - brillo - contraste y damos a ambos parámetros un valor de 20.
  10. En la zona de la mejilla derecha, que quizá es dónde peor ha quedado lo clonado vamos a aplicar un desenfoque, para ello selecionamos una pequeña región ovalada y aplicamos filtros - desenfoque - desenfoque gaussiano, con un valor de dos.
  11. Guardamos nuestro trabajo.


Herramientas de selección.

23 02 2012

Las herramientas de selección son las siguientes:

herramientas_seleccion.jpg

Empleamos una selección cuando queremos copiar parte de una imagen en otra capa (o en otra imagen) , cuando queremos eliminar parte de una imagen, o cuando queremos aplicarle una modificación sólo a parte de la imagen, por ejemplo un filtro.

La parte seleccionada se nos identifica por una línea de puntos discontinua que se desplaza a lo largo del contorno de la selección. Activando la máscara rápida, icono situado en la parte inferior izquierda de la ventana imagen, nos muestra coloreado de rojo la parte no seleccionada de la capa.

También es interesante la opción seleccionar, invertir, a veces nos resulta más sencillo aplicar un criterio de selección no a lo que queremos seleccionar, sino a lo que lo rodea, para luego invertirlo, por ejemplo tenemos una figura con un contorno complejo, situada sobre un fondo de un sólo color, resulta más sencillo seleccionar el fondo con una herramienta de selección por color y luego invertir para seleccionar la figura.

Cuando terminamos de trabajar con una selección debemos soltarla, seleccionar nada, porque de lo contrario podemos continuar trabajando en ella sin darnos cuenta y no permitirnos hacer lo que realmente queremos.

Las herramientas de selección tienen una serie de opciones comunes:

  • Modo de selección: se puede elegir entre reemplazar la selección actual, añadir una selección a la actual, quitar una parte a la selección actual e intersectar con la selección actual.
  •  Difuminar bordes: permiten que la selección no tenga un borde definido sino que se diluya parcialmente con el fondo.

Vamos a realizar una práctiva en la que emplearemos las herramientas de selección, partiendo de la siguiente imagen: frutas_hortalizas.jpg

  1. Abrimos la imagen frutas_hortalizas.jpg
  2. Seleccionamos con la herramienta selección rectangular alrededor del melón.
  3. Elegimos el menú editar, copiar y luego editar pegar como una imagen nueva, nos abre una nueva imagen con la capa que acabamos de seleccionar.
    • Vamos a aumentar un poco el tamaño del lienzo de esta nueva imagen, para ello elegimos el menú imagen, tamaño del lienzo, rompemos la cadena y damos unos valores de 250 píxeles de ancho por 300 píxeles de alto, centramos y redimensionamos.
    • Creamos una capa nueva, que por defecto tendrá las dimensiones del lienzo, como color de relleno seleccionamos el blanco, y con las flechas situamos esta nueva capa por debajo de la anterior y la renombramos como fondo.
    • Renombramos la capa con el melón como cabeza.
    • Guardamos nuestro trabajo como MR_POTATO.xcf
  4. Volvemos a la ventana imagen frutas_hortalizas.jpg y soltamos la selección actual, seleccionar nada, seleccionamos con la herramienta selección elíptica el kiwi, editar, copiar.
  5. Editar pegar en la ventana imagen MR_POTATO.
    • La selección flotante la transformamos en una capa con el icono capa nueva.
    • Renombramos la nueva capa como boca.
    • Con la herramienta mover situamos la capa boca.
  6. Volvemos a la imagen frutas_hortalizas, seleccionar nada, con la misma herramienta selección elíptica, seleccionamos la zanahoria, editar copiar.
  7. Editar pegar en la ventana imagen MR_POTATO.
    • La selección flotante la transformamos en una capa con el icono capa nueva.
    • Renombramos la nueva capa como ojo izquierdo.
    • Con la herramienta mover situamos el ojo izquierdo.
    • Duplicamos la capa ojo izquierdo y la renombramos como ojo derecho.
    • Al duplicar la capa nos la sitúa justo encima de la original, seleccionamos la herramienta mover y con las flechas del teclado desplazamos hacia la derecha, de esta forma ambos ojos están a la misma altura.
  8. Repetimos los pasos 6 y 7 para el iris del ojo.
  9. Volvemos a la imagen frutas_hortalizas, seleccionar nada, los rábanos que componen las cejas, los vamos a seleccionar en dos fases, en un primer paso hacemos una selección rectangular alrededor del rábano, editar, copiar, para luego editar, pegar en la imagen de MR_POTATO, y después de transformar la selección flotante en una capa nueva, y de renombrarla como ceja izquierda, con la herramienta selección difusa (varita mágica) pinchamos en la zona blanca de la capa, editar limpiar y con ello eliminamos todo lo blanco que rodea la ceja, soltamos la selección seleccionar nada, colocamos la ceja en su sitio con la herramienta mover.
  10. Duplicamos la capa ceja, desplazamos hacia la derecha y la renombramos como ceja derecha, para invertir el sentido de la ceja, seleccionamos la herramienta de transformación voltear y pinchamos sobre la capa.
  11. Guardamos nuestro trabajo.
  12. Para seleccionar la pajarita vamos a emplear la herramienta tijeras de selección o tijeras inteligentes, en la imagen frutas_hortalizas soltamos la selección anterior, seleccionar nada, y con las tijeras vamos pinchando alrededor de los bordes de la pajarita, cuando ya la tenemos prácticamente rodeada, volvemos a pinchar sobre el primer punto, el cursor cambia de aspecto, muestra como el símbolo de unión, luego pinchamos en el interior y ya tenemos la selección hecha, editar copiar, editar pegar en la imagen MR_POTATO, hacemos la capa nueva, la renombramos como pajarita y con la herramienta mover la situamos en su sitio.
  13. Repetimos el paso 12 con el champiñón que hace de sombrero.
  14. Para las orejas vamos a emplear la herramienta selección del primer plano, volvemos a la imagen frutas_hortalizas, seleccionar nada, en la caja de herramientas seleccionamos la herramienta selección del primer plano, esta herramienta trabaja en tres pasos:
    • En primer lugar aparece el icono de la herramienta selección libre, lazo, hacemos una selección aproximada alrededor de la parte que corresponde a la oreja, cuando la terminamos automáticamente nos aparece el cursor como una herramienta de dibujo, marcamos la zona naranja y damos al intro, automáticamente nos muestra la selección, editar, copiar.
    • Editar, pegar en la ventana MR_POTATO, selección flotante a capa nueva, renombramos como oreja izquierda.
    • Necesitamos cambiar la orientación de la capa, para ello vamos al menú capa, transformar, rotar 90º en sentido antihorario.
    • La oreja nos queda demasiado grande por lo que vamos a escalar la capa, unimos la cadena y le damos unas dimensiones de 30 píxeles de ancho.
    • Desplazamos con la herramienta mover a su sitio correspondiente.
    • Duplicamos la capa oreja izquierda y la renombramos como oreja derecha.
    • Volteamos la capa con la herramienta voltear y la situamos en su posición correspondiente con la herramienta mover.
  15. Sólo nos falta la nariz, volvemos a la imagen frutas_hortalizas, soltamos la selección anterior y por el mismo método que en el paso 14, la seleccionamos, editar, copiar.
    • Editar, pegar en la imagen MR_POTATO.
    • Transformamos la selección flotante en una capa nueva que renombramos como nariz.
    • Con la herramienta mover colocamos la nariz en su posición.
  16. Si nos ha quedado las capas poco centradas con respecto al fondo, las enlazamos todas, a excepción del fondo y luego las desplazamos hacia abajo con la herramienta mover, después volvemos a desenlazarlas
  17. Guardamos nuestro trabajo.

El aspecto final es el siguiente:

mr_potato.jpg

Para clarificar la diferencia entre las herramientas de selección por color y selección difusa (varita mágica) realizamos el siguiente ejercicio:

chica_diadema.jpg

  1. Abrimos la imagen chica_diadema.jpg.
  2. Elegimos la herramienta selección por color, en las opciones de la herramienta, damos un valor de 60 al umbral y pinchamos sobre cualquier parte del pelo de la chica, observamos las “hormigas marchantes”, la línes de trazos blancos y negros en movimiento que delimitan la selección, para ver mejor el área seleccionada activamos la máscara rápida.
    • Editar copiar, editar pegar como “new layer” (capa nueva), de este modo nos sitúa la selección en una capa nueva.
    • Hacemos doble clic sobre el color de frente, vamos a elegir el color cuya notación HTML es 91583d.
    • Rellenamos con el cubo de pintura, con las opciones, rellenar con el color de frente y rellenar la selección completamente.
    • Soltamos la selección, seleccionar nada, y renombramos la capa como melena.
    • Ocultamos la capa melena.
  3. Nos situamos nuevamente sobre la capa fondo, elegimos la herramienta selección difusa, entre sus opciones seleccionamos un umbral de 30 y modo: “añadir a la selección actual”, en el cursor aparece un +.
    • Seleccionamos varios mechones de pelo, alternativamente, activamos la máscara rápida para ver que tenemos seleccionado.
    • Editar copiar, editar pegar como “new layer”.
    • Seleccionamos un nuevo color de frente, en este caso el: fefc70.
    • Rellenamos con el cubo de pintura.
    • Soltamos la selección y renombramos la capa como mechas.
  4. Guardamos la imagen como chica_diadema.xcf
  5. Para conocer un poco más como trabajan el formato jpg, vamos a hacer visibles la capa fondo y la capa melena, ocultamos la capa mechas y guardamos el archivo como chica_diadema_morena.jpg, luego ocultamos la capa melena y hacemos visible la de mechas y la de fondo y guardamos como chica_diadema_mechas.jpg, por último hacemos visibles las tres capas, asegurándonos que el orden de las mismas es mechas, melena y fondo, y guardamos como chica_diadema_morena_mechas.jpg.
  6. Cerramos todas las ventanas y, sin cerrar el programa, volvemos a abrir estos últimos archivos, como observamos todos ellos tienen una sola capa y lo que vemos en ella se corresponde con las capas que teníamos visibles en el archivo chica_diadema.xcf


Crear un gráfico con GIMP

16 02 2012

Vamos a realizar un gráfico con imágenes, la idea nos puede servir para presentar datos de una forma original en nuestra página web, por ejemplo. Partimos de las siguientes imágenes:

aula.jpg    libros.jpg

  • Abrimos la imagen aula,
    • aumentamos el tamaño del lienzo a 4OO de ancho por 260 de alto, y un desplazamiento de 50 en el eje “x” y de cero en el eje “y”,
    • creamos una capa nueva con fondo blanco y la situamos debajo de la otra,
    • renombramos ambas capas como fondo y diagrama,
    • colocamos dos guías en los límites de la capa diagrama,
    • creamos una capa nueva que llamaremos pantalla,
    • realizamos una selección rectangular del tamaño de la capa diagrama pero con las esquinas redondeadas con un radio de 20,
    • elegimos en el menú seleccionar encoger y le damos un valor de 15,
    • elegimos la herramienta cubo de pintura, rellenar con el color de fondo (blanco), rellenar la selección completamente, pero con una opacidad de 60%.
  • Abrimos la imagen libros,
    • con la herramienta selección difusa seleccionamos en la zona blanca del fondo,
    • seleccionar invertir,
    • editar copiar,
    • editar pegar sobre la imagen aula, en dicha imagen nos aparece una selección flotante que transformaremos en una nueva capa que renombraremos como libros,
    • cerramos la imagen libros.
  • Volvemos a la imagen “aula” en ella duplicamos la capa libros y la renombramos como libros grande,
    • escalamos esa capa hasta un valor de 100 de alto,
    • creamos una capa nueva transparente y la renombramos como ejes, en ella vamos a dibujar los ejes de nuestro gráfico para ello elegimos la herramienta lápiz tamaño del lápiz 3, para trazar líneas rectas tenemos que mantener pulsada la tecla de mayúsculas, pinchamos en cualquier lugar de la guía y dibujamos dos rectas una vertical y otra horizontal.
    • Con el tipo de letra ARIAL BOLD y tamaño 20 escribimos los siguientes textos 2010, 2011, 198, 152, y PRÉSTAMOS BIBLIOTECA, situamos todas las capas de texto con la herramienta mover.
  • Guardamos nuestro trabajo como grafico.xcf.

La imagen final quedaría como se muestra a continuación: grafico.jpg