Gráficos en Clic - Colección educ.ar

Actividades
con Clic
Gráficos
en Clic
Gabriela y Juan Carlos Asinsten
2
Actividades con Clic
Gráficos en Clic
Gráficos en la PC
Nuestros límites...................................................... 4
Gráficos digitales.......................................................4
Los principales formatos gráficos genéricos........... 5
Gráficos comerciales y científicos .......................... 5
Gráficos fractales .................................................. 5
Gráficos vectoriales .............................................. 6
Gráficos bitmap .................................................... 7
Vectores y píxeles ................................................. 8
Formatos de archivos gráficos .............................. 8
Radiografía de los gráficos bitmap ....................... 12
Cómo vemos los gráficos en el monitor .............. 12
Los gráficos también están «hechos» de píxeles .. 13
Cómo establecer el tamaño de un gráfico ........... 14
Las medidas en píxeles en Clic ........................... 15
El píxel como unidad de medida ......................... 15
Obtener y domesticar gráficos ............................ 16
De colores ......................................................... 17
Gráficos para Clic: «cómo se hace»
Usar lo que hay .................................................. 18
Adaptar los gráficos que hemos conseguido ........ 20
Modificar un gráfico existente en GIMP ................ 21
Modificar un gráfico existente, en PSP................. 26
Sin miedo... ......................................................... 26
Convertir gráficos (cambiar el formato o tipo) ..... 29
3
Conversión de formatos en PaintShopPro 4.12... 31
Cambiar la profundidad de color de un
gráfico, con GIMP ............................................... 32
Modos y profundidad de color en GIMP ............. 32
Cantidad de colores en PSP 4.12 ........................ 34
Escanear imágenes .............................................. 34
La grillas, que no son las esposas de los grillos .... 35
Grillas con NeoPaint ........................................... 36
Usar las grillas prediseñadas ................................ 39
Con «capas» es todo más fácil ............................ 45
La misma «filosofía», diversas representaciones ... 46
El «mejor» programa .......................................... 46
Usar las grillas con GIMP .................................... 47
Completar la grilla .............................................. 54
Reciclar .............................................................. 55
Finalmente... ....................................................... 57
Browsers ............................................................ 58
En Windows XP ................................................. 59
Colorín, colorado... ............................................ 60
Derechos de autor ............................................. 61
4
Actividades con Clic
Gráficos en la PC
A poco de andar por esos caminos de Clic, descubriremos
que la producción de gráficos es el «costado difícil» en la
construcción de actividades.
En este material veremos algunas cuestiones básicas para
manejarnos en el mundo de los gráficos digitales (de computadora...).
Nuestros límites
Un abordaje completo del tema excede totalmente las dimensiones de este material. Enfrentados
a la cruel alternativa de obviar el tema (bajo el supuesto -falso- de que el docente sabe lo que hay que
saber en materia de gráficos) y la imposibilidad de abarcar todo lo necesario, elegimos un camino
intermedio: en estas páginas desarrollaremos algunas nociones básicas sobre la naturaleza de los gráficos en computadora, y trataremos de responder acerca de cómo se hacen las operaciones principales que necesitaremos realizar.
Quienes tengan conocimientos previos sobre gráficos podrán encontrar respuestas concretas a
los interrogantes más usuales. Quienes no tengan esos conocimientos previos se encontrarán, seguramente, con mayores dificultades.
Para unos y otros hemos incluido en el CD un material multimedia bastante completo sobre la naturaleza de los gráficos (imágenes) en la computadora: se llama El
famoso píxel, y se encuentra en la sección Caja de herramientas. Allí encontraremos
información bastante detallada sobre el tema que nos ocupa, la cual se reitera en
forma muy abreviada en este material. Asimismo en los documentos
obtener_y_domesticar.pdf y comunicacion_visual.pdf se puede ampliar
considerablemente sobre el particular.
Lamentablemente, la tecnología no ha logrado hacer transparente al usuario la manipulación de
gráficos en computadoras. Hay que adquirir (paulatinamente) conocimientos sobre temas relativamente complejos, como profundidad de color, resolución, formatos de archivo, y varios etcéteras.
Gráficos digitales
Una fotografía, un dibujo, un gráfico de evolución de ventas, un plano topográfico en 3D, un impresionante fractal... Todos estos gráficos, tan diferentes en cuanto a la información que contienen y a su
aspecto visual, tienen algo en común: si los estamos viendo en el monitor, o los imprimimos desde la
computadora, son gráficos en los cuales toda la información está codificada en unos y ceros, en bits.
Son gráficos digitales.
5
Los principales formatos gráficos genéricos
Los gráficos se diferencian entre sí por el modo (informático) en que codifican la información.
Aunque todos se basan, en última instancia, en unos y ceros (información digitalizada), son representación visual de diferentes tipos de información matemática, la que, a su vez, intenta reproducir diversos aspectos de la realidad.
La clasificación que ofrecemos de formatos genéricos tiene que ver con la funcionalidad de los
gráficos, más que con características intrínsecas, las que son invisibles para el usuario común. Así,
entre los formatos genéricos de gráficos podemos reconocer:
„ Gráficos comerciales y científicos
„ Gráficos fractales
„ Gráficos vectoriales
„ Gráficos bitmap
Gráficos comerciales y científicos
Los gráficos comerciales son representaciones visuales de procesos comerciales y evolución de variables de negocios. Representan
el resultado de ecuaciones que describen el movimiento de diferentes aspectos de la vida económica. Los gráficos estadísticos son de este tipo.
Los gráficos científicos son representaciones visuales de
procesos naturales, de lo medido por diferentes instrumentos de experimentación o control, del relevamiento de fenómenos del más variado tipo.
La estructura interna de ambos tipos de gráficos suele ser
de naturaleza vectorial.
Gráficos fractales
Observemos la hoja de la ilustración. Es diferente de todas las otras hojas del mismo árbol, y sin
embargo, es muy parecida a cada una de ellas.
Única, pero indudablemente «de la familia». A la
vez, sus nervaduras se ramifican una y otra vez,
siguiendo un patrón muy definido que se reitera.
Los científicos que estudian
estos fenómenos creen que
existen complejos algoritmos
matemáticos, grabados genéticamente, que explican estas regularidades, dentro de la variedad.
En los 70, el matemático
Mandelbrot descubrió que en la
naturaleza hay patrones que se
repiten "recursivamente": por
ejemplo, las ramas de un árbol,
que reproducen la estructura completa de la planta, en tamaños cada vez menores.
La modelación matemática de estos fenómenos se llama matemática fractal.
6
Existen programas de computadora que, basándose en esas matemáticas, crean hermosos
dibujos. Los diferentes tipos de fractales reciben
el nombre de los científicos que desarrollaron las
ecuaciones. Así tenemos fractales Mandelbrot,
Julia y otros.
Desde el punto de vista del diseño, los fractales
se usan para generar texturas. Este diseño se realiza de manera transparente para el usuario, es
decir, sin necesidad de que conozca o domine las
complejas ecuaciones que están detrás de las
hermosas formas de los gráficos fractales.
En El famoso píxel hay un programa de construcción de fractales. También puede ejecutarse
en forma independiente (fractal.exe).
Gráficos vectoriales
Los vectores son curvas definidas matemáticamente. Existen diversos tipos de vectores. En las
computadoras las curvas más utilizadas son las que responden a la ecuación de Bezier. Este matemático descubrió que cualquier curva en el plano podía ser descrita mediante cuatro puntos, relacionados mediante la ecuación que lleva su nombre.
Dos de los puntos se encuentran en los extremos de la curva. Los otros dos, llamados puntos de
control, están habitualmente en el exterior, pero pueden estar sobre la misma curva.
Los diseñadores de programas de dibujo vectorial dibujan una línea que une los dos puntos de
control a los puntos de la curva. El usuario puede arrastrar los puntos de control, modificando la curva
en tiempo real, como si se tratara de un alambre elástico.
1
1
2
3
2
1) Puntos base
2) Puntos de control
3) en los programas
adecuados (por ejemplo,
CorelDraw), arrastrando
los puntos de control con
el cursor, se modifica la
curva.
Ver animación en El
famoso píxel.
Las curvas vectoriales admiten atributos tales como ancho y color de la línea. Si las curvas forman
figuras cerradas, se agregan además los atributos del relleno: color, gráficos fractales
o bitmap, etc.
Las curvas y las figuras cerradas son, informáticamente, objetos. Esto significa que cada uno de los elementos tiene atributos propios, que pueden ser
editados y modificados en cualquier momento. También es posible modificar
la posición relativa entre las figuras. Pueden pasar de estar cubiertas por otra
a superponerla.
Como los objetos vectoriales están definidos por una descripción
matemática, en el momento de imprimir esa descripción es enviada al
driver de la impresora. El driver es un intérprete que transforma esa
descripción en instrucciones a la impresora para que la imagen resul-
7
tante sea de la máxima calidad que puede brindar el equipo. La impresión resultante es independiente del tamaño del gráfico en la computadora.
Las tipografías que se utilizan en las computadoras en entornos gráficos (Windows, OS2, System7, etc.) son objetos vectoriales, definidos
por una cantidad de curvas que forman cada letra.También los dibujos
de Word.
VENTAJAS Y DESVENTAJAS DE LOS GRÁFICOS
VECTORIALES
Como dijimos, los gráficos vectoriales imprimen con la máxima calidad del dispositivo de salida, independientemente del tamaño original del
gráfico. Son excelentes, por lo tanto, para imprimir dibujos de líneas muy
definidas, tipografías y elementos con bordes nítidos y limpios.
Esa misma cualidad los hace poco hábiles para representar transiciones suaves de color o tonalidad. Sus bordes son artificiales y los dibujos producidos con este tipo de gráficos tiene la marca en el
orillo: «de computadora».
Los gráficos vectoriales tienen, en general, una dimensión pequeña (en disco y/o memoria). Se
utilizan en multimedia para textos y elementos en los que se requieren líneas definidas.
Claro que todo esto está relatado sólo a los efectos de ilustrar, ya que Clic no
admite gráficos vectoriales. Si nos encontramos con alguno que nos gusta, deberemos convertirlo en bitmap.
Gráficos bitmap
Los gráficos bitmap están constituidos por una grilla rectangular de puntos de diferente brillo o
color. Cada uno de esos puntos se llama píxel. El píxel es la menor unidad de información de los
gráficos de este tipo.
Las formas y figuras se forman cuando el ojo mezcla e interpreta las luces y sombras, los tonos y colores. Los gráficos basados en
píxeles, a diferencia de los vectoriales, no reconocen formas y figuras. Sólo, como dijimos, puntos de diferente valor cromático. Ello
significa que no es posible editar y modificar independientemente
los elementos de un gráfico bitmap. Por ejemplo, el césped detrás
8
de la familia no puede ser rescatado. No existe más.
Sobre este tipo de gráficos nos extendemos abundantemente en un próximo apartado.
VENTAJAS Y DESVENTAJAS DE LOS GRÁFICOS
BASADOS EN PÍXELES
Este tipo de gráficos no es muy bueno para reproducir
tipografías pequeñas o líneas muy definidas. Para esos usos
requiere resoluciones altas, y por lo tanto los gráficos ocupan mucho espacio en disco o memoria. Los gráficos dependen de su tamaño (que es fijo, una vez terminados) para la
impresión.
Son excelentes para reproducir tonos con suaves transiciones. Por ello son el soporte de las fotografías, y toda imagen que presente variaciones sutiles de tonos o color.
Vectores y píxeles
Ni los gráficos vectoriales son mejores que los basados en píxeles, ni lo contrario. Cada uno de ellos
tiene usos para los que es mejor que el otro y la decisión de utilizar uno u otro debe basarse en sus
características.
Se pueden utilizar combinados, tomando lo mejor de cada uno. De hecho, muchos programas de
ilustración permiten integrar ambos tipos (como CorelDraw). Por otra parte, el desarrollo tecnológico está acercando los formatos: con gráficos vectoriales se pueden simular transiciones suaves, mientras que los gráficos pixelados permiten trabajar cada elemento por separado (con la tecnología de
capas), como si se tratara de objetos.
No olvidar que en el caso particular que nos ocupa, que son los gráficos para Clic, no tenemos
opción: los gráficos deben ser del tipo basados en píxeles.
Formatos de archivos gráficos
Dentro de cada uno de los formatos genéricos nos encontramos con una variedad de subformatos
que corresponden a tres realidades diferentes:
a) Diferencias tecnológicas reales, que tienen que ver con el modo en que se organiza la
información del gráfico, que no es igual para todas las variantes de los gráficos genéricos.
b) Formatos propietarios. Muchos desarrolladores de programas crean variantes muy especiales de formatos gráficos, que aprovechan las ventajas de ese programa, pero que
sólo pueden ser editadas y leídas por el mismo. Se llaman formatos propietarios y se
utilizan para crear los gráficos que, una vez terminados, deben ser grabados en algún
otro formato que sea soportado por la aplicación de destino final. Por ejemplo CDR, de
CorelDraw, el DOC de Word, el PSP de PaintShopPro.
c) Problemas de copyright. Muchas empresas desarrollan variantes casi idénticas a otras
existentes, para no tener que pagar derechos por el uso de aquellas.
Debido a esto, en la actualidad existe más de un centenar de formatos gráficos, muchos de ellos
idénticos entre sí.
Nombre: hasta ocho letras en
sistema DOS (¡¡y en Clic!!).
Hasta 256 letras y espacios en
Windows 95 y posteriores.
Punto. Separa el
nombre de la
extensión.
Extensión de tres letras.
Los programas la
utilizan para reconocer
el tipo de archivo.
9
Los formatos gráficos los reconocemos por la extensión del nombre de archivo. La extensión
son las tres letras (en ambiente PC) que van después del punto que las separa del nombre.
La extensión la utilizan los programas para reconocer el formato de los archivos y saber qué
deben o pueden hacer con ellos. Muchos programas muestran en la ventana de Abrir sólo aquellos
archivos que son capaces de abrir y editar. Los usuarios podemos reconocer muchos tipos de archivos por la extensión.
CDR
formato vectorial propietario, de CorelDraw.
TIF
formato de gráficos pixelados que acepta modo CYMK y canales
alpha.
TXT
Formato de texto puro. ASCII puro.
DOC
Formato de documento de texto. Lo utilizan varios programas. Es la
extensión que usa Word para sus documentos.
HTM
Formato de documento de la Web (Internet).
AVI
Formato de video digital de Windows.
WAV
Formato de sonido digital (de onda)
PARA VER LAS EXTENSIONES DE LOS ARCHIVOS
Cuando se instalan las versiones de Windows 95 o posteriores, la configuración normal establece
que las extensiones no se muestren. Esta configuración responde a una filosofía que con la intención de hacer más fácil el manejo de las computadoras muchas veces termina complicándoles la vida a
los usuarios. Como en este caso.
Los pasos para recuperar las
1
extensiones y poder verlas en
En el Explorador de
las ventanas de manejo de arWindows, o en cualquier
chivos (carpetas o el Exploraventana de carpeta, podemos
ver que los nombres de
dor) son pocos y sencillos:
archivo no incluyen la
extensión.
2
1
Para corregir esto:
1) Vamos al menú Ver y
2) elegimos la opción
Opciones...
Puede ser Opciones de
carpeta...
2
10
1
3
Aparecerá la ventana
Opciones.
1) Elegimos la oreja Ver.
4
1
En la pantalla buscamos la
referencia a las extensiones:
1) Destildamos la opción de
ocultar extensiones.
Las pantallas varían
levemente según la versión de
Windows.
5
Podemos observar cómo
aparecen las extensiones en
todos los archivos.
Las capturas han sido realizadas en Windows 95. Las diferencias en Windows 98 y XP son muy
pequeñas y los pasos a seguir son los mismos.
Quienes diseñamos documentos multimedia y/o trabajamos mucho con gráficos necesitamos ver
qué tipo de gráfico es el que contiene cada archivo. Los íconos de los mismos no son suficientes, ya
que Windows utiliza el mismo ícono para todos los formatos vinculados a cada programa.
De paso, esto nos servirá para no dejarnos engañar por los «gusanos» (virus) de internet que
vienen como archivos adosados, disfrazados detrás de una doble extensión: archivo.gif.exe
11
FORMATOS GRÁFICOS
A la hora de seleccionar el formato en que se grabará un archivo, conviene conocer algunas de sus características, para elegir aquel que mejor resulte para los objetivos del trabajo.
El usuario puede reconocer los diversos formatos por las extensiones (después del
punto, en el nombre del archivo). A continuación listamos algunas entre las más populares,
ordenadas según la extensión mencionada.
FORMATOS VECTORIALES
CDR formato de los archivos producidos por CorelDRAW!
EPS Potscript Encapsulado. Facilita el intercambio entre programas vectoriales y programas de armado de páginas o editores de imágenes bitmap. Uno de los formatos
preferidos para intercambio de información gráfica entre PC y Mac. No lo imprimen
impresoras no postcript.
WMF Windows MetaFile. Formato de prestaciones similares al EPS, aunque es reconocido sólo en ambiente Windows. El gráfico bitmap de visualización tiene mucha precisión (mejor que el EPS), por lo que es útil cuando debe colocarse ajustadamente en
una página. Los dibujos de Word son de este formato.
FORMATOS BITMAP
GIF
Formato indexado (hasta 256 colores) y comprimido sin pérdida de información.
Destinado a gráficos que circulan por medios electrónicos (internet). Uno de los
formatos usados en las páginas web. La versión 89a admite transparencias. También
es posible producir con ellos animaciones sencillas. Su algoritmo de compresión es
muy poderoso, por lo que produce gráficos muy pequeños (ocupan poco espacio).
BMP Formato no comprimido, optimizado para su rápido despliegue en pantalla. Su rapidez de carga lo hace indicado para aplicaciones multimedia. Puede ser de 256 o 16
millones de colores (8 o 24 bits). Produce gráficos «gordos», que ocupan mucho
espacio.
PCX Uno de los formatos pioneros. No posee características destacables. No comprimido.
TIF Admite diversas variantes, no sólo en cantidad de colores sino que soporta el modo
CYMK, utilizado en la separación de colores de imágenes destinadas a las artes gráficas. Es el estándar en el diseño gráfico profesional. Admite canales alpha.
JPG Formato comprimido con pérdida de calidad (controlable por el usuario). Admite
modos de 8 bits (indexado, de 256 colores) y 24 bits (hasta 16 millones de colores).
Sus algoritmos de compresión permiten obtener archivos de muy pequeño tamaño,
por lo que es uno de los dos formatos más utilizados en la Web.
Por el tipo de compresión que utiliza, no es conveniente para gráficos con líneas
definidas o tipografías, que se degradan considerablemente. Ideal para fotografías a
todo color.
PNG La intención de los propietarios del algoritmo de compresión del GIF de cobrar
derechos por el uso del mismo impulsó la aparición de este nuevo formato optimizado para internet. Al desistir el propietario de cobrar esos derechos, casi no se usa.
Sigue vigente el GIF.
12
Radiografía de los gráficos bitmap
La manipulación de gráficos en o para la computadora es una cuestión que la industria no ha
logrado hacer transparente para el usuario. Las decisiones que hay que tomar, ya sea durante la
captura de los gráficos, como en otras etapas de su modificación o corrección, requieren del usuario
conocimientos específicos sobre temas no siempre sencillos.
La particularidad que tiene la edición de gráficos para Clic es que los mismos están destinados a
ser vistos mediante la pantalla del monitor. Esto acota considerablemente el campo a estudiar.
Cómo vemos los gráficos en el monitor
Las imágenes en los monitores están formadas por una serie de pequeños puntitos llamados
píxeles.
La cantidad de píxeles y la cantidad de colores que pueden mostrar dependen de la construcción
física del monitor, de la placa de video que tenga colocada la computadora y de la configuración que se
establezca para ella. La cantidad máxima de píxeles y colores depende, en definitiva, de la memoria de
video de esa placa.
Las resoluciones de los monitores (cantidad de píxeles) más habituales, en las computadoras actuales, con monitores de 14 o 15 pulgadas, son:
„ 640 x 480,
„ 800 x 600 y
„ 1024 x 768.
En estos números la primera cifra indica la cantidad horizontal de píxeles, y la segunda la vertical.
Así, 640x480 significa un monitor que muestra 640 píxeles horizontales por 480 verticales.
Para una misma medida de monitor, mientras mayor sea la resolución (cantidad de píxeles), más
pequeños serán los mismos, y, en consecuencia, más detalles podrán mostrar los gráficos, o se obtendrá mayor suavidad en curvas y diagonales, disminuyendo el «efecto serrucho».
Según la cantidad de memoria disponible y la configuración efectuada, los monitores mostrarán 16,
256 o 16 millones de colores. Entre 256 y 16 millones, puede haber configuraciones intermedias, que
muestren 32.000 o 64.000, mientras que las placas actuales permiten mostrar más de 16 millones.
Para nosotros las cifras importantes son: 256 y 16 millones. Los dos valores comunes, que, además,
coinciden con la cantidad de colores típica de los gráficos.
Resumiendo: a partir de ahora, nuestras unidades de medida no serán los centímetros o milímetros, sino los píxeles. Un gráfico de 320x200 ocupará exactamente la cuarta parte de la superficie de
la pantalla de un monitor de 640x480. ¡Los gráficos bitmap también se miden en
píxeles!
Trataremos de desmenuzar
todo este embrollo, para obtener, sobre todo, recomendaciones prácticas para nuestro trabajo.
13
Los gráficos también están «hechos» de píxeles
Como se puede apreciar en la
fotografía y los detalles, estas
apetitosas frutas están
«dibujadas» por pequeños
cuadraditos de color, que en
conjunto, nuestros ojos
perciben como formas. Cada
uno de estos puntos, como en
el monitor, se llama píxel.
1
Detalle (1)
2
Detalle (2)
Según nos informa la paleta
respectiva de Photoshop, este
gráfico tiene 1536 x1024
píxeles, es decir, más de un
millón y medio de pequeños
puntitos de color.
14
Ahora bien: ¿qué ocurriría si colocamos esta fotografía, así como está, en una página web o en un
producto multimedia?
Como la mayor parte de los monitores utilizan una resolución de 640x480 u 800x600, los usuarios no verían más que una pequeña porción de la fotografía, ya que los píxeles sobrantes no entrarían
en la pantalla.
Dicho de otra manera: en multimedia o internet, cada píxel del monitor muestra un píxel del
gráfico. Un monitor de 800x600 puede mostrar, completos, sólo gráficos de esas dimensiones, o
menores.
Si es tan importante el tamaño en píxeles de los gráficos, deberemos ver cómo establecemos
eso, y/o nos enteramos de las medidas de un gráfico.
Cómo establecer el tamaño de un gráfico
Hay varias formas de hacerlo, según la manera en que obtengamos el gráfico:
a) Creando un gráfico nuevo, en blanco.
b) Digitalizando (escaneando) un gráfico.
c) Modificando el tamaño de un gráfico existente.
UN GRÁFICO NUEVO
Cuando elegimos el menú Archivo/Nuevo (File/new) en un programa graficador, casi siempre
aparecerá una pantalla de configuración del nuevo archivo gráfico, en la que podemos establecer el
tamaño del mismo, utilizando diversas escalas (pulgadas, centímetros y píxeles), tal como muestra la
ventana de Paint Shop Pro.
1
2
3
4
5
Esta es la pantalla de «archivo
nuevo» en PaintShopPro 4.12.
1) Width (ancho) del archivo
en píxeles.
2) Height (alto) del archivo
en píxeles.
3) Color de fondo que
tendrá el nuevo archivo
(la lista desplegable
ofrece varias
posibilidades).
4) Cantidad de colores
(profundidad de color)
del archivo.
5) Tamaño (peso) del
archivo.
Las pantallas de los graficadores pueden variar respecto al ejemplo que mostramos. Algunas tienen una casilla para cambiar la unidad de medida del gráfico (en esta la medida es en píxeles) y, en ese
caso, suelen agregar una casilla para establecer la resolución del gráfico (cantidad de píxeles por pulgada o centímetro).
ESCANEAR UNA IMAGEN
El escaneado de imágenes lo podemos ver en detalle en Obtener y domesticar gráficos que encontraremos en el CD, en Materiales ampliatorios.
MODIFICAR UN GRÁFICO EXISTENTE
En muchas ocasiones los gráficos que utilizaremos en nuestras producciones multimedia o páginas
de internet los obtendremos de bancos de imágenes en CD, o de nuestros archivos. En ese caso no
tendremos más remedio que adecuar el tamaño en píxeles a nuestras necesidades.
Los programas graficadores tienen pantallas especiales para esta acción, llamadas Resize, o Image
Size (no confundir con canvas size) en las que se puede ajustar el tamaño en píxeles del gráfico.
15
EL PíXEL COMO UNIDAD DE MEDIDA
Podemos imaginarnos un gráfico pixelado como una grilla formada por pequeños mosaicos de
colores. La cantidad de esos pequeños mosaicos debería convertirse en una nueva unidad de medida,
que usaremos mientras trabajemos con imágenes destinadas a verse en el monitor.
Así, los gráficos tendrán n píxeles de ancho y n de alto. No más centímetros, milímetros, pulgadas,
yardas, millas náuticas o años luz.
El rectángulo mide 11 píxeles
de ancho por 8 de ancho.
No importa en qué monitor lo
veamos. No importa qué
resolución esté configurada
para el monitor. El gráfico
ocupará 11 píxeles de ancho y
8 de alto.
Las medidas en píxeles en Clic
Aunque no siempre lo aclara, las medidas de casillas y pantallas en Clic se establecen en píxeles. He
aquí una guía con los valores recomendados por un material elaborado por el propio autor de Clic,
Francesc Busquets Burgera.
El tema de los valores máximos que pueden tener los gráficos o las ventanas en Clic está ligado a
la resolución configurada para el monitor en que se mostrarán. Como hemos visto, las resoluciones
más comunes para monitores son:
„ 640 x 480 píxeles
„ 800 x 600 píxeles
„ 1024 x 768 píxeles
Aunque la resolución más frecuente es hoy 800 x 600, en las escuelas hay todavía muchas máquinas que sólo alcanzan los 640 x 480. Nuestra recomendación es tomar como valores máximos los
que corresponden a esa resolución de monitor, para asegurarnos que las actividades se vean correctamente en cualquier computadora.
BOTONES A LA
IZQUIERDA
Pantalla Pantalla
640x480 800x600
C
B
A
320
440
B
540
700
C
260
340
A
NO SOBREPASAR
16
BOTONES ARRIBA
Pantalla Pantalla
640x480 800x600
C
A
280
500
B
610
770
C
300
380
B
NO SOBREPASAR
A
UN SOLO BOTÓN A
LA IZQUIERDA
(O SIN BOTONES)
Pantalla Pantalla
640x480 800x600
C
B
A
320
440
B
610
770
C
300
380
A
NO SOBREPASAR
La ventana de mensajes mide 40 píxeles de alto
Obtener y domesticar gráficos
En el documento Obtener y domesticar gráficos encontraremos toda la información sobre
la obtención de gráficos y su modificación para adecuarlos a las necesidades de cada proyecto en
particular. El contenido de estas páginas ha sido extractado de ese trabajo.
17
De colores
El tema del color podemos revisarlo detalladamente en la
multimedia El famoso píxel
píxel.
Puntualizaremos que los gráficos para Clic no están destinados al papel sino a la pantalla. El sistema
de colores para estos gráficos es el de «colores luz», sistema aditivo, o también conocido como
colores RGB.
Este sistema es el que utilizan los monitores de computación y también los televisores.
1
4
En el sistema RGB los colores
primarios son:
1) Rojo (Red)
2) Verde (Green)
3) Azul (Blue)
Los colores secundarios, que
surgen de la mezcla de dos
primarios, son:
4) Amarillo
5) Magenta
6) Cian (cyan)
7) La suma de los tres
colores primarios da
blanco.
2
7
5
7
3
Cualquier color, entre 16
millones (y pico) posibles, se
consigue mediante la
combinatoria de cantidades
de rojo, verde y azul.
Los valores para cada uno
varían entre 0 y 255.
Con los tres canales de color
en valor cero, el resultado es
negro.
Con los tres valores en 255, el
color resultante es blanco.
Cuando los tres valores son
iguales, el resultado es gris,
más claro o más oscuro,
según el valor.
1
3
2
4
5
5
La típica paleta de los
programas de Windows para
establecer o definir colores.
1) Definir el matiz (color).
2) Definir la pureza
(saturación).
3) Definir la claridad,
oscuridad (luminosidad).
4) Color de muestra.
5) Valores numéricos RGB.
Estos números los
utilizamos habitualmente
en los tutoriales, para
comunicar con exactitud
cómo es un color.
Se pueden colocar «a
mano» escribiendo
directamente en las
casillas.
18
Actividades en Clic
Gráficos para Clic:
«cómo se hace»
Este capítulo contiene recetas, explicaciones paso a paso,
consejos y muchas cosas más, ordenados lo mejor que pudimos. Poca teoría y casi toda la atención puesta en cómo
lograr los resultados deseados.
Las actividades de Clic son esencialmente visuales. Por lo que el tema de los gráficos es tan
importante como el manejar con soltura el programa.
Los temas que veremos son:
„ Usar lo que hay. El camino más fácil, recurriendo a gráficos existentes.
„ Adaptar gráficos. Operaciones para adecuar los gráficos que encontremos por allí a nuestras necesidades.
„ Convertir gráficos. Llevar gráficos existentes a los formatos soportados por Clic.
„ Escanear. Digitalizar fotografías o dibujos del docente o de los chicos.
„ Grillas. Una guía bastante completa para lograr gráficos correctamente repartidos sobre el fondo. Es difícil resolver gráficos para Clic sin
tener claro este tema.
„ Uso de administradores de gráficos (browsers).
„ Temas de estética en la producción. Los colores y algunos trucos
para lograr combinaciones atractivas.
„ ...y muchos trucos y truquitos.
Usar lo que hay
Revisando los paquetes que están en el Racó del Clic encontramos que la mayor parte de los
gráficos se repiten, una y otra vez, en actividades realizadas por diferentes autores. Lo que indica, sin
lugar a dudas, una reutilización permanente de esos gráficos. Eso es parte del concepto de compartir,
sustentado por el Racó de Clic: los docentes desarrollan actividades que ponen desinteresadamente
al servicio de otros docentes. Los recursos para realizar esas actividades también son compartidos.
Utilizar «lo que hay» es, entonces, la fuente principal de gráficos para producir actividades. Y el
Racó no es el único lugar donde encontraremos material de uso libre para ello.
19
INTERNET
Internet es una fuente
inagotable de recursos
gráficos. Hay que munirse de
paciencia y buscar. La mayor
parte de los sitios que
promocionan gráficos (o
cualquier otro recurso) free
(libre uso) en realidad usan la
palabra como carnada para
atraer visitantes y tratar de
venderles algo. Para encontrar
recursos realmente free hay
que navegar, buscar, revisar.
En un buscador como Google
(www.google.com) la
combinación de las palabras
clave
clip art
free
download
nos dará una lista
seguramente grande de sitios
para buscar. Casi tres
millones, en una búsqueda
general...
Cuando encontremos alguno
que nos parezca interesante,
agreguémoslo a nuestra
carpeta de Favoritos en el
programa que usamos para
navegar, de manera de poder
volver en otro momento, si lo
necesitamos. Las palabras clip
art puede reemplazarse por
photos
graphics
animated gif
o el recurso que necesitemos.
20
JUEGOS Y JUGUETES
Muchos juguetes y/o sus cajas y envoltorios pueden ser fuente
de lindos dibujos para nuestras actividades. Será necesario
escanearlos (digitalizarlos).
Desde luego que esta fuente de recursos es válida para
actividades que usemos en el marco de un establecimiento
escolar. Si pensamos llevar esas actividades y paquetes a un
sitio público (del tipo del Racó del Clic) deberemos tener
en cuenta que estamos usando material cuya propiedad intelectual no nos pertenece.
Papeles de envolver regalos, telas estampadas, etiquetas
varias, juegos de dominó, cubos, dados, juguetes didácticos,
revistas... Necesitaremos tener «las antenas alertas» e ir guardando los elementos que consideramos útiles, para el futuro.
CLIP ART
Se llaman clip-art a pequeños dibujos preparados para ser incluidos en publicaciones de diverso
tipo. Encontraremos colecciones de los mismos que se venden en
CD. Son más útiles las que están acompañadas de catálogos impresos,
que nos facilitan (mucho) la búsqueda.
En algunos CD de revistas de informática, de vez en cuando aparecen pequeñas colecciones de promoción de las colecciones comerciales.
Los clip-art vienen generalmente en formatos vectoriales (ver de
qué se trata en El famoso píxel). Para usarlos en Clic deberemos convertirlos a BMP o GIF. Veremos más adelante cómo hacerlo.
Las colecciones de clip-art pueden incluir también gráficos en formatos
pixelados.
En el CD hemos incluido una muy importante colección de gráficos, clasificados por tema, que pueden ser la base de la biblioteca personal del docente.
Adaptar los gráficos que hemos conseguido
Si tenemos suerte, conseguiremos una colección de gráficos adecuados a nuestras necesidades. Pero seguramente deberemos adecuarlos a
nuestro trabajo. Las modificaciones más comunes que necesitaremos realizar son:
„ Recortar información sobrante
„ Rotar el gráfico
„ Modificar el tamaño
„ Cambiar la cantidad de colores del gráfico
„ Convertir el formato
„ Colorear el gráfico
Existen, desde luego, muchas otras operaciones que pueden realizarse sobre gráficos existentes. Algunas las veremos relacionadas con otros
apartados de este capítulo. Otras, quedan para futuros aprendizajes. Como
ya dijimos: los gráficos son un camino de ida.
Realizaremos las actividades utilizando GIMP. También utilizaremos
PaintShopPro 4. Estas actividades pueden realizarse con casi todos los
programas graficadores (salvo el Paint de Windows, que es demasiado
elemental).
Aunque todas las
operaciones podrían hacerse
sólo con GIMP (software
libre y gratuito), utilizamos
también PaintShopPro
porque su interfaz es similar
a la de la mayor parte de
los graficadores creados
para el entorno Windows.
21
Modificar un gráfico existente en GIMP
En primer lugar, vamos a recortar las partes sobrantes de un gráfico. Para ello utilizaremos la
fotografía mariposa.bmp, que se encuentra en la opción Recursos, de la Caja de herramientas, en
Archivos ejercicios.
1
1
2
1) En la paleta de
herramientas vamos al
menú Archivo.
2) Elegimos la opción Abrir.
Aparecerá una ventana de
abrir, que es algo diferente de
las que estamos
acostumbrados a ver en los
programas del entorno
Windows.
3
2
5
1
4
6
7
2
1) Seleccionar disco con doble clic
sobre el disco respectivo.
2) Seleccionar carpetas y archivos.
Con doble clic.
3) Indica la ruta (disoc, cadena de
carpetas. El botón resaltado indica
la carpeta abierta.
Se puede ir a cualquier lugar de la
ruta utilizando estos botones.
4) Archivo seleccionado. Se pueden
seleccionar varios a la vez (los
abrirá simultáneamente).
5) Vista previa del archivo
seleccionado.
6) Información sobre el archivo.
7) Para elegir el tipo de archivo que
queremos abrir.
En una lista grande, con archivos
de variado tipo, permite mostrar
sólo los del tipo deseado.
22
3
Vamos a recortar las partes de
la fotografía que no
necesitamos.
1) Elegimos la herramienta de
selección rectangular.
1
En GIMP, como en muchos
otros programas, existen varias
formas de hacer las mismas
cosas. Mostramos una de ellas y
luego el usuario puede incorporar las otras.
4
Manteniendo presionado el
botón principal del mouse,
dibujamos un rectángulo
desde (A) hasta (B). Al llegar,
soltamos el botón.
Mientras mantengamos el
botón apretado, podemos
achicar o agrandar el
rectángulo.
A
B
5
1
1) Vamos a menú Imagen.
2) Elegimos la opción
Recortar la imagen.
2
23
6
Obtenemos nuestra
fotografía recortada.
7
Vamos ahora a rotarla.
1) Vamos al menú Imagen.
2) Elegimos la opción
Transformar.
3) Elegimos la opción Rotar
90 grados en sentido
antihorario.
Desde luego que esta
decisión debe tener
sentido para el proyecto.
Aquí elegimos una opción
arbitrariamente.
8
Obtenemos nuestra
fotografía girada.
24
9
1
Vamos ahora a reducir el
tamaño de la imagen
(achicarla).
1) Vamos al menú Imagen.
2) Elegimos la opción Escalar
Imagen.
2
10
3
1
2
4
7
5
6
Aparece la ventana de
redimensionar imágenes.
1) Medidas actuales.
2) Unidad de medida.
3) Linkeado. Significa que
mantendrá la proporción
actual.
Mantener esta opción es
muy importante ya que
de lo contrario puede
deformarse la imagen.
4) Método de reducción.
Tiene que ver con la
calidad del resultado.
Colocar siempre Cúbica.
5) Escribimos la nueva
medida, en píxeles
6) Haciendo clic en la casilla
la medida se actualiza
automáticamente
(manteniendo las
proporciones).
7) Aprobamos con el botón
Escala.
25
11
1
Vamos ahora a guardar el
trabajo.
1) Menú Archivo (de la
imagen).
No confundir con el
menú Archivo de la paleta
de herramientas.
2) Elegimos Guardar
como...
2
12
1
Aparecerá la ventana de
Guardar imagen.
La encontraremos parecida a
la de Abrir archivos.
1) Casilla para colocar el
nombre de la imagen.
2) Zona para elegir el disco.
3) Zona para elegir la
carpeta.
4) Botón para crear una
nueva carpeta.
5) Para elegir el formato de
archivo (por extensión).
Por ejemplo JPG, GIF,
BMP.
6) Completamos la
operación con Aceptar.
4
2
3
5
6
13
Según el tipo (formato) de
archivo que hayamos elegido,
puede aparecer una ventana
de configuración de opciones
de formato.
14
¡¡¡Trabajo terminado!!!
26
Modificar un gráfico existente en PaintShop Pro 4.12
1
Abrimos el archivo desde el
botón Open (abrir).
2
Buscamos, mediante la
ventana de navegación,
dónde está el archivo
mariposa.bmp
Lo encontraremos en la
opción Recursos de la
Caja de herramientas,
en Archivos ejercicios.
3a
3
1
1
3b
2
3c
Sin miedo...
La operación de recortar una fotografía es reversible inmediatamente después de realizar la acción, mediante el menú Edit/Undo
(Editar/Deshacer). Pero mientras no grabemos el archivo, podemos
volver atrás simplemente cerrándolo y contestando que NO a la
pregunta sobre si queremos guardar los cambios.
La fotografía es de una
mariposa sobre flores
amarillas. Supongamos que
necesitamos la mariposa sola,
en formato horizontal.
Comenzamos por recortar la
superficie sobrante.
1) Tomamos la herramienta
de selección de forma.
2) Verificamos que en el
panel de control esté
seleccionada la opción
rectangle (rectangular).
3) Trazamos un rectángulo.
3a Hacemos clic con el
botón principal del
mouse.
3b Sosteniendo
presionado el botón del
mouse, desplazamos el
cursor en diagonal hasta
3c.... Allí soltamos el
botón.
27
4
1
1) Vamos al menú Image.
2) Elegimos la opción Crop.
3) La imagen quedará
recortada. Se elimina la
zona externa de la
selección.
2
3
En muchos otros programas
de edición de gráficos, y en las
versiones posteriores de
PaintShopPro (recordemos
que estamos usando la 4.12),
existe la herramienta Crop (4),
que evita tener que recurrir al
menú. Directamente, con
doble clic sobre la zona
seleccionada, se obtiene el
recorte.
Otra ventaja de esta
herramienta es que, una vez
trazado el rectángulo, el
mismo puede ser modificado
tomando cualquiera de sus
bordes y moviéndolo a su
nueva posición.
4
5
1
Vamos ahora a cambiar la
orientación de la fotografía de
la mariposa.
1) Vamos nuevamente al
menú Image.
2) Elegimos la opción
Rotate (rotar).
3) Aparecerá una paleta con
opciones.
4) Elegimos Left (izquierda)
como dirección de la
rotación.
5) Elegimos 90 grados como
ángulo de la rotación.
6) Aceptamos con OK.
7) Obtenemos la imagen
girada.
2
3
6
4
5
7
28
6
2
3
5
4
10
6
7
9
8
Por último, pondremos el
gráfico a medida, con las
dimensiones necesarias para
usarlo en nuestro hipotético
proyecto...
1) Vamos, una vez más, al
menú Image.
2) Elegimos la opción Resize
(cambiar tamaño).
3) Tildamos la opción
Custom size (tamaño
arbitrario).
4) Nos aseguramos de que la
casilla Maintain aspect
ratio esté tildada.
Siempre que
modifiquemos el tamaño
de un gráfico deberemos
cuidar este detalle: es lo
que garantiza que la
reducción o ampliación de
la imagen sea
proporcional, y la misma
no se deforme.
5) Seleccionamos la casilla
del ancho (ubicada a la
izquierda).
6) Escribimos el nuevo
tamaño.
7) La casilla de la derecha
(alto) se modifica
automáticamente.
8) Aceptamos con OK.
9) El gráfico se reducirá a la
medida indicada.
10) Guardamos.
29
Convertir gráficos (cambiar el formato o tipo)
Seguramente encontraremos gráficos cuyos formatos no sean aceptados por Clic. La lista de
formatos aceptados por Clic no es muy amplia. Por ejemplo, no reconoce los JPG, formato que fue
creado después del nacimiento de Clic. Convertirlos es una operación sumamente sencilla.
1
1
2
3
Vamos a convertir nuestro
archivo mariposa, que está en
formato BMP, en un archivo
GIF.
Como la operación se realiza
utilizando «Guardar
como...», al finalizar
obtendremos un archivo
mariposa.gif, y también
tendremos el original
mariposa.bmp
1) Vamos al menú Archivo
de la paleta de
herramientas.
2) Elegimos (clic) Abrir.
3) Buscamos como ya vimos,
y seleccionamos, el
archivo mariposa.bmp
4) Tenemos el archivo
mariposa.bmp abierto.
4
2
1) Vamos al menú Archivo
de la ventana de
mariposa.bmp
No confundir con el menú
Archivo de la paleta de
herramientas.
2) Elegimos Guardar
como...
1
2
30
3
Aparecerá la ventana de
Guardar como.
1) Si queremos guardar el
nuevo archivo GIF en otra
carpeta, hacemos clic en la
opción que nos abre la
ventana de navegación.
2) Para elegir el nuevo
formato hacemos clic en
Seleccione el tipo de
archivo.
1
2
4
Aparecerá una lista de
formatos de archivo que
puede grabar GIMP. La lista es
muy amplia e incluye
formatos que no habíamos
visto nunca.
1) Elegimos el formato al
que queremos convertir
nuestro gráfico. En este
caso, el formato GIF.
2) Aprobamos con Guardar.
3) Aparecerá una ventana de
diálogo con opciones del
formato GIF.
Las opciones disponibles
para este formato son las
que se usan en internet
(entrelazar) o las de GIF
animados.
Como no es nuestro caso,
cerramos la ventana con
Aceptar.
4) Ya tenemos nuestro
archivo convertido al
nuevo formato.
1
2
3
4
Encontraremos
información detallada
sobre formatos gráficos en
el documento
Comunicación visual
y tecnología de gráficos
de computadoras,
en la multimedia
El famoso píxel y en el
documento
Obtener y domesticar gráficos, incluidos en el CD.
31
Conversión de formatos en PaintShopPro 4.12
Otra herramienta muy adecuada es, justamente, PaintShopPro. Recordemos que este programa nació como un administrador y conversor
de gráficos.
1
Se abre el gráfico a convertir
(menú File/Open), o botón
de abrir.
2
PaintShopPro 4.12 no
lee (abre) archivos
en formato GIF.
Tampoco graba en
ese formato.
Seguramente porque
salió en el período en
que se pretendía
cobrar royalties por ese
uso.
Se guarda con un formato,
que podemos elegir de la
extensa lista que ofrece
PaintShopPro.
Menú File/Save as...
Desde luego que, para
gráficos destinados a Clic,
usaremos los formatos que
soporta el programa.
En el menú File (archivo),
PSP tiene una opción
llamada Batch
convertion que permite
convertir, en una sola
operación, varios
archivos, pudiendo
elegirse no sólo el
formato de destino, sino
también la carpeta donde
se guardarán los archivos
convertidos.
32
Cambiar la profundidad de color (cantidad de
colores) de un gráfico, con GIMP
Vamos a cambiar la profundidad de color de un gráfico.
Recordemos que esta operación quita colores cuando pasamos de más a
menos (por ejemplo de 16 millones a 256 colores), pero no agrega colores cuando
pasamos de menos a más (por ejemplo de 256 a 16 millones). En este último caso,
sólo agrega la capacidad de tener más colores. Esta opción es necesaria cuando
queremos aplicar filtros, suavizar, y muchas otras operaciones.
Ver Comunicación visual y tecnología de gráficos de computadoras y la
multimedia El famoso píxel.
1
Abrimos el archivo
mariposa2.bmp.
1) Observemos que el modo
es RGB. Es decir, que tiene
16 millones de colores
(posibles).
Para GIMP modo y
profundidad de color son
la misma cosa. (Ver nota
al pie de página).
2) En la barra de título del
gráfico abierto, aparece la
indicación del modo RGB.
1
2
Modos y profundidad de color en GIMP
GIMP reconoce y utiliza tres modos/profundidad de color, en una versión muy
simplificada del tema, aunque suficiente para la mayor parte de los casos.
1) El que llama RGB, con 16 millones de colores
2) Escala de grises
3) Indexado (256 colores).
No reconoce los gráficos de 1 bit (blanco y negro), los que abre como escala de
grises.
33
2
1
Vamos a bajar la profundidad
de color a 256 colores.
Para cambiar:
1) Vamos al menú Imagen
de la ventana del gráfico.
2) Elegimos Modo.
3) En el submenú Elegimos
Indexado.
2
3
3
Aparecerá la ventana de
diálogo Conversión de color
indexado.
Según el uso que vayamos a
dar al archivo, elegiremos la
opción conveniente.
1) Lo ideal para gráficos que
usemos en Clic. El gráfico
será bastante parecido al
original, pero con tres
veces menos de peso.
Permite definir la cantidad
de colores de la paleta
final.
2) Para usar en internet, la
opción conveniente es la
paleta de colores seguros
para la Web.
3) Crea un gráfico graneado
(dither) de 1 bit.
4) La versión RGB
(izquierda) no difiere de la
de 256 colores (derecha).
1
2
3
3
4
1
34
4
Obtenemos nuestro gráfico
indexado, con un máximo de
256 colores.
Cantidad de colores en PSP 4.12
1) Aumentar o disminuir la
cantidad de colores de un
gráfico (la profundidad de
color) en PSP se logra
mediante el menú Colors.
2) Decrease Color Depth
sirve para disminuir la
profundidad de color
3) Increase Color Depth
sirve para aumentar la
profundidad de color.
4) En el submenú
desplegable aparecen las
opciones realmente
disponibles.
1
2
3
4
Escanear imágenes
La palabras escanear, una españolización
algo forzada derivada del inglés scanner
(rastreador) nombra a la acción de digitalizar
imágenes para manipularlas en las computadoras. Dicho de otra manera: meter un gráfico en
la PC.
Los periféricos especializados en esta tarea
se llaman escáneres y los hay de varios tipos,
aunque los más comunes son los llamados de
sobremesa: escáners planos, de tamaño hasta
hojas oficio.
Encontraremos una descripción muy
detallada del proceso de escaneo en el
CD, en el material
Obtener y domesticar gráficos.
35
La grillas, que no son las esposas de los grillos
Cuando preparamos actividades para Clic nos encontramos con que, en muchos casos, debemos colocar un gráfico único, que contenga todas las imágenes.
Por ejemplo, en las actividades tipo memotest, ello es
obligatorio.
En otras ocasiones tenemos la opción de colocar
uno o varios gráficos.
Cuando el gráfico es uno solo, Clic se encarga de
fraccionarlo en porciones, que mezcla cada vez en un
orden aleatorio diferente. Es decir, extrae las porciones
de imágenes, según la cantidad de filas y columnas que
le indiquemos. En el ejemplo de la izquierda, serían cuaClic corta sólo «virtualmente» el gráfico.
tro columnas por tres filas.
Como Clic «ignora» el contenido de nuestro gráfico, y se limita a partirlo en porciones iguales,
necesitaremos que las imágenes esté correctamente distribuidas sobre la superficie del gráfico, para
que no queden mal cortadas al ser fraccionadas por Clic. Para distribuir las imágenes individuales en la
superficie de un gráfico único, utilizaremos como guías las grillas que delimiten el espacio de lo que
luego serán casillas, grabadas en el mismo gráfico.
LAS HERRAMIENTAS MÁS OBVIAS
A menudo las computadoras nos hacen olvidar de las herramientas
con que podemos resolver de manera sencilla una cantidad importante de
tareas. En el caso de la construcción de grillas, por ejemplo, una hoja de
papel, una regla y un lápiz pueden ser suficientes para construir una grilla.
Con fotocopias de los gráficos obtenidos en revistas, libros, o cualquier
fuente similar, y algún adhesivo, completaremos el trabajo.
Las líneas de la grilla conviene que sean suaves, sólo lo suficientemente
visibles como para que nos sirvan como guías visuales para pegar las viñetas en el lugar correcto. Si las dibujamos con lápiz celeste o amarillo, es
posible que al escanear logremos que no sean percibidas, y no necesitaremos borrarlas luego. El único
obvio cuidado es que las
casillas sean todas iguales.
Al escanear, si los dibujos son de sólo líneas, conviene que elijamos la opción de 1 bit (blanco y negro), lo que nos ayudará a
eliminar los bordes de los
recortes. Luego podemos
aumentar la cantidad de
colores para poder colorear las imágenes.
36
Grillas con NeoPaint
100
El programa tiene una herramienta especial para dibujar grillas.
El primer paso consistirá en decidir qué grilla deseamos construir. Para este ejemplo supondremos
que necesitamos una grilla de 5 columnas por 3 filas. Cada casilla, de 70 x 100 píxeles.
70
El tamaño de la grilla será,
entonces:
ancho= 70x5=350 píxeles
alto= 100 x 3=300 píxeles
Este deberá ser el tamaño del
gráfico que contendrá la
grilla.
1
1
1) Abrimos NeoPaint.
2) Con el botón New
abrimos un nuevo
archivo.
2
2
1
2
3
4
5
6
Aparecerá la pantalla de
archivo nuevo.
1) Dejamos seleccionado,
como tipo de trabajo,
Image/Bitmap.
2) Colocamos el tamaño del
archivo que necesitamos:
350x300 píxeles.
3) Dejamos 24 bits para la
cantidad de colores.
4) Dejamos como color de
fondo el blanco (white).
5) Dejamos como resolución
72 o 96 dpi.
6) Confirmamos con OK.
37
3
2
1) Aparecerá el nuevo
gráfico en la pantalla.
2) Para elegir la herramienta
de grillas, presionamos
durante algún tiempo el
pequeño triángulo en el
botón rectángulo.
3
1
3) Cuando se despliega la
lista de herramientas,
elegimos la grilla.
4
1
2
3
1) Configuramos el ancho
de línea en 1 o 2 píxeles.
2) Configuramos las filas
(rows) en 3.
Con la corredera es muy
difícil. Conviene hacerlo
con clics sobre la línea en
la que se desplaza la
corredera. Con cada clic
del mouse avanza un
valor.
3) Configuramos las
columnas en 5.
5
1) Mantenemos apretado el
cuadrado que aparece en
el encuentro de las dos
reglas del gráfico.
2) Cuando aparece la lista
desplegable de unidades,
cambiamos a píxeles.
1
2
38
6
1) Establecemos como color
de línea un celeste claro.
Para ello llevamos el
cursor en la paleta hasta
el color deseado, y
hacemos clic con el botón
derecho del mouse.
1
3
1
1
2
2) Establecemos el blanco
como color de fondo de la
grilla, con el mismo
procedimiento, pero
haciendo clic con el botón
izquierdo del mouse.
3a
3a
3
3) Colocamos el cursor en el
vértice superior izquierdo
del gráfico.
3-a En la barra de estado
podemos observar el
valor en píxeles de la
posición del cursor.
Cuidamos que sea 0
(cero).
7
3
2
4
1
3
1
4
1) Tomamos el marco del
gráfico y lo desplazamos
un poco a la derecha y
abajo.
2) Arrastramos el cursor en
diagonal, sin soltar el
botón.
3) Cuidamos de llegar hasta
el vértice.
4) Verificamos en la barra de
estado que desplazamos
el cursor hasta un valor en
píxeles igual a las
medidas del gráfico (en
este caso, 350 x 300), lo
que nos asegura que
llegamos al vértice.
8
Cuando soltamos el botón del
mouse, aparecerá la grilla. La
guardamos con el nombre
que nos guste...
Seguramente resultará más
sencillo pegarle los gráficos
en PaintShopPro. Cuando
peguemos los gráficos,
tratemos de no ocupar toda la
superficie disponible en la
casilla, para compensar
pequeñas diferencias de
tamaño.
100x100
Hemos diseñado un paquete de grillas que pueden adaptarse a cualquier necesidad. Consecuentes con el concepto de compartir de Clic, las
hemos puesto a disposición de cualquier usuario del programa. Desde
luego, también están en el CD, en la Caja de herramientas.
Las grillas prediseñadas tienen dos medidas de casillas: 50 x 50 píxeles
y 100 x 100 píxeles. De estas últimas existen las distribuciones que entran
dentro de los tamaños admisibles.
Las grillas están en formato BMP, con fondo blanco y líneas celeste
claro. El nombre de archivo de cada una es el mismo que la distribución de
casillas. Por ejemplo, el archivo 2x5-ch.bmp es una grilla de 2 filas x 5
columnas, con casillas de 50x50.
Se pueden utilizar tal como están, o redimensionarlas, para adaptarlas
a las necesidades concretas de cada proyecto.
50x50
Usar las grillas prediseñadas
GRILLA
39
1X2
„
„
1x3
„
„
1x4
„
„
1x5
„
2x2
„
„
2x3
„
„
2x4
„
„
2x5
„
3x3
„
3x4
„
3x5
„
4x4
„
4x5
„
5x5
„
5x6
„
„
REDIMENSIONAR CON PAINT SHOP PRO 4.12
Necesitamos saber, previamente, la cantidad de casillas y sus medidas. Supongamos
que necesitamos una grilla de 2 filas por 4 columnas, con casillas de 60 x 90 píxeles.
El gráfico, una vez redimensionado deberá medir:
4 col x 60 píxeles de ancho c/una = 240 píxeles de ancho
2 filas x 90 píxeles de alto c/ una = 180 píxeles de alto
1
1
Abrimos PaintShopPro 4.12 y
colocamos el CD en la lectora.
Con el botón Abrir de PSP
accedemos a la ventana de
abrir archivos.
2
3
1) Nos ubicamos en la Caja
de herramientas, en
Recursos/Grillas/50x50
2) Seleccionamos el archivo
2x4-ch.bmp
3) Aprobamos con Abrir.
40
2
2
1) Aparecerá el archivo en el
escritorio de PSP.
2) Vamos al menú Image.
3) Elegimos la opción Resize
(redimensionar).
1
3
3
1
3
2
4
1) Aparecerá la ventana
Resize.
2) Destildamos la opción
Maintain aspect ratio.
3) Colocamos la medida del
ancho que necesitamos.
4) Colocamos la medida del
alto de archivo necesario.
4
1) El archivo
redimensionado, con las
casillas del tamaño
necesario.
2) El asterisco indica que no
fue grabado.
3) Como hemos abierto el
archivo desde el CD,
deberemos grabarlo con
otro nombre en la carpeta
de trabajo del proyecto de
Clic.
2
1
COLOCAR LOS ELEMENTOS DENTRO DE LA GRILLA
Veremos ahora cómo colocar los elementos dentro de las casillas. Recordemos que el sentido de
las grillas es, justamente, acomodar adecuadamente varias imágenes en el lugar correcto, dentro de
un archivo gráfico.
Seguimos con PaintShop Pro 4.12
41
1
Vamos a usar una mariposa
para el ejemplo.
1) Abrimos la grilla que
modificamos antes.
2) Abrimos el archivo
mariposa3.bmp (Recursos/
Archivos ejercicios).
3) Para comparar
visualmente el tamaño de
las casillas con el de la
mariposa, mostramos una
copia de la misma sobre la
grilla. Evidentemente es
demasiado grande.
2
3
1
2
2
1) Nos aseguramos de que
el archivo de la mariposa
sea el activo.
Para ello, basta con un clic
sobre la barra de título,
que deberá quedar azul.
Los archivos abiertos, no
activos, tienen la barra
color gris.
2) Vamos al menú Image.
3) Elegimos la opción
Resample.
Es similar a Resize, pero
brinda mayor calidad. En
el caso de las grillas, esa
mayor calidad puede ser
contraproducente, por
eso usamos Resize.
1
3
3
2
1
4
3
1) Nos aseguramos de que
la opción Maintain aspect
ratio esté tildada.
2) Colocamos como valor de
ancho del gráfico de la
mariposa 80 píxeles.
3) La otra medida se
actualiza
automáticamente.
4) Aprobamos con OK.
42
4
Vamos a copiar la mariposa.
Para ello:
1) Tomamos la herramienta
de selección «varita
mágica».
2) Hacemos clic sobre
cualquier punto en la
zona del fondo del
gráfico.
3) Aparecerá seleccionada,
marcada con línea
punteada titilante, la zona
del fondo.
4) Podemos hacer que la
zona se acerque más a la
mariposa, avanzando
sobre la sombra,
modificando hacia arriba
el valor de la tolerancia.
5
Como lo que queremos
seleccionar es la mariposa, y
no el fondo,
1) Vamos al menú Selections.
2) Elegimos la opción Invert,
que convierte lo
seleccionado en no
seleccionado y viceversa.
3) Con el botón Copy
obtenemos una copia en
memoria.
6
Para pegar la copia sobre la
grilla:
1) IMPORTANTE: volvemos
activo el gráfico de la
grilla, con un clic sobre la
barra del título.
2) Vamos al menú Edit.
Elegimos la opción
desplegable Paste.
3) Entre las opciones de
pegado, elegimos As
New Selection (como
nueva selección).
43
7
OOOOPS
...nos quedó grande.
Si lo dejamos así, Clic, cuando
corte, dejará parte de las
antenas y de la sombra en los
gráficos adyacentes.
Para volver atrás, podemos
recurrir al comando deshacer
(Edit/Undo) o
1) Hacemos clic con el
puntero afuera del
archivo.
2) Cuando aparece la
pantalla que nos informa
de esa situación y nos
pregunta si queremos
eliminar la «nueva
selección», le decimos
que sí.
1
2
8
1
Volvemos al paso 2 y
repetimos hasta llegar a la
pantalla de Resample.
1) Colocamos como valor de
ancho 65 píxeles.
2) Aprobamos con OK.
2
9
Repetimos el copiado y
pegado y, ahora sí, podemos
comprobar que la mariposa
entra en el espacio de la
casilla.
44
10
Supongamos que hemos
colocado todos los elementos
en la grilla. Veremos ahora
cómo borrar la cuadrícula
celeste.
1) Tomamos la herramienta
lupa.
1
2) Hacemos uno (o dos) clic
sobre el gráfico,
preferiblemente sobre
una zona con líneas.
2
11
1
1) Tomamos la herramienta
de selección varita
mágica.
2
2
2) Hacemos un clic con el
puntero sobre la línea
celeste. La cruz del cursor
es la que debe estar sobre
la línea.
3) La línea quedará
seleccionada, lo que
advertiremos por la línea
punteada titilante que
aparecerá.
12
1
1
1) Nos aseguramos de que
el color de fondo sea el
blanco.
2) Con la tecla Del o con el
botón Cut, eliminamos
las líneas celestes.
45
Con «capas» es todo más fácil
Las capas (o layers) son como hojas de celofán o acetato, sobre las que se colocan imágenes
o partes de ellas. Cada capa puede manipularse como si fuera un gráfico independiente.
Esta herramienta, incorporada en PaintShopPro a partir de la versión 5, y en muchos otros
graficadores, facilita mucho el trabajo de armado de collages. Los gráficos compuestos para Clic
podríamos considerarlos dentro de esa categoría.
El programa GIMP permite trabajar con layers. Para quienes se animen a emprender este camino,
advertimos que al principio puede resultar confuso y más difícil. Pero al poco tiempo nos daremos
cuenta de cuánto nos facilita las cosas.
5
4
6
3
2
1
Cada capa puede modificarse individualmente. Así, podríamos cambiar
el color, el tamaño, la posición de cualquiera de los elementos.
Esquema de un gráfico y sus
capas.
1) El gráfico completo, tal
como lo veremos al final.
2) El fondo.
3) La capa 1, con el cuadrado
azul.
4) La capa 2, con el círculo
rojo.
5) La capa 3, con el triángulo
verde.
6) La cuadrícula gris indica
transparencia.
46
La misma «filosofía», diversas representaciones
La «idea» general de la manipulación de capas es bastante parecida en todos los programas, pero
el modo concreto de representar las diversas funciones posibles varía en cada caso. Más abajo mostramos las capas en PhotoPlus, un software del que hay versiones freeware (libres). El programa no
es muy estable y preferimos decididamente trabajar con GIMP.
Los elementos se pegan sobre la grilla en una nueva capa, y se
redimensionan con la herramienta específica, que también permite
rotarlos. Puede crearse una capa especial para colocar allí un fondo
texturado. Al final, se «aplana» el conjunto nuevamente.
La captura corresponde al programa PhotoPlus
(http://www.freeserifsoftware.com/)
El «mejor» programa
La verdad es que el uso de capas en GIMP nos resulta más engorroso que en PhotoShop u
otros programas. Pero tratamos de ser fieles a una idea que hemos sostenido siempre: el
mejor soft es el que uno utiliza habitualmente y al cual está acostumbrado. Si vamos a convertir
a GIMP en nuestro programa editor de gráficos «de cabecera», hagamos todas las operaciones
con él. Seguramente iremos descubriendo paulatinamente atajos y métodos que pueden no
ser los que detallamos en estas páginas, ya que somos usuarios noveles de GIMP.
47
Usar las grillas con GIMP
Las grillas prediseñadas nos serán muy útiles con cualquier programa
que utilicemos. También en los que utilizan capas o layers, como GIMP.
Como mostramos antes, necesitamos saber, previamente, la cantidad
de casillas y las medidas de las mismas. Supongamos que necesitamos una
grilla de 2 filas por 4 columnas, con casillas de 60 x 90 píxeles.
El gráfico, una vez redimensionado, deberá medir:
4 col x 60 píxeles de ancho c/una = 240
píxeles de ancho
2 filas x 90 píxeles de alto c/ una = 180
píxeles de alto
Para refrescar el tema de las
medidas de las ventanas de
Clic, en píxeles, ver página
14
1
1) Abrimos el archivo
2x4-ch.bmp que
contiene una grilla de 2
filas y 4 columnas, de 50
x 50 píxeles.
1
2
Nuestra grilla abierta. Vamos
a modificar su tamaño según
el cálculo de más arriba (240 x
180 píxeles).
3
2
3
1) En el menú Imagen
elegimos Escalar la
imagen, como vimos
antes.
2) Aparecerá la ventana
respectiva.
3) Con un clic sobre el botón
link podremos modificar
las medidas de ancho y
alto independientemente.
48
4
1
1
2
1
1) La cadena (link) aparece
abierta. Eso significa que
los nuevos valores de
ancho y alto pueden
variar
independientemente (sin
mantener la
proporcionalidad).
2) Introducimos los nuevos
valores.
5
Nuestro gráfico modificado:
1) Observemos en la barra
del título que aparecen las
nuevas medidas.
2) Observemos que las
casillas ya no son
cuadradas (de 50 x 50)
sino rectangulares (de 60
x 90).
2
6
1
2
Necesitamos trabajar con la
paleta de capas. Si no está
abierta...
1) Vamos al menú Diálogo.
2) Elegimos la opción Capas.
1
2
En el menú Diálogos encontraremos
todas las paletas con
que trabaja GIMP.
49
7
Aparecerá la paleta Capas.
Vamos a crear una capa
nueva, para colocar allí la
primera ilustración de la grilla.
1) Con un clic sobre el botón
nueva capa...
1
8
Aparecerá la paleta Capa
nueva.
Las opciones disponibles son
bastante claras...
1) Podemos ponerle (o no)
nombre a la capa. Es
conveniente cuando se
trabaja con muchas capas,
para identificarla
fácilmente.
2) Dejamos tildada la opción
Transparencia, de manera
que se vea lo que está por
debajo de la capa (la grilla
u otros elementos).
3) Completamos con
Aceptar.
1
2
3
9
2
1
3
1) En la paleta capas aparece
la capa nueva.
2) El ojo indica que está
visible. Con un clic sobre
el ojo se vuelve invisible.
3) La capa azul es la activa.
50
10
Abrimos el archivo
mariposa3.bmp
11
1
2
En el menú de la ventana de
mariposa3.bmp
1) Vamos a Seleccionar.
2) Elegimos Todos.
12
1
En el menú de la ventana de
mariposa3.bmp
1) Vamos a Editar.
2) Elegimos Copiar.
2
13
En el menú de la ventana de
2x4-ch.bmp
1) Vamos a Editar.
2) Elegimos Pegar en.
Cuando se trabaja con más
de una ventana abierta, hay
que tener cuidado y
controlar que las
operaciones las hagamos en
el gráfico que queremos.
Para eso el gráfico debe
estar en la ventana activa (la
que tiene la barra del título
en azul).
51
14
Aparecerá la mariposa pegada
en la ventana de la grilla.
15
Observemos la paleta de
capas. Tenemos ahora tres
elementos:
1) El fondo con la grilla.
2) La capa transparente que
hemos creado antes.
3) La mariposa como
Selección flotante.
Esta es la capa activa.
3
2
1
16
1
1) En el menú Capa.
2) Elegimos Anclar capa.
2
52
17
1) Observemos que la
selección flotante se
«pegó» a la capa que
tenía debajo.
Es la capa activa. Nos
aseguramos de no
cambiar eso.
1
18
1
1) Vamos al menú Capa.
2) Elegimos la opción Capa
de autorrecorte.
2
19
4
3
5
1) Vamos al manú Capa.
2) Elegimos la opción Escalar
la capa.
3) Las medidas de la capa
son las del gráfico de la
mariposa.
4) Colocamos las nuevas
medidas. Recordemos que
necesitamos que el ancho
no supere los 60 píxeles
(medida de la casilla).
5) Un clic sobre la casilla de
la altura, actualiza la
medida.
53
20
La mariposa se redujo al
tamaño indicado.
Observemos cómo bajo la
mariposa se puede ver la grilla
que está en otra capa.
21
Vamos a colocar la mariposa
en su lugar, dentro de una
casilla.
En la paleta de herramientas
elegimos la de Mover.
22
Sujetamos la mariposa
haciendo clic con el botón
principal del mouse.
B
A
Sin soltar el botón,
arrastramos la mariposa hasta
su posición final, desde (A)
hasta (B).
54
Completar la grilla
Hasta aquí vimos cómo colocar un gráfico en nuestra grilla.
Hay que completar las ocho casillas, utilizando cualquier gráfico.
Es bueno probar con los que tenemos en la carpeta
Archivos ejercicios. Podemos utilizar la misma mariposa, cambiándole los colores.
Pero cualquiera que sea nuestra decisión, tengamos en cuenta que la repetición de la actividad nos servirá para fijar el procedimiento.
Recordar que para cada nueva ilustración deberemos crear
una nueva capa.
Una vez completada la grilla con los ocho gráficos en su lugar,
continuamos...
La grilla con las ocho
mariposas. Observemos,
en la paleta de capas,
cómo cada una está en
una capa distinta.
La transparencia de
las capas hace que podamos ver a todas las mariposas (porque no se superponen).
55
26
3
6
Vamos a guardar nuestro
trabajo con todas las capas,
en el formato propietario de
GIMP, que es el XCF.
Para poder editarlo y
modificarlo en el futuro y
aprovecharlo para otros usos.
Para eso...
1) En el menú del gráfico
vamos a Archivo.
2) Elegimos Guardar
como...
3) Cuando aparezca la
ventana de diálogo...
4) Clic sobre Seleccione el
tipo de archivo.
5) Elegimos de la lista GIMP
XCF Image.
6) Le damos un nuevo
nombre.
7) Cambiamos de carpeta si
es necesario.
8) Completamos con
Guardar.
7
4
5
8
Esta operación
(Guardar como...),
en realidad debe
hacerse
inmediatamente
después de abrir el
archivo de la grilla (o
el que sea...), para
evitar sobreescribirlo
accidentalmente y
perderlo.
Reciclar
Es importante que nos acostumbremos a guardar los archivos
editables, para poder modificarlos en el futuro y utilizarlos en otras
actividades. Ahorraremos mucho tiempo. Incluso podemos compartirlos con otros colegas.
56
23
Vamos a eliminar las líneas
celestes que marcan las
casillas de la grilla.
1) Con un clic volvemos
activa la capa del fondo.
1
24
1
1
4
2
2A
3
1) En la paleta de
herramientas elegimos la
herramienta balde.
2) Nos aseguramos de que
el color frontal sea el
blanco.
Se alterna entre el blanco
y el negro con un clic
sobre la doble flecha (2A)
3) Debe estar tildada la
opción Relleno con color
de frente.
4) Corremos el valor de
«tolerancia» o «umbral»
hacia la derecha, para que
tenga el valor máximo,
que es 255.
Eso significa que pintará
toda la superficie.
4
25
Con un clic en cualquier lugar
del gráfico pintamos todo el
fondo de blanco.
Como la capa activa es la del
fondo, ninguno de los
gráficos será afectado por la
pintura.
57
Finalmente...
Cuando tenemos nuesto archivo guardado, con todas las capas, para
poder editarlo y modificarlo en el futuro, vamos a preparar el trabajo para
el proyecto de Clic en el que trabajamos.
Para eso vamos al menú Imagen y elegimos la opción Aplanar la imagen, la que unifica todas las capas y las funde con el fondo, quedando el
archivo en condiciones de ser guardado con el formato BMP o GIF, para
poder incorporarlo a Clic.
Hemos dejado un rastro de
la grilla, para que se vea
que las mariposas están
bien distribuidas.
58
Browsers
Los browsers son pequeños programas auxiliares que sirven para administrar colecciones de gráficos. Aunque normalmente vienen «adentro» de programas gráficos mayores, también existen en
forma independiente.
En esencia consisten en una ventana que muestra todos los gráficos que hay en una carpeta en
forma de pequeñas estampillas, cada una con su nombre. Haciendo doble clic sobre cualquiera de
estas imágenes, la misma se abre en el programa editor. También es posible, sin abrirla, renombrarla,
copiarla o moverla a otra carpeta, borrarla.
Cuando trabajamos en proyectos de Clic es posible que tengamos carpetas con muchos gráficos.
Los nombres cortos son una limitación extra y es posible que no recordemos qué contiene cada
gráfico, escondido atrás de nombres y números. Será muy útil entonces trabajar con un graficador y
su browser abierto permanentemente en la carpeta del proyecto, de manera de poder ver instantáneamente «cuál es el gráfico con el conejito verde», sin tener que abrir o probar uno por uno
todos los «conejitos» de la carpeta.
1
Para abrir los browsers en
NeoPaint y PaintShopPro,
simplemente hay que acudir
al menú File (Archivo) y
seleccionar la opción Browser.
2
EN NEOPAINT
1
4
2
3
Cuando elegimos la opción
Browser, aparece una ventana
de navegación para elegir la
carpeta en la que se abrirá.
1) Aparece una ventana
flotante que puede,
incluso, estar fuera de la
pantalla del programa.
2) Esa ventana puede
reducirse al mínimo,
mediante un botón en la
barra de título.
3) Se puede cambiar en
cualquier momento de
carpeta.
4) Botones de gestión de
archivos. De izquierda a
derecha:
- abrir
- información
- copiar a memoria el
archivo
- copiar el archivo a otra
carpeta
- mover el archivo a otra
carpeta
- renombrar
- borrar
59
3
EN PSP 4
Para usuarios de
Clic, el Browser
de PSP4
presenta un
serio
inconveniente:
no puede
mostrar los
archivos en
formato GIF.
Las versiones
posteriores
corrigieron este
problema.
En Windows XP
Windows XP permite utilizar el Explorador de Windows como browser
de imágenes. Sólo hay que elegir la opción «Mostrar miniaturas» en el
menú Ver. Con el Explorador podemos relizar cualquier operación de
archivos: copiar, borrar, mover, renombrar, etcétera.
Cuando elegimos la opción
Browser, aparece una ventana
de navegación para elegir la
carpeta en la que se abrirá.
1) Aparece una ventana
flotante
2) Se puede cambiar en
cualquier momento de
carpeta.
3) Las acciones sobre
archivos se encuentran en
el menú ImageFile:
- abrir
- información
- copiar el archivo a otra
carpeta
- mover el archivo a otra
carpeta
- renombrar
- borrar
60
Colorín, colorado...
Los temas de la estética de los proyectos que hagamos con Clic, si bien
no son determinantes de su calidad didáctica, contribuyen (o dificultan) el
éxito de los mismos. El diseño gráfico de cualquier proyecto (no sólo de
Clic) no tiene que ver sólo con la «belleza», sino, sobre todo, con la ayuda o
entorpecimiento de la percepción. Esa percepción que está íntimamente
ligada a la comprensión.
¿LLAMAR LA ATENCIÓN?
Existe un criterio muy extendido que considera propósito del diseño el
«llamar la atención», extrapolando un concepto común en el diseño gráfico publicitario. En general, podemos decir que esta extrapolación es esencialmente errónea: cualquier pantalla (en Clic, en multimedia, en internet),
ya tiene la atención del usuario. Es esencialmente distinto de lo que sucede en la publicidad, ámbito en el que cada mensaje visual tiene que competir por esa atención con un conjunto de estímulos visuales.
Cuando el usuario se encuentra frente a la pantalla de la computadora,
el contenido de la misma sólo compite con el entorno, fuera del monitor.
Lo que debe atraer la atención es la actividad que se propone y el diseño
es sólo una herramienta para que esa actividad se comprenda, tanto en
sus intenciones como en el modo de resolverla.
Un fondo excesivamente estrepitoso (llamativo) puede ser totalmente contraproducente, al ponerse «por delante» del contenido de la actividad. El uso de colores excesivamente contrastados, dibujos abigarrados,
elementos que compiten por la atención del que mira, sólo ayudarán a
producir confusión visual y, como consecuencia, confusión conceptual.
EL USO DEL COLOR
El diseño gráfico es una profesión. Así como no es posible (ni deseable)
que cada docente se transforme en un profesional informático, tampoco
es posible ni deseable que se convierta en un diseñador gráfico a nivel
profesional.
¿Qué hacer entonces? No existen «reglas» esquematizables sobre el
uso del color, la proporcionalidad entre las masas de color y otros elementos, que requieren un aprendizaje laborioso. Pero sí podemos mencionar
algunas pautas que nos ayudarán a obtener mejores resultados.
„ Lo esencial, lo importante, es el contenido de la actividad. Los fondos, por consiguiente, deben ir al fondo, sin competir
con el contenido. Eso significa que deben
ser visualmente menos importantes que
el contenido que se apoya sobre ellos.
„ Las combinaciones de colores audaces,
dejémoslas para los profesionales. Hacer
combinaciones complejas requiere saber
bastante sobre el color y sus usos. Las
combinaciones tonales funcionan siempre bien, y son fáciles de lograr.
Tomamos un color base y obtenemos variantes tonales aumentando y/o disminuyendo su brillo.
61
„
„
„
La combinación de estos tres azules funcionará bien, con bastante seguridad.
Cuidar la coherencia.
La facilidad con que se colocan combinaciones de colores muy diversas empuja a
usarlas todas. Necesitaremos contener la
ansiedad. Seguramente podremos encontrar muchos fondos que nos gustan. Decidámonos por uno. El resto lo utilizaremos en otros proyectos.
Tanto en los proyectos de Clic como en
cualquiera de multimedia o internet es
importante mantener la coherencia, de
manera que el usuario sienta que está
dentro del mismo ambiente. Es un elemento de orientación.
Unidad en la diversidad.
Coherencia no significa monotonía. Dentro de un ambiente constante podemos
variar algunos elementos, de manera que
el espacio de trabajo no se convierta en
monótono. Pero sin olvidar en ningún
momento que lo interesante debe estar
en la actividad y no en el entorno.
Cuidado con los fondos y elementos secundarios demasiado llamativos. Distraen
del objeto principal que debe ser el centro de la atención.
Derechos de autor
No olvidar que los gráficos que encontraremos en revistas, en CD, en
internet, pueden tener dueños y sus correspondientes derechos de autor. Ver cuidadosamente las condiciones de uso que se establecen en
cada caso, sobre todo si el proyecto en el que usaremos esos gráficos
trascenderá el ámbito de una sala o aula.