jueves, 29 de octubre de 2009

Re-diseño del sitio Linux es Libre v4

Teniendo en cuenta todas las sugerencias que he recibido, decidí probar con otro diseño para Linux es Libre, tanto para el logo como para la pagina principal.
Para crear este nuevo diseño me basé en esta plantilla: http://www.freecsstemplates.org/preview/morningdew

Modificaciones

  1. Enlaces: dividí los enlaces en dos grupos, los más generales en un menú superior y los más específicos en un menú ubicado debajo del encabezado.
    El menú general es más alto que el otro menú. También el tamaño de la tipografía es un poco mayor.
    Cada elemento del menú está separado del otro por una barra vertical
  2. Encabezado: está formado por el logo, un listado de qué ofrece el sitio Linux es Libre y por un formulario de búsqueda, al cual le quité la opción de elegir entre buscar en la web o el sitio, quedó para buscar dentro del sitio solamente.
  3. Logo: le dí mayor preponderancia al nombre Linux es Libre, utilicé una tipografía sencilla y clara. Coloqué un tux estandar (que tendríamos que modificarlo para que esté relacionado con Linux es Libre). Incluí el slogan del sitio en una tipografía informal.
  4. Contenido: ahora está ubicado a la izquierda, sin utilizar recuadros como en el otro diseño
  5. Enlaces externos, otros formularios: ubicados en el lateral derecho.
  6. Colores: los colores principales de la página son: celeste, blanco y gris casi blanco. La intención es transmitir la sensación de libertad, tranquilidad. Los colores preponderantes en el logo son: azul y anaranjado, el azul está relacionado con lo técnico [1] y el naranja con la calidez y la alegría.[2]

Los invito a ver el nuevo diseño

Nuevo diseño de la página Linux es Libre

[1] http://www.mariaclaudiacortes.com/colors/Colors.html

[2] http://www.webtaller.com/maletin/articulos/significado_de_los_colores.php?bol0108-1

miércoles, 21 de octubre de 2009

Re-diseño del sitio Linux es Libre v3

De acuerdo a otras sugerencias del grupo Linux es Libre, realicé las modificaciones correspondientes:

  1. Falta de legibilidad del texto en los enlaces de los titulares: me sugirieron cambiar la tipografía elegida, entonces me di cuenta que no había elegido ninguna tipografía y que mostraba la que está por defecto. Para todo el cuerpo de la página elegí la familia Arial, Helvetica, sans-serif que es la que tiene el sitio actualmente...
  2. Falta de un enlace al foro: agregué el enlace debajo de la suscripción al grupo como está actualmente en el sitio http://www.linuxeslibre.com.ar/.

Así está quedando la página principal del sitio Linux es Libre

Espero comentarios, sugerencias...

Re-diseño del sitio Linux es Libre v2

De acuerdo a algunas sugerencias cambié los colores del sitio, modifiqué el aspecto de los enlaces y re-ubiqué algunos sectores (cajas).
Este es el nuevo diseño (sólo probado en Firefox)

lunes, 19 de octubre de 2009

Re-diseño del sitio Linux es Libre

Estoy colaborando en el re-diseño del sitio Linux es Libre.
En posteos anteriores mostré los bocetos realizados en Inkscape y Gimp. En estos días me puse a crear la página principal en html y css, utilizando al principio Kompozer y luego cssed (un editor css que encontre en el gestor de paquetes Synaptic).

Modificaciones

Al comenzar a dar forma a la página surgieron modificaciones:
- Diseño a dos columnas: con las publicidades ubicadas en una fila debajo de la barra de navegación principal.
- Formulario de búsqueda: incluí las opciones de buscar en la web o en el sitio.
- Colores:

  • fondo pagina: gris muy claro

  • fondo contenido: gris claro

  • fondo de los recuadros: blanco

  • encabezados de recuadros, encabezado principal y pie: rosa oscuro

  • fondo de barra de navegacion: rosa oscuro grisaceo

  • Enlace: rosa oscuro negrita

  • Enlace visitado: rosa oscuro sin negrita

  • Enlace sobre el que se pasa el mouse: rosa oscuro tamaño mediano negrita

Maquetando

Al nuevo diseño también lo hice en Inkscape ya que me resulta más cómodo ubicar cada elemento. Luego, en html, creé su correspondiente div y le incluye el formato en una pagina css a través de id y/o class. Ahora para pruebas rápidas, incorporo el css dentro del html directamente.
Para las esquinas redondeadas utilicé las siguientes propiedades, no visibles en IE:

  • -moz-border-radius-topleft: 15px;

  • -moz-border-radius-topright: 15px;

  • -moz-border-radius-bottomright: 15px;

  • -moz-border-radius-bottomleft: 15px;

Así está quedando la página principal en html y css.
Así se ve en Firefox, no la he probado en otros navegadores:


Estándares y accesibilidad

Si bien ya elegí los colores me interesarían que cumplan las pautas de accesiblidad ofreciendo un buen contraste, pero no sé si lo logro. Todavía no queda bien la página al no tener la hoja de estilos, algunos objetos quedan en cualquier lugar y no se distinguen los tilulos principales, quizas deba utilizar los hx porque utilice estilos de titulos propios.
Algunos enlaces sobre accesibilidad que estoy teniendo en cuenta:
- Pautas de accesibilidad - Grupo DIM
- Documentos para el diseño accesible de contenidos en la Web
- Cómo saber si tu sitio es accesible
Por otro lado también estoy intentando respetar los estándares web de la W3C, dando el formato en un archivo css externo, entre otros.


P.D.: modifiqué la css e inclui hx para que mejore el aspecto de la pagina si no se visualiza la hoja de estilos.

sábado, 3 de octubre de 2009

HA903 Creando un banner entre todos Fin

Concluimos la última tarea del curso HA903, la cual consistía en crear, entre todos los participantes, un banner y un afiche para dos actividades que se desarrollarán en el marco del EDUSOL 2009.
- Porque instalar no es suficiente, curso básico de GNU/Linux para personas no técnicas
- Día de la educación y cultura libre, charlas presenciales previas al EDUSOL.
Después de varios intercambios y participación de algunos compañeros terminamos las dos propuestas:

Porque instalar no es suficiente

Banner
Banner encuentro Edusol 2009 Porque instalar no es suficiente: curso basico de GNU/Linux
Afiche
Afiche encuentro Edusol 2009 Porque instalar no es suficiente: curso basico de GNU/Linux

Día de la educación y cultura libre

Banner
Banner encuentro Edusol 2009 Dia de la educacion y la cultura libre: Charlas presenciales previas al Edusol
Afiche

<br />Afiche encuentro Edusol 2009 Dia de la educacion y la cultura libre: Charlas presenciales previas al Edusol

lunes, 31 de agosto de 2009

HA903 Creando un banner entre todos

Una nueva tarea del curso HA903, nos propone crear, entre todos los participantes, un banner y un afiche para dos actividades que se desarrollarán en el marco del EDUSOL 2009:
- Porque instalar no es suficiente, curso básico de GNU/Linux para personas no técnicas
- Día de la educación y cultura libre, charlas presenciales previas al EDUSOL.

Arme algunas propuestas de banner a partir de los aportes de Amanda y Marcela.
Tomé el banner de Marcela que está hecho en Inkscape y comencé a darle cuerpo a las tipografias, desde mis humildes conocimientos sobre el tema.
También reelabore los textos teniendo en cuenta el banner de Amanda y tomé la frase que ella incluyo en su banner.
Quite la direccion web del curso porque, creo que está de mas ya que al hacer clic en el banner se supone que apuntara a la direccion del curso.
En cuanto a los colores:
- Dejé la tipografía en negro, no se qué color podrá quedar bien...
- Dejé el color de fondo elegido por Marcela porque tampoco sé que color puede ser...
- Para el color de "Edusol 2009" tome el color del logo de Edusol.
- Para el color de las siluetas elegí tonalidades de grises, pero considero que se debería elegir otro color ya que las siluetas hacen referencias a las personas no técnicas posibles participantes y creo que el gris no queda bien, no sé...

Hice varias versiones:
- sólo con texto y el logo de edusol
Banner para el curso básico de GNU/Linux, Porque instalar no es suficiente, dirigido a personas no técnicas.

Banner para el curso básico de GNU/Linux, Porque instalar no es suficiente, dirigido a personas no técnicas.
- con los personajes creados por Marcela pero en silueta:
Banner para el curso básico de GNU/Linux, Porque instalar no es suficiente, dirigido a personas no técnicas.

Banner para el curso básico de GNU/Linux, Porque instalar no es suficiente, dirigido a personas no técnicas.

Banner para el curso básico de GNU/Linux, Porque instalar no es suficiente, dirigido a personas no técnicas.

Espero haber realizado algún aporte en la creación del banner, aunque sea, nuevas ideas para continuar trabajando entre todos...

domingo, 23 de agosto de 2009

Guías de introducción a Gimp y a Inkscape

Para colaborar con los cursos gratuitos de Linux es Libre, armé dos apuntes básicos para comenzar a utilizar Gimp e Inkscape, los cuales incluyen funciones básicas y enlaces para profundizar cada tema (tutoriales, lista, manuales, curso HA903, entre otros). Está orientado para quien tiene muy pocos conocimientos previos sobre cada programa. Están en tres formatos para su descarga: odt, pdf y html comprimido en un archivo tar.gz. Espero opiniones y sugerencias.
Iniciándonos en la edición de imágenes con Gimp:
  • La instalación de Gimp.
  • Un recorrido por el entorno de trabajo y cada herramienta.
  • Caja de herramientas
  • Capas
  • Abrir una imagen
  • Guardar una imagen
  • Ver propiedades de una imagen
  • Modificar el tamaño (ancho y alto)
  • Modificar la resolución
  • Modificar el peso
  • Aclarar/oscurecer una imagen
  • Aplicar algunos filtros
  • Enlaces para seguir aprendiendo más
Iniciándonos en la edición de gráficos vectoriales con Inkscape
  • La instalación de Inkscape.
  • Recorrido por el entorno de trabajo
  • Crear un documento.
  • Abrir un documento.
  • Guardar un documento.
  • Exportar a mapa de bits.
  • Manejo básico de objetos.
  • Crear una tarjeta personal:
    • Blanco y negro: Seleccionar y transformar, Texto, Contorno, Alinear y distribuir, Filas y columnas.
    • A color: Relleno. Contorno.
    • Con objetos: Líneas. Formas. Imágenes.
  • Enlaces para seguir aprendiendo

viernes, 31 de julio de 2009

HA903 Diseño de una web Version 2

De acuerdo a las sugerencias de la lista linuxeslibre realicé algunas modificaciones al diseño anterior:
  • Aclaré el gris de los recuadros,
  • Oscurecí el azul-verdoso del encabezado de los recuadros. Apliqué este mismo color al fondo del encabezado principal donde está el logo.
  • Reemplacé los asteriscos por circulos para las viñetas de las noticias.

boceto del aspecto de la pagina principal del sitio Linux es Libre

martes, 28 de julio de 2009

HA903 Diseño de una web

Hace diez días más o menos realicé un boceto rediseñando la página principal del sitio web Linux es Libre utilizando Inkscape y Gimp. También hice un rediseño preliminar del logo.
Esta actividad corresponde a la segunda alternativa propuesta como actividad de final de trimestre del curso HA903 y además lo realicé como una manera de colaborar con la comunidad Linux es Libre.
Para el rediseño, me basé en el aspecto de la página principal del sitio del día 17 de Julio del 2009, lo aclaro porque el sitio web Linux es Libre está en continuos desarrollo y actualización.
Así quedó el boceto del nuevo diseño:
boceto del aspecto de la pagina principal del sitio Linux es Libre

Descripción

Al mirar la página principal de Linux es Libre, considero que se necesita una reorganización de la informacion para que sea más fácil la navegación por parte de los usuarios, como dice jEsuSdA en su artículo: "que los usuarios encuentran lo que buscan, navegan con comodidad y soltura por la página".
Una vez que decidí dividir la información en tres columnas, me puse a buscar diseños en las plantillas para Blogger y encontré tres, que me sirvieron de guía para crear mi propio diseño del sitio.
1. Fervens
Plantilla llamada Fervens, diseñada por Design Disease, adaptada para Blogger por BlogandWeb 2. Magzmo
Plantilla para Blogger llamada Magzmo3. o2
Plantilla llamada o2. Esta basada en el theme para wordpress “O2” de Eches, adaptado para Blogger por BlogandWeb

Procedimiento

En Gimp, realicé una captura de la pagina, recorté cada contenido y los guardé como imágenes independiente, es decir, documentos, logo, fecha, bienvenidos, anillo, búsqueda de Google, Grupos Google, páginas amigas, enlaces horizontales, enlaces verticales, etc.
En Inkscape, importé cada imagen creada en Gimp. Comencé a re-ubicarlas, a distribuirlas en la primera, segunda y tercer columnas, a decidir qué contenido descartaría por considerarlo duplicado, etc.
Organizando cada sector de información en Inkscape del sitio web Linux es LibreEn otro documento nuevo, comencé a crear el boceto:
- Utilizando rectángulos modificados con la herramienta Editar nodos... para ubicar la información.
- Incorporando nuevamente el texto con la herramienta texto.
- Re-diseñando los formularios para la búsqueda y el grupo de Google. En Gimp: recorté los botones Buscar y Suscribirse y al logo de Google le quité el fondo. Los guardé como imágenes png independientes. En Inkscape, las importé, las ubiqué en su lugar y les agregué el texto.
- Para las páginas amigas, consideré que sería mejor y más sencillo, crear los enlaces sólo de texto.
- Modifiqué el aspecto para "Averigua tu actual IP y tu velocidad de conexión", donde alargué el color de fondo en Gimp, lo guardé como imagen. La importé y le incorporé texto en Inkscape.
- Rediseñé el logo (en otro posteo lo explico)
- Elegí y apliqué colores a los recangulos y al texto plano y a los enlaces.

Espero haber aportado en facilidad de lectura de la página.

Ahora sólo resta que la comunidad de Linux es Libre lo vea, opine, realicemos los cambios que se soliciten y podamos implementarlo utilizando CSS.

lunes, 20 de julio de 2009

Cursos de autoformación: Moodle y Squeak

El lunes 22 de Julio me inscribi en un curso de autoformacion en Moodle creado por Iris Fernández.
También estoy haciendo otro curso de autoformación Squeak, creado por ella. No recuerdo cuando lo comencé, pero hice varias cosas interesantes, puesto que no tenia ni idea de Squeak. Actualmente he abandonado un poco a Squeak pero pronto lo retomaré.

Curso de Autoformación de Moodle


Lo que hice hasta ahora, utilizando las guías creadas por Iris y leyendo la ayuda de Moodle. Aquí los enlaces:

1. Ingresar a la plataforma del curso:

Plataforma del curso

Pasos para ingresar al Grupo de autoformación: Moodle

2. Crear una plataforma moodle en un hosting gratuito
Crear plataforma en Key to School

3. Modificar el idioma por defecto: inglés.
Cambiar el idioma de una plataforma Moodle en Key to School

4. Crear categorías para organizar los cursos

5. Crear un curso en Moodle

6. Configurar un curso

5. Modificar el tema de la plataforma:
Accedí a Administración / Apariencia / Temas / Selector de temas
y elegí un tema que me agradó.

6. Ahora me interesa aprender a modificar este tema. Algunas puntos que me interesa hacer son:
a. Modificar el logo de la cabecera
b. Modificar el diseño de la página principal

Estos dos enlaces aun no los he leido en su totalidad ni los he puesto en práctica.

jueves, 9 de julio de 2009

Gimp - Manejo de ventanas

He notado que las personas que recién se inician con Gimp, tenga experiencia en otros programas del mismo tipo o no, les ocurre que se pierden o se desconciertan cuando al tener una imagen abierta y luego abrir otra, ésta se ubica detrás de la que ya está abierta... lo más cómodo sería que se ubique delante...
Me puse a buscar soluciones en Archivo / Preferencias, accedí a la Gestión de la ventana y en Hints del gestor de ventanas, tanto en Hints para la caja de herramientas y Hints para otros empotrables, seleccioné Mantener por encima. Reinicié Gimp. Probé y no hubo cambios en cuanto a las ventanas, sólo que la caja de herramientas y cualquier cuadro de diálogo queda siempre arriba, inclusive cuando acciono otra ventana que no es de Gimp, por ejemplo el navegador web.... :(

Pregunté en la lista de GImp y me dan la misma solución alegando que funciona... quizás la versión que tengo de Gimp, 2.4.7 que es la que Lenny tiene en los repositorios tiene el problema...

Aquí una imagen de cómo abre las ventanas:
Comportamiento de las ventanas al abrir la segunda ventana

martes, 30 de junio de 2009

HA903 Contar una historia animada Avance 5

Ya casi dando fin a la actividad final del curso HA903... sólo resta incluir el audio y que coincida con las imágenes...
Ya me di cuenta qué hacer para que mencoder respete el tiempo que le di a cada cuadro desde Gimp! solo tenia que quitar -fts 4 en la configuración que nos pasó Nina.

Procedimiento

1. Accedí a la consola de usuario.
2. Fui a la carpeta donde tengo el gif y el mp3, con el siguiente comando:
cd /home/celi/cursos/HA903/mp3agif
3. Uni el gif al mp3 usando mencoder:
mencoder todos-new2.gif -ovc lavc -o todos.avi -oac copy -audiofile aprender-a-volar-recortado.mp3
Sintaxis de mencoder
mencoder {videos de entrada} [opciones] [-o archivo de salida]

Opciones
-ovc lavc: recodifica el video
-oac copy: copia el video
-audiofile: incorpora audio

Este enlace me ayudó mucho para entender las opciones de mencoder: Uso de mencoder

Aquí encontré cómo convertir el avi en un mpg pero no se escucha bien en todos los reproductores por eso lo subí en formato avi.



Conclusiones

Para mí, el desafío de esta actividad final no sólo consistió en la utilización de distintos programas de software libre para crear una animación gif sino que lo difícil fue comprimir, resumir una idea para poder representarla en formato gif y utilizando un programa que no es específico para crear animaciones complejas.
Lo más importante fue poder establecer:
Qué idea comunicar
Primer estrofa de Aprender a volar de Patricia Sosa, la elegí porque me gusta el mensaje que transmite.
Qué representar de esa idea y cómo representarla:
El mensaje general: a través de un paisaje simple donde se ve un camino que intenta ser difícil de cruzar.
y luego algunos conceptos, palabras, frases:
Duro: a partir de la tonalidad de todo el paisaje: gris y de la tipografía y su color (negra).
Camino: a partir de la tipografía y su color. Resalté el camino aclarando tu color.
y se que no es fácil: resalté la palabra fácil (color blanco) y comencé a destapar el paisaje intentando representar que va avanzando lentamente en el camino.
no se si habrá tiempo: elegí una tipografía que me represente al tiempo y continué destapando el paisaje un poco más.
descansar: a partir de la tipografía y de otro rectángulo blanco transparente sobre el sector descubierto del paisaje para representar.
aventura: a partir del color amarillo (la verdad que no sé con que color representar aventura pero elegí ese color porque es llamativo) tanto de la tipografía como del rectángulo derecho transparente que cubre el paisaje. (quizás aquí podría haber usado más de un color pero el formato gif no los soporta correctamente)
amor: a partir del color rosa-rojo tanto de la tipografía como del rectángulo derecho transparente que cubre el paisaje.
coraje: a partir del color azul (porque asocio al coraje con lo masculino) tanto de la tipografía como del rectángulo derecho transparente que cubre el paisaje.
ojos: elegí el color verde para representar la esperanza que transmite la letra y cubrí todo el paisaje con un rectángulo oscuro transparente para representar cerrar los ojos.
echarse a volar: descubrí el paisaje y modifiqué el color de volar: celeste (libertad). (aquí intente adelantar el paisaje, acercarlo para representar que se va acercando, que avanza pero en fin ese avance lo dejé representado sólo con los colores)
Qué me gustó más
Pensar en cómo representar ideas a través de recursos gráficos.
Usar un comando en consola para unir el gif con el audio.
Investigar la instalación de mencoder y su utilización.
Usar Audacity, por primera vez, para cortar una introducción donde hablaba Patricia Sosa.
Terminar un video y subirlo a youtube (porque tengo mucho material e ideas para hacer videos pero no los hago porque me complico ;) )
Qué me faltó
Reducir levemente el audio y no cortarlo bruscamente.
Incluir en el avi datos de quién realizó la actividad y con qué fines (créditos)
Adelantar levemente el paisaje cuando se escucha echarse a volar
Y otras cosas más :)
.
Ver avances y trabajos de mis compañeras... cuántas cosas diferentes se pueden hacer con una misma propuesta!
Qué cosas me trabaron (en el sentido de enredarse)
Pensar cómo representar las ideas de una manera sencilla para que quede más o menos bien en formato gif.
Hacer que las imágenes acompañen al audio.
Qué soy complicada y detallista, que siempre encuentro cosas que mejorar...

sábado, 27 de junio de 2009

HA903 Contar una historia animada Avance 4

Continuo con la actividad final del trimestre del curso HA903.
Sistema operativo: Debian Lenny.
Programas: Inkscape 0.46 y Gimp

Procedimiento

En Inkscape.
Realicé algunas modificaciones al avance 3:
Primer secuencia
  1. Decidí quitar el desenfoque del dibujo básico para evitar la mala calidad al exportarlo en formato png.
  2. Abrí el primer archivo svg en el que estoy trabajando, que contiene dos imágenes de la secuencia.
  3. Accedí al panel relleno y borde y moví el control de desenfoque para quitarlo completamente.
  4. Quité el redondeado del rectángulo que le da una tonalidad oscura al dibujo, moviendo el control circular ubicado en la esquina superior derecha del rectángulo.
  5. Quité algunos nodos (Ctrl L) a cada forma del dibujo y realicé algunas modificaciones menores como modificar el aspecto de algunas montañas, del camino.
  6. Una vez que estuvo listo, lo copie y lo pegué para utilizarlo en la segunda secuencia.
Segunda secuencia
  1. Aclaré la tonalidad del rectángulo que cubre el dibujo.
  2. Cambié el color del camino, lo aclaré para que resalte un poco y lo ubiqué detrás de dicho rectángulo.
Tercer secuencia
  1. Copié y pegué el dibujo terminado realizado para la primer secuencia.
  2. Reduje el tamaño del rectángulo dejando ver el dibujo original en el sector derecho.
  3. Ubiqué la frase un poco más arriba que la de la segunda secuencia.
Cuarta secuencia
  1. Copié y pegué el dibujo terminado realizado para la primer secuencia.
  2. Reduje un poco más el tamaño del rectángulo.
  3. Ubiqué la frase un poco más arriba que la de la tercer secuencia.
Quinta secuencia
  1. Copié y pegué el dibujo terminado realizado para la segunda secuencia (con la tonalidad del camino más clara).
  2. Reduje un poco más el tamaño del rectángulo.
  3. Como quedó a la vista la mitad del dibujo. Le agregué otro rectángulo color blanco transparente para dar sensación de tranquilidad, descanso.
  4. Ubiqué la frase un poco más arriba que la de la secuencia anterior.
Sexta secuencia
  1. Copié y pegué el dibujo terminado realizado para la segunda secuencia (con la tonalidad del camino más clara).
  2. Reduje un poco más el tamaño del rectángulo.
  3. Como quedó a la vista más de la mitad del dibujo, le agregué otro rectángulo color amarillo transparente para dar sensación de aventura.
  4. Ubiqué la frase un poco más arriba que la de la secuencia anterior.
Séptima secuencia
  1. Copié y pegué el dibujo terminado realizado para la segunda secuencia (con la tonalidad del camino más clara).
  2. Reduje un poco más el tamaño del rectángulo.
  3. Le agregué otro rectángulo color rosa transparente para dar sensación de amor en la zona del dibujo descubierta.
  4. Ubiqué la frase en el mismo lugar que la de la secuencia anterior.
Octava secuencia
  1. Copié y pegué el dibujo terminado realizado para la segunda secuencia (con la tonalidad del camino más clara).
  2. Reduje un poco más el tamaño del rectángulo.
  3. Le agregué otro rectángulo color azul transparente para dar sensación de coraje en la zona del dibujo descubierta.
  4. Ubiqué la frase en el mismo lugar que la de la secuencia anterior.
Novena secuencia
  1. Copié y pegué el dibujo terminado realizado para la primer secuencia.
  2. Agrandé el tamaño del rectángulo para cubrir todo el dibujo y aumenté la opacidad para que dar la sensación de ojos cerrados.
  3. Ubiqué la frase en el mismo lugar que la de la secuencia anterior.
Última secuencia
  1. Copié y pegué el dibujo terminado realizado para la primer secuencia.
  2. Eliminé rectángulo para descubrir todo el dibujo para que dar la sensación de libertad, de volar.
  3. Ubiqué la frase en el mismo lugar que la de la secuencia anterior.
Exporté cada secuencia como png.

En Gimp
Aplicando el efecto de fusión entre secuencias
Abrí la primer secuencia y luego la segunda secuencia. Arrastré la miniatura de la segunda secuencia sobre la primera para tener ambas secuencias en un mismo archivo.
Agregué una capa transparente al final porque le filtro fundir necesita 3 capas Ver imagen (1).
Accedí al menú Filtros / Animación / Fundir. Lo configuré (Ver imagen (2)):
  1. Fotogramas intermedios: 3
  2. Radio máximo de desenfoque: 0
  3. Quité el tilde de bucle.
Configuración para el filtro Animaciones / Fundir: Fotogramas intermedios: 3. Guardé el archivo con el nombre 1-2.xcf.
Hice lo mismo para las secuencias 2-3, 3-4, 4-5, 5-6, 6-7, 7-8, 8-9, 9-10.
Creando la animación final
Uní todas las secuencias fusionadas en un mismo archivo. Lo guardé con la extensión xcf.
Accedí al menú Filtros / Animaciones / Optimizar para gif.
Se creó un nuevo archivo optimizado para gif.
Lo exporté como gif, accediendo al menú Archivo / Guardar como... y en al nombre del archivo incluí .gif. Elegí la opción Guardar como animación. Configuré en 700ms el retardo entre cuadros e hice clic en la opción usar el retardo introducido arriba para todos los fotogramas.
Uniendo el gif animado al audio mp3
Primero modifiqué el retardo de ciertos cuadros para que coincidan con el audio, modificando los ms desde la capa de la imagen a modificar.
Lo guardé como gif y descliquié la opcion usar el retardo introducido arriba para todos los fotogramas ya que ahora no todos los fotogramas tenian el mismo retardo.
Así quedó:
Animación gif de una estrofa de la canción aprender a volar de Patricia Sosa
Luego uní el gif al mp3 siguiendo las instrucciones de Nina para crear el archivo avi. Pero me cuesta lograr que las imágenes coincidan con el audio ya que lo modifico en Gimp pero cuando uno el gif animado al mp3 no respeta los tiempos. Voy a tener que cambiar de método para unir el audio al gif. Mañana lo veré ;)

jueves, 25 de junio de 2009

Instalar mencoder

Una de las consignas de la última actividad de cierre del trimestre del curso AH903, consiste en incluir sonido a una imagen gif animada. La conexionadora Nina, explica como hacerlo utilizando mencoder en el portal baidarkas.
Cuando comienzo a hacerlo me di cuenta que no tenia instalado Mencoder en Lenny stable. :(
Buscando en varios lugares y probando lo pude instalar así:
En consola accedí a sources.list para incluir la dirección del repositorio para instalar Mencoder:

1. nano /etc/apt/sources.list

al final del archivo incluí las siguientes líneas:

# Multimedia estable (actual)
deb http://www.debian-multimedia.org stable main

la que tiene # es un comentario y la otra es la dirección del repositorio para debian stable.

Guardé. Salí de nano.

2. Actualicé

aptitude update

3. Instalé Mencoder

aptitude install mencoder



Fuentes:
http://kikuelo.wordpress.com/2008/05/11/mencoder-en-debian/
http://www.esdebian.org/articulos/24469/mis-repositorios-debian
http://www.esdebian.org/wiki/tutorial-aptitude

miércoles, 24 de junio de 2009

Instalar brochas en Gimp

En el foro del curso AH903, surgió la inquietud de cómo instalar pinceles en Gimp.
Para instalar brushes (pinceles, brochas, como quieras llamarlos) en Gimp. Crea una carpeta (en tu carpeta de usuario (Mis documentos , home dependiendo del sistema operativo que uses) y descomprime todos los pinceles que has bajado.

1. Accedes al menú Editar / Preferencias de la ventana imagen o a Archivo / Preferencias de la ventana principal de Gimp.
2. En el panel de la izquierda buscas Carpetas (1) y dentro Pinceles (2), haces clic en pinceles y te apareceran opciones para configurar los pinceles a la derecha.
3. Haces clic en la hojita en blanco (nuevo pincel) (3), esto habilita un recuadro y te permite hacer clic en un boton (4) para buscar la carpeta donde están todos tus pinceles de Gimp. Has clic en Aceptar.
4. Te aparecera la ruta donde estan tus pinceles (5) y luego has clic en Aceptar (6).
5. Deberás re-iniciar Gimp para ver los nuevos pinceles.
Cuadro de dialogo Instalar pinceles en Gimp

sábado, 20 de junio de 2009

HA903 Contar una historia animada Avance 3

Me puse a mirar lo que hice hasta ahora en mi posteo anterior y no me gustó...ademas me estaba complicando demasiado... entonces decidí rearmar todo... comencé mirando las indicaciones de Nina en el blog del curso HA903 y pensando en cómo aplicarlas en mi actividad final...

Descripción

Decidí crear un dibujos simple (antes lo habia intentado pero sin lograr resultados que me agraden), modificarlo levemente de acuerdo al texto y también modificar el aspecto de algunas palabras.

Procedimiento

En Inkscape importé la imagen del paisaje elegida en el avance 2.
Con la herramienta Dibujar líneas a mano alzada, comencé a redibujar el paisaje, más o menos siguiendo algunas formas pero reinventándolo (no puedo dibujar sin una imagen de base).
Lo rellené copiando colores de la imagen utilizando la pipeta (seleccionar colores de la imagen) y luego aclarando u oscureciendo el color o cambiandolo de tono desde el panel de Relleno y borde.
Luego le incorporé el texto: las palabras Duro es el. Duro en mayúscula y con una tipografía sin serif en negrita y "es el" en minúsculas.
Por último, le incorporé un rectángulo color "sucio" con una opacidad al 50% para opacar el dibujo. Sobre el rectángulo, en la esquina inferior izquierda, ubiqué las palabras.
Luego hice las demas (despues explico el cómo y el por qué de los colores y demases aplicados)Imagenes creadas para representar unos versos de la canción Aprender a volar de Patricia SosaMe quedaron un poco desprolijas las terminaciones, quizas por el desenfoque que apliqué, no sé... mañana lo veré otros ojos :P Ahora voy a ver como quedan incorporandolas como gif en GIMP.

martes, 16 de junio de 2009

HA903 Contar una historia animada Avance 2

Continuo con la realizacion de la actividad de cierre del primer trimestre del curso HA903, donde decidí crear un gif animado basándome en la letra de la canción de Patricia Sosa, Aprender a volar.
Aqui está mi primer posteo sobe la actividad: http://softwarelibreenmivida.blogspot.com/2009/06/ha903-actividad-fin-1-trimestre-avance.html
Tengo que reconocer que me da pereza crear animaciones con Gimp, conociendo otros programas para hacerlo más facilmente... pero en fin... me tengo que poner las pilas en simplificar al maximo las ideas de animación que se me ocurren y recordarme que no es una animacion sino solo un simple gif animado...

Descripión

Teniendo en cuenta cuenta las recomendaciones de Nina, decidí seleccionar los primeros versos de la letra:
Duro es el camino
y se que no es fácil
no se si habrá tiempo para descansar
en esta aventura de amor y coraje
sólo hay que cerrar los ojos y echarse a volar.
Secuencia de imágenes y texto representando a la frase Duro es el camino

Procedimiento

Busqué imágenes de caminos en los álbunes de Picasa porque las fotos de caminos que tengo no me gustaron.
Abrí Inkscape para comenzar a tirar ideas:
Importé la imagen elegida. Paisaje con un camino sinuoso y difícil
Comencé a incluir el texto. Primero la palabra duro. La escribí en mayúsculas y busqué una tipografía que represente el significado de la palabra. Luego la ubiqué sobre la imagen y modifiqué su tamaño. Decidí convertir la imagen a grises en el momento que aparezca la palabra duro. Para convertir la imagen a grises, abrí Gimp y accedí al menú Colores/Desaturar: Clic en Claridad. Paisaje en gris con la palabra DuroDespués escribí es el en minúsculas y una tipografía con sanserif, la ubiqué sobre la imagen y modifiqué su tamaño. Paisaje en gris con la frase Duro es el Por último agregué la palabra camino y elegí una tipografía que me recuerde a un camino sinuoso. La ubiqué sobre la imagen.
Paisaje en gris con la frase Duro es el camino
La próxima imagen estará compuesta por el camino resaltado en color.
Resaltar en color el camino
Abrí Gimp, agregué dos capas: en la inferior incluí el paisaje a colores y sobre esta capa, el paisaje en grises.Usé máscara de capa sobre esta última capa y luego comencé a pintar sobre el camino para enmascararlo y que se vea la imagen de abajo. Guarde la imagen como jpg.
Continuar trabajando en Inkscape
Luego continué trabajando en Inkscape, importé la imagen creada, incluí las palabras: Duro, es el y camino. Roté Duro y lo ubiqué mas arriba, luego moví es el y por último, adapté la palabra camino a un recorrido, que sigue más o menos el camino de la imagen. El recorrido lo realicé previamente con la herramienta Dibujar líneas a mano alzada.
Adaptar un texto a un recorrido
Con la herramienta Seleccionar y transformar objetos, seleccioné el texto y el recorrido. Luego accedí al menú Texto / Poner en trayecto. Luego con la herramienta Editar nodos de trayectos, modifiqué el recorrido de acuerdo a mis gustos. Paisaje en gris con el camino a color, los textos rotados y el texto camino adaptado a un trayecto
Conviertiendo la secuencia en animaciones
Estoy conviertiendo las ideas básicas en animaciones a partir de la fusión de al menos tres capas en Gimp y utilizando el filtro Fusion del menú Filtros / Animaciones:
Fusionar: el paisaje en colores, el paisaje en grises y la palabra DURO
  1. En un archivo nuevo en Gimp, importé el paisaje en grises, en colores y escribí la palabra DURO.
  2. Ubiqué como capa inferior la que tiene la imagen en grises, luego la que tiene el paisaje a color y más arriba la palabra DURO.
  3. Accedí al menú Filtros / Animaciones / Fundir. Después de varias pruebas, elegí configuré el cuadro de diálogo fundir de la siguiente manera: Fotogramas intermedios: 10 y Quité el tilde a Bucle.
Cuadro de dialogo de Fusion, configurado en Fotogramas intermedios: 10. Sin tilde en Bucles. Se observa la ubicacion de las capasAsí quedó la primer animación:
Quizás quedó muy rápido, no sé... depende de lo que dure la música... eso después lo veo...
Ya he creado dos animaciones más:
Fusionar: el paisaje en grises con la palabra DURO, texto "es el" y texto "camino"


Fusionar: el paisaje en grises y la frase "Duro es el camino" con la palabra "camino" adaptada a un trayecto
No sé como quedará todo esto unido y con la música de fondo...

miércoles, 3 de junio de 2009

HA903 Contar una historia animada Avance 1

Como actividad de fin de trimestre del curso HA903 tenemos dos alternativas:
1. Contar una historia animada:
- Basarnos en un texto que puede ser: un cuento digital, o un poema, un haiku, un refrán, una frase, o un relato corto.
- Dividirlo en partes
- Crear una imagen que represente cada parte, utilizando Gimp o Inkscape.
- Armar el gif animado en Gimp
2. Hacer el diseño de una Web. Aquí Jesusda nos explica como lo hace utilizando herramientas libres: http://www.jesusda.com/blog/index.php?id=319
Me gustan las dos opciones pero voy a elegir la primera ya que el diseño de este blog lo voy a hacer si o si en algun momento.

Descripción

Para hacer la animación me voy a basar en la letra de Aprender a volar de Patricia Sosa.
No sé aún si voy a describir toda la letra o voy a elegir una parte.

Procedimiento

Recolectando información
1. Busqué el video de Patricia Sosa en youtube.com: aprender a volar
2. Comencé a escucharlo y anotar la letra en un archivo de texto.
3. Fui marcando posibles imágenes a buscar relacionadas con los sustantivos/verbos/adjetivos que aparecen en la letra.
Ventana del navegador reproduciendo el video de Patricia Sosa, Aprender a volar. Archivo de texto donde voy copiando la letra. Carpeta donde voy guardando imagenes que representan la letra de Aprender a volar
4. Comencé a buscar imágenes que voy a utilizar (o quizás utilice) para representar la letra, pudiendo ser de manera:
a. Literal: cuando dice duro es el camino: mostrar un paisaje con camino
b. Metafórica: intentar reflejar un camino duro, usando un camino pero no solo la imagen de un camino
Aprender a volar
Marqué posibles imágenes a buscar.

Duro es el camino (1)
y se que no es fácil
no se si habrá tiempo(2.a) para descansar(2.b)
en esta aventura (3.a) de amor (3.b) y coraje (3.c)
sólo hay que cerrar los ojos (4.a) y echarse a volar (4.b)

[y cuando el corazón (5.b) galope (5.b) fuerte (5.b)
déjalo salir (6)
no existe la razón (7)
que venza la pasión (8)
las ganas de reir (9).

[[Puedes creer, puedes soñar(10)
abre tus alas (11)
aquí está tu libertad (12)
y no pierdas tiempo (13)
escucha (14.a) el viento (14.b)
canta por lo que vendrá,
no es tan difícil
que aprendas (15.a) a volar (15.b) .]] ]

No pierdas la fe, (16)
no pierdas la calma, (17)
aunque a veces este mundo (18.a) no pide perdón (18.b).

Grita (19.a) aunque te duela, (19.b)
llora (20) si hace falta,
limpia (21.a) las heridas (21.b) que cura (21.c) el amor (21.d).

[estribillo]

Y no apures (22.a) el camino (22.b)
al final todo llegará
cada luz (23.a), cada mañana (23.b)
todo espera en su lugar (24).

[[estribillo2]]

Todavía no sé si representaré toda la letra o sólo algunas estrofas.

sábado, 30 de mayo de 2009

HA903 Recorriendo nuestro país en moto

Hace bastante tiempo que estoy haciendo esta actividad, que consiste en crear una animación simple con Gimp, corresponde a la actividad Nº 4 de la unidad Nº 2 de Gimp del curso HA903.

Versión de GIMP utilizada: 2.4.7
Sistema operativo: Debian Lenny

Descripción

La idea es poner una foto de primer plano donde manejo una moto e ir intercambiando los paisajes.
El problema que tengo es que no me gusta como queda la seleccion de la imagen donde estoy en la moto, queda dentada, desprolija.... he probado varias herramientas de selección.... Mi preferida las tijeras, queda muy dentada no se porque y se me complica corregir detalles porque son muchos... Luego con la mascara de capa me ocurre lo mismo... no se si será la imagen o estoy más detallista que nunca...
Ahora estoy probando la selección de primer plano... a ver como queda...

Procedimiento

Seleccionandome
Seleccioné la herramienta selección de primer plano:
1. Remarqué sin mucho detalle mi imagen manejando la moto. Quedó de color azul oscuro el fondo.
2. Ahora, la herramienta se transformó en un pincl. Pasé el pincel por las zonas más importantes: casco, campera.
3. Presioné Enter. Y la selección quedó mejor de lo que imaginaba... detectó ciertas zonas del manillar de la moto bastante bien. Aquí se puede observar la selección:
Selección realizada con la herramienta de selección de primer plano a la imagen donde estoy manejando la moto Suzuki IntruderLuego, con la herramienta de selección libre (icono con forma de lazo), configurada de la siguiente manera:
- Seleccionada la opción Agregar a la selección actual
- Alisado
- Difuminar bordes: 10
y con el zoom bastante alto comencé a revisar las zonas de la imagen que no habian quedado seleccionadas y las seleccionaba con esta herramienta.
Luego para quitar ciertas zonas de la imagen que no debian quedar seleccionadas elegí la opción Extraer de la selección actual y comencé a recorrer nuevamente la imagen para quitar selecciones no deseadas.
Aquí una imagen de la configuración elegida y de las opciones utilizadas para añadir y extraer de la selección.
Configuracion de la herramienta de seleccion libre. Alisado. Difuminar bordes: 10. Opciones: Añadir a la seleccion actual y Extraer de la selección actualFinalmente me quedó la selección así (...no le busco más detalles...):Imagen seleccionada con la herramienta seleccion de primer plano y con la herramienta de seleccion libre para los detallesGuardé la selección en un archivo nuevo con extensión xcf.
Buscando paisajes
Comencé a buscar paisajes con caminos, rutas, pasajes que coincidan con el sentido de la imagen elegida.
Encontré dos paisajes tomados por mí:
1. Sierras Bayas. Olavarría. Bs As. Argentina
2. Aguas Verdes. Partido de la Costa. Bs As. Argentina
y otros 9 paisajes tomados por un amigo en su viaje por el Sur de la Patagonia Argentina y por Chile.
Modificando el paisaje de Lapataia
Al paisaje de Lapataia le hice algunas modificaciones:
1. Modifiqué la orientación de la imagen, para que vaya en el mismo sentido que la moto. Utilicé la herramienta Volteo y la configuré Horizontal.
2. Al voltear la imagen, el cartel de Lapataia quedó en espejo:
a. Seleccioné el texto "Lapataia" del cartel en la imagen original. Copié y pegué la selección en una nueva capa de la imagen volteada.
b. Moví esa selección sobre el cartel.
c. Utilizando la herramienta Escalar, disminuí el tamaño del texto para que coincida con el original.
d. Utilizando la herramienta de inclinación, incliné el texto del cartel para que coincida con la incinación del cartel.
e. Combiné la capa del texto con la capa donde esta toda el paisaje.
Incorporando cada paisaje
Abrí el archivo donde habia guardado la selección en la que estoy manejando la moto. En este archivo voy a ir incorporando cada paisaje elegido, de la siguiente manera:
Abro cada paisaje elegido y arrastro la capa del paisaje sobre la ventana donde iré armando la animación.
El paisaje que deseo que aparezca primero debe estar abajo en el orden de las capas y así hasta que el paisaje que aparecerá último queda en primer lugar en el apilamiento de capas.

Modifico el tamaño de la capa en la que estoy manejando la moto para que quede acorde con los paisajes.
Incorporandome a la animacion
Duplico la capa en la que estoy manejando la moto tantas veces como paisajes haya incorporado (11 en total) utilizando el botón derecho y haciendo clic en la opción Duplicar capa.
Luego ubico cada capa duplicada arriba de cada paisaje.
Incorporando el nombre de cada paisaje
Utilizando la herramienta Texto, escribo el nombre del último paisaje, utilizando las propiedades modifico color y tamaño del texto. Luego ubico el texto en la esquina inferior derecha.
Para que cada texto quede alineado, incorporo dos líneas guía arrastrando desde cada regla, como sacando la línea de la regla.
En la siguiente imagen, se pueden observar las líneas guías, son líneas punteadas de color azul.
Dos líneas guías, una vertical y otra horizontal utilizadas para ubicar texto
Para el siguiente texto:
1. Duplico la capa de texto recién creada. Utilizando la herramienta texto, le hago doble clic y modifico el nombre del paisaje.
2. Oculto las capas correspondientes a mi imagen, la del paisaje y la del texto recién incluido para poder ver el otro paisaje.
3. Si es necesario, modifico la ubicacion del nuevo texto de acuerdo a las líneas guía.
Realizo el mismo procedimiento con cada paisaje.
Así quedaron las capas (no se alcanzan a ver todas):Capas creadas al duplicar la capa en la que voy manejando, incorporar cada paisaje y el nombre de cada paisaje
Combinando las capas correspondientes a cada paisaje
Combiné las tres capas de cada paisaje para que quede sólo una capa correspondiente a cada paisaje:
- Presioné el botón derecho sobre la capa que está más arriba en la pila de capas, elegí la opción Combinar hacia abajo para que se una con la capa que se encuentra por debajo.
Opción Combinar hacia abajo del menú contextual de las capa. Sirve para unir capas- Luego, sobre estas capas combinadas, presioné el botón derecho y elegí la opción Combinar hacia abajo para que se una con la otra capa que está abajo.
- Quedó una sola capa de las tres que eran antes.
Realicé lo mismo con capa paisaje y su correspondiente nombre e imagen donde voy manejando.
En total me quedaron 11 capas:Quedaron 11 capas correspondientes a cada paisaje después de combinar el texto de cada paisaje, mi imagen manejando y el propio paisaje
Creando la animación
Accedí al menú Filtros/Animación/Optimizar (para gif).Menú Filtros/Animacion/Optimizar (para gif)Creó otra ventana con la imagen optimizada para gif.
Modifiqué los 100ms entre capa y capa por 300ms. Modificando 100 por 300 en el nombre de cada capa.
Retardo de 300ms entre capa y capa.
Accedí al menú Archivo/Guardar como y en nombre de archivo escribí el nombre seguido de .gif e hice clic en Guardar. En el cuadro de diálogo que apareció elegí la opción Guardar como animación e hice clic en Exportar.
Cuadro de diálogo que permite guardar gif como animaciónEn el otro cuadro de diálogo hice clic en Guardar.
Probé la animación y quedó muy rápida. Modifiqué los 300ms por 1000ms.

En la próxima entrega :P modifico la imagen del espejo ;)

martes, 26 de mayo de 2009

Instalando KDE en Lenny

Siguiendo a mi manera el curso básico de Linux es Libre me puse a instalar el escritorio KDE, actividad propuesta en la Lección Nº 2 "Primer contacto con nuestro nuevo S. O. ya instalado".
Instale el escritorio KDE en Lenny asi:

aptitude install kde-desktop

Me pidió el CD de instalación de Lenny y después estuvo como 3-4 horas. Luego apareció una ventana titulada "configuración de paquetes" donde debia elegir entre:
- gdm
- kdm
Busque que son y encontre que "GDM y KDM son "gestores de inicio" (o mejor dicho "display managers") del sistema y permiten arrancar cualquier entorno gráfico instalado en tu sistema. No son específicos de un escritorio en particular. Obviamente, GDM sigue el look de las aplicaciones Gnome"

Elegi gdm... porque me gusta GNOME!

Al iniciar la sesión y elegir KDE aparece el escritorio KDE pero en otro idioma que no es ingles.... como lo cambio? Hice esta pregunta en el foro de debian-ar y AlbertoV me dijo que debía:
1. Instalar el idioma español y así lo hice: aptitude install kde-i18n-es
2. Acceder al centro de control. Lo hice desde consola porque como no entiendo el idioma en el que está KDE... en consola: kcontrol. Accedí a Regional y accesibilidad -> País/Región e idioma -> pestaña Configuraciones locales y agregué el idioma español y elegí Argentina en País o Región... Tuve que reiniciar la sesión para notar los cambios... y así lo hice con resultados negativos... es decir no cambió el idioma de KDE pero la configuración en Regional y accesibilidad del centro de control de KDE continua aplicada como se podrá observar en la imagen.... entonces no se qué hacer... sigo usando GNOME? ¿Qué estoy haciendo mal?
Instalé el paquete de español para KDE, modifiqué el idioma predeterminado en Regional y accesibilidad del centro de control pero KDE no está en español

SOLUCIÓN: Desde Synaptic desinstale el otro idioma y solo deje el paquete español. Estoy feliz porque funciona pero KDE es feooo... :D

martes, 19 de mayo de 2009

HA903 Una gallina a todo color

Esta actividad es la Nº 4 y consiste en convertir una imagen en escala de grises y, utilizando la máscara de capa, resaltar en colores un objeto. Corresponde a la unidad Nº 2: mapa de bits donde utilizamos Gimp del curso HA903.

Versión de GIMP utilizada: 2.6.5
Sistema operativo: XP

Descripción


Busqué varias imágenes para realizar esta actividad pero no me gustaron como quedaron: un paisaje, una flor...
Hasta que recordé a la gallina más linda (?) del gallinero de mi vieja. Para ella es una "linda" gallina... para mi son todas iguales.

Procedimiento


Abrí la imagen de la gallina linda. Dubliqué la capa presionando el boton derecho del mouse sobre la capa de la gallina, hice clic en Duplicar la capa.
Duplicar la capa. Presionando el boton derecho sobre la capa elegida aparacerá esta opcion.
Hice doble clic sobre el nombre de la nueva capa y la llamé "grises".
Renombrar capa. haciendo doble clic sobre el nombre actual permite renombrar la capa con un nuevo nombre mas significativo
Luego seleccioné la capa y accedí al menú Colores/Desaturar, en el cuadro de diálogo, bajo el título Seleccionar un poco de gris basado en: elegí Media.
Presioné el botón derecho nuevamente sobre la capa llamada "grises" y elegí Máscara de capa y dejé la opción Blanco (Opacidad total).
Elegí la herramienta de ampliación (la lupa) e hice un recuadro seleccioando a la linda gallina para poder verla en mayor tamaño. Luego pasé a usar la herramienta Pincel. Controlé que el color de frente fuese negro y comencé a pintar sobre la gallina con una escala de pincel (bastante grande) acorde a lo que pinto.
Luego para los detalles, en espacial los bordes, aumenté más el zoom y disminuí el tamaño del pincel. A veces cambiaba el color de frente por el blanco si daba color a una zona que no deseaba.
Al terminar guardé el trabajo como gallina.xcf. Luego hice una copia como gallina.jpg y es la que muestro a continuación. Como podrán comprobar es una Gallina Muy Linda :P
La gallina linda en colores y el resto del gallinero en grises

jueves, 14 de mayo de 2009

HA903 Iara, mi perra mariposa

Me quedé con ganas de ubicar una selección en otro contexto y crear una composición un poco más fantástica...

La actividad Nº 3 correspondiente a la unidad Nº 2 de Gimp del curso HA903 consiste en utilizar la herramienta de selección máscara rápida para seleccionar un objeto y luego ubicarlo en otro contexto.

En este caso utilicé la herramienta de selección Tijeras de selección. Me resultó más fácil y práctica que la máscara rápida...

Aquí está mi mariperra Iara, un poco meláncolica contandole sus penas a una flor...
Mi perra Iara, un poco melancolica, convertida en mariposa sobre una flor contandole sus penas

Un comentario que se me ocurrió recién ahora.... nunca aclaro que versión de Gimp uso: es la 2.6.5 tanto en XP como en Debian... porque realizo las actividades tanto en un sistema como en el otro inclusive modificando el mismo archivo.

Procedimiento

Utilizando la herramienta Tijeras de selección fui contorneando a mi perra. Esta herramienta detecta los bordes, entonces se puede seleccionar un objeto con solo hacer clic en distintos puntos o vértices de la forma que deseemos seleccionar (Prestar atención donde se realizó el primer clic ;)). A veces, no selecciona el contorno deseado pero se puede mover la selección a partir de los nodos que se agregan con cada clic realizado.
Seleccionando a Iara con la herramienta Tijeras de selección
Cuando se termina de seleccionar se debe hacer clic sobre el primer nodo agregado y luego un clic dentro de lo seleccionado y en ese momento aparecerán las marcas de selección.
Iara seleccionada
Abrí la imagen de la flor, luego fui a la selección de la perra, la copié y la pegué en la imagen de la flor.
Utilizando la herramienta Escalar, modifiqué el tamaño de la perra para que coincida con las dimensiones de la flor. Con la herramienta Mover, ubiqué la perra sobre la flor. Probé distintas ubicaciones hasta que elegí una posición. Pero me pareció que quedaba mejor la perra orientada hacia la derecha, entonces con la herramienta de volteo seleccionada, hice clic sobre ella y la reflejé hacia esa dirección.Iara rotada y con hojas secas en las patitasLuego con la herramienta Clonar, eliminé las hojas secas y césped que tenía en las patas y en la cola. Esta herramienta se utiliza como un pincel que pinta copiando el sector de la imagen indicado. Se hace un clic con la tecla Ctrl presionada sobre la parte de la imagen que se desea copiar y luego se comienza a pintar donde se desea copiar esa zona elegida. Por ejemplo, hice Ctrl Clic sobre una zona blanca de la cola y luego comencé a pintar sobre los pastitos que están sobre la cola copiando el color y aspecto del sector de la cola elegido. Se recomienda utilizar la herramienta clonar con un zoom generoso ;) y configurar el tamaño del pincel de acuerdo a lo que se desea copiar y donde se desea copiar. En el caso de la cola el pincel es más o menos del tamaño del cesped a eliminar con el clonado. Luego, para retocar y unificar colores se puede utilizar la herramienta de emborronado. Además utilicé la herramienta borrador para eliminar ciertos "dientes" en algunos bordes de la perra.
Luego modifiqué el brillo y el contraste de la perra para asemejarlos a los de la flor. Seleccioné la capa de la perra y accedí al menú Colores / Brillo y contraste.


...continuará...