Producción de insumos para recursos educativos

argentina
05 - La producción de material didáctico
para entornos virtuales de aprendizaje (2)
UNIDAD 4
Producción de insumos
para recursos educativos
Juan Carlos Asinsten
Versión 8 / Enero 2010
Especialización
en Entornos Virtuales
de Aprendizaje
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
Contenidos
El guión didáctico .......................................................................................... 4
Metodología de confección de guiones para pequeños objetos .................................. 6
Diseño de la interfaz...................................................................................................... 8
Los objetivos no son listas de buenas intenciones ....................................................... 8
La fábrica de botones .................................................................................... 9
Un simple botón plano ................................................................................................ 10
Botones de dos posiciones (Rollover) ....................................................................... 13
Variaciones sobre este modelo ................................................................................... 29
El filtro Inner Bevel de Alien Skin ................................................................................ 30
Formatos de archivos de botones ............................................................................. 30
Botones con movimiento ............................................................................. 31
Flechita animada .......................................................................................................... 32
Dingbats y dibujitos ..................................................................................................... 33
Cambio de forma ........................................................................................................ 36
Aplicar lo que ya sabemos .......................................................................................... 36
La fábrica de botones de GIMP (2) ............................................................ 38
Botón simple biselado ................................................................................................. 38
Botón redondo ............................................................................................................ 40
Un botón estilo “agua” ................................................................................................ 42
2
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
Fondos ......................................................................................................... 44
Un simple fondo de color ........................................................................................... 44
Una idea muy importante ........................................................................................... 44
Color degradado y texturas........................................................................................ 45
Problemas con Windows Vista ................................................................................... 45
Fondos texturados simples ......................................................................................... 45
Bordes no rectos, con sombra .................................................................................. 47
Variedades con las texturas ......................................................................................... 47
Fondos más elaborados ............................................................................... 51
Las capas. Auxiliares indispensables............................................................................ 52
Elementos sobre fondos complejos .............................................................. 53
Solución sencilla ........................................................................................................... 54
En GIMP ...................................................................................................................... 54
En PaintShop Pro 4 ..................................................................................................... 56
En otros programas .................................................................................................... 57
Problemas con la transparencia .................................................................................. 58
Captura de fondos....................................................................................................... 58
Engordar GIMP ........................................................................................... 66
¿Vale la pena?................................................................................................................ 66
Instalación de plugins y scripts ................................................................................... 68
Filtros “artísticos” ....................................................................................................... 69
Los layers o capas ........................................................................................ 70
¿Qué son las capas? ..................................................................................................... 70
3
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
4
El guión didáctico
La expresión «guión didáctico» no es muy común en la literatura educativa en español. No es una expresión «oficial», asentada y/o consensuada por el
uso. Conviene entonces, antes de comenzar, definir en qué sentido la usamos
en este trabajo.
La expresión «didáctico» o «educativo» utilizado como calificativo de otros
términos (video, cine, mutimedia, etc.) define productos que son intencionadamente orientados a la labor educativa, ya sea guiada por docentes como
autosustentada.
En nuestro caso califica a la palabra guión. Que es la herramienta
que define la estructura de un material multimedia. Podríamos
usar la expresión más completa: el guión multimedia didáctico,
pero permítasenos la economía de lenguaje.
El guión didáctico es, entonces una estructura de documento multimedia en la que se prioriza como criterio de diseño la estrategia didáctica involucrada.
Veamos. Todo material incluye una didáctica: un modo de decir las
cosas, organizado para que sea comprendido de una determinada forma. Claro que de una manera muy general, y sin que el o los autores sean
necesariamente conscientes de ello. Cuando hablamos de una estrategia didáctica nos referimos a otra cosa: a una intencionalidad consciente, voluntaria,
dirigida a facilitar proceso de aprendizaje.
El guión es una brújula para
orientarnos. No es un riel
de ferrocarril que nos
obliga a seguir un camino
rígido.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
5
La didáctica está incluida en varios aspectos del guión:
„
En el modo en que se ordenan los contenidos. La didáctica debe ser la que decida qué va primero, qué va después, según convenga al proceso de aprendizaje (de lo conocido a lo desconocido, de los simple a lo complejo, etc.)
„
En el modo en que se jerarquizan los contenidos. Vinculado al
ítem anterior, pero con el énfasis en qué depende de qué.
Relaciones causa-efecto, subordinaciones, siguiendo la lógica
de los aprendizajes y no la de los objetos.
„
Los elementos de las pantallas que se destacan.
El diseño también jerarquiza. Los tamaños de los textos, los
colores, la disposición, indican la importancia de cada uno, así
como relaciones de dependencia.
Si todo está animado, el efecto puede ser muy bonito, pero
todo vale igual. Animar sólo los textos que queremos destacar. Tratar de que las animaciones ayuden a concentrar la atención y no distraigan o terminen molestando.
„
No siempre la
lógica de los objetos es la
misma que la de los
aprendizajes. Por ejemplo,
la lógica del orden los
menúes de un utilitario
informático casi nunca
tiene que ver con el modo
más sencillo de aprender,
a partir de las
operaciones principales
que deberá encarar el
usuario.
Que los recursos no vuelvan importante lo que no es, poniendo en segundo plano lo importante.
Hay contenidos que son susceptibles de ser mostrados con
recursos de más impacto visual que otros. Cuidado con eso.
No nos dejemos llevar por la búsqueda de efectos que tergiversen el sentido de lo que queremos hacer.
„
Revisar que realmente el guión produzca los efectos cognitivos buscados. El tema no es suficiente de por sí.
Hacernos las preguntas:
z
¿de qué manera los pasos previstos producen un proceso de aprendizaje?
z
¿qué es lo que hace el usuario que nos permite creer
que ese aprendizaje existirá?
z
¿se crea conflicto cognitivo?
z
¿se ayuda a pensar sobre el problema?
¿da respuestas a preguntas que el usuario ya tiene?
Los objetivos que establezcamos deberían intentar tomar en cuenta lo señalado por Marabotto y Grau (1995).
z
...deberíamos preguntarnos en qué medida tal o cual producto informático ayuda al alumno a construir significados y guiar sus actuaciones.
Por ello si no se activa el conjunto de procesos que permite la
construcción evolutiva de la significación, la información es puro
signo, no símbolo: es ruido, no construcción de sentido.
Si analizamos específicamente los entornos hipermediales, el problema consiste en lograr que la interacción alumno-recurso permita al
primero transitar desde un procedimiento elemental y de mínimas consecuencias semánticas hasta un máximo de complejidad y de elaboración cognitiva.
Pensar sobre el
problema: es la idea
principal, la más
importante
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Metodología de confección de guiones para
pequeños objetos
No hay un modo especial para construir guiones. En el material anexo de
la unidad describimos procedimientos útiles para proyectos relativamente
voluminosos. Los guiones para pequeños obejtos deberán ser necesariamente
más simples en su estructura y en el modo de confeccionarlos.
Etapas
Las etapas de construcción del guión son, aproximadamewnte, las siguientes, entendiendo que esta lista es una guía y que en la elaboración de guiones
reales hay un ir y venir permanente:
„
Tema. Definir el tema. El alcance del contenido que se abordará.
„
Objetivo. Trazar los objetivos. Qué pretendemos que suceda con el usuario del objeto. Qué nos proponemos enseñar.
Es el elemento clave del diseño.
„
Idea base. Cómo abordaremos el tema de manera de alcanzar los objetivos que nos propongamos.
„
Metáfora. Aspectos visuales y sonoros que crearán o ayudarán a crear el clima especial en el que se desarrollarán o mostrarán los contenidos.
„
Estructura o guión. Esquema detallado de las páginas o partes
del objeto. Qué contendrán cada una de ellas. Cómo se relacionarán y jerarquizarán los diferentes elementos. Este es otro
punto muy importante del proceso.
„
Diseño de los componentes o insumos. De acuerdo a la
metáfora elegid se diseñará la idea de interfaz, incorporando
la metáfora, si la hubiera. Y luego se producirán los distintos
elementos necesarios: fondos, imágenes, botones, títulos, etc.
„
Armado del objeto. Utilizando el software de autor elegido, se arma el producto final.
„
Pruebas, testeos y correcciones, que permiten ponerlo a
punto y dejarlo listo para el uso.
Juan Carlos Asinsten
Unidad 4-
6
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Formato del guión
El guión para pequeños
objetos multimedia conviene hacerlo mediante gráficos
similares al que mostramos.
Aunque cada uno puede elegir el método que le resulte
más cómodo y sencillo.
Este tipo de gráficos nos
da una visión general de la
estructura y relaciones entre
las páginas. Es un modelo similar al que mostramos en la
página 11 de la Unidad 3.
En cada pagina necesitaremos detallar qué sucede. Qué
elementos hay, que botones y
animaciones contiene. Eso nos
dará un panorama global del
objeto.
Para pequeños obejtos estos criterios son suficientes. Podemos ver un desarrllo mucho más completo y extenso en el material complementario llamado El guión didáctico.
OBJETIVOS
Idea base
Interfaz
Guión
Juan Carlos Asinsten
Unidad 4-
7
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
Diseño de la interfaz
En el material mencionado encontraremos también un desarrollo extenso,
con muchos ejemplos, sobre diseño de interfaces.
Aunque en el esquema de la página anterior aparecen como pasos, los
obejtivos, la idea básica del diseño, la interfaz y el guión se interrelacionan en
un proceso de influencia mutua. Como en la historia del huevo y la gallina,
resulta muy difícil decidir qué es lo que va primero.
Cuando pensamos en el objeto que serviría de base para el aprendizaje del
programa Power Bullet, en la Unidad 3, los tres elementos los pensamos y
fuimos definiendo simultáneamente: la idea base fue construir un objeto sencillo, con una
interfaz no plana y una navegación en árbol, bastante simple. Cuando definimos la interfaz tipo comic, cambiamos el
guión para mostrar los efectos
iniciales y a medida que incorporamos elementos, agregamos
páginas (como los créditos y las
tres páginas finales).
Como dijimos: en el material anexo hemos escrito y ejemplificado bastante sobre diseño
de interfaces, y remitimos a la
lectura de esos textos y ejemplos.
Interfaz de la multimedia
Historia del tren.
Los objetivos no son listas de buenas intenciones
Muchos docentes, a la hora de redactar (establecer) objetivos para actividades u objetos lo hacen como si fueran a ser juzgados por la calidad y cantidad de lo que se proponen. Entonces elaboran objetivos grandilocuentes, exagerados, no ya sólo para una actividad o un objeto, sino para una Unidad didáctica y aún para una materia completa. Los objetivos (en este caso para el
diseño de objetos) no son una declaración de buenas intenciones. Es lo
que nos proponemos como resultado, lo que aspiramos a que suceda (cambie) en los estudiantes que utilicen el objeto en cuestión.
Un objeto no puede resolver que los estudiantes comprendan los misterios del universo, los secretos del genoma humano o la historia de América. No
puede. Y escribirlo en los objetivos no cambiará el no poder en poder mágicamente.
Y si el objeto lo único que hace es suministrar información, colocar entre
los obejtivos el producir «aprendizajes significativos sobre...» es también una
exageración.
Objetivos modestos, pequeños, pero alcanzables. Eso es lo que hay que
hacer.
Algunos objetivos
necesitarían la ayuda de
Harry Potter para poder
alcanzarse...
8
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
La fábrica de botones
Los botones son un elemento esencial en cualquier interfaz de usuario.
Sirven para introducir órdenes a los programas (los objetos son también
programas, en cierto sentido) para que se comporten de determinada
manera: que vayan a otro lugar, que muestren algo, que dejen de mostrar otra cosa.
El lenguaje de la pantalla, adoptado por Internet y los programas,
indica que cuando le puntero del mouse (nuestra mano en la pantalla) se
posiciona sobe un botón, el puntero se convierte en una manito. Así el
usuario sabe que si hace clic allí, algo sucederá.
Este código, casi universal, no siempre es suficientemente fuerte como para
que sea percibido sin dudas. Una cosa es cuando el botón está en la interfaz de
un programa, y es, por su diseño, claramente un botón, y otra cuando está tan
integrado a la interfaz que no se distingue a simple vista (como las «manijas»
del objeto de la Unidad 3).
Para esas situaciones, los diseñadores elaboraron otro código (sin eliminar
Juan Carlos Asinsten
Unidad 4-
9
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
el de la manito) que tiene el mismo significado, y que sirve, a la vez, para
animar el diseño de interfaces: cuando se coloca el mouse sobre un botón, el
mismo cambia de aspecto levemente (o no tan levemente). El cambio puede
ser muy variado: de color, de tamaño, de posición, de forma. El desarrollo de
Flash permite hoy confeccionar botones que despliegan vistosas (y hasta exageradas) animaciones.
Nosotros aprenderemos en este capítulo a confeccionar gráficos para botones que cambian de aspecto, llamados botones rollover, utilizando el programa de gráficos GIMP. Los tutoriales nos mostrarán los procedimientos, que
luego odremos aplicar a otros diseños.
Procedimietos similares pueden seguirse con otros programas de gestión
de gráficos basados en pixels.
10
El simpático zorrito de
GIMP
Un simple botón plano
Vamos a crear un botón muy simple, de una sola imagen (no rollover).
1
1
2
Abrimos GIMP
1) Clec en Archivo
2) Seleccionamos
Nuevo...
1
2
2
3
4
1) Aparecerá la venta de
configuración del
nuevo archivo.
2) Establecemos como
acho 100 píxels
3) Como alto 40 píxels
4) Dejamos el resto de los
valores sin tocar
(dbería establecer 73
ppp y RGB)
5) Clic en Aceptar.
5
3
1
Aparecerá nuestro archivo
con fondo blanco, rodeado
de una linea punteada (no
es una selección).
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
11
4
1
1
1
2
2
9
3
5
6
1) En el panel de
herramientas elegimos
el bolde (relleno)
2) En la zona contextualo
(varía con cada
herramienta) clic sobre
el color de frente.
3) Aparecerá la ventana
de configurar colores.
4) Elegir el tono o matiz
en la barra vertical de
tonos o matices.
5) Elegir la saturación y
brillo en el cuadro
respectivo.
6) Podemos configurar
manual o
numéricamente los
valores RGB con
iguales resultados.
7) El color seleccionado lo
vemos en la casilla
Actual.
8) Cuando estamos
conformes, clic en
Aceptar.
9) De regreso al panel
herramientas
asegurarnos que esté
tildado Relleno con el
color de frente.
4
7
8
5
Con el balde seleccionado,
clic sobre el fondo del
archivo para rellenarlo
con el color de frente.
El puntero muestra:
3
1
2
1) Puntero
2) Baldecito (modo de
relleno)
3) Color de frente
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
12
6
1
Vamos a agregar un bisel
que le de al botón un
aspecto ligeramente
tridimensional.
1) Filtros
2) Decorativos
3) Agregar bisel
3
2
1
7
3
1) ...aparecerá la ventana
de configurar el bisel.
2) Destildar las dos
casillas.
3) Configurar el valor del
bisel (ancho en píxels)
entre 2 y 5 píxels.
4) Clic en Aceptar.
2
4
8
1
2
1) El botón terminado.
2) Aplicanso el efecto tres
veces seguidas.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
13
9
3
2
1
1) Eligiendo una textura
en la lista de las
disponibles...
2) Tildando la opción
Relleno con patron...
3) Podemos obtener
resultados muy
interesantes
Podemos agregr
textos (rótulos) a
nuestros botones,
como veremos más
adelante.
Botones de dos posiciones (Rollover)
Vamos a ver cómo hacer uno o dos modelos de botones rollover, utilizando las capas o layers de GIMP. Recomendamos leer previamente el capítulo
respectivo, para tener una idea previa de las capas y sus posibilidades.
Vamos a construir entonces un botón de dos posiciones, similar al que usamos en le proyecto con Power Bullet.
El botón se enciende
cuando pasamos el mouse
sobre él, y se vuelve a
apagar cuando hacemos
clic.
1
Abrimos GIMP y
1) Crear un archivo nuevo.
2) aparecerá la pantalla
de configuración.
3) Establecemos como
ancho 120 pixels.
4) La altura la fijamos en
40 pixels.
5) La resolución la
dejamos en 72 pp
(resolución de
pantalla) y el color en
modo RGB.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
14
2
1
Vamos a construir el borde
metálico del botón.
1) Clic sobre el botón de
relleno con mezcla o
degradado de colores.
1
4
2) Clic sobre el botón que
abre la paleta de
degrdados disponibles.
3) Elegimos el degradado
Golden.
4) El degradado activo
aparece en la caja de
herramientas.
2
3
3
1) Clic con el botón
derecho del mouswe en
una zona exterior al
botón.
2
1
3
4
Sin soltar el botón (con
el botón presionado)
arrastramos el puntero
hasta (2)
2) Soltamos el botón.
3) Aparecerá el
degradadao en el
grafico.
4) Ibservemos que el
puntero tiene el ícono
de degradado.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
15
4
1
2
Vamos ahora a convertir el
dorado en metalizado
celeste.
1) Clic sobre el menú
Colores.
2) Opción Tono y
saturación.
5
1
1) Aparecerá la paleta de
Tono y saturación
2
3
2) Modificamos el Tono
hasta objetenr gamas
de celestes.
3) Modificamos la
luminosidad para
aclarar bastante el
gráfico.
4) Modificamos la
saturación para hacer
más grisáseo el color.
Estos cambios pueden
hacerse mediante valores
numéricos o con las
correderas.
5) Los cambios que
introducimos en la
paleta se ven en el
gráfico en tiempo real,
si está tildada la casilla.
6) Cuando estamos
conformes, clic sobre
Aceptar.
4
5
6
El resultado
obtenido.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
16
6
Conl a heramienta de
zoom (lupa) hacemos clic
varias veces sobre la
superficie del gráfico para
ampliarlo.
En esta captura la
ampliación es del 400%
7
Vamos ahora a gregar un
bisel, como vimos en el
ejercicio del botón plano.
El valor del visel será de 6
píxels.
El resultado lo podemos
apreciar enl a captura
siguiente.
8
El siguiente paso consistirá
en agregar un borde o filete
negro alrededor, para
separar el botón de
cualqueir fondo.
1) Menú Filtros.
2) Decorativos
3) Agregar borde...
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
17
9
1) Aparecerá la pantalla
de configurar el borde.
2) Establecemos un ancho
de 1 px para el borde
vertical y el horizontal.
3) Configuramos el color
como negro.
El color del borde casi
siempre convendráque
sea negro. Pero cada
proyectopuede
plantear exigencias
diferentes.
4) Clic en Aceptar.
10
Si no está en la
pantalla, vamoa a
abrir la paleta de
capas.
1) Menú Ventanas.
2) Diálogos empotrables.
3) Capas.
Sobre el concepto de capas en este tipo de programas,
ver el capítulo respectivo al final de esta Unidad didáctica.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
18
11
Aparecerá la paleta de
capas correspondiente al
archivo en el que
trabajamos.
2
El grisado indica que es
la capa seleccionada o
activa.
1
1) Capa de fondo, con el
gráfico construido
hasta ahora.
2) Capa con el borde que
acabamos de crear.
3) Clic sobre el botón
Capa nueva.
Todo lo que hagamos se realizará en
esa capa (hasta que seleccionesmo
otra.
3
1
12
1) Aparecerá la paleta de
configurar la nueva
capa.
No necesitamos (en
este caso) cambiar
nada.
2) Revisar que la capa
tenga tildado el botón
de radio Transparencia.
3) Clic en Aceptar.
2
3
13
Vamos a trabajar ahora en
la nueva capa (verificar que
sea la capa activa).
1) Menú Selección.
2) Opción Todo.
Tenemos ahora una
selección de toda la
superficie del gráfico.
Podemos observar que la
línea punteada del
perímetro ahora se mueve.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
19
14
1
Elpaso siguiente es para
poner el límite interior de
la virola (borde metálico).
1) Menú Seleccionar.
2) Opción Encoger.
2
1
15
1
2
3
1) Aparecerá la pantallita
de configurar la opción
de encoger la selección.
2) Colocamos un valor de
6 px (similar al del bisel
que creamos antes).
3) Clic en Aceptar.
16
El resultado es una
selección 6 px. más chica
que la superficie del
gráfico.
El trabajar con el gráfico
ampliado nos ayuda a
comprobar visualmente lo
que vamos haciendo.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
20
17
Con la herramienta de
relleno pintamos de negro
la selección.
La selección sigue activa
18
Creamos una nueva capa.
1
19
1) Aparece la ventana de
configuración de capa
nueva.
2) Colocamos el nombre
que nos ayudará a
saber que contiene
(muy útil en gráficos
con muchas capas).
3) Verificamos que esté
activo elbotón der adio
«Transparencia».
4) Clic en Aceptar.
2
3
4
20
2
2
1
1) En la paleta de cpas
aparece la nueva, que
acabamos de crear.
2) Cmo no contiene n ada
aparece con el
cuadriculado gris, que
indica transparencia.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
21
21
Volvemos a contraer o
encoger la selección, esta
vez con el valor de 1 px.
22
El resultado será una
selección más adentro, que
deja un borde de 1 px
hasta la virola.
La selección estárá
vigente en cualquier
capa activa. Ene ste
caso, la capa que
acabamos de crear.
2
23
1) Elegimos la herrmienta
de degradados.
2) Clic sobre el botón que
abre la lista de
degradados
disponibles.
3) Elegimos el degradado
Yellow Orange
4) El mismo aparecerá
seleccionado.
1
3
4
4
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
22
24
1
Con la herramietna de
degradado seleccionada.
1) Clic conbotón
izquierdo del mouse en
(1)
1
2) Sin soltar el botón
arrastrar hasta (2)
25
Aparecerá el degradado en
el interior de la selección.
26
Le agregamos un bisel de 6
px con el método que ya
vimos antes.
27
Duplicamos la capa con el
botón respectivo.
Al duplicar la capa, se crea
una capa nueva, con el
mismo contenido que la de
origen.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
23
28
Aparece la nueva capa...
Si la volvemos invisible
(clic sobre el ojo) no
notaremos ningún cambio
en el gráfico, ya que ambas
cpas son idénticas.
29
Haciendo clic con el botón
derecho del mouse sobre la
capa, abrimos el menú
emergente de capas. Allí
elegimos Editar atributos
de capa...
30
Renombramos la capa
como Botón apagado.
31
La paleta de cpas muestra
el cambio de nombre.
Guardar el archivo
Conviene guardarlo en el formato propietario de GIMP el cual es xcf.
(Archivo/Guardar como). Y recordar guardar cadad tanto...
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
3
24
32
1) Cuidando tener
seleccionada la capa
Botón apagado...
2) Menú Colores/ Tono y
saturación.
3) Aparecerá la paleta
respectiva.
4) Bajamos bastante la
luminosidad
(oscurecemos).
5) Bajamos la saturación
(tono más gris).
1
4
5
33
2
1) Se puede observar el
resultado de los
cambios.
Vamos a mejorar ese
resultado.
2) Menú Colores
3) Opción Niveles
3
1
1
34
1) Aparece la paleta de
Niveles.
2) Corremos las guías de
blanco y negro hacia le
centro, para aumentar
el contraste.
3) Moveos la guía central
hasta tenr el tono
deseado.
2
3
2
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
25
35
El resultado será
aproximadamente así.
Haciendo clic sobre el ojo
de la paleta de capas,
podemos ver cómo se
enciende y se apaga el
botón.
36
1
Vamos a agregarle
texto
1) Clc sobre la
herramietna Texto.
2) Elegimos como
tipografía Arial Bold
3) Tamaño 18 px.
El tamaño depende del
tamaño del gráfico.
4) Hacemos clic sobre el
gráfico del botón.
2
3
1
37
1) Aparecerá la pantalla
de ingresar texto.
2) Escrtibimos el texto
para el botón.
3) Completamos con
Cerrar.
2
3
38
Aparecerá el texto.
Lo centramos en el botón
con las flechas del teclado.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
26
39
El botón está
terminado.
Vamos a duplicarlo
(Imagen/Duplicar) o
Ctrol+D
+
40
1
Repetimos la operación
dos veces.
2
1) Tendremos así el
gráfico original.
2) Una copia en la que
volvemos invisible la
capa del botón
apagado.
3) Una copia con el botón
apagado visible.
2
1
1
41
Vamos a eliminar las capas
en las dos copias.
1) Menú Imagen
2) Opción Aplanar la
imagencuadno se aplana se
junta todo lo visible en
una sola capa.
Las capas ocultas se
eliminan.
2
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
27
42
El botón como un gráfico
simple.
En la paleta de capas hay
ahora una sola con todo el
gráfico unido.
La operación la realizamos
en las dos copias.
43
Trabajamos hasta ahora en
modo RGB (16 millones de
colores).
Vamos a reducir la catidad
de colores a 256, para
poder grabar en formato
GIF.
Vamos al menú
Imagen/Modo/Indexado
44
Aparecerá la paleta de
conversión.
1) Elegimos la opción. En
este caso Generar
paleta óptima.
2) Elegimos un modo de
difuminado.
El difuminado simula
los degradados de
color con puntos.
3) Finallizamos con
Convertir.
1
2
3
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
28
45
4
Vamos a guardar los
botones temrinados.
1) Archivo/Guardar como
2) Abrimos la lista de
formatos
3) Elegimos GIF.
4) Escribimos el nombre
de archivo.
2
2
3
Nombres de archivos de botones
Utilizo desde hace mucho un sistema de nombres para mis botones que me ha
resultado muy práctico:
„
comienza con la letra b (me indica que es un botón)
„
separado por un guión va el nombre propiamente dicho (significativo y corto).
separado por un guión la letra a para el botón en reposo, la letra b
para la posición rollover y la letra c para el botón presionado (si
hubiera).
De esta manera no tengo que pensar cuál es el gráfico que va, en el momento de
cargarlo en el proyecto al que están destinados.
„
46
Aparecerá una pantalla
auxiliar para la
configuración del GIF, que
no modificamos para este
caso.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
29
47
En la barra de estado se
reflejan los cambios
(Indexado, nombre)
48
Nuestros botones
terminados
Variaciones sobre este modelo
El modelo de botón rectangular tiene la ventaja de cubrir el fondo, de
manera que puede colocarse sin problemas en cualquier lugar. Más adelante
veremos el tema de botones no rectangulares sobre fondos texturados.
El procedimiento que hemos seguido nos permite también crear otros efectos diferenes al encendido/apagado.
„
Cambio de color. En lugar de modificar el brillo y saturación, se cambia el Tono (paso 32)
„
Cambio de texto. El texto puede variar. El segundo texto
se coloca en otra capa.
„
Brillo del texto. En lugar de cambiar el fondo del botón, se
agrega brillo al texto, en otra capa.
1
Menú Filtros /Luces y
sombras/Sombra
arrojada.
2) Desplazamientos en
cero.
3) Radio de desenfoque
en 5 a 10.
Mientras más chicos,
más fueerte el efecto.
4) Color muy claro o
blanco.
1)
2
3
4
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
30
El filtro Inner Bevel de Alien Skin
2
1
4
1) Ventana de
previsualización.
2) ancho del bisel
3) Esfera para cambviar la
dirección de la luz.
4) Valores de la luz.
Cuando se obtiene un
resultado adecuado,
copiar los valores
numéricos para
configuraciones
futuras.
5) Diseño del bisel. Hay
cuatro modelos.
El filtro Inner Bevel de
Alien Skin produce biseles
de mejor calidad que los
de GiMP. Lo
suministramos para su
instalación (ver capítulo
«engordando GIMP»)
3
Formatos de archivos de botones
Los botones para Power Bullet conviene guardarlos siemrpe como GIFs.
aunque en el momento de la producción los trabajemos como archivos de 24
bits, antes de incorporarlos al proyecto, los podemos pasar a GIF, usando la
opción Guardar como...
Antes de eso reducimos la cantidad de colores a 256 con el menú Imagen/
Modo/Indexado...
Pantalla de
configuración del
indexado
La reducción de colores se
puede hacer de varias
maneras.
Con las tecnologías
actuales el porblema de las
paletas se ha minimizado,
por lo que podemos usar la
configuración de la
pantalla:
1
2
1) Generar paleta óptima
2) Difuminado. Se activa
si elegimos uno de la
lista.
El difuminado simula
colores con puntitos,
para tener una gama
visible de más de 256.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Botones con movimiento
Las animaciones se construyen en base a dos componentes.
„
La persistencia retiniana. El ojo percibe como continuas
las sucesiones de imágenes fijas si tienen una frecuencia mayor
a 16 cuadros por segundo. En ese caso cada imagen se funde
conla siguiente, preoduciendo el efecto de movimiento (en
eso se basa el cine...)
„
Vemos lo que queremos ver. El aspecto subjetivo de la
percepción: muy importante con los botones...
Vemos lo que queremos ver
En el caso de los botones no aplica lo de persistencia retiniana. El fenómeno que nos hace ver en movimiento elementos absolutamente estáticos es
nuestra propia mente. Si vemos un elemento en una posición, e instantes después lo vemos en otra, nuestra mente crea la ilusión de desplazamiento, y creemos verlo en movimiento entre los dos puntos. Eso sucede mientras
se respeten determinados parámetros (que las posiciones no estén demasiado
distanciadas, por ejemplo).
Sobre la base de este tipo de ilusiones es que podemos crear botones con
movimiento muy fácilmente, como vermos en las páginas sigientes.
Juan Carlos Asinsten
Unidad 4-
31
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
32
Flechita animada
Veamos cómo construir un botón rollover con forma de flechita animada.
1
1
1)
2)
3)
4)
2
Archivo/Nuevo
Ancho 80 px
Alto 60 px
Aceptar.
3
4
2
1) Seleccionamos la
herramienta Texto
2) Seleccionamos como
tiografía Windings.
3) Tamaño 60 px
4) Color rojo.
4
1
2
3
4
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
33
3
Tipografías especiales en GIMP
No encontramos el modo de ingresar tipografías
usando la combinación Alt+xxx. Y tampoco
coincide la ubicación de los caracteres con los
de Windows, debido a que GIMP usa un gestor
de fuentes propio.
Por es razón, para utilizar algún símbolo
especial, hay que probar. Conviene hacerlo en
otro archivo, de tamaño grande..
Escribimos (con el teclado)
la E mayúscula con
diéresis.
Ë
El panle de ingreso de
texto no admite la opción
de Alt+
4
Cuando aparezca nuestra
flecha roja...
1) La arrastramos hasta su
posición, cuidando de
hacer clic sobre el
cuerpo del caracter,
cuando el cursor se
convierte en la cruz de
flechas.
1
5
La flecha en posición. No
en el centro sino
ligeramente desplazada
hacia arriba y la izquierda,
pra dejar lugar a la sombra
que le agregaremos.
Dingbats y dibujitos
Las tipografías con gráficos (windings y muchas otras) pueden resolver muchas cuestiones en la producción de gráficos. Para un uso eficaz,
es importante construir catálogos completos de cada tipografía, y utilizar
programas auxilares para rescatarlas, como charmap de Windows o el
programita gratuito ecm.
Ver la Unidad 3 de la materia Comunicación.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
34
6
1
1) Menú Filtros
2) Luces y sombras
3) Sombra arrojada...
2
3
7
Valores para la
sombra
1
2
3
4
1) Desplazamientos 6
píxels
2) Desenfoque 6 píxels.
3) Color negro.
4) Opacidad 40%
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
35
8
La sombra se arma en una
capa por abajo de la que
contieen la flecha.
1) Clic con botón derecho
sobre la capa de la
flecha.
1
2) En el menú emergente
elegir Combinar hacia
abajo.
2
9
2
1
1) La flecha y su sombra
se funden en una sola
capa.
Toma el nombre de la
capa inferior.
2) Clic en Duplicar capa.
2
10
Tenemos dos capas
idénticas.
Desplazamos una de ellas
hacia la derecha unos 6 a
10 píxels, utilizando las
flechas de dirección del
teclado.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
a)
b)
La sombra produce la ilusión que la flecha
«flota» a cierta distancia de la superficie. Al eliminarse la sombra, la ilusión es que la flecha
«baja» hasta la superficie.
c)
36
Ducplicamos el archivo,
etc.etc.etc (pasos 40 y
siguientes del tutorial
anterior) y obtenemos dos
imágenes parecidas, que
darán la impresión de
moverse al montarlas
como botones rollover.
Una vuelta de
tuerca
Si hacemos una copia de la
cpa antes de colocarle
sombra, y la desplazamos
la misma cantidad de px
que la versión b,
tendremos una versión c,
para el lugar del botón
presionado, que dará la
impresión de bajar.
Cambio de forma
Otro de los recursos para mostrar botones activos es el de modificar su forma o
tamaño. Este ejemplo, algo exagerado
para que se note, se construye muy fácilmente con las herramientas de GIMP.
En este ejemplo los
cambios son exagerados,
para que se vean en la
página gráfica. Para
botones reales los cambios
pueden (deben) ser más
sutiles.
1
Necesitamos tener
todos los elementos del
botón que queremos
deformar unidos en la
misma capa.
Habitualmente, el fondo no
se deformará. De manera
que debe estar en otra
capa.
Unir las capas deseadas es
muy sencillo: se desactivan
las capas que no uniremos,
hacemos clic en una de las
capas activas con el botón
derecho del mouse y en el
menú emergente elegimos
la opción Combinar las
capas visibles.
Aplicar lo que ya
sabemos
No repetimos los pasos que ya conocemos.
En este caso hay que duplicar el
botón original, aplanarlo y guardarlo
antes de hacer las transformaciones de
forma.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
37
2
1
Después de haber
duplicado el botón, para
obtener la versión del
gráfico en reposo...
1) Menú Filtros
2) Distorsiones
3) Distorsión de lente.
2
3
1
La recomendación es
hacer estos cambios
también sobre una copia
duplicada, para mantener
el original para cualquier
eventualidad.
3
1) Aparecerá la ventana
de configuración del
filtro.
2) Muestra la capa a la
que se aplicará la
distorsión.
3) Modificamos los
valores de Principal y
Ampliación.
2
Hay que experimentar
hasta objetenr los valores
apropiados, apra que ele
fecto sea sutil. Los de esta
cpatura son, posiblemente,
exagerados.
3
3
Finalmente aplanamos la
imagen y guardamos la
versión del botón para la
posición rollover.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
38
La fábrica de botones
de GIMP (2)
GIMP trabaja sobre la base de muchos scripts, como ya hemos dicho.
Esos scripts (en rigor, pequeños subprogramas) agregan nuevos elementos en
los menúes. En cada versión de GIMP se agregan nuevos scripts, lo que significa nuevas prestaciones. Los usuarios también podemos agregar scripts, como
explicamos en el capitulo «Engordar a GIMP».
En éste mostraremos dos de esos complementos, destinados a construir
fácilmente botones. Y un tercero con el mismo fin que hemos agregado nosotros, después de haberlo descubierto en Internet. Iremos de menor a mayor,
comenzando por un botón muy simple, aunque configurable.
Botón simple biselado
1
2
3
La “fábrica de botones” está
en el menú Archivo
4
1
1)
2)
3)
4)
Archivo
Crear
Botones
Botón simple biselado
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
39
2
1
2
3
4
4
5
Pantalla de
configuración del
botón
1) Texto del botón
Conviene utilizar
mayúsculas.
2) Tamaño de la
tipografía. Los
tamañosmás
adecuados son entre 8
y 12.
3) Tipo de letra. Conviene
elegir una Bold.
4) Colores del gradiente.
Hay que
experiementar.
5) Relleno. Espacio entre
el texto y el borde del
botón.
Convienen valores
entre 4 y 10 px.
3
El boton
terminado
4
Paleta de
selección de
tipografía.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
40
5
Pantalla de
configuración de
colores
Otras posibilidades del botón
Al estár separado en capas, podemos
convertir a este botón simple en uno de dos
o tres posiciones.
1) Duplicando la capa Gradient y modificando el color, el tamaño, la forma podemos hacer dos o tres variantes, para
los diferentes estados del rollover.
2) Podemos cambiar el texto para la posición mouseover (cuando el mouse pasa
por arriba).
Botón redondo
En realidad, es un botón rectangular con extremos redondeados. Produce
hasta tres versiones, para cada una de las posicioens del botón, y tiene muchos
parámetros configurables, como vereos enseguida.
6
El botón se genera
separado en tres
capas.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
41
2
1)
2)
3)
4)
Archivo
Crear
Botones
Botón redondo
3
1
2
3
4
5
5
6
7
La pantalla de
configurar el
botón redondo
1) Texto del botón
Conviene utilizar
mayúsculas.
2) Tamaño de la
tipografía. Los
tamañosmás
adecuados son entre 8
y 12.
3) Tipo de letra. Conviene
elegir una Bold.
4) Colores de los
gradientes. Los
«activos» refieren a la
posición mouseover
Hay que
experiementar.
5) Relleno. Espacio entre
el texto y el borde del
botón.
Se puede diferenciar
entre los valores de x
(horizontales) e y
(verticales), según el
espacio disponible.
Convienen valores
entre 4 y 10 px.
6) Valor del radio. Con 1
el extremos es una
semicírculo. Con
valores menores es una
elipse achatada y con
mayores alargada.
7) Según las casillas
tiladadas, produce
botones para cada una
de las posiciones.
La palabra activo refiere a
la posición mouseover.
Los botones se crean ya aplanados. En una sola capa. Por lo que las modificaciones posteriores son más complicadas.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
42
4
El botón
temrinado
Un botón estilo “agua”
Este sofisticado botón lo crea GIMP en un solo paso
mediante un script que descubirmos en Internet e instalamos «a mano» según explicamos en el capítulo «Engordar a GIMP»
1
1)
2)
3)
4)
Archivo
Crear
Botones
Aqua-style button
2
1
2
3
4
Pantalla de
configuración del
botón
1) Color de base del
botón.
Sepuede elegir
cualquier otro. No
conviene que sea muy
claro.
2) Color de fondo. Se
puede adecuar al
necesario (si se usa
sobre un color plano)
copaindo los valores
RGB o exadcimales del
color.
3) Medida del fondo.
Aunque se puede
cambiar, no tuvimos
buenos resultados al
modificarla. Preferible
dejarla como está y
achicar el botón
cuando esté
terminado.
4) El botón terminado.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Más configuraciones y opciones
Al estar todos los elementos separados
en capas, es muy sencillo modificar cualquiera de ellas para obtener los diferentes aspectos que deberá tener el botón en cada una
de las tres posiciones.
Para realizar cambios, es posible que sea
necesario unir capas, utilizando las opciones
del menu emergente que vimos antes:
„
Combinar capas visibles
Combinar hacia abajo
Otra opción es ocultar capas, mediante
el botón correspondiente
„
Como se puede apreciar en los gráficos,
será necesario agregarle el texto posteriormente.
Para audaces
Trabajando un poco sobre el texto, podemos hacer una versión «giratoria»
que podemos ver mejor en la clase de ayuda.
Unidad 4-
43
1
El botón aparece
desplegado en
capas
Mediante el botón de
mostrar/ocultar capas se
puede comprobar qué
contiene cada capa.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Fondos
Los fondos constituyen el escenario en el que suceden todas las cosas en
un documento multimedia. Son el elemento principal de la metáfora que crea
el clima decidido en el diseño.
Veremos la construcción de fondos, comenzando por los más sencillos.
Un simple fondo de color
Power Bullet, Power Point y la totalidad de los programas de autor tienen la posibilidad de colocar un color de fondo, e, incluso, algún gráfico para
ese fin. No hay mucho que necesitemos decir al respecto, ya que la forma de
aplicar los colores dependerá del programa.
Como siempre, recomendamos que el color sea muy claro, para colocar
sobre le elementos oscuros, o muy oscuro, colocando elementos claros sobre
el mismo.
Para proyecciones, tener en cuenta que los fondos oscuros no se proyectan
(no envían luz a la pantalla)
Los colores no conviene que sean dmasiado saturados, para que no compitan con los elementos colocados sobre ellos.
Una idea muy importante
Los fondos están destinados a ir... al fondo.
No deben competir con los contenidos en acaparar la
atención de los usuarios.
Juan Carlos Asinsten
Unidad 4-
44
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
45
Color degradado y texturas
Los colores no tienen porqué ser planos. Podemos utilizar degradados de
color. eso sí: suaves, con poco contraste.
Si usaremos sombras en los elementos, el degradado puede acompañar la
dirección de la luz: más claro en la zona del origen, más oscuro en la zona más
alejada.
Normalmente los degradados pueden aplicarse con recursos propios de
los programas de autor y no necesitan de la inclusión de gráficos externos.
Texturas
Las texturas requieren de la utilización de gráficos de fondo. Veremos algunas variedades de texturas que podemos obtener fácilmente con GIMP.
Problemas con fondos no planos
Los fondos en degradado y con texturas planean un problema de
diseño: al ser las superficies irregulares, todos los elementos que se
colequen sobre el fondo (títulos, botones, y otros contenidos) deben
ser construidos exactamente en el lugar que ocuparán en la publicación.
Las capas resultan una herramienta imprescindible para esto, como
veremos enseguida. Pero hay que tener en cuenta que el diseño lleva
mas tiempo y los cambios suelen exigir rehacer los gráficos involucrados.
Problemas con Windows Vista
PowerBullet puede tener problemas con archivos JPG si trabaja en una
computadora con Windows Vista. Conviene pasar todos los JPG a GIF,
con el procedimiento que ya explicamos para los botones.
Fondos texturados simples
1
1) Creamos un archivo
nuevo, con las medidas
exactas qeu
necesitaremos para el
fondo de nuestro
proyecto.
En este caso utilizamos
medidas arbitrarias.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
46
2
4
1) Elegimos la
herramienta de
rellenos
1
5
2) Tildamos Relleno con
patrón
3) Clic sobre el botón de
elegir patrones.
4) Aparecerá la pantalla
con muestras de todos
los patrones
disponibles.
5) Elegimos uno.
6) Aparecerá en el botón
y en la muestra del
patrón seleccionado.
6
2
3
6
3
Haciendo clic sobre la
superficie del gráfico, lo
rellenaremos con el patrón
elegido.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
47
Variedades con las texturas
Si lo que buscamos son diseños abstractos, a partir de cualquiera de
las texturas podemos obtenr una variedad casi infinita aplicando filtros ,
y/o variando los valores de color, saturación y brillo.
También podemos colocar una de
las texturas en una capa y otra en la
siguiente, combinandolas con diversos
grados de transparencia (opacidad).
Bordes no rectos, con sombra
Los archivos basados en pixels son siempre rectangulares. Siempre. Pero
con diversos recursos podemos hacer que se vean irregulares.
Uno de los recursos, muy usado en Internet, es configurar un color como
transparente. Así vemos los GIFs recortdos sobre el fondo.
Un recurso más sencillo, es armar el fondo sobre un color igual al del fondo de la publicación. En este ejemplo usaremos el blanco como color de fondo: el mismo de la hoja donde será colocado.
1
1) Creamos un archivo
nuevo,
2) En la paleta de cpas
creamos una nueva.
3) Con la capa nueva
activa (seleccionada....
2
3
2
2
1) Elegimos la
herramienta de
selección irregular.
2) Con el botón del
mouse presionado,
dibujamos un
controno irregular un
poco adentro de los
límites del gráfico.
Cuidamos de cerrarlo
bien.
Cuando terminamos
soltamos el mouse.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
48
3
1
1) Elegimos la
herramienta de relleno.
2) Elegimos una textura
clara.
3) Rellenamos la zona
seleccionada.
2
3
4
1
Para crear la
sombra
1) Filtros
2) Luces y sombras
3) Sombra arrojada
2
3
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
49
5
Pantalla de
configuración de
la sombra
1
2
3
1) Valores del
desplazamiento de la
sombra. Para este caso,
valores entre 4 y 12 px.
2) Color de la sombra
(normalmente negro)
3) Transparencia (se
puede ajsutar luego en
la capa).
6
El fondo con
sombra
La sombra despega al
fondo del... fondo.
7
Se puede modificar la
intensidad de la sombra
vairando la transparencia
de la capa que la contiene.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
50
8
1
Otra forma de
“aplanar” la
imagen
1) Menú Imagen
2) Combinar las capas
visibles.
2
9
En esta pantalla no es
necesario tocar nada.
El fondo
terminado
Se integra perfectamente al
fondo blanco de la páginaq.
En la miniatura (abajo) se
observan los límites reales
del gráfico.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
51
Fondos más elaborados
La elaboración de fondos más complejos, abstractos o simulando escenarios realistas o semirealsitas depende principalmente de dos factores:
„
El dominio de programas gráficos. Para encarar fondos
más complejos es necesario utilizar muy bien no sólo un programa editor de gráficos basados en píxels, sino también algún programa de dibujo vectorial.
„
La creatividad del o los autores. Creatividad necesaria para
imaginar el escenario y adecuarlo a las condicioens técnicas
del programa en el que se armará el objeto.
El Atlas del pequeño
aventurero. Un modelo de
interfaz complejo.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
52
Las capas. Auxiliares indispensables
Para crear escenarios complejos es muy conveniente construir todos los
elementos en un solo gráfico, ordenándolo por capas. De esa manera es más
sencillo mantener las relaciones entre las partes, establecer los tamaños con
exactitud y asegurarse la integración entre los diversos elementos de la interfaz. En muchos casos es necesario dibujar previamente el esquema de distriLos gráficos del
proyecto de la
Unidad 3
El conjunto delos gráficos
de la Unidad 3 fueron
realizados en Photoshop
(v6.0) y el archivo contiene
35 capas con los
diferentes elementos.
bución en un programa de dibujo vectorial, como Corel
Draw, Ilustrator, Inkscape,
Zoner o alguno de los muchos
existentes. Este tipo de programas tiene herramientas de
dibujo de precisión que facilitan mucho la tarea. Posteriormente se exporta el gráqfico
en un formato compatible con
el editor (Photoshop, GIMP o
similar) para completar el diseño de base y agregar el resto de los elementos.
El esquema de esta
interfaz para un CD,
armado en Photoshop,
fue dibujado previamente
en CorelDraw.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Juan Carlos Asinsten
Unidad 4-
53
Elementos sobre fondos
complejos
Colocar títulos, botones iregulares u otros elementos no rectangulares sobre fondos complejos consitutye un problema. Los gráficos basados en pixels
son siempre rectangulares y un gráfico de cualquier naturaleza contenidos en
ellos apareceerá con el fondo original con que fue construido. Veamos.
Supongamos que en la interfaz siguiente queremos agregar botones luminosos circulares.
Botón ampliado e interfaz
completa reducida
El resultado sería más
o menos como en la ilustración, con el fondo blanco del botón impidiendo
que el mismo se integre
adecuadamente.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
54
Solución sencilla
La solución más fácil es utilizar en el gráfico la opción de los formatos GIF
y PNG de transparencia. En ambos formatos es posible establecer un color
como transparente, lo que será reconocido por los navegadores de Internet
en páginas Web, etc.
En GIMP
1
Abrimos el GIF en GIMP.
En la captura el botón está
ampliado para verlo mejor
2
1
Tenemos dos formas de
seleccionar el color que
queremos hacer invisible.
1) Menú Seleccionar
2) Opción: Por color
3) Clic sobre el volor de
fondo del botón
(blanco)...
2
3
Este método no siempre da
buenos resultrados:
2
1
1) Color de fondo
seleccionado, pero...
2) ...también selecciona
parte de la figura, de
color blanco o muy
parecido.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
55
4
1
En este caso es mejor
seleccionar utilizando la
varita mágica.
1) Clic sobre el fondo
blanco.
El fondo queda
seleccionado.
5
Vamos ahora a
agregar un canal alfa,
que GIMP utiliza para
establecer la
transparencia.
1) Menú Capa
2) Opción
Transparencia
3) Añadir Canal Alfa
Esta operación no
produce resultados
visibles.
6
1) Borramos el fondo
seleccionado con la
tecla Del o Supr
2) El fondo queda
transparente. (En la
captura se ve grisado)
3) Guardamos.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
56
7
Los resultados:
1) El botón sin fondo
transparente.
2) El botón con fondo
transparente.
3 El botón con fondo
transparente
seleccionado (La
captura es en
PowerBullet)
En PaintShop Pro 4
El método para establecer transparencia de un color en Paint Shop Pro
4.12 es bastante sencillo.
1
1
2
3
1) Se abre el archivo en
Paint Sho Pro.
En la captura, el botón
muy ampliado.
2) Se establece como
color de fondo (en le
programa) el blanco.
3) Para ello se abre con
doble clic la paleta de
colores.
Y se elige el blanco en
la misma.
4) Con clic sobre la flecha
en L se pasa ese color
al fondo.
1
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
57
2
1) Menú Archivo
2) Preferences
3) File Format Preferences
Con ésto se convoca a la
paleta de preferencias de
cada formato de archivo
que puede gestionar Paint
Sho Pro.
3
1) Pestaña GIF
2) Clic sobre botoón de
radio que fija la
transparencia para el
valor del color de
fondo
3) Aceptar.
En otros programas
Casi todos los programas de gestión de gráficos poseen la opción
de configurar un color como transparente para los gráficos de formato
GIF o PNG. El procedimiento puede variar levemente, pero básicamente es similar a los ya vistos: luego de indicarle al programa el criterio (si se señalará, si se usará un valor o si tomará el valor del color de
fondo), se procede (señalando, si fuera necesario, el color en el gráfico).
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Problemas con la transparencia
Los programas tienen la cpacidad de configurar un solo color como transparente. Aunque el formato PNG recientemente amplió un poco esas capacidades, aparecen problemas cuando hay transiciones suaves de color entre la
figura y el fondo. El caso típico es el de las sombras suaves.
Para Las computadoras, un color es un valor numérico exacto. Una pequeñísima diferencia significa otro color. de manera que en el caso de las sombras
suaves (grises casi blancos hasta grises oscuros) las mismas no son incluidas en
la transparencia, al elegfir el blanco como color para ese fin. Tal como puede
verse en la captura, en l que el título se colocó sobre la fotografía.
Para colocar objetos con bordes suaves sobre fondos complejos hay que
utiloizar otros procedimientos que veremos a continuación.
Captura de fondos
Los objetos sobre fondos complejos deben integrarse a los mismos utilizando las capacidades de los programas gráficos, antes de su montaje en los
proyectos multimedia.
En nuestro conocido proyecto con
Power Bullet, utilizamos un botón de tres
posiciones. El fondo del botón incluye
una parte del fondo del objeto multimedia. Este efecto realista no podría
alcanzarse con transparencias. La sombra
que acompaña a la manija está «pintada»
sobre el mismo fondo, aprovechando las
capacidades de las capas o layers de los
programas gráficos.
En realidad todos los gráficos de ese
proyecto fueron construidos en un gráfico único, cada uno en una capa especial,
Juan Carlos Asinsten
Unidad 4-
58
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
59
como relatamos en la página 52 de este mismo material. En ese caso todos los
gráficos se integran perfectamente sin necesidad de operaciones especiales.
Pero por distintas causas puede suceder que no tengamos todos los gráficos
intregrados en uno solo, en capas. En ese caso hay que recurrir a las capturas
de pantalla.
Las capturas de pantalla son como fotografías digitales de lo que vemos en
el monitor de la computadora. Exactamente iguales.
En un material anexo (05-VE-Capturas_de_pantalla.pdf) nos extendemos bastante en el tema y es necesario leer ese material antes de continuar.
1
Imaginemos que estamos
construyendo un objeto en
Power Bullet, como el
quemostramos en la
captura, y queremos
agregarle un texto que
aparezca cuando pasamos
el mouse sobre la
fotografía.
Necesitaremos una captura
de pantalla de la zona.
Lo primero,entonces, es
tener abierto el programa
con la pantalla a capturar a
la vista.
2
2
1) Abrimos GIMP
3
4
2) Menú Archivo
3) Crear
4) Captura de pantalla
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
1
60
3
1) Aparece la pantalla de
configurar la captura.
2) Indicamos que capture
sólo la ventana del
Power Bullet
3) Confirmamos con el
botón Capturar.
2
3
4
Aparecerá una pantalla que
nos pide que arrstremos la
cruz hasta la ventana a
capturar.
La «sujetamos»
presionando el botón
izquierdo del mouse y la
arrastramos hasta la
ventana de Power Bullet y
allí se suelta el botón del
mouse.
5
En la ventana de gráficos
de GIMP aoarece la
captura de pantalla de la
ventana completa de
PowerBullet.
Observemos que captura
también el puntero del
mouse.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
61
6
Cmo habitualmente no
necesitaremos toda la
ventana (como en este
caso), vamos a recortar el
excedente queno usaremos.
1
1) Tomamos la
herramienta de
recortar.
2) El puntero adquiere la
forma de cruz.
3) Lo colocamos en A.
4) Presionamos el botón
izquierdo del mouse, y
sin soltarlo
arrastaramos en
diagonal hasta B.
6
A
6
2
B
5) Allí soltamos el botón
del mouse.
6) Dejamos en la zona a
conservar elementos de
la interfaz que luego
nos servirán para
registrar perfectamente
el gráfico (guías
visuales).
7
2
1) La zona a eliminar se
oscurecerá (gris
oscuro)
Las líneas de límites se
pueden mover, si fuera
necesario.
2) Hacemos doble clic en
la zona clara (la que
conservamos)
3) Y el gráfico resultante
es la zona
seleccionada.
1
3
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
Vamos a colocar un texto con sombra
Seguiremos los mismos procedimientos que para hacer botones...
62
8
1) Elegimos la
herramienta de texto
2) Seleccionamos una
tipografía pesada (de
bastones gruesos).
3) Establecemos un
tamaño de tipografía
adecuado (se puede
modificar en cualquier
momento)
4) Establecemos el color
deseado. En este caso
elegimos un rojo
brillante.
1
2
3
4
4
9
1) Cuando hacemos clic
sobre la zona de
trabajo...
2) Aparece una ventana
para ingresar el texto.
El texto puede editarse
posteriormente.
1
Ver detalle en página
siguiente
2
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
63
10
1) Detalle de la ventana
de ingresar texto.
2) Lo que se escribe
aparece en tiempo real
en el gráfico.
2
1
11
1
3
2
1) Ajustamos los valores
de tamaño (si fuera
necesario)
2) Centramos el texto
mediante el botón
respectivo.
3) Acomodamos el texto
en su lugar.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
64
12
1
Vamos a crear un bisel,
utilizando el filtro Alien
Skin que indicamos cómo
instalar en el cappitulo
«Engordar GIMP».
1) Menú Filtros
2) Alien Skin
3) Inner Bevel
2
3
13
La pantalla de
configuracipon
del filtro Inner
Bevel de Alien
Skin
2
5
4
1) Elegir Flat
2) Ancho de 2 píxels
3) Dirección de la luz más
o menos como lo
indicado.
4) Ejemplo del resultado
que se obtendrá
5) Final con OK
1
3
14
1
Finalmente, agregaremos
una sombra al texto, para
darle volumen y simular
una separación con el
fondo.
2
3
1) Menú Filtros
2) Luces y sombras
3) Sombra arrojadiza...
(cosas de los
traductores...)
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
65
15
1
2
3
4
5
1
1) Ventana de
configuración de la
sombra.
2) Desplazamiento en
píxels. Valores
adecuados. En este
caso 5 px.
3) Radio de desenfoque.
Valores entre 5 y 8...
Depende del tamaño
del gráfico.
4) Color de la sombra.
Generalmente negro. Si
se desea un efecto más
sutil, puede usarse un
gris mediano.
5) Opacidad. Para una
sombra suave, elegir
entre 50 y 60%
6) OK
16
El resultado en la ventana
de GIMP.
17
El gráfico final grabado.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Engordar GIMP
GIMP es un programa que admite la incorporación de muchos recursos,
también gratuitos, que ofrecen nuevas prestaciones. En el Campus del posgrado ofrecemos algunos que nos han parecido interesantes, y aquí las instrucciones para la instalación de los mismos.
Casi todo lo que hace GIMP se programa a través de lo que llaman complementos. GIMP trae muchos (muchos!!!) en el programa instalador. Pero permanentemente se producen nuevos y esos hay que agregarlos «a mano», en las
carpetas que arma el programa cuando lo instalamos en nuestra computadora.
Las carpetas son muchas, pero no es muy difícil encontrar aquellas en las
que debemos copiar los script o plugins que queremos agregar. éstos tienen
extensiones de archivo que nos permiten, utilizando el buscador del Explorador de Windows, encontrar la carpeta donde se guardan.
Veamos un ejemplo enla página siguiente: los scripts tienen la extensión
scm. Buscaremos en qué carpeta están guardados.
¿Vale la pena?
Creemos que el poco tiempo que necesitamos para instalar nuevo
scripts se compensa generosamente con las prestaciones que podemos agregar.
Dicen que «para muestra basta un botón». El boton estilo agua que
tutoriamos antes, es una buena muestra de lo que podemos obtener
agregando plugins y scripts a GIMP.
Juan Carlos Asinsten
Unidad 4-
66
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
67
1
Con el Explorador de
Windows abierto,
buscamos la carpeta
principal del programa
instalado.
Las capturas son de la
versión XP de windows.
2
Clic sobre el botón
Búsqueda del explorador
3
1) Aparecerá la pantalla
de configuración de la
búsqueda.
2) Elegimos la opción
Todos los archivos y
carpetas.
3) Aparecerá la pantalla
con los criterios de
búsqueda.
4) Escribimos la extensión
del tipo de archivo que
buscamos (en este
caso scm) precedido
por un asterisco y un
punto. Esto le indica al
buscador que
buscamos cualquier
archivo de esa
extensión.
5) Clic en Búsqueda.
4
En segundos aparecerá la
lista de archivos con e sa
extensión y el nombre de la
carpeta en que se
encuentran.
(Ver la página siguiente)
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
68
Carpetas de GIMP
1
1) Carpeta principal del
programa.
2) Carpeta a la que hay
que copiar los plugins
(extensión exe)
3) Carpeta a la que hay
que copiar los scripts
(extensión scm)
4) Otras carpetas donde
se guardan patterns,
brushes (pinceles) etc.
5) Carpeta Share,
2
5
4
3
Instalación de plugins y scripts
En el campus, en la clase Ayuda (2), encontraremos un archivo zipeado
conteniendo varios plugins. Hay que descomprimirlos en cualquier lado (el
Escritorio, por ejemplo) y copiarlos según las siguientes instrucciones:
Contenido de la
colección de
scripts y plugins
3
2
locale
1
La carpeta “locale” es necesaria para que funcione el filtro “noise
generator”, que es un generador de “ruido” gráfico.
1) Los dos archivos con
extensión exe deben
copiarse a la carpeta
plug-ins (ver detalle 2,
arriba).
2) Los cuatro archivos con
extensión scm deben
copiarse a la carpeta
scripts (ver detalle 3,
arriba).
3) La carpeta locale tiene
dos carpetas adentro.
Debe copiarse dentro
de la carpeta share de
GIMP (ver detalle 5,
arriba). Aceptar que
sobreescriba lo que sea
necesario.
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
69
Filtros “artísticos”
En el campus hemos colocado una colección de filtros llamada Virtual
Painter que contiene filtros que convierten a fotografías en trabajos artísticos.
Este es un ejemplo.
Dentro de esa colección
también está el filtro de
biseles Alien Skin. El filtro
se llama Inner Bevel 2.0
Los filtros están comprimidos con WinZip. Para instalarlos hay que crear
una carpeta dentro de la carpeta GIMP-2.0 llamada Filtros PS (o algo
así) y descomprimirlos dentro de esa carpeta.
1
1
Una vez copiados los
filtros a la carpeta, y si
previamente hemos
instalado los plugins
indicados en la página
anterior (especialmente
pspi.exe)...
2
1) Menú Filtros
2) Opción Photoshop
Plug-in Settings.
2
2
2
1
Aparecerá la pantalla de
configuración.
Lo único que tenemos que
hacer es indicarle a GIMP
dónde está la carpeta con
los filtros.
1) Podemos escribir
directamente la ruta
completa.
2) Podemos buscar.
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Los layers o capas
En el principio de los tiempos, casi en la época de las cavernas, en tiempos
del legendario Photoshop 2.0 no existían las capas. Las cosas que hacemos
hoy con ellas se podían hacer, pero de manera mucho más difícil y laboriosa.
Había que ir haciendo copias de los archivos ante cada modificación importante, de manera de poder volver atrás y retomar el trabajo ante un resultado
no deseado.
Las capas vinieron a facilitar todo eso y hoy podemos hacer en minutos lo
que antes llevaba horas de trabajo.
¿Qué son las capas?
Imaginemos que tenemos un gráfico culaquiera. Una fotografía, por ejemplo. Y necesitamos colocar sobre ella varios objetos, pero no estamos seguros
de la posición que ocupará cada uno. La alternativa de ir haciendo pruebas
sobre diferentes copias puede llevarnos mucho tiempo. Pero con las capas eso
será cuestiónde minutos.
En un programa que utilice este recurso, tendremos la fotografía en la base
o capa inferior (background). Si sobre esa capa de base colocáramos hojas de
acetato o celuloide, transparentes, visto de arriba la foto no sufriría cambio
alguno. Ahora, si en cada hoja de acetato colocamos uno de los objetos necesarios, podemos moverlos, cambiarlos de tamaño oculatrarlos y mostrarlos
según vayamos componiendo el resultado final. Desde arriba veremos, en cada
momento, la foto de fondo con los objetos en su lugar. Cuando tenemos el
resultado deseado, aplanamos todo, uniendo todas las capas, y obtendremos
el rsultado buscado.
Juan Carlos Asinsten
Unidad 4-
70
Juan Carlos Asinsten
Especialización en Entornos Virtuales de Aprendizaje
05 - La producción de material didáctico ((2
2)
Unidad 4-
8
4
7
7
3
8
8
2
7
71
Esquema de los
layers o capas
5) Background o capa
base.
1) Capa 1
2) Capa 2
3) Capa 3
4) Capa 4
6) Gráfico de fondo
7) Zona transparente
8) Gráficos u objetos en
las capas.
9) Imagen compuesta
(todo sumado)
1
6
9
5
12
4
5
3
2
1
6
7
8
9
10
11
La paleta de capas
de GIMP
1) Fondo o Background
2) Cinco cpas con su
nombre y miniatura del
contenido.
3) Se activa o desactiva la
visibilidad de la capa.
4) Indica el modo de
fundido, al achatar o
fusionar todo.
5) Configura la
transparencia de cada
capa
6) Crear capa nueva
7) Desplazar la capa un
lugar ahacia arriba
8) Des´plazar la capa un
lugar hacia abajo
9) Copiar la capa
10) Bloquear la capa
11) Borrar la capa
12) Menú con más
opciones