Gráficos en Clic

61
Gráficos en Clic Gráficos en Clic Gabriela y Juan Carlos Asinsten Actividades con Clic Actividades con Clic

Transcript of Gráficos en Clic

Page 1: Gráficos en Clic

Gráficosen ClicGráficosen Clic

Gabriela y Juan Carlos Asinsten

Actividadescon Clic

Actividadescon Clic

Page 2: Gráficos en Clic

2

Gráficos en Clic

Actividades con 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

Page 3: Gráficos en Clic

3

Conversión de formatos en PaintShopPro 4.12... 31

Cambiar la profundidad de color de ungrá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

Page 4: Gráficos en Clic

4

Gráficos en la PC

Actividades con Clic

A poco de andar por esos caminos de Clic, descubriremosque la producción de gráficos es el «costado difícil» en laconstrucción de actividades.

En este material veremos algunas cuestiones básicas paramanejarnos en el mundo de los gráficos digitales (de com-putadora...).

Nuestros límites

Un abordaje completo del tema excede totalmente las dimensiones de este material. Enfrentadosa la cruel alternativa de obviar el tema (bajo el supuesto -falso- de que el docente sabe lo que hay quesaber en materia de gráficos) y la imposibilidad de abarcar todo lo necesario, elegimos un caminointermedio: 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 principa-les que necesitaremos realizar.

Quienes tengan conocimientos previos sobre gráficos podrán encontrar respuestas concretas alos interrogantes más usuales. Quienes no tengan esos conocimientos previos se encontrarán, segu-ramente, con mayores dificultades.

Para unos y otros hemos incluido en el CD un material multimedia bastante com-pleto sobre la naturaleza de los gráficos (imágenes) en la computadora: se llama Elfamoso 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 ampliarconsiderablemente sobre el particular.

Lamentablemente, la tecnología no ha logrado hacer transparente al usuario la manipulación degrá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 suaspecto visual, tienen algo en común: si los estamos viendo en el monitor, o los imprimimos desde lacomputadora, son gráficos en los cuales toda la información está codificada en unos y ceros, en bits.Son gráficos digitales.

Page 5: Gráficos en Clic

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 diver-sos aspectos de la realidad.

La clasificación que ofrecemos de formatos genéricos tiene que ver con la funcionalidad de losgrá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íficosGráficos fractalesGráficos vectorialesGráficos bitmap

Gráficos comerciales y científicos

Los gráficos comerciales son representaciones visuales de proce-sos comerciales y evolución de variables de negocios. Representanel resultado de ecuaciones que describen el movimiento de di-ferentes aspectos de la vida económica. Los gráficos estadísti-cos son de este tipo.

Los gráficos científicos son representaciones visuales deprocesos 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 serde naturaleza vectorial.

Gráficos fractales

Observemos la hoja de la ilustración. Es dife-rente de todas las otras hojas del mismo árbol, y sinembargo, es muy parecida a cada una de ellas.Única, pero indudablemente «de la familia». A lavez, sus nervaduras se ramifican una y otra vez,siguiendo un patrón muy definido que se reitera.

Los científicos que estudianestos fenómenos creen queexisten complejos algoritmosmatemáticos, grabados genéti-camente, que explican estas re-gularidades, dentro de la varie-dad.

En los 70, el matemáticoMandelbrot descubrió que en lanaturaleza hay patrones que serepiten "recursivamente": porejemplo, 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.

Page 6: Gráficos en Clic

6

Existen programas de computadora que, ba-sándose en esas matemáticas, crean hermososdibujos. Los diferentes tipos de fractales recibenel nombre de los científicos que desarrollaron lasecuaciones. Así tenemos fractales Mandelbrot,Julia y otros.

Desde el punto de vista del diseño, los fractalesse usan para generar texturas. Este diseño se rea-liza de manera transparente para el usuario, esdecir, sin necesidad de que conozca o domine las complejas ecuaciones que están detrás de lashermosas formas de los gráficos fractales.

En El famoso píxel hay un programa de cons-trucción de fractales. También puede ejecutarseen forma independiente (fractal.exe).

Gráficos vectoriales

Los vectores son curvas definidas matemáticamente. Existen diversos tipos de vectores. En lascomputadoras 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 decontrol, 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 decontrol a los puntos de la curva. El usuario puede arrastrar los puntos de control, modificando la curvaen tiempo real, como si se tratara de un alambre elástico.

1

1

2

2

3

1) Puntos base2) Puntos de control3) en los programas

adecuados (por ejemplo,CorelDraw), arrastrandolos puntos de control conel cursor, se modifica lacurva.

Ver animación en Elfamoso píxel.

Las curvas vectoriales admiten atributos tales como ancho y color de la línea. Si las curvas formanfiguras 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 sig-

nifica que cada uno de los elementos tiene atributos propios, que pueden sereditados y modificados en cualquier momento. También es posible modificarla 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 aldriver de la impresora. El driver es un intérprete que transforma esadescripción en instrucciones a la impresora para que la imagen resul-

Page 7: Gráficos en Clic

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 com-putadora.

Las tipografías que se utilizan en las computadoras en entornos grá-ficos (Windows, OS2, System7, etc.) son objetos vectoriales, definidospor una cantidad de curvas que forman cada letra.También los dibujosde Word.

VENTAJAS Y DESVENTAJAS DE LOS GRÁFICOSVECTORIALES

Como dijimos, los gráficos vectoriales imprimen con la máxima cali-dad del dispositivo de salida, independientemente del tamaño original delgráfico. Son excelentes, por lo tanto, para imprimir dibujos de líneas muydefinidas, 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 elorillo: «de computadora».

Los gráficos vectoriales tienen, en general, una dimensión pequeña (en disco y/o memoria). Seutilizan 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 noadmite gráficos vectoriales. Si nos encontramos con alguno que nos gusta, debe-remos convertirlo en bitmap.

Gráficos bitmap

Los gráficos bitmap están constituidos por una grilla rectangular de puntos de diferente brillo ocolor. 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 enpíxeles, a diferencia de los vectoriales, no reconocen formas y figu-ras. Sólo, como dijimos, puntos de diferente valor cromático. Ellosignifica que no es posible editar y modificar independientementelos elementos de un gráfico bitmap. Por ejemplo, el césped detrás

Page 8: Gráficos en Clic

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ÁFICOSBASADOS EN PÍXELES

Este tipo de gráficos no es muy bueno para reproducirtipografías pequeñas o líneas muy definidas. Para esos usosrequiere resoluciones altas, y por lo tanto los gráficos ocu-pan mucho espacio en disco o memoria. Los gráficos depen-den de su tamaño (que es fijo, una vez terminados) para laimpresión.

Son excelentes para reproducir tonos con suaves transi-ciones. Por ello son el soporte de las fotografías, y toda ima-

gen 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 ellostiene usos para los que es mejor que el otro y la decisión de utilizar uno u otro debe basarse en suscaracterísticas.

Se pueden utilizar combinados, tomando lo mejor de cada uno. De hecho, muchos programas deilustració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, mien-tras que los gráficos pixelados permiten trabajar cada elemento por separado (con la tecnología decapas), como si se tratara de objetos.

No olvidar que en el caso particular que nos ocupa, que son los gráficos para Clic, no tenemosopció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 subformatosque corresponden a tres realidades diferentes:

a) Diferencias tecnológicas reales, que tienen que ver con el modo en que se organiza lainformació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 es-peciales de formatos gráficos, que aprovechan las ventajas de ese programa, pero quesólo pueden ser editadas y leídas por el mismo. Se llaman formatos propietarios y seutilizan para crear los gráficos que, una vez terminados, deben ser grabados en algúnotro formato que sea soportado por la aplicación de destino final. Por ejemplo CDR, deCorelDraw, el DOC de Word, el PSP de PaintShopPro.

c) Problemas de copyright. Muchas empresas desarrollan variantes casi idénticas a otrasexistentes, 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 ellosidénticos entre sí.

Nombre: hasta ocho letras ensistema DOS (¡¡y en Clic!!).Hasta 256 letras y espacios enWindows 95 y posteriores.

Punto. Separa elnombre de laextensión.

Extensión de tres letras.Los programas lautilizan para reconocerel tipo de archivo.

Page 9: Gráficos en Clic

9

Los formatos gráficos los reconocemos por la extensión del nombre de archivo. La extensiónson 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 aquellosarchivos que son capaces de abrir y editar. Los usuarios podemos reconocer muchos tipos de archi-vos por la extensión.

CDR formato vectorial propietario, de CorelDraw.

TIF formato de gráficos pixelados que acepta modo CYMK y canalesalpha.

TXT Formato de texto puro. ASCII puro.

DOC Formato de documento de texto. Lo utilizan varios programas. Es laextensió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 ARCHIVOSCuando 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 alos usuarios. Como en este caso.

1En el Explorador deWindows, o en cualquierventana de carpeta, podemosver que los nombres dearchivo no incluyen laextensión.

2Para corregir esto:1) Vamos al menú Ver y2) elegimos la opción

Opciones...Puede ser Opciones decarpeta...

1

2

Los pasos para recuperar lasextensiones y poder verlas enlas ventanas de manejo de ar-chivos (carpetas o el Explora-dor) son pocos y sencillos:

Page 10: Gráficos en Clic

1 0

1

Las capturas han sido realizadas en Windows 95. Las diferencias en Windows 98 y XP son muypequeñas y los pasos a seguir son los mismos.

Quienes diseñamos documentos multimedia y/o trabajamos mucho con gráficos necesitamos verqué tipo de gráfico es el que contiene cada archivo. Los íconos de los mismos no son suficientes, yaque 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 quevienen como archivos adosados, disfrazados detrás de una doble extensión: archivo.gif.exe

3Aparecerá la ventanaOpciones.1) Elegimos la oreja Ver.

4En la pantalla buscamos lareferencia a las extensiones:1) Destildamos la opción de

ocultar extensiones.

Las pantallas varíanlevemente según la versión deWindows.

1

5Podemos observar cómoaparecen las extensiones entodos los archivos.

Page 11: Gráficos en Clic

1 1

FORMATOS GRÁFICOSA la hora de seleccionar el formato en que se grabará un archivo, conviene conocer algu-

nas 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 progra-

mas de armado de páginas o editores de imágenes bitmap. Uno de los formatospreferidos para intercambio de información gráfica entre PC y Mac. No lo imprimenimpresoras 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 enuna 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 losformatos usados en las páginas web. La versión 89a admite transparencias. Tambiénes posible producir con ellos animaciones sencillas. Su algoritmo de compresión esmuy 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 16millones de colores (8 o 24 bits). Produce gráficos «gordos», que ocupan muchoespacio.

PCX Uno de los formatos pioneros. No posee características destacables. No comprimi-do.

TIF Admite diversas variantes, no sólo en cantidad de colores sino que soporta el modoCYMK, 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). Admitemodos 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íneasdefinidas o tipografías, que se degradan considerablemente. Ideal para fotografías atodo color.

PNG La intención de los propietarios del algoritmo de compresión del GIF de cobrarderechos por el uso del mismo impulsó la aparición de este nuevo formato optimi-zado para internet. Al desistir el propietario de cobrar esos derechos, casi no se usa.Sigue vigente el GIF.

Page 12: Gráficos en Clic

1 2

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 halogrado hacer transparente para el usuario. Las decisiones que hay que tomar, ya sea durante lacaptura de los gráficos, como en otras etapas de su modificación o corrección, requieren del usuarioconocimientos 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 aser 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 llamadospíxeles.

La cantidad de píxeles y la cantidad de colores que pueden mostrar dependen de la construcciónfísica del monitor, de la placa de video que tenga colocada la computadora y de la configuración que seestablezca para ella. La cantidad máxima de píxeles y colores depende, en definitiva, de la memoria devideo de esa placa.

Las resoluciones de los monitores (cantidad de píxeles) más habituales, en las computadoras ac-tuales, con monitores de 14 o 15 pulgadas, son:

640 x 480,800 x 600 y1024 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áspequeñ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, quemuestren 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 bit-map también se miden enpíxeles!

Trataremos de desmenuzartodo este embrollo, para obte-ner, sobre todo, recomendacio-nes prácticas para nuestro tra-bajo.

Page 13: Gráficos en Clic

1 3

Los gráficos también están «hechos» de píxeles

1

2

Como se puede apreciar en lafotografía y los detalles, estasapetitosas frutas están«dibujadas» por pequeñoscuadraditos de color, que enconjunto, nuestros ojosperciben como formas. Cadauno de estos puntos, como enel monitor, se llama píxel.

Detalle (1)

Detalle (2)

Según nos informa la paletarespectiva de Photoshop, estegráfico tiene 1536 x1024píxeles, es decir, más de unmillón y medio de pequeñospuntitos de color.

Page 14: Gráficos en Clic

1 4

Ahora bien: ¿qué ocurriría si colocamos esta fotografía, así como está, en una página web o en unproducto multimedia?

Como la mayor parte de los monitores utilizan una resolución de 640x480 u 800x600, los usua-rios no verían más que una pequeña porción de la fotografía, ya que los píxeles sobrantes no entraríanen la pantalla.

Dicho de otra manera: en multimedia o internet, cada píxel del monitor muestra un píxel delgráfico. Un monitor de 800x600 puede mostrar, completos, sólo gráficos de esas dimensiones, omenores.

Si es tan importante el tamaño en píxeles de los gráficos, deberemos ver cómo establecemoseso, 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 NUEVOCuando 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 eltamaño del mismo, utilizando diversas escalas (pulgadas, centímetros y píxeles), tal como muestra laventana de Paint Shop Pro.

Las pantallas de los graficadores pueden variar respecto al ejemplo que mostramos. Algunas tie-nen una casilla para cambiar la unidad de medida del gráfico (en esta la medida es en píxeles) y, en esecaso, suelen agregar una casilla para establecer la resolución del gráfico (cantidad de píxeles por pulga-da o centímetro).

ESCANEAR UNA IMAGENEl escaneado de imágenes lo podemos ver en detalle en Obtener y domesticar gráficos que en-

contraremos en el CD, en Materiales ampliatorios.

MODIFICAR UN GRÁFICO EXISTENTEEn 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 notendremos 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 ImageSize (no confundir con canvas size) en las que se puede ajustar el tamaño en píxeles del gráfico.

1 2

3

4

5

Esta es la pantalla de «archivonuevo» 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 desplegableofrece variasposibilidades).

4) Cantidad de colores(profundidad de color)del archivo.

5) Tamaño (peso) delarchivo.

Page 15: Gráficos en Clic

1 5

EL PíXEL COMO UNIDAD DE MEDIDA

Podemos imaginarnos un gráfico pixelado como una grilla formada por pequeños mosaicos decolores. 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íxelesde ancho por 8 de ancho.No importa en qué monitor loveamos. No importa quéresolución esté configuradapara el monitor. El gráficoocupará 11 píxeles de ancho y8 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. Heaquí 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 ala resolución configurada para el monitor en que se mostrarán. Como hemos visto, las resolucionesmás comunes para monitores son:

640 x 480 píxeles800 x 600 píxeles1024 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 losque corresponden a esa resolución de monitor, para asegurarnos que las actividades se vean correc-tamente en cualquier computadora.

C

B

A

BOTONES A LAIZQUIERDA

Pantalla640x480

Pantalla800x600

A 320 440

B 540 700

C 260 340

NO SOBREPASAR

Page 16: Gráficos en Clic

1 6

C

B

A

BOTONES ARRIBA

Pantalla640x480

Pantalla800x600

A 280 500

B 610 770

C 300 380

C

B

A

Pantalla640x480

Pantalla800x600

A 320 440

B 610 770

C 300 380

UN SOLO BOTÓN ALA IZQUIERDA(O SIN BOTONES)

La ventana de mensajes mide 40 píxeles de alto

NO SOBREPASAR

NO SOBREPASAR

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 enparticular. El contenido de estas páginas ha sido extractado de ese trabajo.

Page 17: Gráficos en Clic

1 7

De colores

El tema del color podemos revisarlo detalladamente en lamultimedia El famoso píxelEl famoso píxelEl famoso píxelEl famoso píxelEl famoso píxel.

Puntualizaremos que los gráficos para Clic no están destinados al papel sino a la pantalla. El sistemade colores para estos gráficos es el de «colores luz», sistema aditivo, o también conocido comocolores RGB.

Este sistema es el que utilizan los monitores de computación y también los televisores.

1 24

5 7

3

7

En el sistema RGB los coloresprimarios son:1) Rojo (Red)2) Verde (Green)3) Azul (Blue)Los colores secundarios, quesurgen de la mezcla de dosprimarios, son:4) Amarillo5) Magenta6) Cian (cyan)7) La suma de los tres

colores primarios dablanco.

Cualquier color, entre 16millones (y pico) posibles, seconsigue mediante lacombinatoria de cantidadesde rojo, verde y azul.Los valores para cada unovarían entre 0 y 255.Con los tres canales de coloren valor cero, el resultado esnegro.Con los tres valores en 255, elcolor resultante es blanco.Cuando los tres valores soniguales, el resultado es gris,más claro o más oscuro,según el valor.

La típica paleta de losprogramas de Windows paraestablecer 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 losutilizamos habitualmenteen los tutoriales, paracomunicar con exactitudcómo es un color.Se pueden colocar «amano» escribiendodirectamente en lascasillas.

1

2 3

4 5

5

Page 18: Gráficos en Clic

1 8

Gráficos para Clic:«cómo se hace»

Las actividades de Clic son esencialmente visuales. Por lo que el tema de los gráficos es tanimportante 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 existen-tes.Adaptar gráficos. Operaciones para adecuar los gráficos que encon-tremos 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 correcta-mente repartidos sobre el fondo. Es difícil resolver gráficos para Clic sintener claro este tema.Uso de administradores de gráficos (browsers).Temas de estética en la producción. Los colores y algunos trucospara 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 losgráficos se repiten, una y otra vez, en actividades realizadas por diferentes autores. Lo que indica, sinlugar 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 desinteresadamenteal 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 elRacó no es el único lugar donde encontraremos material de uso libre para ello.

Actividades en Clic

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ómolograr los resultados deseados.

Page 19: Gráficos en Clic

1 9

INTERNETInternet es una fuenteinagotable de recursosgráficos. Hay que munirse depaciencia y buscar. La mayorparte de los sitios quepromocionan gráficos (ocualquier otro recurso) free(libre uso) en realidad usan lapalabra como carnada paraatraer visitantes y tratar devenderles algo. Para encontrarrecursos realmente free hayque navegar, buscar, revisar.En un buscador como Google(www.google.com) lacombinación de las palabrasclave

clip artfreedownload

nos dará una listaseguramente grande de sitiospara buscar. Casi tresmillones, en una búsquedageneral...Cuando encontremos algunoque nos parezca interesante,agreguémoslo a nuestracarpeta de Favoritos en elprograma que usamos paranavegar, de manera de podervolver en otro momento, si lonecesitamos. Las palabras clipart puede reemplazarse por

photos

graphics

animated gif

o el recurso que necesitemos.

Page 20: Gráficos en Clic

2 0

JUEGOS Y JUGUETESMuchos juguetes y/o sus cajas y envoltorios pueden ser fuente

de lindos dibujos para nuestras actividades. Será necesarioescanearlos (digitalizarlos).

Desde luego que esta fuente de recursos es válida paraactividades que usemos en el marco de un establecimientoescolar. Si pensamos llevar esas actividades y paquetes a unsitio público (del tipo del Racó del Clic) deberemos teneren cuenta que estamos usando material cuya propiedad inte-lectual no nos pertenece.

Papeles de envolver regalos, telas estampadas, etiquetasvarias, 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 ARTSe llaman clip-art a pequeños dibujos preparados para ser incluidos en publicaciones de diverso

tipo. Encontraremos colecciones de los mismos que se venden enCD. 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 apa-recen pequeñas colecciones de promoción de las colecciones comer-ciales.

Los clip-art vienen generalmente en formatos vectoriales (ver dequé se trata en El famoso píxel). Para usarlos en Clic deberemos con-

vertirlos 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

Si tenemos suerte, conseguiremos una colección de gráficos adecua-dos a nuestras necesidades. Pero seguramente deberemos adecuarlos anuestro trabajo. Las modificaciones más comunes que necesitaremos rea-lizar son:

Recortar información sobranteRotar el gráficoModificar el tamañoCambiar la cantidad de colores del gráficoConvertir el formatoColorear el gráfico

Existen, desde luego, muchas otras operaciones que pueden realizar-se sobre gráficos existentes. Algunas las veremos relacionadas con otrosapartados de este capítulo. Otras, quedan para futuros aprendizajes. Comoya dijimos: los gráficos son un camino de ida.

Realizaremos las actividades utilizando GIMP. También utilizaremosPaintShopPro 4. Estas actividades pueden realizarse con casi todos losprogramas graficadores (salvo el Paint de Windows, que es demasiadoelemental).

Aunque todas lasoperaciones podrían hacersesólo con GIMP (softwarelibre y gratuito), utilizamostambién PaintShopProporque su interfaz es similara la de la mayor parte delos graficadores creadospara el entorno Windows.

Page 21: Gráficos en Clic

2 1

Modificar un gráfico existente en GIMP

En primer lugar, vamos a recortar las partes sobrantes de un gráfico. Para ello utilizaremos lafotografía mariposa.bmp, que se encuentra en la opción Recursos, de la Caja de herramientas, en Archivos ejercicios.

11

1) En la paleta deherramientas vamos almenú Archivo.

2) Elegimos la opción Abrir.

Aparecerá una ventana deabrir, que es algo diferente delas que estamosacostumbrados a ver en losprogramas del entornoWindows.

2

1) Seleccionar disco con doble clicsobre el disco respectivo.

2) Seleccionar carpetas y archivos.Con doble clic.

3) Indica la ruta (disoc, cadena decarpetas. El botón resaltado indicala carpeta abierta.Se puede ir a cualquier lugar de laruta utilizando estos botones.

4) Archivo seleccionado. Se puedenseleccionar varios a la vez (losabrirá simultáneamente).

5) Vista previa del archivoseleccionado.

6) Información sobre el archivo.7) Para elegir el tipo de archivo que

queremos abrir.En una lista grande, con archivosde variado tipo, permite mostrarsólo los del tipo deseado.

2

1

2

3

4

5

6

7

Page 22: Gráficos en Clic

2 2

3

4

5

En GIMP, como en muchosotros programas, existen variasformas de hacer las mismascosas. Mostramos una de ellas yluego el usuario puede incorpo-rar las otras.

Vamos a recortar las partes dela fotografía que nonecesitamos.1) Elegimos la herramienta de

selección rectangular.

1

A

B

Manteniendo presionado elbotón principal del mouse,dibujamos un rectángulodesde (A) hasta (B). Al llegar,soltamos el botón.Mientras mantengamos elbotón apretado, podemosachicar o agrandar elrectángulo.

1) Vamos a menú Imagen.2) Elegimos la opción

Recortar la imagen.

1

2

Page 23: Gráficos en Clic

2 3

6Obtenemos nuestrafotografía recortada.

7Vamos ahora a rotarla.1) Vamos al menú Imagen.2) Elegimos la opción

Transformar.3) Elegimos la opción Rotar

90 grados en sentidoantihorario.

8Obtenemos nuestrafotografía girada.

Desde luego que estadecisión debe tenersentido para el proyecto.Aquí elegimos una opciónarbitrariamente.

Page 24: Gráficos en Clic

2 4

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

Imagen.

1

2

Aparece la ventana deredimensionar imágenes.1) Medidas actuales.2) Unidad de medida.3) Linkeado. Significa que

mantendrá la proporciónactual.Mantener esta opción esmuy importante ya quede lo contrario puededeformarse la imagen.

4) Método de reducción.Tiene que ver con lacalidad del resultado.Colocar siempre Cúbica.

5) Escribimos la nuevamedida, en píxeles

6) Haciendo clic en la casillala medida se actualizaautomáticamente(manteniendo lasproporciones).

7) Aprobamos con el botónEscala.

10

1 2

3

4

5

6

7

Page 25: Gráficos en Clic

2 5

Vamos ahora a guardar eltrabajo.1) Menú Archivo (de la

imagen).No confundir con elmenú Archivo de la paletade herramientas.

2) Elegimos Guardarcomo...

11

Aparecerá la ventana deGuardar imagen.La encontraremos parecida ala 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 laoperación con Aceptar.

12

1

2

1

23

4

5

6

Según el tipo (formato) dearchivo que hayamos elegido,puede aparecer una ventanade configuración de opcionesde formato.

13

¡¡¡Trabajo terminado!!!

14

Page 26: Gráficos en Clic

2 6

Modificar un gráfico existente en PaintShop Pro 4.12

1

2

3

Abrimos el archivo desde elbotón Open (abrir).

Buscamos, mediante laventana de navegación,dónde está el archivomariposa.bmpLo encontraremos en laopción Recursos de la Caja de herramientas, en Archivos ejercicios.

La fotografía es de unamariposa sobre floresamarillas. Supongamos quenecesitamos la mariposa sola,en formato horizontal.Comenzamos por recortar lasuperficie sobrante.1) Tomamos la herramienta

de selección de forma.2) Verificamos que en el

panel de control estéseleccionada la opciónrectangle (rectangular).

3) Trazamos un rectángulo.3a Hacemos clic con elbotón principal delmouse.3b Sosteniendopresionado el botón delmouse, desplazamos elcursor en diagonal hasta3c.... Allí soltamos elbotón.

1

1

2

3a

3b

3c

Sin miedo...

La operación de recortar una fotografía es reversible inmediata-mente después de realizar la acción, mediante el menú Edit/Undo(Editar/Deshacer). Pero mientras no grabemos el archivo, podemosvolver atrás simplemente cerrándolo y contestando que NO a lapregunta sobre si queremos guardar los cambios.

Page 27: Gráficos en Clic

2 7

4

5

1) Vamos al menú Image.2) Elegimos la opción Crop.3) La imagen quedará

recortada. Se elimina lazona externa de laselección.

En muchos otros programasde edición de gráficos, y en lasversiones posteriores dePaintShopPro (recordemosque estamos usando la 4.12),existe la herramienta Crop (4),que evita tener que recurrir almenú. Directamente, condoble clic sobre la zonaseleccionada, se obtiene elrecorte.Otra ventaja de estaherramienta es que, una veztrazado el rectángulo, elmismo puede ser modificadotomando cualquiera de susbordes y moviéndolo a sunueva posición.

4

1

2

3

1

2

Vamos ahora a cambiar laorientación de la fotografía dela 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 larotación.

5) Elegimos 90 grados comoángulo de la rotación.

6) Aceptamos con OK.7) Obtenemos la imagen

girada.

3

45

6

7

Page 28: Gráficos en Clic

2 8

6Por último, pondremos elgráfico a medida, con lasdimensiones necesarias parausarlo en nuestro hipotéticoproyecto...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ñoarbitrario).

4) Nos aseguramos de que lacasilla Maintain aspectratio esté tildada.Siempre quemodifiquemos el tamañode un gráfico deberemoscuidar este detalle: es loque garantiza que lareducción o ampliación dela imagen seaproporcional, y la mismano se deforme.

5) Seleccionamos la casilladel ancho (ubicada a laizquierda).

6) Escribimos el nuevotamaño.

7) La casilla de la derecha(alto) se modificaautomáticamente.

8) Aceptamos con OK.9) El gráfico se reducirá a la

medida indicada.10) Guardamos.

2

3

4

5

6 7

8

9

10

Page 29: Gráficos en Clic

2 9

Convertir gráficos (cambiar el formato o tipo)

Seguramente encontraremos gráficos cuyos formatos no sean aceptados por Clic. La lista deformatos aceptados por Clic no es muy amplia. Por ejemplo, no reconoce los JPG, formato que fuecreado después del nacimiento de Clic. Convertirlos es una operación sumamente sencilla.

11 Vamos a convertir nuestro

archivo mariposa, que está enformato BMP, en un archivoGIF.Como la operación se realizautilizando «Guardarcomo...», al finalizarobtendremos un archivomariposa.gif, y tambiéntendremos el originalmariposa.bmp1) Vamos al menú Archivo

de la paleta deherramientas.

2) Elegimos (clic) Abrir.3) Buscamos como ya vimos,

y seleccionamos, elarchivo mariposa.bmp

4) Tenemos el archivomariposa.bmp abierto.

2

3

4

21) Vamos al menú Archivo

de la ventana demariposa.bmpNo confundir con el menúArchivo de la paleta deherramientas.

2) Elegimos Guardarcomo...

1

2

Page 30: Gráficos en Clic

3 0

3Aparecerá la ventana deGuardar como.1) Si queremos guardar el

nuevo archivo GIF en otracarpeta, hacemos clic en laopción que nos abre laventana de navegación.

2) Para elegir el nuevoformato hacemos clic enSeleccione el tipo dearchivo.

1

2

4Aparecerá una lista deformatos de archivo quepuede grabar GIMP. La lista esmuy amplia e incluyeformatos que no habíamosvisto nunca.1) Elegimos el formato al

que queremos convertirnuestro gráfico. En estecaso, el formato GIF.

2) Aprobamos con Guardar.3) Aparecerá una ventana de

diálogo con opciones delformato GIF.Las opciones disponiblespara este formato son lasque se usan en internet(entrelazar) o las de GIFanimados.Como no es nuestro caso,cerramos la ventana conAceptar.

4) Ya tenemos nuestroarchivo convertido alnuevo formato.

1

23

4

Encontraremosinformación detalladasobre formatos gráficos enel documentoComunicación visual y tecnología de gráficos de computadoras, en la multimediaEl famoso píxel y en eldocumentoObtener y domesticar grá-ficos, incluidos en el CD.

Page 31: Gráficos en Clic

3 1

1Se abre el gráfico a convertir(menú File/Open), o botónde abrir.

Otra herramienta muy adecuada es, justamente, PaintShopPro. Re-cordemos que este programa nació como un administrador y conversorde gráficos.

Conversión de formatos en PaintShopPro 4.12

2Se guarda con un formato,que podemos elegir de laextensa lista que ofrecePaintShopPro.Menú File/Save as...Desde luego que, paragráficos destinados a Clic,usaremos los formatos quesoporta el programa.

En el menú File (archivo),PSP tiene una opciónllamada Batchconvertion que permiteconvertir, en una solaoperación, variosarchivos, pudiendoelegirse no sólo elformato de destino, sinotambién la carpeta dondese guardarán los archivosconvertidos.

PaintShopPro 4.12 nolee (abre) archivosen formato GIF.Tampoco graba enese formato.Seguramente porquesalió en el período enque se pretendíacobrar royalties por eseuso.

Page 32: Gráficos en Clic

3 2

Cambiar la profundidad de color (cantidad decolores) 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 amenos (por ejemplo de 16 millones a 256 colores), pero no agrega colores cuandopasamos 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 cuandoqueremos 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.

1Abrimos el archivomariposa2.bmp.1) Observemos que el modo

es RGB. Es decir, que tiene16 millones de colores(posibles).Para GIMP modo yprofundidad de color sonla misma cosa. (Ver notaal pie de página).

2) En la barra de título delgráfico abierto, aparece laindicación del modo RGB.

Modos y profundidad de color en GIMPGIMP reconoce y utiliza tres modos/profundidad de color, en una versión muysimplificada del tema, aunque suficiente para la mayor parte de los casos.1) El que llama RGB, con 16 millones de colores2) Escala de grises3) Indexado (256 colores).No reconoce los gráficos de 1 bit (blanco y negro), los que abre como escala degrises.

1

2

Page 33: Gráficos en Clic

3 3

2Vamos a bajar la profundidadde 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.

3Aparecerá la ventana dediálogo Conversión de colorindexado.Según el uso que vayamos adar al archivo, elegiremos laopción conveniente.1) Lo ideal para gráficos que

usemos en Clic. El gráficoserá bastante parecido aloriginal, pero con tresveces menos de peso.Permite definir la cantidadde colores de la paletafinal.

2) Para usar en internet, laopción conveniente es lapaleta de colores segurospara la Web.

3) Crea un gráfico graneado(dither) de 1 bit.

4) La versión RGB(izquierda) no difiere de lade 256 colores (derecha).

3

1

2

1

1

2

3

3

4

Page 34: Gráficos en Clic

3 4

Escanear imágenes

Cantidad de colores en PSP 4.12

1) Aumentar o disminuir lacantidad de colores de ungráfico (la profundidad decolor) en PSP se logramediante el menú Colors.

2) Decrease Color Depthsirve para disminuir laprofundidad de color

3) Increase Color Depthsirve para aumentar laprofundidad de color.

4) En el submenúdesplegable aparecen lasopciones realmentedisponibles.

1

2

3 4

La palabras escanear, una españolizaciónalgo forzada derivada del inglés scanner(rastreador) nombra a la acción de digitalizarimágenes para manipularlas en las computado-ras. Dicho de otra manera: meter un gráfico enla PC.

Los periféricos especializados en esta tarease llaman escáneres y los hay de varios tipos,aunque los más comunes son los llamados desobremesa: escáners planos, de tamaño hastahojas oficio.

Encontraremos una descripción muydetallada del proceso de escaneo en elCD, en el materialObtener y domesticar gráficos.

4Obtenemos nuestro gráficoindexado, con un máximo de256 colores.

Page 35: Gráficos en Clic

3 5

La grillas, que no son las esposas de los grillos

Cuando preparamos actividades para Clic nos en-contramos con que, en muchos casos, debemos colo-car un gráfico único, que contenga todas las imágenes.Por ejemplo, en las actividades tipo memotest, ello esobligatorio.

En otras ocasiones tenemos la opción de colocaruno o varios gráficos.

Cuando el gráfico es uno solo, Clic se encarga defraccionarlo en porciones, que mezcla cada vez en unorden aleatorio diferente. Es decir, extrae las porcionesde imágenes, según la cantidad de filas y columnas quele indiquemos. En el ejemplo de la izquierda, serían cua-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, paraque no queden mal cortadas al ser fraccionadas por Clic. Para distribuir las imágenes individuales en lasuperficie de un gráfico único, utilizaremos como guías las grillas que delimiten el espacio de lo queluego serán casillas, grabadas en el mismo gráfico.

LAS HERRAMIENTAS MÁS OBVIASA menudo las computadoras nos hacen olvidar de las herramientas

con que podemos resolver de manera sencilla una cantidad importante detareas. En el caso de la construcción de grillas, por ejemplo, una hoja depapel, una regla y un lápiz pueden ser suficientes para construir una grilla.Con fotocopias de los gráficos obtenidos en revistas, libros, o cualquierfuente similar, y algún adhesivo, completaremos el trabajo.

Las líneas de la grilla conviene que sean suaves, sólo lo suficientementevisibles 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, esposible que al escanear logremos que no sean percibidas, y no necesitare-mos borrarlas luego. El único

obvio cuidado es que lascasillas sean todas iguales.

Al escanear, si los dibu-jos son de sólo líneas, con-viene que elijamos la op-ción de 1 bit (blanco y ne-gro), lo que nos ayudará aeliminar los bordes de losrecortes. Luego podemosaumentar la cantidad decolores para poder colo-rear las imágenes.

Clic corta sólo «virtualmente» el gráfico.

Page 36: Gráficos en Clic

3 6

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íxelesalto= 100 x 3=300 píxelesEste deberá ser el tamaño delgráfico que contendrá lagrilla.

70

100

1

2

1) Abrimos NeoPaint.2) Con el botón New

abrimos un nuevoarchivo.

1

2

Aparecerá la pantalla dearchivo nuevo.1) Dejamos seleccionado,

como tipo de trabajo,Image/Bitmap.

2) Colocamos el tamaño delarchivo que necesitamos:350x300 píxeles.

3) Dejamos 24 bits para lacantidad de colores.

4) Dejamos como color defondo el blanco (white).

5) Dejamos como resolución72 o 96 dpi.

6) Confirmamos con OK.

1

2

3

4

56

Page 37: Gráficos en Clic

3 7

3

4

5

1) Aparecerá el nuevográfico en la pantalla.

2) Para elegir la herramientade grillas, presionamosdurante algún tiempo elpequeño triángulo en elbotón rectángulo.

3) Cuando se despliega lalista de herramientas,elegimos la grilla.

1

2

3

1) Configuramos el anchode línea en 1 o 2 píxeles.

2) Configuramos las filas(rows) en 3.Con la corredera es muydifícil. Conviene hacerlocon clics sobre la línea enla que se desplaza lacorredera. Con cada clicdel mouse avanza unvalor.

3) Configuramos lascolumnas en 5.

1 2 3

12

1) Mantenemos apretado elcuadrado que aparece enel encuentro de las dosreglas del gráfico.

2) Cuando aparece la listadesplegable de unidades,cambiamos a píxeles.

Page 38: Gráficos en Clic

3 8

6

7

8

1) Establecemos como colorde línea un celeste claro.Para ello llevamos elcursor en la paleta hastael color deseado, yhacemos clic con el botónderecho del mouse.

2) Establecemos el blancocomo color de fondo de lagrilla, con el mismoprocedimiento, perohaciendo clic con el botónizquierdo del mouse.

3) Colocamos el cursor en elvértice superior izquierdodel gráfico.3-a En la barra de estadopodemos observar elvalor en píxeles de laposición del cursor.Cuidamos que sea 0(cero).

1

1

12

33a

3

3a

1) Tomamos el marco delgráfico y lo desplazamosun poco a la derecha yabajo.

2) Arrastramos el cursor endiagonal, sin soltar elbotón.

3) Cuidamos de llegar hastael vértice.

4) Verificamos en la barra deestado que desplazamosel cursor hasta un valor enpíxeles igual a lasmedidas del gráfico (eneste caso, 350 x 300), loque nos asegura quellegamos al vértice.

1

1

2

3

3

4

4

Cuando soltamos el botón delmouse, aparecerá la grilla. Laguardamos con el nombreque nos guste...

Seguramente resultará mássencillo pegarle los gráficosen PaintShopPro. Cuandopeguemos los gráficos,tratemos de no ocupar toda lasuperficie disponible en lacasilla, para compensarpequeñas diferencias detamaño.

Page 39: Gráficos en Clic

3 9

Usar las grillas prediseñadas

Hemos diseñado un paquete de grillas que pueden adaptarse a cual-quier necesidad. Consecuentes con el concepto de compartir de Clic, lashemos puesto a disposición de cualquier usuario del programa. Desdeluego, 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íxelesy 100 x 100 píxeles. De estas últimas existen las distribuciones que entrandentro de los tamaños admisibles.

Las grillas están en formato BMP, con fondo blanco y líneas celesteclaro. El nombre de archivo de cada una es el mismo que la distribución decasillas. Por ejemplo, el archivo 2x5-ch.bmp es una grilla de 2 filas x 5columnas, con casillas de 50x50.

Se pueden utilizar tal como están, o redimensionarlas, para adaptarlasa las necesidades concretas de cada proyecto.

REDIMENSIONAR CON PAINT SHOP PRO 4.12Necesitamos 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 ancho2 filas x 90 píxeles de alto c/ una = 180 píxeles de alto

1X2

1x3

1x4

1x5

2x2

2x3

2x4

2x5

3x3

3x4

3x5

4x4

4x5

5x5

5x6

GR

ILLA

50x5

0

100x

100

1Abrimos PaintShopPro 4.12 ycolocamos el CD en la lectora.Con el botón Abrir de PSPaccedemos a la ventana deabrir archivos.

1) Nos ubicamos en la Cajade herramientas, en

Recursos/Grillas/50x502) Seleccionamos el archivo

2x4-ch.bmp3) Aprobamos con Abrir.

1

2

3

Page 40: Gráficos en Clic

4 0

21) Aparecerá el archivo en el

escritorio de PSP.2) Vamos al menú Image.3) Elegimos la opción Resize

(redimensionar).

1

2

3

31) 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.

1

2

3 4

41) El archivo

redimensionado, con lascasillas del tamañonecesario.

2) El asterisco indica que nofue grabado.

3) Como hemos abierto elarchivo desde el CD,deberemos grabarlo conotro nombre en la carpetade trabajo del proyecto deClic.

1

2

COLOCAR LOS ELEMENTOS DENTRO DE LA GRILLAVeremos 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 deun archivo gráfico.

Seguimos con PaintShop Pro 4.12

Page 41: Gráficos en Clic

4 1

1Vamos a usar una mariposapara el ejemplo.1) Abrimos la grilla que

modificamos antes.2) Abrimos el archivo

mariposa3.bmp (Recursos/Archivos ejercicios).

3) Para compararvisualmente el tamaño delas casillas con el de lamariposa, mostramos unacopia de la misma sobre lagrilla. Evidentemente esdemasiado grande.

21) Nos aseguramos de que

el archivo de la mariposasea el activo.Para ello, basta con un clicsobre la barra de título,que deberá quedar azul.Los archivos abiertos, noactivos, tienen la barracolor gris.

2) Vamos al menú Image.3) Elegimos la opción

Resample.Es similar a Resize, perobrinda mayor calidad. Enel caso de las grillas, esamayor calidad puede sercontraproducente, poreso usamos Resize.

31) Nos aseguramos de que

la opción Maintain aspectratio esté tildada.

2) Colocamos como valor deancho del gráfico de lamariposa 80 píxeles.

3) La otra medida seactualizaautomáticamente.

4) Aprobamos con OK.

1

2

3

1

2

3

32

1

4

Page 42: Gráficos en Clic

4 2

4Vamos a copiar la mariposa.Para ello:1) Tomamos la herramienta

de selección «varitamágica».

2) Hacemos clic sobrecualquier punto en lazona del fondo delgráfico.

3) Aparecerá seleccionada,marcada con líneapunteada titilante, la zonadel fondo.

4) Podemos hacer que lazona se acerque más a lamariposa, avanzandosobre la sombra,modificando hacia arribael valor de la tolerancia.

5Como lo que queremosseleccionar es la mariposa, yno el fondo,1) Vamos al menú Selections.2) Elegimos la opción Invert,

que convierte loseleccionado en noseleccionado y viceversa.

3) Con el botón Copyobtenemos una copia enmemoria.

6Para pegar la copia sobre lagrilla:1) IMPORTANTE: volvemos

activo el gráfico de lagrilla, con un clic sobre labarra del título.

2) Vamos al menú Edit.Elegimos la opcióndesplegable Paste.

3) Entre las opciones depegado, elegimos AsNew Selection (comonueva selección).

Page 43: Gráficos en Clic

4 3

7OOOOPS...nos quedó grande.Si lo dejamos así, Clic, cuandocorte, dejará parte de lasantenas y de la sombra en losgráficos adyacentes.Para volver atrás, podemosrecurrir al comando deshacer(Edit/Undo) o1) Hacemos clic con el

puntero afuera delarchivo.

2) Cuando aparece lapantalla que nos informade esa situación y nospregunta si queremoseliminar la «nuevaselección», le decimosque sí.

2

1

8Volvemos al paso 2 yrepetimos hasta llegar a lapantalla de Resample.1) Colocamos como valor de

ancho 65 píxeles.2) Aprobamos con OK.1

2

9Repetimos el copiado ypegado y, ahora sí, podemoscomprobar que la mariposaentra en el espacio de lacasilla.

Page 44: Gráficos en Clic

4 4

Supongamos que hemoscolocado todos los elementosen la grilla. Veremos ahoracómo borrar la cuadrículaceleste.1) Tomamos la herramienta

lupa.

2) Hacemos uno (o dos) clicsobre el gráfico,preferiblemente sobreuna zona con líneas.

1

10

2

1) Tomamos la herramientade selección varitamágica.

2) Hacemos un clic con elpuntero sobre la líneaceleste. La cruz del cursores la que debe estar sobrela línea.

3) La línea quedaráseleccionada, lo queadvertiremos por la líneapunteada titilante queaparecerá.

111

2

2

1) Nos aseguramos de queel color de fondo sea elblanco.

2) Con la tecla Del o con elbotón Cut, eliminamoslas líneas celestes.

12

1

1

Page 45: Gráficos en Clic

4 5

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ágeneso 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 otrosgraficadores, facilita mucho el trabajo de armado de collages. Los gráficos compuestos para Clicpodrí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 daremoscuenta de cuánto nos facilita las cosas.

2

3

4

5

Esquema de un gráfico y suscapas.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.

Cada capa puede modificarse individualmente. Así, podríamos cambiarel color, el tamaño, la posición de cualquiera de los elementos.

6

1

Page 46: Gráficos en Clic

4 6

Los elementos se pegan sobre la grilla en una nueva capa, y seredimensionan con la herramienta específica, que también permiterotarlos. Puede crearse una capa especial para colocar allí un fondotexturado. Al final, se «aplana» el conjunto nuevamente.La captura corresponde al programa PhotoPlus(http://www.freeserifsoftware.com/)

La misma «filosofía», diversas representaciones

La «idea» general de la manipulación de capas es bastante parecida en todos los programas, peroel modo concreto de representar las diversas funciones posibles varía en cada caso. Más abajo mos-tramos las capas en PhotoPlus, un software del que hay versiones freeware (libres). El programa noes muy estable y preferimos decididamente trabajar con GIMP.

El «mejor» programa

La verdad es que el uso de capas en GIMP nos resulta más engorroso que en PhotoShop uotros programas. Pero tratamos de ser fieles a una idea que hemos sostenido siempre: elmejor soft es el que uno utiliza habitualmente y al cual está acostumbrado. Si vamos a convertira GIMP en nuestro programa editor de gráficos «de cabecera», hagamos todas las operacionescon él. Seguramente iremos descubriendo paulatinamente atajos y métodos que pueden noser los que detallamos en estas páginas, ya que somos usuarios noveles de GIMP.

Page 47: Gráficos en Clic

4 7

Como mostramos antes, necesitamos saber, previamente, la cantidadde casillas y las medidas de las mismas. Supongamos que necesitamos unagrilla 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 ancho2 filas x 90 píxeles de alto c/ una = 180

píxeles de alto

Usar las grillas con GIMP

Las grillas prediseñadas nos serán muy útiles con cualquier programaque utilicemos. También en los que utilizan capas o layers, como GIMP.

Para refrescar el tema de lasmedidas de las ventanas deClic, en píxeles, ver página14

1

11) Abrimos el archivo

2x4-ch.bmp quecontiene una grilla de 2filas y 4 columnas, de 50x 50 píxeles.

2Nuestra grilla abierta. Vamosa modificar su tamaño segúnel cálculo de más arriba (240 x180 píxeles).

31) En el menú Imagen

elegimos Escalar laimagen, como vimosantes.

2) Aparecerá la ventanarespectiva.

3) Con un clic sobre el botónlink podremos modificarlas medidas de ancho yalto independientemente.

2

3

Page 48: Gráficos en Clic

4 8

41) La cadena (link) aparece

abierta. Eso significa quelos nuevos valores deancho y alto puedenvariarindependientemente (sinmantener laproporcionalidad).

2) Introducimos los nuevosvalores.

1

2

1

5Nuestro gráfico modificado:1) Observemos en la barra

del título que aparecen lasnuevas medidas.

2) Observemos que lascasillas ya no soncuadradas (de 50 x 50)sino rectangulares (de 60x 90).

1

2

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

En el menú Diálo-gos encontraremostodas las paletas conque trabaja GIMP.

1

1

2

2

Page 49: Gráficos en Clic

4 9

7Aparecerá la paleta Capas.Vamos a crear una capanueva, para colocar allí laprimera ilustración de la grilla.1) Con un clic sobre el botón

nueva capa...

8Aparecerá la paleta Capanueva.Las opciones disponibles sonbastante claras...1) Podemos ponerle (o no)

nombre a la capa. Esconveniente cuando setrabaja con muchas capas,para identificarlafácilmente.

2) Dejamos tildada la opciónTransparencia, de maneraque se vea lo que está pordebajo de la capa (la grillau otros elementos).

3) Completamos conAceptar.

1

1

2

3

91) En la paleta capas aparece

la capa nueva.2) El ojo indica que está

visible. Con un clic sobreel ojo se vuelve invisible.

3) La capa azul es la activa.12

3

Page 50: Gráficos en Clic

5 0

10Abrimos el archivomariposa3.bmp

11En el menú de la ventana demariposa3.bmp1) Vamos a Seleccionar.2) Elegimos Todos.

1

2

12En el menú de la ventana demariposa3.bmp1) Vamos a Editar.2) Elegimos Copiar.

1

2

13En el menú de la ventana de2x4-ch.bmp

1) Vamos a Editar.2) Elegimos Pegar en.

Cuando se trabaja con másde una ventana abierta, hayque tener cuidado ycontrolar que lasoperaciones las hagamos enel gráfico que queremos.Para eso el gráfico debeestar en la ventana activa (laque tiene la barra del títuloen azul).

Page 51: Gráficos en Clic

5 1

14Aparecerá la mariposa pegadaen la ventana de la grilla.

15Observemos la paleta decapas. Tenemos ahora treselementos:

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.

1

2

3

161) En el menú Capa.2) Elegimos Anclar capa.

1

2

Page 52: Gráficos en Clic

5 2

171) Observemos que la

selección flotante se«pegó» a la capa quetenía debajo.Es la capa activa. Nosaseguramos de nocambiar eso.1

181) Vamos al menú Capa.2) Elegimos la opción Capa

de autorrecorte.

2

1

191) Vamos al manú Capa.2) Elegimos la opción Escalar

la capa.3) Las medidas de la capa

son las del gráfico de lamariposa.

4) Colocamos las nuevasmedidas. Recordemos quenecesitamos que el anchono supere los 60 píxeles(medida de la casilla).

5) Un clic sobre la casilla dela altura, actualiza lamedida.

34

5

Page 53: Gráficos en Clic

5 3

20La mariposa se redujo altamaño indicado.Observemos cómo bajo lamariposa se puede ver la grillaque está en otra capa.

21Vamos a colocar la mariposaen su lugar, dentro de unacasilla.En la paleta de herramientaselegimos la de Mover.

22Sujetamos la mariposahaciendo clic con el botónprincipal del mouse.

Sin soltar el botón,arrastramos la mariposa hastasu posición final, desde (A)hasta (B).

A

B

Page 54: Gráficos en Clic

5 4

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 carpetaArchivos ejercicios. Podemos utilizar la misma mariposa, cam-biándole los colores.

Pero cualquiera que sea nuestra decisión, tengamos en cuen-ta que la repetición de la actividad nos servirá para fijar el proce-dimiento.

Recordar que para cada nueva ilustración deberemos crearuna nueva capa.

Una vez completada la grilla con los ocho gráficos en su lugar,continuamos...

La grilla con las ochomariposas. Observemos,en la paleta de capas,cómo cada una está enuna capa distinta.

La transparencia delas capas hace que poda-mos ver a todas las mari-posas (porque no se su-perponen).

Page 55: Gráficos en Clic

5 5

26Vamos a guardar nuestrotrabajo con todas las capas,en el formato propietario deGIMP, que es el XCF.Para poder editarlo ymodificarlo en el futuro yaprovecharlo 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.

Esta operación(Guardar como...),en realidad debehacerseinmediatamentedespués de abrir elarchivo de la grilla (oel que sea...), paraevitar sobreescribirloaccidentalmente yperderlo.

3

4

5

6

8

7

Reciclar

Es importante que nos acostumbremos a guardar los archivoseditables, para poder modificarlos en el futuro y utilizarlos en otrasactividades. Ahorraremos mucho tiempo. Incluso podemos com-partirlos con otros colegas.

Page 56: Gráficos en Clic

5 6

23Vamos a eliminar las líneascelestes que marcan lascasillas de la grilla.1) Con un clic volvemos

activa la capa del fondo.

241) En la paleta de

herramientas elegimos laherramienta balde.

2) Nos aseguramos de queel color frontal sea elblanco.Se alterna entre el blancoy el negro con un clicsobre la doble flecha (2A)

3) Debe estar tildada laopción Relleno con colorde frente.

4) Corremos el valor de«tolerancia» o «umbral»hacia la derecha, para quetenga el valor máximo,que es 255.Eso significa que pintarátoda la superficie.

1

1

1

2

3

4

4

2A

25Con un clic en cualquier lugardel gráfico pintamos todo elfondo de blanco.Como la capa activa es la delfondo, ninguno de losgráficos será afectado por lapintura.

Page 57: Gráficos en Clic

5 7

Finalmente...

Cuando tenemos nuesto archivo guardado, con todas las capas, parapoder editarlo y modificarlo en el futuro, vamos a preparar el trabajo parael proyecto de Clic en el que trabajamos.

Para eso vamos al menú Imagen y elegimos la opción Aplanar la ima-gen, la que unifica todas las capas y las funde con el fondo, quedando elarchivo en condiciones de ser guardado con el formato BMP o GIF, parapoder incorporarlo a Clic.

Hemos dejado un rastro dela grilla, para que se veaque las mariposas estánbien distribuidas.

Page 58: Gráficos en Clic

5 8

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 enforma independiente.

En esencia consisten en una ventana que muestra todos los gráficos que hay en una carpeta enforma de pequeñas estampillas, cada una con su nombre. Haciendo doble clic sobre cualquiera deestas 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 cadagráfico, escondido atrás de nombres y números. Será muy útil entonces trabajar con un graficador ysu 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 unotodos los «conejitos» de la carpeta.

1Para abrir los browsers enNeoPaint y PaintShopPro,simplemente hay que acudiral menú File (Archivo) yseleccionar la opción Browser.

2EN NEOPAINTCuando elegimos la opciónBrowser, aparece una ventanade navegación para elegir lacarpeta en la que se abrirá.1) Aparece una ventana

flotante que puede,incluso, estar fuera de lapantalla del programa.

2) Esa ventana puedereducirse al mínimo,mediante un botón en labarra de título.

3) Se puede cambiar encualquier momento decarpeta.

4) Botones de gestión dearchivos. De izquierda aderecha:- abrir- información- copiar a memoria elarchivo- copiar el archivo a otracarpeta- mover el archivo a otracarpeta- renombrar- borrar

12

34

Page 59: Gráficos en Clic

5 9

3EN PSP 4Cuando elegimos la opciónBrowser, aparece una ventanade navegación para elegir lacarpeta en la que se abrirá.1) Aparece una ventana

flotante2) Se puede cambiar en

cualquier momento decarpeta.

3) Las acciones sobrearchivos se encuentran enel menú ImageFile:- abrir- información- copiar el archivo a otracarpeta- mover el archivo a otracarpeta- renombrar- borrar

En Windows XP

Para usuarios deClic, el Browserde PSP4presenta unserioinconveniente:no puedemostrar losarchivos enformato GIF.Las versionesposteriorescorrigieron esteproblema.

Windows XP permite utilizar el Explorador de Windows como browserde imágenes. Sólo hay que elegir la opción «Mostrar miniaturas» en elmenú Ver. Con el Explorador podemos relizar cualquier operación dearchivos: copiar, borrar, mover, renombrar, etcétera.

Page 60: Gráficos en Clic

6 0

Colorín, colorado...

Los temas de la estética de los proyectos que hagamos con Clic, si bienno 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 deClic) no tiene que ver sólo con la «belleza», sino, sobre todo, con la ayuda oentorpecimiento de la percepción. Esa percepción que está íntimamenteligada 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 esen-cialmente 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 com-petir 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ñoes sólo una herramienta para que esa actividad se comprenda, tanto ensus intenciones como en el modo de resolverla.

Un fondo excesivamente estrepitoso (llamativo) puede ser totalmen-te contraproducente, al ponerse «por delante» del contenido de la activi-dad. El uso de colores excesivamente contrastados, dibujos abigarrados,elementos que compiten por la atención del que mira, sólo ayudarán aproducir confusión visual y, como consecuencia, confusión conceptual.

EL USO DEL COLOREl 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, tampocoes posible ni deseable que se convierta en un diseñador gráfico a nivelprofesional.

¿Qué hacer entonces? No existen «reglas» esquematizables sobre eluso del color, la proporcionalidad entre las masas de color y otros elemen-tos, que requieren un aprendizaje laborioso. Pero sí podemos mencionaralgunas pautas que nos ayudarán a obtener mejores resultados.

Lo esencial, lo importante, es el conte-nido de la actividad. Los fondos, por con-siguiente, deben ir al fondo, sin competircon el contenido. Eso significa que debenser visualmente menos importantes queel contenido que se apoya sobre ellos.Las combinaciones de colores audaces,dejémoslas para los profesionales. Hacercombinaciones complejas requiere saberbastante sobre el color y sus usos. Lascombinaciones tonales funcionan siem-pre bien, y son fáciles de lograr.Tomamos un color base y obtenemos va-riantes tonales aumentando y/o disminu-yendo su brillo.

Page 61: Gráficos en Clic

6 1

La combinación de estos tres azules fun-cionará bien, con bastante seguridad.Cuidar la coherencia.La facilidad con que se colocan combina-ciones de colores muy diversas empuja ausarlas todas. Necesitaremos contener laansiedad. Seguramente podremos encon-trar muchos fondos que nos gustan. De-cidámonos por uno. El resto lo utilizare-mos en otros proyectos.Tanto en los proyectos de Clic como encualquiera de multimedia o internet esimportante mantener la coherencia, demanera que el usuario sienta que estádentro del mismo ambiente. Es un ele-mento de orientación.Unidad en la diversidad.Coherencia no significa monotonía. Den-tro de un ambiente constante podemosvariar algunos elementos, de manera queel espacio de trabajo no se convierta enmonótono. Pero sin olvidar en ningúnmomento que lo interesante debe estaren la actividad y no en el entorno.Cuidado con los fondos y elementos se-cundarios demasiado llamativos. Distraendel 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, eninternet, pueden tener dueños y sus correspondientes derechos de au-tor. Ver cuidadosamente las condiciones de uso que se establecen encada caso, sobre todo si el proyecto en el que usaremos esos gráficostrascenderá el ámbito de una sala o aula.