Gráficos En Clic

Actividades con Clic

GráficosGráficos enen ClicClic 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 relativa- mente 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 impre- sionante 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 represen- tació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ísti- cos son de este tipo. Los gráficos científicos son representaciones visuales de procesos naturales, de lo medido por diferentes instrumen- tos 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éti- camente, que explican estas re- gularidades, 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, ba- sá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 cons- trucció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, relaciona- dos 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) 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 1 curva. 2

3 Ver animación en El 2 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 im- presió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 tonali- dad. 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 interpre- ta 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ógi- co 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 Punto. Separa el Extensión de tres letras. sistema DOS (¡¡y en Clic!!). nombre de la Los programas la Hasta 256 letras y espacios en extensión. utilizan para reconocer Windows 95 y posteriores. 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 inten- ció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 extensiones y poder verlas en 1 las ventanas de manejo de ar- En el Explorador de Windows, o en cualquier chivos (carpetas o el Explora- ventana de carpeta, podemos dor) son pocos y sencillos: ver que los nombres de archivo no incluyen la extensión.

1 2 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 reconoci- do sólo en ambiente Windows. El gráfico bitmap de visualización tiene mucha preci- sió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 rapi- dez 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 obten- drá 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íme- tros, 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, recomendacio- nes 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.

Detalle (1)

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. Esta es la pantalla de «archivo nuevo» en PaintShopPro 4.12. 1) Width (ancho) del archivo en píxeles. 2) Height (alto) del archivo 1 2 en píxeles. 3) Color de fondo que tendrá el nuevo archivo 3 (la lista desplegable ofrece varias posibilidades). 4) Cantidad de colores 4 (profundidad de color) del archivo. 5 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 pulga- da 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áqui- nas 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 A 320 440 B 540 700 B C 260 340 A

NO SOBREPASAR 16

BOTONES ARRIBA Pantalla Pantalla 640x480 800x600 A 280 500 B 610 770 C 300 380 C

B NO SOBREPASAR

UN SOLO BOTÓN A LA IZQUIERDA (O SIN BOTONES) Pantalla Pantalla 640x480 800x600 C A 320 440 B 610 770 B C 300 380

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íxelpí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.

En el sistema RGB los colores primarios son: 1) Rojo (Red) 1 4 2 2) Verde (Green) 3) Azul (Blue) Los colores secundarios, que surgen de la mezcla de dos 7 primarios, son: 4) Amarillo 5 7 5) Magenta 6) Cian (cyan) 7) La suma de los tres colores primarios da blanco. 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.

La típica paleta de los 1 programas de Windows para establecer o definir colores. 1) Definir el matiz (color). 5 2) Definir la pureza 2 3 (saturación). 3) Definir la claridad, oscuridad (luminosidad). 4) Color de muestra. 5) Valores numéricos RGB. 4 5 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 pu- dimos. 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 soporta- dos 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 inte- lectual 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 guar- dando 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, clasifi- cados por tema, que pueden ser la base de la biblioteca personal del docente. Adaptar los gráficos que hemos conseguido Aunque todas las Si tenemos suerte, conseguiremos una colección de gráficos adecua- operaciones podrían hacerse dos a nuestras necesidades. Pero seguramente deberemos adecuarlos a sólo con GIMP (software nuestro trabajo. Las modificaciones más comunes que necesitaremos rea- libre y gratuito), utilizamos lizar son: también PaintShopPro porque su interfaz es similar Recortar información sobrante a la de la mayor parte de los graficadores creados Rotar el gráfico para el entorno Windows. 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). 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 1) En la paleta de herramientas vamos al menú Archivo. 2 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.

5 1 4 6

3) Indica la ruta (disoc, cadena de 5) Vista previa del archivo 2 carpetas. El botón resaltado indica seleccionado. la carpeta abierta. 6) Información sobre el archivo. 1) Seleccionar disco con doble clic Se puede ir a cualquier lugar de la 7) Para elegir el tipo de archivo que sobre el disco respectivo. ruta utilizando estos botones. queremos abrir. 2) Seleccionar carpetas y archivos. 4) Archivo seleccionado. Se pueden En una lista grande, con archivos Con doble clic. seleccionar varios a la vez (los de variado tipo, permite mostrar abrirá simultáneamente). sólo los del tipo deseado. 22

1 Vamos a recortar las partes de la fotografía que no necesitamos. En GIMP, como en muchos 1) Elegimos la herramienta de selección rectangular. otros programas, existen varias formas de hacer las mismas cosas. Mostramos una de ellas y luego el usuario puede incorpo- rar las otras.

Manteniendo presionado el A 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.

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

1 9 Vamos ahora a reducir el tamaño de la imagen (achicarla). 1) Vamos al menú Imagen. 2) Elegimos la opción Escalar Imagen.

10 Aparece la ventana de redimensionar imágenes. 3 1) Medidas actuales. 2) Unidad de medida. 3) Linkeado. Significa que 1 2 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. 4 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 7) Aprobamos con el botón Escala.

6 25

1 11 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. 4 1) Casilla para colocar el nombre de la imagen. 2) Zona para elegir el disco. 3) Zona para elegir la 2 carpeta. 4) Botón para crear una 3 nueva carpeta. 5) Para elegir el formato de archivo (por extensión). Por ejemplo JPG, GIF, BMP. 6) Completamos la operación con Aceptar.

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 La fotografía es de una mariposa sobre flores amarillas. Supongamos que necesitamos la mariposa sola, 3b en formato horizontal. Comenzamos por recortar la superficie sobrante. 1) Tomamos la herramienta 2 de selección de forma. 2) Verificamos que en el 3c 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.

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. 27

1 4 1) Vamos al menú Image. 2) Elegimos la opción Crop. 3) La imagen quedará recortada. Se elimina la zona externa de la 2 selección.

En muchos otros programas de edición de gráficos, y en las versiones posteriores de PaintShopPro (recordemos que estamos usando la 4.12), 3 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

1 5 Vamos ahora a cambiar la orientación de la fotografía de la mariposa. 2 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.

5 4 7 28

2 6 Por último, pondremos el gráfico a medida, con las dimensiones necesarias para 3 usarlo en nuestro hipotético proyecto... 5 1) Vamos, una vez más, al menú Image. 2) Elegimos la opción Resize 4 (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 10 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 6 7 del ancho (ubicada a la izquierda). 9 6) Escribimos el nuevo tamaño. 7) La casilla de la derecha (alto) se modifica automáticamente. 8) Aceptamos con OK. 8 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 Vamos a convertir nuestro archivo mariposa, que está en 2 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, 3 y seleccionamos, el archivo mariposa.bmp 4) Tenemos el archivo mariposa.bmp abierto.

2 1) Vamos al menú Archivo 1 de la ventana de mariposa.bmp No confundir con el menú Archivo de la paleta de herramientas. 2) Elegimos Guardar como...

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 1 ventana de navegación. 2) Para elegir el nuevo 2 formato hacemos clic en Seleccione el tipo de archivo.

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 1 animados. Como no es nuestro caso, cerramos la ventana con Aceptar. 4) Ya tenemos nuestro archivo convertido al nuevo formato.

2 3

Encontraremos información detallada 4 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. Re- cordemos 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 Se guarda con un formato, PaintShopPro 4.12 no que podemos elegir de la lee (abre) archivos extensa lista que ofrece en formato GIF. PaintShopPro. Tampoco graba en Menú File/Save as... ese formato. Desde luego que, para Seguramente porque gráficos destinados a Clic, salió en el período en usaremos los formatos que que se pretendía soporta el programa. cobrar royalties por ese uso. 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.

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 2 de la ventana del gráfico. 2) Elegimos Modo. 3) En el submenú Elegimos 3 Indexado.

Aparecerá la ventana de diálogo Conversión de color indexado. Según el uso que vayamos a dar al archivo, elegiremos la 1 opción conveniente. 1) Lo ideal para gráficos que usemos en Clic. El gráfico 2 será bastante parecido al original, pero con tres 3 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).

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 1 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 2 disponibles. 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 Clic corta sólo «virtualmente» el gráfico. le indiquemos. En el ejemplo de la izquierda, serían cuatro 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ñe- tas 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 op- ció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 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.

El tamaño de la grilla será, entonces: ancho= 70x5=350 píxeles 100 70 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 2) Con el botón New abrimos un nuevo archivo.

2 Aparecerá la pantalla de 1 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 2 cantidad de colores. 4) Dejamos como color de fondo el blanco (white). 5) Dejamos como resolución 72 o 96 dpi. 3 6) Confirmamos con OK.

5 6 37

3 1) Aparecerá el nuevo gráfico en la pantalla. 2) Para elegir la herramienta 2 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) 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 1 2 3 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 1 de línea un celeste claro. Para ello llevamos el cursor en la paleta hasta el color deseado, y 3 hacemos clic con el botón derecho del mouse. 1 2 1

2) Establecemos el blanco como color de fondo de la grilla, con el mismo procedimiento, pero 3a haciendo clic con el botón izquierdo del mouse.

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 1) Tomamos el marco del 3 gráfico y lo desplazamos un poco a la derecha y abajo. 2) Arrastramos el cursor en diagonal, sin soltar el botón. 2 3) Cuidamos de llegar hasta 4 el vértice. 4) Verificamos en la barra de estado que desplazamos 1 el cursor hasta un valor en 3 píxeles igual a las medidas del gráfico (en 1 este caso, 350 x 300), lo que nos asegura que 4 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. 39

Usar las grillas prediseñadas Hemos diseñado un paquete de grillas que pueden adaptarse a cualquier necesidad. Consecuentes con el concepto de compartir de Clic, las GRILLA 50x50 100x100 hemos puesto a disposición de cualquier usuario del programa. Desde luego, también están en el CD, en la Caja de herramientas. 1X2 Las grillas prediseñadas tienen dos medidas de casillas: 50 x 50 píxeles 1x3 y 100 x 100 píxeles. De estas últimas existen las distribuciones que entran 1x4 dentro de los tamaños admisibles. Las grillas están en formato BMP, con fondo blanco y líneas celeste 1x5 claro. El nombre de archivo de cada una es el mismo que la distribución de 2x2 casillas. Por ejemplo, el archivo 2x5-ch.bmp es una grilla de 2 filas x 5 2x3 columnas, con casillas de 50x50. Se pueden utilizar tal como están, o redimensionarlas, para adaptarlas 2x4 a las necesidades concretas de cada proyecto. 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.

1) Nos ubicamos en la Caja de herramientas, en 3 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).

3 1

1 3 1) Aparecerá la ventana Resize. 2) Destildamos la opción Maintain aspect ratio. 3) Colocamos la medida del 3 4 ancho que necesitamos. 4) Colocamos la medida del 2 alto de archivo necesario.

4 1) El archivo redimensionado, con las casillas del tamaño necesario. 2) El asterisco indica que no fue grabado. 2 3) Como hemos abierto el archivo desde el CD, deberemos grabarlo con otro nombre en la carpeta de trabajo del proyecto de Clic.

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 2 visualmente el tamaño de las casillas con el de la mariposa, mostramos una 3 copia de la misma sobre la grilla. Evidentemente es demasiado grande.

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 1 activos, tienen la barra color gris. 3 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.

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. 2 3 3) La otra medida se actualiza 1 automáticamente. 4) Aprobamos con OK.

4 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 1 pantalla que nos informa de esa situación y nos pregunta si queremos eliminar la «nueva selección», le decimos que sí. 2

8 Volvemos al paso 2 y repetimos hasta llegar a la pantalla de Resample. 1) Colocamos como valor de ancho 65 píxeles. 1 2) Aprobamos con OK.

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 1) Tomamos la herramienta lupa.

2) Hacemos uno (o dos) clic sobre el gráfico, preferiblemente sobre 2 una zona con líneas.

1 11 1) Tomamos la herramienta de selección varita mágica.

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 2 aparecerá.

12 1) Nos aseguramos de que 1 el color de fondo sea el blanco. 2) Con la tecla Del o con el botón Cut, eliminamos 1 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.

Esquema de un gráfico y sus capas. 1) El gráfico completo, tal como lo veremos al final. 5 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 4 transparencia.

6 3

Cada capa puede modificarse individualmente. Así, podríamos cambiar el color, el tamaño, la posición de cualquiera de los elementos. 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 Para refrescar el tema de las píxeles de ancho medidas de las ventanas de Clic, en píxeles, ver página 2 filas x 90 píxeles de alto c/ una = 180 14 píxeles de alto 1 1) Abrimos el archivo 2x4-ch.bmp que contiene una grilla de 2 filas y 4 columnas, de 50 x 50 píxeles.

2 Nuestra grilla abierta. Vamos a modificar su tamaño según el cálculo de más arriba (240 x 180 píxeles).

2 3 1) En el menú Imagen elegimos Escalar la imagen, como vimos antes. 3 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) La cadena (link) aparece 1 abierta. Eso significa que 1 los nuevos valores de ancho y alto pueden variar independientemente (sin 2 mantener la proporcionalidad). 2) Introducimos los nuevos valores. 1 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 2 cuadradas (de 50 x 50) sino rectangulares (de 60 x 90).

1 6 Necesitamos trabajar con la paleta de capas. Si no está abierta... 1) Vamos al menú Diálogo. 2 2) Elegimos la opción Capas.

En el menú Diálo- gos encontraremos todas las paletas con 2 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...

8 Aparecerá la paleta Capa nueva. Las opciones disponibles son 1 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 2 Aceptar.

9 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. 2 1

3 50

Abrimos el archivo mariposa3.bmp

1 11 En el menú de la ventana de mariposa3.bmp 2 1) Vamos a Seleccionar. 2) Elegimos Todos.

1 12

En el menú de la ventana de mariposa3.bmp 1) Vamos a Editar. 2) Elegimos Copiar.

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

Aparecerá la mariposa pegada en la ventana de la grilla.

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 3 Selección flotante. Esta es la capa activa.

1 16 1) En el menú Capa. 2) Elegimos Anclar capa.

2 52

1) Observemos que la selección flotante se «pegó» a la capa que tenía debajo. Es la capa activa. Nos aseguramos de no 1 cambiar eso.

18 1 1) Vamos al menú Capa. 2) Elegimos la opción Capa de autorrecorte.

19 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 4 mariposa. 4) Colocamos las nuevas 3 medidas. Recordemos que 5 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.

Sujetamos la mariposa haciendo clic con el botón principal del mouse.

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, cam- biá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 poda- mos ver a todas las mariposas (porque no se su- perponen). 55

3 26 6 Vamos a guardar nuestro trabajo con todas las capas, en el formato propietario de GIMP, que es el XCF. 7 Para poder editarlo y modificarlo en el futuro y aprovecharlo para otros usos. Para eso... 4 1) En el menú del gráfico vamos a Archivo. 2) Elegimos Guardar como... 5 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.

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 com- partirlos 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) En la paleta de herramientas elegimos la herramienta balde. 2) Nos aseguramos de que 1 el color frontal sea el blanco. 4 Se alterna entre el blanco 2 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» 2A hacia la derecha, para que 3 tenga el valor máximo, que es 255. Eso significa que pintará toda la superficie.

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 ins- tantá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 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 1 pantalla del programa. 2 2) Esa ventana puede 4 reducirse al mínimo, mediante un botón en la 3 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 Cuando elegimos la opción Browser, aparece una ventana de navegación para elegir la carpeta en la que se abrirá. Para usuarios de Clic, el Browser 1) Aparece una ventana de PSP4 flotante presenta un 2) Se puede cambiar en serio cualquier momento de inconveniente: carpeta. no puede 3) Las acciones sobre mostrar los archivos se encuentran en archivos en el menú ImageFile: formato GIF. - abrir Las versiones - información posteriores corrigieron este - copiar el archivo a otra problema. carpeta - mover el archivo a otra carpeta - renombrar - borrar 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. 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áfi- co 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 su- cede 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 con- siguiente, 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 fun- cionará 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. De- cidá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. Den- tro 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 cen- tro 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.