Design e Multimédia

DISEO DE PGINAS WEB Y MULTIMEDIA
ndice de contenido
La historia del diseo grfico, desde los orgenes de la humanidad hasta la aparicin de la web e Internet........................................................................................................................4 INTRODUCCIN AL DISEO WEB......................................................................................9 Prlogo a los primeros pasos en el diseo web................................................................9 Introduccin al diseo web................................................................................................9 Caractersticas especiales de la publicacin web...........................................................10 Algo ms sobre el diseo web?....................................................................................10 Herramientas para profesionales del diseo web...........................................................11 Diseo adecuado.............................................................................................................12 Diseo Web. Problemas generales.................................................................................13 Conclusin a la introduccin al diseo web....................................................................14 DISEO GRFICO..............................................................................................................16 DISEO GRFICO EN LA WEB.........................................................................................19 COMPONENTES GRFICOS DE UN ORDENADOR........................................................21 RESOLUCIN DE LA PANTALLA.......................................................................................24 COLORES DE UN ORDENADOR.......................................................................................26 CALIBRACIN DEL MONITOR...........................................................................................28 FORMAS BSICAS EN DISEO GRFICO.......................................................................32 EL PUNTO.......................................................................................................................34 LA LNEA.........................................................................................................................35 EL CONTORNO...............................................................................................................39 EL CUADRADO...............................................................................................................40 LA CIRCUNFERENCIA...................................................................................................43 CONTORNOS MIXTOS...................................................................................................45 CONTORNOS ORGNICOS..........................................................................................46 EL DISEO EQUILIBRADO................................................................................................48 INTRODUCCIN.............................................................................................................48 LAS PROPORCIONES....................................................................................................49 LA ESCALA......................................................................................................................52 EL CONTRASTE.............................................................................................................55 LAS AGRUPACIONES....................................................................................................58 EL RETICULADO............................................................................................................60 LAS ALINEACIONES.......................................................................................................62 LAS SIMETRAS..............................................................................................................64 EL EQUILIBRIO ENTRE CONTENIDOS........................................................................68 LA JERARQUA VISUAL.................................................................................................70 TEORA DEL COLOR..........................................................................................................74 INTRODUCCIN.............................................................................................................74 NATURALEZA DEL COLOR............................................................................................75 LA PERCEPCIN DEL COLOR......................................................................................77 MODELOS DE COLOR...................................................................................................79 TIPOS DE COLOR..........................................................................................................83 PROPIEDADES DE LOS COLORES..............................................................................86 CONTRASTES DE COLOR............................................................................................92 ESTUDIO DE ALGUNOS COLORES..............................................................................96 EL COLOR EN LA WEB.....................................................................................................116 COLORES DISPONIBLES PARA LA WEB...................................................................116 Paletas de color seguras. Websafe y Reallysafe..........................................................118
DISEO DE PGINAS WEB Y MULTIMEDIA 2
EL PROBLEMA DE LAS IMGENES............................................................................121 COLORES Y PARTES DE UNA PGINA......................................................................122 ELECCIN DE LA PALETA PARA UN SITIO WEB.......................................................125 HERRAMIENTAS BSICAS PARA TRABAJAR CON COLORES................................133 TIPOGRAFA.....................................................................................................................139 INTRODUCCIN...........................................................................................................139 UN POCO DE HISTORIA..............................................................................................140 MEDIDAS TIPOGRFICAS...........................................................................................143 PARTES DE UNA LETRA..............................................................................................147 FAMILIAS TIPOGRFICAS...........................................................................................148 FUENTES SERIF Y FUENTES SANS SERIF...............................................................153 TIPOGRAFA DIGITAL.......................................................................................................155 FUENTES PARA IMPRESIN Y FUENTES PARA PANTALLA....................................156 ADMINISTRACIN DE FUENTES EN UN ORDENADOR...........................................159 TIPOGRAFA Y DISEO...............................................................................................163 TIPOGRAFA EN LA WEB.................................................................................................173 DISPOSICIN DE TEXTOS EN UNA PGINA WEB...................................................178 LOS GRFICOS DIGITALES............................................................................................185 GRFICOS DE MAPA DE BITS........................................................................................186 RESOLUCIONES..........................................................................................................186 MODOS DE COLOR.....................................................................................................193 COLOR Y MAPA DE BITS.............................................................................................198 PESO DE UN FICHERO GRFICO..............................................................................201 OPTIMIZACIN DE UN FICHERO GRFICO..............................................................203 GRFICOS VECTORIALES..........................................................................................208 METAFICHEROS GRFICOS.......................................................................................211 DIGITALIZACIN DE IMGENES.....................................................................................213 INTRODUCCIN...........................................................................................................213 EL ESCNER................................................................................................................214 TIPOS DE ESCNERES...............................................................................................216 RESOLUCIN DE UN ESCNER................................................................................220 TRABAJANDO CON EL ESCNER..............................................................................223 FOTOGRAFA DIGITAL.................................................................................................228 PROGRAMAS GRFICOS................................................................................................236 PROGRAMAS DE PINTURA Y RETOQUE.......................................................................238 PROGRAMAS DE ILUSTRACIN....................................................................................241 CREACIN DE ANIMACIONES VECTORIALES..............................................................245 TABLETAS DIGITALIZADORAS........................................................................................246 FORMATOS DE IMAGEN PARA WEB..............................................................................249
La historia del diseo grfico, desde los orgenes de la humanidad hasta la aparicin de la web e Internet.
El ser humano ha tenido siempre la necesidad de comunicarse con sus semejantes, hasta tal punto que podemos afirmar que si el hombre es el ser ms avanzado de la naturaleza, es debido en gran parte a la facilidad que ha tenido para hacer partcipe a los dems de sus ideas de una forma u otra. Las primeras formas comunicativas fueron mediante elementos visuales. Antes de que desarrollaran capacidades de expresin mediante el lenguaje hablado, los hombres utilizaron su cuerpo para comunicar a los dems estados de nimo, deseos e inquietudes a travs de ademanes, expresiones y signos, que con el tiempo adquirieron la condicin de "lenguaje", al convertirse en modelos de comunicacin. Aunque posteriormente el lenguaje hablado pasara a ser el medio de intercambio de informacin ms directo, el lenguaje visual sigui teniendo un importante peso en las relaciones comunicativas, sobre todo a partir del uso de diversos materiales y soportes como medios del plasmar mensajes visuales, como lo demuestran multitud de dibujos en piedra y pinturas rupestres que han llegado a nuestros das, en las cuales se representan elementos naturales, actividades cotidianas y diferentes signos artificiales con significado propio. Pintura rupestre (Cueva de Altamira, Espaa)
La representacin de ideas mediante grafos experiment su mayor avance con la aparicin de los lenguajes escritos, que permitieron expresar cadenas estructuradas de pensamientos mediante un conjunto de elementos grficos de significado propio dispuestos segn una estructura definida, capaces de transmitir mensajes entendibles por la comunidad. Estos lenguajes escritos estaban basados, bien en la representacin de elementos tomados de la naturaleza, a los que se les asignaba una interpretacin particular, bien en un conjunto artificial de smbolos inventados: los alfabetos. Cada uno de estos signos aislado tena a veces un significado incierto, pero unido a otros, permitan representar grficamente el lenguaje hablado por cada pueblo o cultura.
Grabado en piedra con jeroglficos (Egipto)
Como soporte fsico se utiliz inicialmente la piedra, pero pronto se buscaron otros tipos de materiales que permitieran una mayor facilidad de uso y una mayor portabilidad, como los papiros o los pergaminos. Papiro de los muertos
Tambin se empezaron a usar diferentes tipos de pigmentos naturales para dar un mayor colorido y expresibidad a las obras escritas y composiciones artsticas, y a disponer los diferentes elementos textuales y grficos de forma armoniosa y equilibrada, ya que se apreci que con ello se ganaba poder comunicativo, claridad y belleza. Esto se puede apreciar en la confeccin de los incunables medievales realizados en los monasterios, en los que se observa de forma clara la importancia de la "FORMA" (diseo) para transmitir un mensaje. Incunable medieval
Posteriormente, Johann Gutenberg invent la imprenta, artefacto capaz de reproducir en grandes cantidades y de forma cmoda un original, lo que hizo posible que los documentos impresos y el mensaje que contenan fueran accesibles a un gran nmero de personas. Primer libro impreso
Pronto empezaron a aparecer imprentas en las que se reproducan todo tipo de obras, cada vez ms elaboradas. Se empezaron a usar nuevos materiales como soporte, nuevas tintas y nuevos tipos de letras, originando la aparicin de unos profesionales especializados en su manejo, los tipgrafos y los cajitas, tal vez los primeros diseadores grficos como tal, ya que se encargaban de componer y maquetar los diferentes elementos que iban a formar una obra de forma que resultara lgica, clara, armoniosa y bella. Otro gran impulsor del desarrollo del diseo grfico fue la Revolucin Industrial. Surgieron las fbricas y la economa de mercado, un gran nmero de personas se desplaz a las ciudades a trabajar, aumentaron las tiendas y los comercios y empez la competitividad
entre empresas por hacerse con una parte del mercado. Con ello apareci y se desarroll una nueva tcnica comercial, la publicidad, encargada de hacer llegar a los consumidores mensajes especficos que les convencieran de que un producto dado era mejor que otros anlogos. Cartel publicitario
El desarrollo de la publicidad trajo consigo un desarrollo paralelo del diseo grfico y de los soportes de comunicacin. Haba que convencer al pblico de las ventajas de un producto o marca, y para ello nada mejor que mensajes concisos, cargados de componentes psicolgicos, con diseos cada vez ms elaborados, que se hacan llegar al mayor nmero posible de personas. El cmo se transmita la informacin lleg incluso a superar en importancia a la misma informacin transmitida. No se trataba ya de presentar mensajes visuales bellos, sino efectivos, que vendieran, y para ello no se dudo en realizar grandes inversiones, haciendo posible un gran avance en las tcnicas de diseo y la aparicin de profesionales dedicados exclusivamente a desarrollarlas y ponerlas en prctica: los diseadores grficos. En el siglo XX, hicieron su aparicin los ordenadores, mquinas en un principio destinadas a un grupo reducido de tcnicos y especialistas, pero que poco a poco fueron ganando popularidad y que con la aparicin del ordenador personal se extendieron a todos los ambientes y grupos sociales. El ordenador es til porque permite el uso de programas informticos capaces de realizar multitud de tareas. Pero estos programas tienen una estructura interna muy compleja, que la mayora de las veces va ms all de los conocimientos que poseen los usuarios de los mismos. Esto dio lugar a la introduccin de unos elementos intermedios, denominados "Interfaces de Usuario", cuya misin era aislar al usuario de las consideraciones tcnicas y procesos internos de los programas, permitindoles realizar tareas con ellos por medio de un "lenguaje" intermedio, ms fcil de entender por el usuario. Interfase de usuario en modo texto
En sus principios, estos programas se manejaban de forma textual, mediante comandos crpticos, que entendan tan solo expertos en la materia. Pero con el acceso a la informtica de todo tipo de personas se hizo necesaria una simplificacin en el manejo de las aplicaciones, surgiendo el concepto de "Interface Grfica de Usuario" en toda su extensin, como un medio capaz de hacer entendibles y usables estas aplicaciones a travs de elementos visuales comunes, que presentados en la pantalla del ordenador permitieran al usuario medio realizar las tareas propias de cada programa concreto. Interfase Grfica de Usuario
La labor de disear estas IGU correspondi inicialmente a los mismos programadores que desarrollaban las aplicaciones, pero pronto se vio que su concepto de interface de usuario no se corresponda con la que necesitaban los usuarios finales. Haca falta pues profesionales del diseo que se encargaran de concebir las interfaces, pero los diseadores grficos clsicos no estaban acostumbrados a construir obras con capacidades de interaccin y navegabilidad, por lo que hubieron de reciclarse, aprendiendo conceptos y funcionalidades nuevas. Con la entrada en escena de Internet y las pginas web se hizo an ms patente el desfase de los diseadores grficos con el nuevo medio. Haca falta ahora disear y construir interfases de usuario muy especiales, condicionadas a pequeos tamaos de fichero y a un medio concreto de presentacin, los navegadores web, que imponan serias limitaciones al diseo, que necesitaban sistemas de navegacin entre pginas simples y entendibles. Interfase web
Si a esto sumamos la necesidad de los creadores de interfaces web de conocer a fondo diferentes lenguajes de marcas y de programacin (HTML, JavaScript, DHTML), es evidente que era necesaria la aparicin de un nuevo profesional, el diseador web, hbrido entre el diseador grfico clsico y el programador de aplicaciones para Internet.
INTRODUCCIN AL DISEO WEB Prlogo a los primeros pasos en el diseo web

Hace unos das, durante una cena, mi padre me pregunt qu era exactamente eso de los chats, o lo que quiera que la gente hace cuando se escribe a travs de Internet. Es un hombre un tanto suspicaz ante las nuevas tecnologas, de manera que me vi obligado a lidiar en tres frentes a la vez, aadiendo adems el hecho de que la pregunta, planteada con intenciones solapadas, son como un aldabonazo y me desconcert unos segundos. Las tres lneas de ataque de las que hablo eran las siguientes: una, la que me obligaba a describir de manera superficial las bases tecnolgicas de los chats, ya que mi padre los haba comparado con sistemas de comunicacin ms convencionales, y yo deba establecer las distancias adecuadas. En segundo lugar, le expliqu los elementos de la prctica, como por ejemplo la interfaz tpica de un software de chat o las funciones bsicas: flujo de texto en tiempo real y transmisin de archivos, as como el modo en que los chats se organizan y pueden ser disfrutados en diversas salas; se conoce que cosas muy elementales. En tercer lugar le suger la utilidad de los chats, sus ventajas frente a otras formas de comunicacin a distancia y le expliqu, de forma ms general ya, que pese a su postura, Internet constituye en gran medida el sistema sanguneo del futuro, aunque en el mejor de los casos se trate arterias de fibra de carbono... De ah pasamos a conversar acerca de cuestiones mucho ms diversas en torno a la Red, pero esto ya no tena importancia. Un tema u otro era un asunto de formas. En realidad, yo no siento mucha atraccin por los chats genricos, y si acaso opto por aplicaciones de mensajera instantnea. Pero aquella conversacin me revel algunas de las bases que, despus, me ayudaran a responder a una usuaria en cierto foro de diseo web. Su pregunta era: Aunque no s mucho de ordenadores, siempre estoy enganchada, y ahora quiero hacer mi propia pgina web. Por dnde empiezo? Desde luego eso era toda una declaracin de intenciones y no exista, ni existe, una respuesta infalible. El desarrollo web es un proceso creativo e ntimo, como lo es la navegacin en Internet; dnde voy si me conecto a la Red? Pues eso depende de ti. Es ms: lo probable es que muy pronto ya ni siquiera dejes que otros usuarios compartan y fisguen en tu historial. De la misma manera, una vez que empezamos a disear, decidimos que nadie puede entrometerse en nuestra forma de trabajar. Cierto? Entonces, quiere esto decir que no hay una especie de protocolo de principiantes? Oh, s que hay un protocolo, un camino de baldosas que todos solemos seguir para llegar a nuestro destino (naturalmente, el destino de cada usuario es distinto, y mientras ms diferente e ingenioso, mayor ser el aprendizaje).
Introduccin al diseo web

Como en el caso de los chats, podemos considerar que existen tres directrices elementales que sirven de guas. Una de ellas es el conocimiento tecnolgico de Internet; estamos obligados a saber cmo funciona de manera general, desde las conexiones de ordenador hasta el valor de los servidores, pasando por la arbitraria congestin de las lneas telefnicas y, desde luego, considerando los diversos navegadores que hay en el mercado, adems de prestar atencin a la necesidad de instruirnos, aunque sea un poco, en el lenguaje HTML. Es muy difcil tomarse en serio a alguien que no tiene constancia de
que, echando un vistazo al cdigo fuente de una pgina, hallar etiquetas tan bsicas como <head> y <body>. Estos conocimientos tcnicos nos informan de nuestras posibilidades creativas; no basta con crear una preciosa imagen y colgarla en nuestra pgina principal, si no sabemos que dicha imagen podra tardar un minuto en cargarse... Y a da de hoy sa s es una verdad infalible. En segundo lugar, estamos obligados a saber trabajar. No es ms difcil que eso; si trabajas en modo cdigo, debes dominar el HTML y, mejor an, el HTML y otros lenguajes de uso comn en la Red. Si empleas software de tipo WYSIWYG (lo que ves es lo que obtienes, en espaol), debes ser capaz de conocer las funciones de tu programa. Desde luego que detenerse a leer las instrucciones es aburrido, y provoca lo que se conoce como curva de aprendizaje, pero es la nica manera de llegar a entender y desarrollar todas las posibilidades tcnicas e imaginativas que te permiten las diferentes aplicaciones del mercado. Si usas DreamWeaver, aprende DreamWeaver; puede que conozcas FrontPage, por ejemplo, pero eso no conduce a ninguna parte. Son programas distintos que necesitan procesos de instruccin diversos.
Caractersticas especiales de la publicacin web

En tercer lugar es fundamental saber que Internet no es una conferencia telefnica, un CD-ROM o televisin a la carta. La Red sufre limitaciones propias y disfruta tambin de posibilidades ms extensas y personales. As, cuando diseamos nuestros sitios web, debemos entender que el visitantes no espera lo mismo de nuestras pginas que de un programa de TV, incluso aunque ambos traten el mismo tema. Tomemos por ejemplo un documental sobre los elefantes africanos. E imaginemos a un ciudadano muy interesado en dichos animales, que en un momento del da debe elegir entre ver la vida de los elefantes en televisin, o buscar informacin en Internet a propsito de lo mismo. Nosotros tenemos la obligacin de disear una pgina web al respecto. Tomaramos inspiracin de la televisin? Quizs alguna, pero si sabemos lo que nos conviene, no pasaramos de ah. Por ejemplo, la tele se encuentra a un mnimo de dos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser estrecho para no irritar al navegante. En la tele eso da igual. A la tele tambin le es indiferente mostrar cientos de tomas, cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. El web apenas podra hacer eso, en condiciones estndar de conexiones de 56kb. Pero nosotros podemos crear enlaces a pginas que traten todas y cada una de las costumbres del enorme paquidermo. La televisin, no... La pregunta, sintetizada, es sta: qu damos al navegante para hacerle fiel a nuestros contenidos aunque tan slo sea durante una sesin? Le damos personalizacin, le damos contenidos, le damos libertad, le damos ingenio, le damos belleza, le damos oportunidades, le damos buen gusto, le damos comodidad, le damos datos, le damos sntesis, le damos grficos, le damos informacin detallada, le damos esquemas, le damos conocimientos en tres palabras o sabidura en textos de tres kilmetros, le damos todo y ms, le damos, en fin, lo que sea que busca. Estamos en condiciones de hacer estas cosas? Ms nos vale.
Algo ms sobre el diseo web?

Hay ms cosas, cierto. El diseo enfocado a la Red suele ser hijo de la receptividad, como cualquier otro tipo de diseo. Ms all del aprendizaje tcnico, que consiste en leer
informaciones a veces aburridas y engorrosas, existe un modo complementario y muy excitante de aprender. Como deca, hablamos de receptividad. De ver lo que otros muchos hacen con un talento que parece inagotable, y dejar que lo que vemos sedimente en nuestro trabajo; desde el diseo grfico de los sitios web, desde las imgenes que incluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos. Dejadme decir que pocas cosas me parecen tan divertidas y poco serias como un prrafo mal escrito. Es que desenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textos deben ser sugestivos, esclarecedores o enigmticos, pero siempre llamativos y eficientes. Hace poco visitaba un sitio web de cierta gran empresa y termin preguntndome si la redaccin haba corrido a cargo de algn narrador extranjero. El texto era breve y directo, pero cometa fallos gramaticales tan evidentes que era lo que ms llamaba la atencin; incluso ms que el bonito y efervescente diseo. Tengamos en cuenta que si nos consideran poco aplicados, no nos tomarn como una alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro trabajo.) Miremos, analicemos, aprendamos de los dems. Es un proceso basado en la febril actividad de nuestro ratn. Tendremos que hacer clic cientos, miles de veces, antes de que el efecto de los maestros del web deje huella en nosotros. Para empezar podemos observar los estudios y casos de grandes empresas del medio como Adobe y Macromedia, que incluyen secciones ex profeso muy interesantes; y tambin tenemos la oportunidad de mirar las pginas de las agencias de publicidad y diseo; con frecuencia sus mejores trabajos estn hechos para s mismos, y no para sus clientes.
Herramientas para profesionales del diseo web

Despus necesitas el software que interpretar tus deseos, inquietudes y talentos y les dar la forma que quieras en el mejor de los casos, de manera que puedas transferirlo todo a un servidor web abierto al pblico. Tampoco aqu existe acuerdo. Todo depender de si trabajas en modo html 1st Page 2000 es una aplicacin reconocida y gratuita o WYSIWYG, cuyo espectro es tambin muy amplio, desde el popular y domstico FrontPage de Microsoft, hasta los profesionales y valiosos DreamWeaver o GoLive!, pasando por los accesibles pero potentes Namo Web Editor o NetObjects Fusion... Tampoco viene mal disponer de algn programa de diseo grfico. De una manera elemental podemos decir que los hay de dos tipos ms o menos puros, y un tercer tipo mixto. En uno de los casos se trata de aplicaciones de dibujo vectorial, es decir, aquellas que generan grficos desde cero mediante herramientas de trazado geomtrico, fundamentalmente, pero tambin a mano alzada; dicho de una forma ms llana, hablamos de dibujos de lneas y curvas. Pero no nos confundamos. Estos programas son madre de muchas de las mejores ilustraciones que vemos tanto en la Red como en publicidad impresa y en los envases de productos cotidianos. Actualmente se asume que Adobe Illustrator es el mejor en este campo; sin embargo, compite con el clsico indiscutible CorelDraw, adems de con Macromedia Freehand. Y, no obstante, existen alternativas baratas y eficientes, bien criticadas y admiradas en los medios, como ZonerDraw 4 o Xara. El segundo de los casos cuando hablamos de grficos es el retoque fotogrfico; o lo que es lo mismo, el trabajo de diseo visual sobre imgenes que normalmente combinan
fotografas reales con objetos diseados y efectos visuales. Tambin Adobe y Corel se disputan el pastel, de momento favorable al primero. Sus estrellas son Photo Shop y Photo Paint. Las alternativas ms accesibles suelen ser Paint Sho Pro de Jasc y Ulead Photo Impact. Una tercera opcin es el software que combina retoque fotogrfico y dibujo vectorial; cada vez ms, sta es una posibilidad que traen de serie todos los grandes programas, de manera que no hace falta cambiar de aplicacin para mezclar los modos de trabajo grfico.
Diseo adecuado
Qu significa adecuado? El diseo es una representacin formal y por tanto suele ser el primer punto de contacto entre la persona y el producto / servicio / persona. Para que un diseo sea adecuado se disponer de la informacin necesaria para conocer al cliente, mercado, consumidores, producto / servicio. Con esta informacin realizar los prototipos necesarios. Desarrollar el diseo final. Estilos Vs. Adecuacin Hay diseadores / consultores / "gurs" que defienden un estilo frente a la adecuacin del diseo a la necesidad. El estilo sea "neutro", "barroco", "limpio", "alemn", "americano" no es ms que un estilo y por tanto no puede ser el punto de partida para el desarrollo del diseo. El punto de partida debe ser el entendimiento de la necesidad del cliente. Las necesidades del cliente pueden depender de multitud de factores y no se pueden generalizar. Cada momento, cada regin, cada canal, cada precio, cada consumidor, hace que la necesidad sea diferente. La mejor herramienta que puede demostrar el diseador es la comprensin y entendimiento para luego poder realizar la solucin grfica. Diseo La adecuacin del diseo frente al estilo hace que los valores del mismo sean algo ms universales y duraderos. Es decir, si uno defiende un estilo (neutro, barroco) se puede ver comprometido por la realidad del entorno.
Los valores del diseo con los que me siento identificado suelen ser del estilo:

Ayuda. Cumple. Duradero. Se integra (con las personas, sistemas, usuarios).
El diseo debe ayudar a las personas. La ayuda puede ser de muchos tipos, puede ayudar a la gente a ganar ms dinero, a leer con ms facilidad, a saltar ms alto, a pasar un buen rato. El diseo cumple su funcin El diseo debe cumplir la funcin asignada. El diseo es una "utilidad" para llegar a un fin. Duradero. Lo efmero nos lleva al consumismo desmedido. Tender a que el diseo sirva hoy, maana, dentro de 10 aos. Esta leccin me ha llevado tiempo aprenderla. Integrado Este concepto hace referencia a que el diseo se ha de integrar en los procesos naturales de las personas. No hay que crear nuevos obstculos, sino dotar a las personas de mejores herramientas. Diseo no es diseo grfico y no es diseo industrial En muchas conversaciones se cita "diseo" aplicndolo sin mucho criterio a disciplinas que pasan por el diseo industrial, grfico, identidad... Visto desde fuera no pasa nada, pero desde dentro es como si hablando de deportes se citara el futbol, las barras paralelas y la natacin como si fueran la misma cosa. Supongo que una cosa es ser espectador de silln y otra subirse a una barra paralela a dar dos mortales. Diseo grfico. Comunicacin Color. Forma. Tipografa. Imgenes. Diseo industrial. Producto. Procesos industriales. Ergonoma. Materiales. "Diseo". Proceso "creativo". El proceso creativo de resolver un problema se puede llamar "diseo" pero es un trmino tan vago que por lo general no quiere decir nada. Buscar soluciones sin ataduras El diseo debe adecuarse a la resolucin del problema, evitando que un estilo nos condicione una forma de pensar o buscar soluciones.
14
Diseo Web. Problemas generales

Uso de Flash Las Facilidades y Utilidades que presenta flash son innumerables a la hora de interactividad, e impacto visual. Por otra parte la interactividad mejora notablemente en conexiones de cliente/servidor en sus ltimas versiones, desafortunadamente las webs 100% flash pueden traer algunos problemas en la incorporacin a buscadores.
Interactividad El diseador a la hora de buscar una solucin a la interactividad deber tomar en cuenta a que pblico est orientado el sitio. Unos de los principales problemas que se presenta en la interactividad, es la complejidad que el diseador le agrega al site, y sin opcin de volver atrs, o mostrar un mapa del site, logrando as que el usuario navegue secciones de subsecciones y quede perdido dentro de la pgina. Una pgina deber ser lo que se llama APT (a prueba de tontos) as logra el objetivo deseado, que el usuario encuentre su bsqueda. Incompatibilidad En este tema entramos en una dura lucha entre los exploradores ms famosos del mercado, pero a la hora de ser til en este rubro, se puede invocar a flash ya que se ejecuta con su proyector y muy rara vez tendrs problemas. Hay que tener mucho cuidado cuando se hacen pginas dinmicas, con php, asp, etc... Y tambin con los CSS que se va a incluir en la hoja de estilo, esto te puede traer algunos dolores de cabeza ya que los exploradores interpretan diferente y algunos dejan pasar de largo cdigo y otros no, o definen cdigo diferente. Entonces ah se entra en una disputa no solo con el cliente que quiere que su sitio se vea en todos los navegadores, sino tambin con uno mismo al intentar hacer que las cosas funcionen en varios navegadores. Una solucin viable es conocer a fondo los exploradores mas usados en el mercado, y saber como interpretan cdigo. Formularios Web Estoy seguro que a la mayora le molesta completar formularios Web. Estos mismos si bien son tiles, pueden lograr que un usuario deje de hacer su consulta y se retire del sitio. En mi opinin estos formularios deben ser absolutamente claros y concisos, y por supuesto evitar hacer preguntas intiles, sin olvidar que el formulario debe ser corto. (Preferencia general de los usuarios). Es til configurar una auto respuesta para que le quede al usuario un comprobante de lo consultado, ya que este mail puede causar un visita futura. Uso desconsiderado de Ventanas Actualmente nos encontramos invadidos por las publicidades en pop-ups, evite el uso de pop-ups en el sitio, primero porque ya los exploradores ms vendidos traen una
herramienta para bloquearlos y resulta molesto para el visitante tener que activarlo para ver el material que busca.
Conclusin a la introduccin al diseo web

Existe vida ms all de los grficos estticos? En realidad s. La opcin ms comn es Flash de Macromedia, que permite crear pelculas realmente complejas e interactivas combinando ilustraciones embebidas, grficos vectoriales, sonidos y ActionScript, el lenguaje de comandos especfico de Flash, amn de otras posibilidades muy bien conocidas. Adicionalmente est disponible el formato vectorial SVG. Conclusin En conclusin, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar y combinar variables tan dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivo de cara al usuario, y la efectividad tcnica de cara a la empresa que paga sus honorarios, como por ejemplo en el caso de tiendas on-line), este trabajo, deca, es un proceso largo que requiere un enorme grado de instruccin y aprendizaje tcnico, pero tambin generosas dosis de intuicin y anticipacin. A fin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atrs.
16
DISEO GRFICO
Una aproximacin al diseo grfico en general, con una descripcin de los elementos que componen habitualmente un diseo y las caractersticas principales que podemos encontrar en ellos. Podemos definir el diseo grfico como el proceso de programar, proyectar, coordinar, seleccionar y organizar una serie de elementos para producir objetos visuales destinados a comunicar mensajes especficos a grupos determinados. La funcin principal del diseo grfico ser entonces transmitir una informacin determinada por medio de composiciones grficas, que se hacen llegar al pblico destinatario a travs de diferentes soportes, como folletos, carteles, trpticos, etc. El diseo grfico busca transmitir las ideas esenciales del mensaje de forma clara y directa, usando para ello diferentes elementos grficos que den forma al mensaje y lo hagan fcilmente entendible por los destinatarios del mismo. El diseo grfico no significa crear un dibujo, una imagen, una ilustracin, una fotografa. Es algo ms que la suma de todos esos elementos, aunque para poder conseguir poder comunicar visualmente un mensaje de forma efectiva el diseador debe conocer a fondo los diferentes recursos grficos a su disposicin y tener la imaginacin, la experiencia, el buen gusto y el sentido comn necesarios para combinarlos de forma adecuada. El resultado final de un diseo grfico se denomina grafismo, y es una unidad por s misma, aunque est compuesto por multitud de elementos diferentes. Podemos establecer una analoga entre un grafismo y un plato de cocina. Ambos estn compuestos por diferentes elementos individuales que, unidos correctamente y con sabidura, componen una obra final nica y definida que va ms all de la suma de las partes que la forman. Formas, colores y textos en un grafismo
17
Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Un diseador grfico no es un creador de formas, sino un creador de comunicaciones, un profesional que mediante un mtodo especfico (diseo) construye mensajes (comunicacin) con medios visuales (grafismos). No es el creador del mensaje, sino su intrprete. El principal componente de toda composicin grfica es pues el mensaje a interpretar, la informacin que se desea hacer llegar al destinatario a travs del grafismo. Esta informacin se debe representar por medio de diferentes elementos grficos, que pueden ser muchos y variados, aunque los ms comunes son:

Elementos grficos simples: puntos y lneas de todo tipo (libres, rectas, quebradas curvas, etc.) Elementos geomtricos, con contorno o sin l: polgonos, crculos, elipses, valos, etc. Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes textuales. Grficos varios: logotipos, iconos, etc. Ilustraciones Fotografas Cualquier otro elemento visual apto para comunicar un mensaje.
Un diseo limpio
18
Estos elementos bsicos se combinan unos con otros en un grafismo, y de esta combinacin surge un resultado final en el que tienen mucha importancia una serie de conceptos propios del diseo grfico, entre los que destacan:

Las agrupaciones: conjuntos de elementos relacionados mediante proximidad, semejanza, continuidad o simetras. La forma: forma de cada elemento grfico aislado y de las agrupaciones de elementos. Los contornos: partes lmites de los elementos, que permiten distinguirlos de los dems y del fondo, pudiendo estar definidos mediante border, cambios de color o cambios de saturacin. La ubicacin: lugar que ocupa cada elemento grfico o agrupacin de ellos en el espacio del grafismo. El tamao: tamao relativo de cada elemento grfico respecto los que le rodean. Escalas. El color: color de cada elemento individual, colores de cada agrupacin de elementos, conjunto total de colores usado en un grafismo, disposicin relativa de los elementos con color y armona entre colores. El contraste: intensidad de visualizacin de cada elemento con relacin a los que le rodean y al grafismo completo. El equilibrio: cada grafismo conlleva un sistema de referencia espacial que consigue un nivel de equilibrio mayor o menor. La simetra : disposicin espacial regular y equilibrada de los elementos que forman la composicin grfica.
Los diferentes elementos de un grafismo son percibidos por el destinatario de acuerdo con la influencia que ejercen cada uno estos conceptos a nivel individual, grupal y total. Pero la unin de todos ellos, la obra grfica, es una entidad comunicativa individual y completa, cargada de complejos elementos humanos asociados con el lenguaje, la experiencia, la edad, el aprendizaje, la educacin y la memoria.
19
DISEO GRFICO EN LA WEB

El diseo web va ms all del diseo tradicional pues existen muchos limitadores relacionados con el medio donde se presentan las pginas: Internet. Conocemos las caractersticas fundamentales del diseo en la web. El diseo grfico de una pgina web es tan solo una parte del diseo de la misma, ya que, adems, hay que considerar un conjunto ms o menos extenso de condicionantes que van a limitar la libre creatividad del diseador. En primer lugar, las pginas web se deben descargar de un servidor web remoto por medio de Internet, por lo que el ancho de banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualizacin. La mayora de los usuarios se conectan todava a Internet con un mdem, con velocidades tericas de 56 Kbps, aunque en realizada no superar los 10-15 Kbps en el mejor de los casos. Los elementos grficos, ya tengan formato de mapa de bits o vectorial, suelen traducirse en ficheros de bastante peso, dependiendo del tamao de la imagen y del formato en que se guarde. Esto origina que las pginas que contienen en su diseo muchas imgenes, o pocas pero de gran tamao, tarden mucho tiempo en ser descargadas desde el servidor web y presentadas en la ventana del ordenador del usuario, que no suele ser muy paciente. Estudios realizados demuestran que el tiempo mximo de aguante de una persona que espera la descarga de una pgina suele ser de unos 10 segundos, pasados los cuales prefiere abandonar nuestro sitio web y buscar otro ms rpido. Por lo tanto, el nmero de elementos grficos que podemos introducir en una pgina web queda bastante limitado, teniendo que buscar alternativas mediante el uso imaginativo de fuentes y colores. Otro aspecto a tener en cuenta es que las pginas web son visualizadas en unas aplicaciones especficas, los navegadores web, que imponen grandes limitaciones al diseo de las mismas. La ventana de un navegador es eminentemente rectangular, con unas medidas concretas (dadas por la resolucin empleada por el usuario en su monitor) y con unas capacidades de interpretacin de colores que varan mucho segn el ordenador usado, el sistema operativo, el monitor y la tarjeta grfica. Estos factores imponen fuertes limitaciones al diseador web, que debe buscar siempre que sus pginas puedan ser visualizadas correctamente por el mayor nmero de usuarios. Diseo de un formulario web
20
En segundo lugar, los navegadores existentes en el mercado tienen una forma particular de presentar el contenido de las pginas. Internet Explorer interpreta en muchas ocasiones una pgina web de forma muy diferente a Netscape Navigator 4x, y este a su vez lo hace de forma diferente a Netscape Navigator 6x. Para intentar solventar estas diferencias, el diseador web debe trabajar a la vez con varios navegadores, diseando sus pginas de tal forma que la interpretacin de ellas sea similar en todos, lo que impone nuevas limitaciones al diseo. Por otra parte, una pgina web no es un diseo grfico esttico, sino que contiene diferentes elementos que tienen la capacidad de interaccionar con el usuario, como mens de navegacin, enlaces, formularios, etc. Adems, una pgina aislada no existe, sino que forma parte de un conjunto de pginas inter-relacionadas entre s (el sitio web), que deben presentarse al usuario con el mismo estilo, aunque su funcionalidad sea muy diferente. A esto hay que sumar que las pginas diseadas deben luego construirse en un lenguaje especfico, el HTML, que por s mismo es muy limitado, lo que hace que el diseador web tenga que estar siempre pensando si la interfase que est diseando grficamente va a poder ser luego construida. Por ltimo, una pgina web suele ocultar, en la mayora de los casos, una serie de procesos complejos que se ejecutan sin que el usuario sea consciente de ellos (ejecucin de cdigos de lenguajes de programacin tanto en cliente como en servidor, acceso a bases de datos en servidores remotos, etc.), procesos que aaden tiempo a la presentacin de las pginas y que muchas veces suelen afectar de forma importante al diseo de estas, ya que el diseador no sabe de antemano qu contenidos concretos van a tener. Resumiendo: el diseo web va ms all del diseo grfico, al influir en l multitud de factores que limitan las posibilidades del diseo, pero tambin otros que aaden interactividad y funcionalidades a una pgina web que no tiene un cartel, folleto o revista.
21
COMPONENTES GRFICOS DE UN ORDENADOR

Descripcin de los principales componentes grficos de un ordenador: La tarjeta de grficos y el monitor. Los principales componentes de un ordenador encargados de la interpretacin y presentacin de colores son la tarjeta grfica y el monitor. La tarjeta grfica o de vdeo es el componente hardware encargado de procesar los datos grficos que enva el procesador, interpretarlos y codificarlos en voltajes adecuados que son enviados luego al monitor para su presentacin en pantalla. Tarjeta grfica
Existen diferentes modelos de tarjeta grfica, que van desde las ms simples, incluidas en la placa base, hasta las ms avanzadas, verdaderos mini-ordenadores, con su propio procesador, memoria, bus, etc. Los monitores son los dispositivos encargados de presentar al usuario las interfaces de las aplicaciones que se ejecutan en el ordenador. Todos sabemos cmo es un monitor por fuera, ya que estamos acostumbrados a los monitores de los televisores, algo tan comn en nuestras casas. Interiormente, los monitores varan unos de otros en funcin de su calidad, de la forma de manejar de voltajes y de la tecnologa grfica empleada. Monitor CRT
Los monitores ms comunes son los CRT o de rayos catdicos, formados por un tubo en cuyo interior se ha hecho el vaco, en uno de cuyos extremos se sitan tres caones de electrones, uno por cada color primario, y en el otro una pantalla de cristal, cuya parte externa es la que ve el usuario.
22
Tubo de rayos catdicos de un monitor CRT
Los electrones generados en los caones por calentamiento son impulsados hasta la parte interna de la pantalla, que se encuentra recubierta por pequeos grupos de fsforo pigmentado en cada uno de los tres colores primarios (rojo, verde y azul). Estos grupos reciben el nombre de tradas, y se corresponden con un punto de la pantalla, denominado pxel, que aparecer de un color u otro segn la intensidad de los electrones que le llegue de cada can. Una caracterstica importante es el paso de punto (dot pitch), distancia diagonal entre dos puntos vecinos del mismo color, que determina el mnimo tamao de un detalle que es capaz de resolver una pantalla. Cuanto menor sea esta distancia, mayor ser la nitidez. Se mide en puntos por pulgada (ppp). La resolucin mxima distinguible en una pantalla de 800x600 es de 72 ppp y en una de 1024x768 es de 93 ppp. Estos son valores tericos y en la prctica son algo mayores. Paso de punto y pixel
Segn la resolucin empleada, los pxeles (unidad mnima de informacin) son representados en pantalla por una o ms tradas, con lo que la adaptacin a las diferentes
resoluciones es muy buena. Con objeto de que los electrones lleguen de forma ordenada e impacten justo en el punto adecuado, entre la pantalla y los caones se sita una mscara o rejilla que filtra los electrones y los dirige a sus puntos destino de forma adecuada. La representacin de una imagen en pantalla se realiza mediante barridos de los rayos de electrones, que recorren toda la pantalla de izquierda a derecha y de arriba hacia abajo. La velocidad con la que se realiza esta operacin se denomina frecuencia de refresco vertical o refresco de pantalla, se mide en Hz (hertzios) y debe estar por encima de 60 Hz, preferiblemente 70 u 80. A partir de esta cifra, la imagen en la pantalla es sumamente estable, sin parpadeos apreciables, con lo que la vista sufre mucho menos. La frecuencia de refresco vertical de nuestro monitor podemos averiguarla accediendo a la pantalla de configuracin del monitor, a la que se accede en sistemas Windows mediante las selecciones: Inicio > Panel de control > Pantalla > Configuracin > Opciones avanzadas > Monitor Tambin podemos en esta pantalla cambiar la frecuencia de refresco, pero antes de hacerlo es aconsejable consultar el manual del monitor, ya que una frecuencia incorrecta puede resultar bastante perjudicial. Monitor LCD
Otro tipo de monitores son los LCD o de cristal lquido, que se diferencian de los anteriores en que en ellos las tradas estn formadas por cristal lquido en vez de fsforo pigmentado, y en que los haces de electrones son guiados por polarizacin magntica. Adems, en los monitores LCD trabajan con una trama de pxeles concreta, siendo fijo el tamao de cada uno, por lo que al cambiar a una resolucin inferior pueden quedar franjas de pxeles desactivadas. Sea cual sea el tipo de tarjeta grfica y monitor usado, es fundamental tener instalados y actualizados los drivers propios de estos componentes. Un driver es un conjunto de libreras de software especficas encargadas de configurar y controlar los dispositivos de hardware. Cada componente necesita para funcionar bien los drivers adecuados, que generalmente vienen junto a ste en un disquete o en un CD. Con el avance de las funcionalidades de los sistemas operativos y de los dems componentes de software y hardware de los equipos informticos, se hace necesaria una actualizacin constante de los drivers de los monitores y tarjetas de video. Estas versiones actualizadas suelen ofrecerlas los distintos fabricantes en sus sitios web, por lo que es muy importante visitar estos cada cierto tiempo para bajar las versiones actualizadas de los drivers e instalarlos en nuestro equipo, con objeto de no perder capacidades y de evitar incompatibilidades con los nuevos sistemas operativos.
Si tenemos instalada una tarjeta grfica en nuestro ordenador, generalmente los drivers de esta (controlador) son los responsables de manejar de forma adecuada el monitor. Para acceder a la propiedades del controlador, basta seguir la ruta: Inicio > Panel de control > Pantalla > Configuracin > Opciones avanzadas > Monitor >Propiedades > Controlador Desde esta ventana podemos ver el tipo de controlador instalado y si est funcionando bien o tiene algn problema. Tambin actualizarlo, para lo que es necesario tener previamente los nuevos drivers, ya que tendremos que indicar su localizacin en nuestros discos duros. Una consideracin importante: hay que estar seguro que el driver que vamos a instalar se corresponde con el de nuestra tarjeta grfica o monitor, ya que un driver inadecuado puede originar un mal funcionamiento de los componentes grficos.
RESOLUCIN DE LA PANTALLA
Consideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio disponible para cada caso. Las aplicaciones encargadas de presentar las pginas web son los navegadores (browsers), entre los que cabe destacar por su importancia y difusin Internet Explorer, Netscape Navigator y Opera. La interfaz de un navegador, en su modo estndar, presenta al usuario una o ms barras superiores (de mens, de direccin, etc.), una barra inferior (la barra de estado) y un espacio principal, la ventana, en el que son presentadas las pginas web. La forma de esta ventana es siempre rectangular, pero su tamao vara, dependiendo del monitor y de la tarjeta grfica. Podemos hablar de dos tamaos de pantalla diferentes:

Tamao absoluto: es el tamao "real" de la ventana del monitor, medido generalmente en pulgadas. Depende del monitor. Resolucin o tamao relativo : viene determinada por el nmero de pixels que se muestran en la ventana del monitor, siendo el pxel la unidad mnima de informacin que se puede presentar en pantalla, de forma generalmente rectangular. Depende de la tarjeta grfica.
El tamao absoluto se suele expresar en pulgadas de diagonal (1 pulgada = 25,4 mm). El ms comn en la actualidad es de 17 en ordenadores de sobremesa, aunque todava quedan bastantes equipos antiguos con monitores de 15 y existen en el mercado bastantes de 21. El tamao absoluto de los monitores de los equipos porttiles suele ser de 14-15. En cuanto a la resolucin, los valores ms comunes son de 800x600 y de 1024 x768 pixels, aunque quedan todava usuarios que trabajan por debajo, a 640x480, y por encima, a resoluciones de 1152x864 y 1280x960 pixels. El tamao absoluto y la resolucin deben estar en concordancia para una visualizacin correcta, siendo valores aceptables los siguientes:

14" - 15": Resolucin mxima apreciable: 800x600 17": Resolucin mxima apreciable: 800x600 1024x768 21": A partir de 1024 x 768
25
Las posibles resoluciones de trabajo de un equipo dependen sobre todo de la calidad del monitor y de la tarjeta grfica del ordenador, y se configuran, en sistemas operativos Windows, bien haciendo click con el botn derecho del ratn sobre el escritorio, seleccionando la opcin Propiedades y accediendo a la pestaa Configuracin, bien desde Inicio > Panel de control > Pantalla. La importancia de la resolucin de pantalla sobre la forma de ser visualizadas las pginas web en la ventana del navegador es muy importante. A mayor resolucin se dispone de ms puntos de informacin para presentar los elementos en pantalla, pero estos puntos son ms pequeos, con lo que los elementos de la interfaz (textos, imgenes, objetos de formulario, etc.) se ven ms pequeos. Tamao de pgina y resoluciones
Si diseamos una pgina para una resolucin dada, ocupando toda la ventana del navegador, aquellos usuarios que la visualicen a resoluciones menores no tendrn espacio en pantalla para contener toda la pgina, por lo que se vern obligados a usar las barras de desplazamiento del navegador. Por el contrario, aquellos usuarios que la visualicen a resoluciones mayores tendrn demasiado espacio en pantalla para tan poca pgina, por lo que les quedar bastante espacio vaco, sin contenidos. Para solucionar estas diferencias, lo normal es que se diseen las pginas web para una resolucin base, generalmente la ms usada en la actualidad (800x600), y se construyan internamente mediante tablas o capas de tamaos relativos, con anchuras definidas en %, con lo que se consigue que al ser visualizadas en monitores de ms resolucin se "abran", ocupando todo el espacio de pantalla disponible. Las pegas que tiene este sistema son que no da soporte a los usuarios de con menores resoluciones y que, en el caso de resoluciones mayores, el diseo de la pgina puede verse seriamente afectado al modificar sus elementos las dimensiones originales. Otra posibilidad es maquetar toda la pgina dentro de un contenedor padre (una tabla o capa) y asignar a ste una alineacin centrada, con lo que la pgina quedar en el centro de la pantalla si se usa una resolucin mayor que la de diseo.
26
COLORES DE UN ORDENADOR
Cmo trabajan los ordenadores para codificar un color. El formato RGB. El ojo humano puede distinguir aproximadamente entre 7 y 10 millones de colores. Debido a esto la vista es para nosotros el principal sentido que nos une con el exterior, de tal forma que sobre el 80% de la informacin que recibimos del mundo exterior es visual. Pintores y diseadores grficos utilizan esta capacidad humana de apreciar colores para crear obras que profundicen en el alma y que inspiren sentimientos en los seres que las contemplan. Pero qu podemos hacer cuando debemos expresarnos con un nmero limitado de colores?. Los ordenadores trabajan con tres colores bsicos, a partir de los cuales construyen todos los dems, mediante un proceso de mezcla por unidades de pantalla, denominadas pixels. Estos colores son el rojo, el azul y el verde, y el sistema s definido se conoce como sistema RGB (Red, Green, Blue). Cada pxel tiene reservada una posicin en la memoria del ordenador para almacenar la informacin sobre el color que debe presentar. Los bits de profundidad de color marcan cuntos bits de informacin disponemos para almacenar el nmero del color asociado segn la paleta usada. Con esta informacin, la tarjeta grfica del ordenador genera unas seales de voltaje adecuadas para representar el correspondiente color en el monitor. A ms bits por pxel, mayor nmero de variaciones de un color primario podemos tener. Para 256 colores se precisan 8 bits (sistema bsico), para obtener miles de colores necesitamos 16 bits (color de alta densidad) y para obtener millones de colores hacen falta 24 bits (color verdadero). Existe tambin otra profundidad de color, 32 bits, pero con ella no se consiguen ms colores, sino que los que usemos se muestren ms rpido, ya que para el procesador es ms fcil trabajar con registros que sean potencia de 2 (recordemos que trabaja con nmeros binarios).
Cuanto mayor es el nmero de colores, mayor ser la cantidad de memoria necesaria para almacenarlos y mayores los recursos necesarios para procesarlos. Por este motivo, los ordenadores antiguos disponen de paletas de pocos colores, normalmente 256, al no tener capacidad para manejar ms sin una prdida notable de prestaciones. Para representar un color en el sistema RGB se utilizan dos formas de codificacin diferentes, la decimal y la hexadecimal, correspondindose los diferentes valores con el porcentaje de cada color bsico que tiene un color determinado.
27
28
Porcentajes de color y cdigos
Por ejemplo, un rojo puro (100% de rojo, 0% de verde y 0% de azul) se expresara como (255,0,0) en decimal, y como #FF0000 en hexadecimal (delante de el cdigo de un color en hexadecimal siempre se sita un smbolo almohadilla). De los 256 colores bsicos, el propio sistema operativo de queda con 40 para su gestin interna, con lo que disponemos de 216 colores. De ellos, 18 se corresponden con la gamas de los colores primarios, correspondientes a 6 tonos de rojo, 6 de azul y 6 de verde: Gamas de colores primarios
Y el resto, los colores secundarios, son combinaciones de estas gamas de colores primarios: Colores secundarios Si usamos una profundidad de color de 24 bits, correspondiente a millones de colores, disponemos de una amplia gama para trabajar, pero siempre teniendo en cuenta que slo sern compatibles los colores que tengan su equivalente en el sistema de 256 colores, es decir, aquellos en los que cada color primario viene definido por una pareja de valores iguales, debiendo estos ser 00,33,66,99,CC o FF. Cuando usamos una profundidad de color de 16 bits disponemos de miles de colores, pero el problema es que debido a la divisin de esta gama de colores, los valores obtenidos no se corresponden con los equivalentes en 256 colores ni en millones de colores. Por ejemplo, #663399 es el mismo color a 256 y a millones, pero no es igual que el obtenido con miles de colores. Como el cdigo de un color dado puede ser difcil de recordar, se ha adoptado una lista de colores a los que se le ha puesto un nombre representativo en el idioma ingls (red, yellow, olive, etc.), de tal forma que los modernos navegadores interpretan el mismo y lo traducen internamente por su valor hexadecimal equivalente.
29
CALIBRACIN DEL MONITOR

Una composicin grfica puede verse con diferentes tonalidades dependiendo de la configuracin del monitor. Tenemos que calibrar el monitor para que el aspecto de nuestra obra sea el mismo en todos los ordenadores. Las composiciones grficas pueden aparecer de manera diferente en los distintos monitores, debido principalmente a la diferencia en los parmetros que definen la calidad y las caractersticas luminosas y cromticas de cada uno de ellos. Esto puede originar, por ejemplo, que al realizar un composicin seamos nosotros mismos los engaados, al no corresponder los colores que vemos en pantalla a los reales que estamos codificando en el grafismo. O que el aspecto visual de una pgina web diseada en un monitor mal configurado no se corresponda con al que luego vern los usuarios, con la consiguiente prdida de control y de calidad que ello supone. Para evitar estos errores se hace preciso utilizar unos valores estndar de los parmetros de configuracin, que hagan posible que el aspecto de una obra grfica sea el mismo en cualquier ordenador configurado segn los mismos valores. Estos valores suelen corresponderse con los que trae un monitor al salir de fbrica, y la recuperacin de los mismos recibe el nombre de calibracin. La calibracin es el proceso de ajuste de la configuracin de la conversin de color del monitor a un nivel estndar, de manera que la imagen se presenta de igual manera en diferentes monitores.
El mtodo ms simple de calibracin pasa por el uso de imgenes cartas de ajuste, similares a las que aparecan en el televisor antes de empezar la emisin. Son imgenes formadas por diferentes lneas de colores, unas finas y otras ms gruesas, que se pueden tomar como referencia para realizar un ajuste totalmente manual, usando para ello los controles que posee el monitor. Es un mtodo poco fiable, ya que los ajustes son totalmente subjetivos.
30
Otro mtodo de calibracin ms avanzado son las herramientas de gestin del color que facilitan ciertos programas de aplicacin, como Adobe Photoshop, que incluye una herramienta bsica, denominada Adobe Gamma, que puede ser utilizada para eliminar tonalidades de color y estandarizar la presentacin de las imgenes. A esta herramienta se accede a travs de men Ayuda > Gestin del color > Abrir Adobe Gamma, con el que accedemos a una pantalla que nos permite ajustar los valores directamente o por medio de un asistente. Una vez calibrado el monitor, los valores pueden ser almacenados en un fichero para las sucesivas reconfiguraciones. Calibrador de monitor
Pero sin duda la mejor forma de calibrar un monitor es utilizar hardware especfico para ello. El funcionamiento vara segn el dispositivo usado Unos se conectan directamente al monitor para recogida de datos binarios, permitiendo un ajuste individual directo de cada uno de los caones. Otros se basan en situar frente a la pantalla del monitor diferentes medidores (calormetros, colormetros, etc.) para recoger datos, suministrando una lectura de los valores actuales y proporcionando los valores idneos de configuracin. Sea cual sea el mtodo elegido, para una correcta configuracin del monitor deberemos ajustar una serie de parmetros, entre los que se incluyen los siguientes: Brillo Tambin llamado luminosidad, define la relacin no lineal entre la tensin de entrada y la luminancia de salida, es intrnseco de la fsica del entorno de los caones de electrones y no depende de la iluminacin ambiente. De otra forma, el brillo es la intensidad de luz emitida sobre un rea especifica, por lo que
los cambios de brillo pueden oscurecer o aclarar todo el contenido de la pantalla. Los monitores tradicionales (CRT) generan aproximadamente de 80 a 100 cd/m (candela por metro cuadrado). En el caso de monitores LCD, no se admiten valores inferiores a 150 cd/m . En cuanto al tipo de ordenador, en un PC el brillo no se corrige internamente, por lo que si una imagen se ve bien en el PC donde se crea, se ver igualmente bien en todos. En los Mac, por el contrario, existe una correccin adaptada al de las primeras impresoras lser para Mac, por lo que una imagen creada en un Mac se ve algo ms oscura en un PC. El brillo tpico de un monitor de PC es de 2,35 (+/- 0,1). La de un sistema Mac es de 1,8. Para Internet se pueden crear las imgenes ajustando la gamma a un valor intermedio ponderado entre PC y Mac. Ajustes del brillo
Si el valor del brillo en un monitor es bajo, los colores luminosos se oscurecern, pareciendo grises. Por el contrario, si el brillo es elevado, sern los colores oscuros los que pierdan profundidad, virndose a grises. Contraste El contraste es la relacin existente entre la intensidad luminosa del punto ms claro y el ms oscuro de una imagen. Cuanto mayor sea el valor de contraste, mejor ser la legibilidad. Si tenemos una fotografa con lo un punto blanco y otro negro y estos mismos en un monitor, generalmente el contraste en un monitor (170:1) es superior al que se da en una fotografa (100:1), pero si el ambiente est muy iluminado, el punto negro deja de ser negro y la relacin de contraste puede bajar bastante (hasta 50:1). Esta situacin se agrava cuando hay reflejos en la pantalla que, adems, producen fatiga al usuario. Ajustes del contraste
Para una correcta calibracin de contraste hay que buscar valores de 100:1, es decir, que el punto blanco tenga 100 veces ms luminosidad que el punto negro (valor cercano a 2,2). Color El color en un monitor es producido por la suma de diferentes intensidades de los colores bsicos (rojo, verde y azul), mediante un proceso denominado adicin de colores. La calibracin del color consiste en el proceso de ajustar el color de un dispositivo a un
estndar establecido para conseguir que los colores de una composicin grfica se aprecien igual en todos los monitores calibrados.
33
Ajustes de la tonalidad
Se debern ajustar los diferentes parmetros que definen las cualidades de los colores, como tono, saturacin, gamma, balance de colores primarios, etc. Resumiendo: Es muy importante que a la hora de disear nuestras pginas web y sus elementos grficos tengamos nuestro monitor bien configurado, ya que en caso contrario los resultados que obtengamos no sern reales, producindose diferencias apreciables entre lo que ven los usuarios en sus ordenadores y el trabajo que hemos desarrollado, con la consiguiente prdida de control y de calidad que ello conlleva.
34
FORMAS BSICAS EN DISEO GRFICO

El lenguaje visual a travs de grafismos puede descomponerse en entidades bsicas, cada una de las cuales tiene por s misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativos distintos. Estamos acostumbrados a comunicarnos con nuestros semejantes mediante el lenguaje hablado, verbal, formado por una serie de elementos bsicos (letras, palabras, frases, etc.) que, combinados, forman entidades comunicativas complejas. De igual modo, el lenguaje visual a travs de grafismos puede descomponerse en entidades bsicas, cada una de las cuales tiene por s misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativos distintos. Estas entidades grficas constituyen la sustancia bsica de lo que vemos. Por lo tanto, son muy importantes y todo diseador debe conocerlas y manejarlas perfectamente. Las formas bsicas del diseo grfico son pocas: el punto, la lnea y el contorno. Pero son la materia prima de toda la informacin visual que aporta una composicin. Cada una de ellas posee un conjunto de caractersticas propias que las modifican y condicionan, entre las que destacan: Forma: definida por disposicin geomtrica. La forma de una zona o contorno va a permitirnos reconocerlas como representaciones de objetos reales o imaginarios.
Direccin: proyeccin plana o espacial de una forma, continuacin imaginaria de la misma an despus de su finalizacin fsica. Puede ser horizontal, vertical o inclinada en diferentes grados.
Color: tal vez las ms importante y evidente, puede imprimir un fuerte carcter y dinamismo a los elementos a los que se aplica. Toda forma o zona tendr en general dos colores diferentes, el de su contorno y el de su parte interna, pudiendo aplicarse tanto colores puros como degradados de colores.
35
Textura: modificacin o variacin de la superficie de los materiales, sirve para expresar visualmente las sensaciones obtenidas mediante el sentido del tacto o para representar un material dado. La textura est relacionada con la composicin de una sustancia a travs de variaciones diminutas en la superficie del material, y se consigue en una composicin grfica mediante la repeticin de luces y sombras o de motivos iguales o similares.
Escala: tamao relativo de una zona respecto a las dems y al total de la obra. Los diferentes tamaos de las diferentes zonas modifican y definen las propiedades de cada una de ellas.
Dimensin: capacidad tridimensional de un elemento o zona. La dimensin slo existe en el espacio real tridimensional, pero se puede simular en una composicin grfica plana mediante tcnicas de perspectiva, sombreado o superposicin. Tambin, mediante el uso de fotografas, que introducen espacios tridimensionales en la composicin.
36
Movimiento: propiedad muy importante, que aporta connotaciones de dinamismo y fuerza. En las obras grficas puras no existe movimiento real, pero s se encuentra implcito en ciertos elementos y se puede conseguir con ciertas tcnicas que engaan al ojo humano (diseo cintico, pintura cintica) o representando elementos que s lo tienen en el mundo real.
En las pginas web podemos introducir animaciones grficas que aportan sensaciones de movimiento mucho mayores, como animaciones Flash, gifs animados, capas dinmicas, elementos de vdeo, etc.
EL PUNTO
El punto es la unidad mnima de informacin visual, y est caracterizado por su forma, tamao, color y ubicacin. El punto es la unidad mnima de informacin visual, y est caracterizado por su forma (generalmente circular, pero tambin puede ser rectangular, como ocurre en los monitores, triangular o una mancha sin forma definida), por su tamao, por su color y por la ubicacin que tenga dentro de la composicin grfica.
Las principales caractersticas del punto son:

Tiene un gran poder de atraccin visual, creando tensin sin direccin. Cuando se sitan prximos dos puntos pueden producir sensaciones de tensin o de direccin, creando en la mente del espectador una lnea recta imaginaria que los une. Si se sitan diferentes puntos en prolongacin sugieren una direccin, un camino, ms acentuada cuanto ms prximos estn los puntos entre s.
Cuando se agrupan varios puntos pueden definir formas, contornos, tonos o colores (pensemos en la pintura impresionista).
37
Los puntos aislados son poco usados en el diseo web. Sin embargo, las sucesiones de puntos prximos son un buen elemento para dirigir la atencin del visitante, para guiar su mirada a una zona concreta, para establecer relaciones entre elementos o para separar zonas de la pgina. LA LNEA La lnea es el elemento bsico de todo grafismo y uno de los ms usados. Representa la forma de expresin ms sencilla y pura, pero tambin la ms dinmica y variada. La lnea es el elemento bsico de todo grafismo y uno de los ms usados, teniendo tanta importancia en un grafismo como la letra en un texto. Representa la forma de expresin ms sencilla y pura, pero tambin la ms dinmica y variada. Est formada por la unin de varios puntos en sucesin, pudindose asimilar a la trayectoria seguida por un punto en movimiento, por lo que tiene mucha energa y dinamismo. Su presencia crea tensin y afecta al resto de elementos cercanos a ella. Las principales propiedades de la lnea son:

Contiene gran expresividad grfica y mucha energa. Casi siempre expresa dinamismo, movimiento y direccin. Crea tensin en el espacio grfico en que se encuentra. Crea separacin de espacios en el grafismo. La repeticin de lneas prximas genera planos y texturas.
En una composicin define direccionamiento, que estar ms acentuado cuantas ms lneas paralelas haya. Esta cualidad se puede usar para dirigir la atencin en una direccin concreta, haciendo que el espectador observe el lugar adecuado.
Una lnea divide o circunda un rea, se encuentra en el borde de una forma. Expresa separacin de planos, permitiendo al diseador usarla como elemento delimitador de niveles y reas en la composicin.
Las propiedades de una lnea vendrn definidas por su grosor, su longitud, su orientacin (direccin) respecto a la pgina, su ubicacin (posicin), su forma (recta o curva) y su color. Estas propiedades se vern afectadas tambin por el nmero de lneas que haya en la composicin, su proximidad y la orientacin relativa entre ellas. La lnea es considerada como tal mientras la relacin ancho/largo no sobrepase una proporcin determinada. Una lnea ms ancha que la mitad de su largo pierde la expresin dinmica del trazo y adquiere la esttica de una superficie cuandrangular. La unin sucesiva de lneas conforma un trazo. Los trazos dan volumen a los objetos que dibujamos y permiten representar simblicamente objetos en la composicin, eliminando de ellos toda informacin superflua y dejando slo lo esencial.
La lnea pueden tener los bordes lisos o dentados, con extremos rectos, redondeados o en punta. Su cuerpo puede ser slido o texturado, y su direccin puede ser curva o recta. Y cada una de estas caractersticas matizar la forma en que es interpretada una lnea por el espectador. Podemos considerar diferentes tipos de lneas, cada uno de los cuales tiene sus propias cualidades: Lnea recta Define el camino ms corto entre dos puntos. Es poco frecuente en la naturaleza, donde predominan las lneas curvas (el universo en su totalidad es curvo), pero muy abundante en el entorno humano, que necesita de ellas para dar estabilidad a sus creaciones.
39
La lnea recta horizontal expresa equilibrio, calma, equilibrio estable. No hay estabilidad sin una lnea recta horizontal de referencia, una lnea de horizonte, ya que nos movemos en un plano horizontal. Las lneas rectas horizontales son muy usadas en las pginas web, tanto que el lenguaje HTML proporciona una etiqueta especfica para introducirlas, HR. Se utilizan sobre todo como elemento delimitador de bloques de contenido en pginas de poco contenido grfico, siendo conveniente no presentarlas con efecto tridimensional, sino como una simple lnea plana (atributo noshade). La lnea recta vertical sugiere elevacin, movimiento ascendente, actividad. Tambin expresa equilibrio, pero inestable, como si estuviera a punto de caer. Esto se puede corregir haciendo trabajar las lneas verticales con otras horizontales de apoyo, que les darn la estabilidad de que carecen.
En una pginas web, las lneas rectas verticales pueden ser usadas para separar columnas textuales o bloques de contenidos, bien como lneas frontales, con un color que destaque lo suficiente sobre el fondo, bien como lneas de fondo, del mismo color que ste, separando zonas de un color diferente.
La lnea recta inclinada, por el contrario, expresa tensin, inestabilidad, desequilibrio. Parecen que estn a punto de caerse. Dentro de las lneas inclinadas, la que forma 45 con la horizontal es la ms estable y reconocible. Lnea curva Es la lnea ms libre y la ms dinmica de todas, pudiendo sugerir desde un movimiento perfectamente definido hasta un movimiento catico, sin reglas.
40
Est muy asociada al ser humano, que escribe y dibuja casi siempre con lneas curvas. Las curvas ms comnmente usadas en diseo grfico digital son las curvas Bzier. Este tipo de curvas fue desarrollado por Pierre Bzier por encargo de la empresa Renault, que buscaba una familia de curvas representables matemticamente (son curvas de tercer grado) que permitieran representar las curvaturas suaves que deseaban dar a sus automviles.
Una curva Bzier queda totalmente definida por cuatro puntos caractersticos, los puntos inicial y final de la curva y dos puntos de control (manejadores) que definen su forma. Para modificar su forma, basta cambiar de posicin uno de sus puntos de control. Son curvas de manejo poco complejo y muy elegantes, con un desarrollo muy suave, capaces de adaptarse a casi cualquier forma imaginable, por lo que son muy usadas para disear logotipos e iconos y para copiar cualquier figura. Tambin son enormemente verstiles, pudiendo adoptar desde curvaturas muy suaves (casi lneas rectas) a curvaturas muy fuerte (curvas complejas), pasando por todos los valores intermedios. Pueden, incluso, cambiar de cncavas a convexas alrededor de un punto.
En el diseo web, el uso de lneas curvas aisladas est muy limitado. Es ms comn encontrarlas como partes integrantes de formas ms complejas, siendo tiles, por ejemplo, para suavizar la dureza de una forma rectangular en uno o ms de sus lados (como los botones).
41
Un factor a tener en cuenta siempre que se trabaje con lneas curvas en una pgina web es el efecto de escalado producido al no ser capaz el sistema grfico de los ordenadores de representar con exactitud formas curvas por medio de pxeles. Es el tpico efecto de "dientes de sierra" que aparece en todos los objetos con partes curvas, efecto que aumenta con el tamao del objeto.
Una solucin a este problema visual es incluir las lneas curvas como imgenes en formato web (GIF, JPG, PNG, etc.) y aplicarles el proceso de rastrillado o antialias, disponible en casi todas las aplicaciones grficas, por medio del cual se crean uno o ms pxeles entre los bordes de la lnea y el fondo, de un color intermedio entre ellos. Trazo Un trazo es el elemento lineal formado por la unin sucesiva de diferentes lneas. Es tal vez la forma grfica ms humana, la que mejor representa nuestra forma natural de dibujar.
Un trazo heredar las propiedades de las lneas que lo crean, existiendo trazos rectos, curvos o mixtos.
EL CONTORNO
El contorno es el objeto grfico creado cuando el trazo de una lnea se une en un mismo punto.
42
Podemos definir el contorno como el objeto grfico creado cuando el trazo de una lnea se une en un mismo punto. Es decir, cuando una lnea continua empieza y acaba en un mismo punto.
Todo contorno delimita dos zonas, una acotada (el contorno y su interior) y otra infinita (el fondo), crendose un sub-mundo grfico particular en cada forma definida por cada contorno. La lnea base de un contorno define la complejidad de ste y sus propiedades. Cuando una lnea se cierra sobre s misma, el contorno creado determina un espacio interno, crendose una tensin entre este espacio y sus lmites, otorgando a la lnea creadora un gran poder de atraccin visual.
Las cualidades grficas de un contorno estarn definidas por las lneas que lo crean y las propiedades de stas. Los principales contornos son el cuadrado, la circunferencia y el tringulo, a los que podemos aadir los contornos mixtos y los orgnicos.
EL CUADRADO
Elementos de diseo: el cuadrado. El cuadrado es la figura geomtrica formada por cuatro lneas rectas de igual longitud, denominadas lados, que forman ngulos perfectamente rectos en los puntos de unin entre ellas (esquinas a 90).
43
El cuadrado es una figura muy estable y de carcter permanente, asociada a conceptos como estabilidad, permanencia, honestidad, rectitud, limpieza, esmero y equilibrio. La figura derivada del cuadrado por modificacin de sus lados es el rectngulo, de propiedades anlogas al cuadrado, aunque sugiere menos perfeccin y estabilidad.
El cuadrado expresa direccionalidad horizontal y vertical, referencia primaria con respecto al equilibrio y el bienestar. Es menos sugerente y ms neutro que los rectngulos, pero ms slido. Invita a mirar su centro y pasear la mirada en espiral en torno a ese punto.
Los rectngulos horizontales aportan solidez, estabilidad, dan la sensacin de ser difciles de volcar. Cuando son de gran tamao permiten que la mirada el espectador se pasee de un lado a otro, en sentido horizontal.
44
Los rectngulos verticales, por el contrario, da sensacin de menos solidez, es menos estable, parece que puede volcarse en cualquier momento. En ellos, la mirada del espectador no puede de un lado a otro, pero puede moverse verticalmente, dando sensacin de elevacin, y es apto para representar aquellos objetos que en la realidad tienen una forma ascendente.
Los cuadrados y rectngulos vern modificadas sus cualidades visuales segn su forma, tamao, color del contorno y rea interna, ubicacin, escala, etc. La proyeccin tridimensional del cuadrado es el hexaedro o cubo, cuerpo geomtrico muy asociado a las obras propias del ser humano, como los edificios. Los rectngulos son las formas ms naturales para un ordenador, ya que el monitor y las ventanas de los sistemas operativos grficos son todas rectngulos horizontales. Una pgina web posee una forma claramente rectangular, definida por la ventana del navegador. Adems, los elementos web (tablas, capas, animaciones Flash, applets de Java, etc.) son de forma rectangular. Esto hace que los rectngulos sean especialmente adecuados para su uso en las pginas web, proporcionando equilibrio y estabilidad a las mismas.
45
Sin embargo, es conveniente seguir una serie de pautas a la hora de usar rectngulos, con vistas a evitar la monotona y el aspecto artificial de una pgina demasiado cuadriculada:

Cada rectngulo debe estar alineado con los dems objetos de la pgina que le rodean. El tamao del rectngulo debe ser mayor que el contenido del mismo, lo suficiente como para que ste se presente libre, con espaciados convenientes por los cuatro lados. No usar en las tablas bordes por defecto, es decir, grises y con efectos de relieve. Si se usan para separar lgicamente registros, es mejor asignarles un borde fino (sobre 1 pxel) de un color que contraste suficientemente con el borde, pero que no resulte llamativo en exceso. De todas formas, es preferible utilizar otros mtodos para obtener la separacin, como filas de dos colores alternativos (pijamas). Si de desea situar en la pgina varios rectngulos de funcionalidad anloga (caso de elementos de un men de navegacin, por ejemplo), es preferible posicionarlos en series horizontales, ya que se percibirn ms como una lnea que como un conjunto rectangular.
La dureza visual de los rectngulos se puede suavizar aadindoles otros elementos que los modifiquen en parte. Un ejemplo de esto son las tablas o botones con esquinas redondeadas, que rompen la monotona de la forma rectangular.
Otra forma de compensar la rigidez de las formas rectangulares es combinarlas en la composicin con formas curvas que aporten libertad y dinamismo.
LA CIRCUNFERENCIA
Elementos de diseo: la circunferencia. La circunferencia es un contorno contnuamente curvado, cuyos puntos estn todos a la misma distancia de un punto central, llamado centro del crculo. La distancia constante de cualquier punto de la circunferencia se denomina radio.
46
La circunferencia representa el rea que contiene en su interior, denominada crculo, la forma ms enigmtica de todas, considerada perfecta por nuestros antepasados. Su direccionalidad es la curva, asociada al movimiento, al encuadramiento, a la repeticin y al calor.
La forma circular produce un movimiento de rotacin evidente, posee un gran valor simblico, especialmente su centro, y tiene connotaciones psicolgicas como proteccin, inestabilidad, totalidad, movimiento contnuo o infinitud. Es tpico representar tambin los espacios cerrados, hermticos, con circunferencias o crculos. Contornos derivados de la circunferencia son el valo y el ovoide, con cualidades parecidas a las de sta, pero que expresan an ms inestabilidad y dinamismo, aunque el movimiento perfecto sea una cualidad propia de la circunferencia. La proyeccin tridimensional de la circunferencia es la esfera, el cuerpo geomtrico ms perfecto, el que contiene un mayor volumen en un menor espacio, el que define la forma tanto de los tomos como de los cuerpos celestes. La circunferencia y el crculo son tal vez los elementos geomtricos ms perfectos y estables, aunque cargados de una gran carga dinmica. Las formas circulares son muy difciles de representar en una pgina web, ya que todos los elementos que nos facilita el lenguaje HTML son rectangulares, aunque aparenten no serlo. Adems, las formas curvas se visualizan muy mal en los monitores, debido a la interpretacin grfica mediante pixels, que origina efectos de escalado indeseables. Otro inconveniente de usar crculos en el diseo web deriva precisamente de ser la forma que contiene ms rea en el menor permetro, ya que la mayora de las veces al diseador le interesa precisamente lo contrario, reducir al mnimo el rea y maximizar al mximo el permetro.
Tal vez la nica forma de incluir una forma circular completa en una pgina sea incluyndola en una imagen. Pero cualquier imagen es de por s rectangular como objeto HTML, lo que nos obligar a desperdiciar todo el espacio comprendido entre el contorno circular y los bordes de la imagen, apareciendo espacios sin contenido no deseables en la mayora de los casos. Este efecto negativo se puede paliar incluyendo dentro de la imagen la forma circular y los dems objetos que le rodean en la composicin y que se encuentran dentro de los lmites del rectngulo que define la imagen, pero entonces esos elementos sern estticos, fijos, sin posibilidad de ser modificados si no es cambiando todo el contenido de la imagen. Una mejor solucin es incluir la imagen que contiene el contorno circular (o curvo en general) como fondo de la pgina o de un elemento contenedor de la misma (tabla, celda de tabla, prrafo, capa, etc.), lo que nos permitir presentar otros objetos HTML ocupando espacios vacos alrededor de la forma circular.
Formas ms sutiles y efectivas de incluir curvas en una pgina pueden ser recortando imgenes en forma de valo o crculo, e incluso simulando caminos curvos mediante elementos textuales o grficos dispuestos en sucesin.
CONTORNOS MIXTOS
Elementos de diseo: contornos mixtos, que son los que estn compuestos por varios tipos de contornos. Mediante combinaciones de los elementos bsicos y contornos anteriores se pueden
construir todas las formas imaginables, cada una de las cuales tendr unas propiedades dependientes de las partes que la forman, de su orientacin, de su tamao, de espesor del trazo lmite, de su color y de su ubicacin.
Hay que tener en cuenta, en cualquier caso, que el predominio de la referencia horizontalvertical da una sensacin de equilibrio, mientras que el dominio de la direccin diagonal aporta inestabilidad.
Los contornos mixtos son muy usados en las pginas web, a las que aportan variedad en el diseo y definicin de espacios de informacin, rompiendo la monotona visual de las formas rectangulares puras. El nico inconveniente es que las lneas curvas se deben implementar mediante imgenes, generalmente en formato GIF, que se pueden incluir como secciones curvas en las celdas extremas de una tabla o como imgenes completas en una capa, sobre la que se sita otra capa con el texto.
Tambin es posible incluirlas como ficheros SWF (Macromedia Flash), que aportan gran definicin a las zonas curvas, sin producirse efectos de escalado, al ser tratadas como grficos vectoriales. El inconveniente es entonces la actualizacin de los contenidos textuales, ya que hace falta para ello acceder al fichero FLA fuente del grfico.
CONTORNOS ORGNICOS
Elementos de diseo: contornos orgnicos, que estn formados por curvas libres. Los contornos orgnicos son aquellos formados por curvas libres.
49
Son los contornos ms abundantes en la naturaleza, y sugieren fluidez, desarrollo, humanidad, inspirando sensaciones favorables en el espectador.
Los contornos orgnicos son utilizados abundantemente en pintura y dibujo artstico, ya que son la base para representar figuras humanas, bodegones, paisajes, etc. Sin embargo, son muy difciles de incluir en una pgina web, tanto por aspectos tcnicos (deben incrustarse como imgenes) como por su aspecto visual, que puede chocar con la naturaleza propia de una pgina, composicin ordenada en la que predominan las formas rectangulares. No obstante, bien usados pueden dar un toque natural o humano a la pgina.
Una posible solucin, si deseamos introducir en una pgina contornos orgnicos, es adaptarlos lo ms posible a un contorno mixto, transformando las curvas libres en curvas Bzier, porciones de circunferencias o lneas rectas. Otra solucin es introducir fotografas o ilustraciones que los contengan.
50
EL DISEO EQUILIBRADO INTRODUCCIN

Estudio de las reglas bsicas del diseo grfico. No existe una frmula que de un diseo infalible pero s unas reglas bsicas. Podemos definir el diseo de una composicin grfica como la adecuacin de distintos elementos grficos previamente seleccionados dentro de un espacio visual, combinndolos de tal forma que todos ellos puedan aportar un significado a la misma, consiguiendo el conjunto transmitir un mensaje claro al espectador.
El diseo grfico ha de tener en cuenta los aspectos psicolgicos de la percepcin humana y las significaciones culturales que pueden tener ciertos elementos, eligiendo stos de forma que cada uno de ellos tenga un porqu en la composicin y buscando un equilibrio lgico entre las sensaciones visuales y la informacin ofrecida. Lo ms importante de toda composicin es el mensaje que subyace bajo ella. Es trabajo del diseador buscar la mxima eficacia comunicativa, transmitiendo ese mensaje por medio de una composicin que impacte visualmente al espectador y le haga receptivo.
Ahora bien, sin una disposicin adecuada de las formas, colores y agrupaciones, sin un equilibrio global en la composicin, el mensaje no llegar de forma adecuada al espectador. No existe un mtodo mgico que consiga una composicin exitosa, pero s que existen
una reglas bsicas de diseo que facilitan la transmisin de un mensaje por medio de una composicin grfica de forma efectiva. Estas reglas son aplicables igualmente al diseo de pginas web, aunque sujetas a las limitaciones que impone este formato y modificadas para adaptarlas a la interactividad y a las posibilidades multimedia del mismo.
Este va a ser el tema de este captulo de nuestro curso, estudiar las reglas bsicas de diseo grfico efectivo y equilibrado: proporciones, escalas, contrastes, agrupaciones, reticulados, alineaciones, simetras, equilibrio entre contenidos y jerarqua visual.
LAS PROPORCIONES
Debemos tener en cuenta la definicin a utilizar, los elementos grficos y las proporciones... A la hora de comenzar una composicin, lo primero que debemos saber es el tamao que va a tener sta. Si el soporte final de nuestro grafismo va a ser el papel, podremos disear para una gran variedad de tamaos, desde los ms pequeos (tarjetas de visita, pequeos folletos) hasta los ms grandes (posters, carteles para vayas publicitarias), aunque casi siempre disearemos en alguno de los formatos DIN. Medidas papel formato DIN modelo DIN A4 DIN A3 DIN A2
tamao 210*297 420*297 420*594
relacin 0.0625 m(x/y=0.707) 0.125 m (x/y=1.4142) 0.25 m (x/y=0.707)

52
DIN A1 DIN A0
840*594 840*118 8
0.5 m (x/y=1.4142) 1.0 m (x/y=0.707)
La relacin visual entre los distintos formatos DIN es la siguiente:
En el caso de una pgina web, los tamaos posibles son muy pocos, generalmente dos (800x600 y 1024x768 pxeles), pero es de suma importancia decidir para cul de ellos se va a trabajar, ya que, aunque es posible disear una pgina para que sea compatible con ambas resoluciones, tan solo en una de ellas se visualizar tal y como la diseemos.
El segundo paso ser elegir los elementos grficos y textuales que usaremos en la composicin. Esta eleccin se debe basar en variables como la persona o empresa que desea transmitir el mensaje, el propio mensaje, el tipo de espectadores destinatarios de la composicin y las caractersticas funcionales y comunicativas de cada elemento.
53
Ahora debemos definir qu partes del rea de diseo deben estar ocupadas por elementos y qu partes van a quedar vacos, sin contenido alguno. Si dejamos muchos espacios vacos la composicin puede resultar descordinada, ya que ser difcil establecer relaciones globales entre los elementos o entre los grupos de ellos. Pero si el nmero de componentes es elevado, podemos obtener una obra sobrecargada, difcil de entender, en la que no se distingue con claridad qu es cada cosa y cul es el mensaje que quiere transmitir. Empezaremos a situar entonces los elementos en escena, como si fueran actores de nuestra particular obra de teatro, combinndolos de diferentes formas hasta que obtengamos un resultado satisfactorio. En este punto es muy importante tener en cuenta que cada elemento visual tiene una funcin determinada dentro de la composicin. La informacin visual que aporta un elemento puede cambiar segn lo hagan las propiedades del mismo, como su tamao, forma o color, pero sobre todo su proporcin, el peso visual que tenga en el total de la composicin. Indudablemente, la forma ms directa de marcar proporciones es mediante el tamao relativo de los elementos. Los elementos ms grandes, altos o anchos tienen una carga visual superior a los ms pequeos, cortos o finos, creando zonas de atraccin ms intensas.
Tambin podemos delimitar proporciones en un grafismo mediante el color, con el que podemos definir distintas reas tonales tiles para distribuir de forma adecuada toda la informacin grfica. En este sentido, los colores puros y saturados tienen un mayor peso
visual que los secundarios neutros, y estos mayor que los terciarios poco saturados.
Otra tcnica para definir proporciones es el uso de agrupaciones de elementos y la correcta distribucin de estas en el escenario, lo que nos va a permitir estructurar de una forma u otra la composicin. Proporcin por agrupaciones
Este sistema suele dar buenos resultados, siempre que no abusemos de l creando un excesivo nmero de bloques significativos, ya que entonces se restaran importancia unos a otros y se perdera la proporcionalidad buscada. Ms reglas prcticas referentes a la proporcin son: Las formas regulares tienen menor peso que las irregulares.
Las formas alargadas y angulares alargan el campo de visin, creando zonas dominantes.
55
Sean cuales sean lo elementos usados en una composicin deberemos siempre buscar unas proporciones adecuadas entre ellos, con objeto de que cada uno cumpla su papel comunicativo de forma adecuada.
LA ESCALA
Se entiende por escala la relacin entre las proporciones de los elementos visuales de una composicin. Se entiende por escala la relacin entre las proporciones de los elementos visuales de una composicin. Todos los elementos tienen la capacidad de modificarse y definirse unos a otros segn las relaciones que se definan entre las propiedades anlogas de ellos. Por lo tanto, el concepto de escala no se refiere slo a la relacin entre tamaos de dos o ms elementos, sino tambin a la relacin entre colores, formas, etc. Un elemento es grande o pequeo segn el tamao de los elementos que le acompaan en el escenario. El color de una forma es brillante o apagado segn el color del fondo sobre el que se encuentra.
Es decir, las propiedades de un elemento visual no son absolutas, sino relativas, ya que dependen de las del resto de elementos que le acompaan en la composicin. La proporcin relativa entre elementos debe ser equilibrada, lo que implica el uso de una escala correcta en la composicin. Las escalas son utilizadas de esta forma en planos y mapas, para conseguir representar los objetos reales lo ms correctamente posible, con las proporciones adecuadas entre ellos.
56
En una composicin grfica la escala usada es igualmente importante, tanto para distribuir el espacio de diseo de forma acertada como para dar equilibrio de proporciones a los elementos, usndose a veces diferentes mtodos de distribucin de eficacia probada, como la regla Aurea o el mtodo de Corbusier. La regla Aurea, inventada por Vitruvio, se utiliza para obtener escenarios de trabajo de proporciones equilibradas, y se basa en contemplar un espacio rectangular dividido en terceras partes, tanto horizontal como verticalmente, consiguiendo con ello seccionar los espacios en partes iguales.
Por su parte, el mtodo de proporciones creado por el arquitecto francs Le Corbusier utiliza como unidad modular de escala el tamao del hombre, estableciendo con ella las alturas correctas de los objetos que usamos y de los elementos de una construccin arquitectnica.
57
En el caso del diseo web, el tamao del rea de trabajo es fijo, pero si que deberemos establecer una escala de trabajo adecuada para dimensionar los elementos de nuestra pgina. Escala proporcionada entre logotipo, opciones de men y contenido
As, el logotipo debe tener un tamao relativo adecuado a la pgina, los sistemas de navegacin (mens) deben ser lo suficientemente grandes como para ser vistos y manejados con facilidad, pero no tanto que resten importancia al contenido informativo de la pgina, etc.
Un error muy comn es ente sentido es el de los iconos, que deben ser suficientemente grandes como para que no pierden sus rasgos diferenciadores ni su zona activa si actan como enlaces, pero nunca tanto que destaquen en exceso, sobre todo si van acompaados de un texto explicativo.
EL CONTRASTE
El contraste permite resaltar el peso visual, lo podemos conseguir por medio de diversos medios: tonos, colores, contornos y escala. El contraste es el efecto que permite resaltar el peso visual de uno o ms elementos o
zonas de una composicin mediante la oposicin o diferencia apreciable entre ellas, permitindonos atraer la atencin de espectador hacia ellos.
El contraste puede conseguirse a travs de diferentes oposiciones entre elementos: Contraste de tonos Se obtiene contraste entre elementos que poseen tonos (claridad-oscuridad) opuestos. En este caso, el mayor peso lo tendr el elemento ms oscuro, destacando el ms claro sobre l con ms intensidad cuanto mayor sea la diferencia tonal.
Conforme se disminuye la tonalidad del elemento ms oscuro el contraste va perdiendo intensidad, siendo necesario redimensionarlo si queremos mantener el mismo contraste.
59
Este tipo de contraste el tal vez el ms intenso, y es muy usado en composiciones grficas. Contraste de colores Dos elementos con colores complementarios se refuerzan entre s, al igual que un color clido y otro fro.
El contraste creado entre dos colores ser mayor cuanto ms alejados estn en el crculo cromtico. Los colores opuestos contrastan mucho, mientras que los anlogos apenas lo hacen, perdiendo importancia visual ambos.
Este efecto se puede usar para dar mayor dimensin o sensacin de proximidad a un
elemento en una composicin, situndolo sobre un color que contraste con l.
Este tipo de contraste es especialmente indicado para los contenidos textuales, en los que debe primar la facilidad de lectura. Lo ideal ser el texto negro sobre fondo blanco, ya que es el que ms contraste crea (contraste de tono). Pero en ciertos elementos, en los que este juego de colores no sea posible, habr que buscar siempre un texto clido sobre un fondo fro o viceversa. Contraste de contornos Los contornos irregulares destacan de forma importante sobre los regulares o reconocibles.
Este tipo de contrastes es adecuado para dirigir la atencin del usuario a ciertos elementos de una composicin o pgina web, como botones importantes, banners publicitarios, etc. No obstante, hay que ser comedidos en su uso, sobre todo si se combinan con otros tipos de contraste, ya que pueden ser un foco de atraccin visual demasiado potente. Adems, crean mucha tensin en el espacio que les rodea. Contraste de escala Es el producido por el uso de elementos a diferentes escalas de las normales o de proporciones irreales, consiguindose el contraste por negacin de la percepcin aprendida.
61
Este sistema de contraste no es muy usado en las pginas web, donde se busca siempre la escala adecuada, pero s es frecuente en fotografa y pintura, consiguiendo atraer la atencin del espectador de forma muy efectiva.
LAS AGRUPACIONES
Como los elementos web deben agruparse para obtener un resultado coherente. El ser humano, tanto pos su carcter racional como por herencia cultural, tiende a organizar los elementos que percibe en torno a conjuntos significativos organizados. Esta inclinacin a agrupar elementos relacionados en un factor que influye de forma notoria en la percepcin que tenemos de nuestro entorno, de lo que vemos alrededor nuestro. Las composiciones grficas no escapan a esta tendencia, por lo que una correcta agrupacin de sus elementos les otorga un carcter lgico, racional, que aumenta su valor comunicativo. La agrupacin de nuestros elementos grficos y textuales puede basarse en diferentes criterios:

Proximidad: Tendemos a agrupar aquellos objetos que estn prximos, cercanos entre s. Semejanza: Tendemos a agrupar los elementos iguales o parecidos. Continuidad: Nuestra mente tiende a agrupar aquellos elementos que tienen una continuidad significativa. Simetra: Tendemos a agrupar los elementos para que aparezcan ordenados formando figuras conocidas.
62
En el caso concreto de las pginas web, las agrupaciones son muy tiles y del todo necesarias, sobre todo en lo que respecta a elementos similares o de funcionalidad anloga, como componentes de mens de navegacin, iconos, datos relacionados, botoneras, etc.
Las agrupaciones tambin son muy tiles en casos de formularios o fichas de muchos campos, siendo muy conveniente dividir estos en grupos de informacin anloga, separando luego cada grupo de los dems mediante franjas horizontales o verticales en blanco.
63
Con ello, el formulario no slo gana en belleza visual, sino que adems resulta ms claro, lgico y fcil de completar por el usuario.
EL RETICULADO
Cmo armonizar los bloques de contenido que formarn la composicin del diseo. Una composicin grfica debe ser equilibrada no slo en contenidos, sino tambin visualmente, hasta tal punto que podemos decir que el orden en la disposicin espacial de los elementos de la misma es uno de los factores ms importantes para su xito. El espectador que contempla una obre grfica (folleto, cartel trptico o pgina web) busca subconscientemente en ella un orden y una estabilidad que le permitan pasear la vista por la misma de forma organizada y limpia. El sistema plano de referencia habitual en los seres humanos es el formado por un eje horizontal y otro vertical, es decir, por dos rectas que se cortan en un ngulo de 90. En este sistema, el eje horizontal aporta equilibrio y estabilidad, mientras que el vertical facilita la elevacin de la vista, marcando prioridades o niveles en la composicin. Puesto que las composiciones grficas (y dentro de ellas, las pginas web) se representan en soportes planos, es fcil deducir que este sistema de referencia es tambin el ms adecuado para la distribucin de sus elementos. Si a esto sumamos el carcter eminentemente rectangular de la mayora de los soportes, obtenemos por extensin el sistema de organizacin idneo para nuestras composiciones: el reticulado. Un reticulado o rejilla es un sistema de referencia formado por diferentes lneas horizontales y verticales que marcan la ubicacin de elementos y zonas en una composicin grfica, lneas que no tienen porqu tener una representacin real (no tienen porqu formar parte del grafismo), pero s mental. Son las guas imaginarias sobre las que vamos a ir colocando los elementos, la espina dorsal de un composicin grfica.
64
Mediante el reticulado, el diseador va situando con armona los bloques de contenido que formarn la composicin: zonas principales y secundarias, ttulos y subttulos, bloques de texto, fotografas, ilustraciones, grficos, sistemas de navegacin, botones, iconos, etc, dando con ello un estilo propio visualmente lgico a la misma. Una composicin grfica no es un sistema estndar, nico, sino que los mismos elementos se pueden organizar segn diferentes esquemas lgicos. Pero siempre debern estar dispuestos segn una retcula que les aporte equilibrio y estabilidad visual. Es tarea del diseador buscar el conjunto ubicacin-reticulado que mejor se adapte a su obra. La ubicacin de elementos en una composicin segn un reticulado determinado no precisa la introduccin de los elementos finales de la misma. Es decir, se puede perfectamente disear la organizacin de un grafismo tan slo con rectngulos de colores. Ms an, con rectngulos de un solo color. Lo que importa no es el aspecto visual final, sino la organizacin lgica y regular de los elementos. En el caso concreto de una pgina web, el diseador puede perfectamente distribuir en pantalla una serie de rectngulos que representen las zonas que va a tener la pgina. Si la distribucin sigue un reticulado acorde y las zonas estn ubicadas con lgica, la pgina que resulte de ello tiene un 50% de posibilidades de resultar correcta. Reticulado de Terra
65
Esta estructura lgica creada con el reticulado debe mantenerse luego en todas las pginas que forman el sitio web, proporcionando con ello consistencia y homogeneidad al mismo. Si definimos una separacin entre el cabecero de un formulario y el inicio de los elementos del mismo de 15 pxeles, todos los formularios, fichas, textos, etc, que tengan un cabecero, deben mantener el mismo espacio separador. Si definimos unos mrgenes vacos entre la pgina que diseamos y los bordes de la ventana del navegador de 30 pxeles, todas las pginas del sitio deben mantener constantes esos mrgenes.
66
Reticulado en un formulario maquetado con tabla
Una ventaja adicional de disear un reticulado correcto ser la comodidad a la hora de maquetar despus la pgina con tablas, ya que estructura natural de stas es reticular.
LAS ALINEACIONES
Necesarias para conseguir una composicin ordenada y lgica, as como para relacionar elementos. Una vez definido el reticulado que vamos a usar en nuestra composicin, deberemos situar en la misma los elementos grficos y textuales. En este punto aparece el concepto de alineacin, como la colocacin de elementos grficos y textuales segn una lnea dada, que generalmente ser horizontal o vertical. Generalmente habr varias lneas guas de alineacin en una composicin. Alinear los elementos es una operacin imprescindible para conseguir una composicin ordenada y lgica, pues con ello se crean unidades visuales definidas y relaciones entre elementos. Si la alineacin es importante a la hora de situar elementos grficos, lo es an ms si se trata de contenidos textuales. Efectivamente, los textos perfectamente alineados son ms fciles de leer, no cansan la vista y producen un efecto de equilibrio que invita a la lectura. Por el contrario, un texto sin alineacin resulta confuso, difcil de leer, desmotivando al espectador. Todo lo hablado se acenta si el soporte es una pgina web, ya que la forma del monitor y de la ventana del navegador impulsa el uso de contornos rectangulares, que nicamente se consiguen con alineaciones perfectas. Adems, muchas veces debemos disear las pginas con un importante nmero de elementos, por lo que si la disposicin de los mismos no es perfectamente regular resulta muy difcil crear una composicin aceptable. La alineaciones horizontales son imprescindibles para conseguir un diseo en niveles estables, ya que las lneas horizontales aportan equilibrio. Como podemos tener bloques lgicos de diferente altura, estas alineaciones se definirn desde los bordes superiores de los bloques.
67
Alineaciones horizontales en EresMas
En cuanto a las verticales, la alineacin ms comn es la izquierda, ya que es la normal en los libros y dems soportes textuales, estando nuestra vista educada para tratar con ella. Alineaciones de textos a la izquierda
Las alineaciones centradas son poco comunes, salvo en el caso de tablas de datos con columnas que admitan bien este tipo de alineacin, sobre todo si todos los valores de la columna tienen el mismo ancho. Si no es as, es preferible optar por la alineacin izquierda. Elementos centrados en una tabla
En cuanto a las alineaciones a la derecha, son poco frecuentes, ya que crean tensiones visuales en la mayora de los casos. Se pueden usar en aquellos bloques cuyo contenido deba adaptarse a un reticulado que defina una lnea vertical a la derecha del mismo, como ocurre en muchos mens de navegacin situados a la izquierda de la pgina. Tambin son tiles en las columnas de las tablas que contengan datos que deban seguir una ordenacin lgica a derechas, como es el caso de datos de moneda.
69
Adecuando la alineacin al tipo de datos de cada campo
Existe otro tipo de alineacin para textos, el justificado, en el que todas las lneas de texto tienen el mismo ancho, por lo que quedan alineadas tanto a la derecha como a la izquierda, lo que se consigue aumentando o disminuyendo el espaciado normal de las letras. Este tipo de alineacin es muy usado en los libros y peridicos, pero en las pginas web hay que aplicarlo con precaucin, destinndolo tan solo a bloques textuales de poco ancho (textos distribuidos en varias columnas, por ejemplo).
Por ltimo, decir que si bien las alineaciones son imprescindibles, pueden originar monotona visual si se siguen a rajatabla, al producir pginas demasiado cuadriculadas y artificiosas. Por ello, es bueno introducir algunos elementos que, sin romper el reticulado y las alineaciones bsicas, introduzcan un poco de variedad visual, de frescura en el diseo. Buscar el equilibrio entre alineaciones y elementos que las rompan es una de las tareas principales del diseador de pginas web.
LAS SIMETRAS
Otro condicionante para que el diseo de la web tenga una organizacin natural. Si observamos la Naturaleza, gran arquitecta y diseadora donde las haya, podremos
observar muy pronto que uno de los elementos que ms utiliza para crear sus organismos es la simetra, manifestndose sta en casi todos los seres que existen a lo largo y ancho de nuestro planeta.
El hombre ha pretendido imitar este diseo simtrico natural en todos y cada uno de sus aspectos creadores, desde los primeros objetos de artesana hasta los modernos automviles.
Si partimos de esta base, debemos aceptar que la bsqueda de una simetra estructural, grfica y textual debe ser una de las metas primeras de todo diseador web, ya que confiere a las composiciones una organizacin natural a la que el espectador est acostumbrado. Por definicin, una forma o imagen es simtrica cuando un eje central la puede dividir en dos parte iguales y opuestas entre s. Este concepto, aplicado a una composicin grfica puede aplicarse tanto a los propios elementos individuales de la misma como a su totalidad. En este caso, obtener una simetra exacta puede resultar difcil (incluso inconveniente), pero s que podemos buscar una simetra de bloques y espaciados en nuestra rejilla.
71
El diseo simtrico sugiere estabilidad, equilibrio, resultando esttico, ordenado, atractivo y agradable de contemplar. Por el contrario, el asimtrico muestra irregularidad, desigualdad en las formas y desequilibrio. Hay que tener en cuenta que la simetra usada no debe de ser del todo exacta, ya que la simetra perfecta no es natural, es demasiado "perfecta", valga la redundancia, haciendo aparecer las composiciones artificiales y premeditadas. Pequeas variaciones en la distribucin simtrica dan ese toque de ruptura que hace su contemplacin ms amena y natural. En el caso de una pgina web, la concepcin simtrica de la misma comienza con el reticulado elegido, ya que va a ser el que defina la distribucin bsica de elementos en ella. Hay que tender entonces a disear un reticulado lo ms simtrico posible.
Una forma aceptada de romper el esquema simtrico de una pgina es crear bloques descompensados visualmente hacia un lado, alternndolos en la pgina de forma inversa, es decir, el primero descompensado a la derecha, el segundo a la izquierda, etc. Otra tcnica es el uso de un nico men lateral de navegacin, que descompensa el peso visual hacia la zona en la que se encuentra. Si bien en la disposicin de bloques en el reticulado podemos ser algo permisivos, en los contenidos de nuestras pginas la simetra debe ser una norma casi inflexible, sobre todo en la construccin de ciertos elementos. Es misin fundamental de todo diseador ser capaz de construir contenidos simtricos sin que parezcan rgidos, artificiales. Ejemplos claro de esta regla son la creacin de formularios y de fichas. Se construyen generalmente apoyndose en una tabla maquetadora, por lo que deberemos buscar la simetra en esta tabla, aunque luego, debido a las diferentes longitudes y naturaleza de los campos, el resultado final "parezca" no serlo. Distribucin simtrica en una ficha
72
En lo que respecta a los textos, si nuestra pgina es eminentemente textual, y en textos de una sola lnea, como sta que tenis delante, el contenido ser simtrico por propia construccin. Pero si deseamos distribuir el contenido en varias columnas, deberemos prestar especial atencin a que stas sean equilibradas, evitando el remarcado fuerte de porciones de texto o de una o ms columnas mediante colores de fondo, textos en negrita, etc. Columnas textuales y simetra
La regla general es buscar siempre la armona, an cuando introduzcamos pequeos elementos diferenciadores. Otro aspecto fundamental es mantener simetras en el tratamiento de los aires en nuestra pgina. Entendemos por "aire" el espacio libre que queda entre elementos y entre stos y los lmites de la pgina. Es lo que en cualquier documento llamamos "mrgenes", pero extendido a todos los elementos y contenidos. Si nuestra pgina tiene un espacio libre entre su margen izquierdo y el primer contenido por ese lado, el mismo aire debe quedar entre el margen derecho y el contenido por ese lado. Igualmente, los espacios libres entre los elementos internos de la pgina deben ser simtricos e iguales, buscando con ello el equilibrio en la composicin. Este concepto es aplicable a todos y cada uno de los elementos de nuestras pginas. As, si tenemos una lista de contenidos, podemos crear unos espacios entre cada 5-7 elementos, que evitarn la sensacin de opresin producida cuando las listas tienen muchos elementos. Entonces, este espacio separador deberemos repetirlo constantemente a lo largo de la lista.
73
De la misma forma, cuando trabajamos con formularios en muy importante disearlos de tal forma que el aire que quede entre los diferentes elementos que lo formen sea simtrico, creando un total claro y armonioso.
Y lo mismo podemos decir de los dems elementos de nuestra pgina: aires simtricos, bien repartidos, equilibrados.
EL EQUILIBRIO ENTRE CONTENIDOS

La organizacin espacial, primordial para atraer al usuario. En toda composicin debe existir un adecuado equilibrio entre los diferentes elementos que la forman si queremos atraer la atencin del espectador y mantenerla hasta que haya asimilado el mensaje que queremos transmitirle. Para ello es imprescindible mantener en nuestra obra grfica una correcta organizacin espacial de contenidos grficos y textuales, as como unas cantidades adecuadas de cada uno de ellos. Los componentes grficos aportan a la composicin sensaciones visuales por medio de formas, colores y contrastes, mientras que los textos suministran informacin, mensajes, aunque esto no quiere decir que estas funcionalidades sean excluyentes, ya que los grficos pueden aportar informacin y los textos formas y colores (de hecho, la Tipografa es una herramienta de diseo excelente). Las composiciones formadas por muchos elementos grficos y poco o ningn contenido textual pueden crear rechazo en aquellos espectadores que buscan el contenido sustancial en la obra, la informacin prctica que ofrece. Este contenido textual es especialmente importante en las pginas web, ya que los usuarios acuden a un sitio buscando siempre algn tipo de informacin, abandonndolo rpidamente si no encuentra algn estmulo informativo que le motive.
74
En el lado contrario, las composiciones en las que se introduce un contenido eminentemente textual, con poco o ningn contenido grfico, suelen ser rechazadas por el espectador, que encuentra tremendamente aburrida y tediosa una obra que aparece a la vista como una mancha de color indiferenciado, que exige adems un elevado nivel de concentracin y mucho tiempo para resultar til. Necesitamos pues introducir sensaciones visuales grficas que motiven al espectador a investigar el contenido textual.
En el caso de las pginas web, los tipos de contenidos a ofrecer aumentan considerablemente respecto a los de una composicin sobre papel ya que podemos incluir en ellas no slo grficos y textos, sino tambin sonidos, animaciones, vdeo, applets de Java, etc. Esto hace necesaria una planificacin correcta de los elementos a incluir en una pgina, con objeto de despertar la atencin del usuario, s, pero ofrecindole siempre informacin relevante y nunca sobrecargndola de elementos superfluos. Adems, debido a las limitaciones propias de los equipos informticos, del lenguaje HTML, de los navegadores web y de las conexiones a Internet, el equilibrio entre contenidos debe contemplar tambin que el resultado final se pueda visualizar correctamente. De nada sirve una pgina con grficos estupendos y animaciones espectaculares si el usuario debe esperar un minuto para poder verlas. Es ms, nunca esperar ese minuto. Es por tanto preferible organizar las pginas web de forma equilibrada, ofreciendo en cada una de ellas las dosis adecuadas de elementos visuales e informativos. Como norma general, siempre debe haber ms componentes textuales que grficos en una pgina.
Es mejor siempre tener dos pginas ligeras y equilibradas a una recargada de elementos incapaces de retener la atencin del usuario en lo verdaderamente importante: el mensaje que deseamos transmitirle.
LA JERARQUA VISUAL
La organizacin gua al usuario en la contemplacin de una pgina web. En toda composicin grfica se debe crear una jerarqua visual adecuada, con objeto de que los elementos ms importantes de la misma se muestren debidamente acentuados. Mediante un adecuado diseo se puede establecer un camino visual que conduzca el ojo del espectador y le vaya mostrando la informacin contenida en la composicin de forma organizada, lgica y fiable, que dirija su percepcin por la ruta ms idnea.
La persona que contempla una obra grfica aprecia en primer lugar un conjunto completo de formas y colores, con los elementos situados en primer plano contrastando con el fondo de la composicin. Slo tras esta primera observacin global, y si su curiosidad ha sido despertada, el espectador comenzar a analizar las partes individuales del todo, comenzando por lo elementos grficos puros, y continuando luego con los elementos
textuales, ms difciles de interpretar, ya que hay que leerlos palabra a palabra.
En los pases occidentales leemos los documentos de izquierda a derecha y desde la parte superior a la inferior, forma de proceder se ha extendido a todas aquellas actividades en las que necesitamos visualizar algo (cuando observamos a una persona, generalmente empezamos por la parte izquierda de su cabeza). Esto se puede aprovechar para organizar el contenido de una composicin lgicamente, situando en ella los elementos ms importantes en la zona superior izquierda de la misma, las siguientes en importancia en el lateral izquierdo, las siguientes en el cuerpo central y las menos relevantes en la parte inferior.
Esta forma de proceder es comn no slo en folletos, documentos o carteles publicitarios creados con un diseo clsico, sino tambin en las pginas web, que siguen esta estructura jerrquica en el 95% de los sitios, que, adems, son los que mejor aceptacin tienen por el pblico. Jerarqua visual por posicionamiento en pgina web
77
Otro sistema de establecer una jerarqua en los contenidos es el uso de colores. Podemos enfatizar ciertas zonas de la composicin usando en ellas colores primarios muy saturados, que atraen de forma irresistible la atencin de los espectadores, teniendo siempre cuidado de que los textos en ellas contenidos contrasten de forma clara con el fondo, para que pueden ser ledos con comodidad. En este caso, hay que tener cuidado con no abusar de estos colores "fuertes", destinndolos solamente a pequeas zonas especiales, ya que recargan en exceso la vista, sobre todo el amarillo. Para las zonas de segundo orden podemos usar colores menos saturados, secundarios o terciarios, siendo una buena opcin aquellos presentes en la naturaleza, ya que son ms naturales y mejor aceptados por los espectadores. Por ltimo, las zonas menos importantes podemos no colorearlas o hacerlo muy sutilmente, para que no atraigan en exceso la mirada.
Esta variacin cromtica no es nica, ya que se puede usar cualquier juego de colores que consiga establecer una jerarqua visual adecuada. Tambin podemos recurrir a la hora de establecer rangos de importancia visual a los contrastes. Si situamos cercanas o superpuestas dos zonas de colores complementarios o que contrasten mucho, la importancia de ambas en la composicin se refuerza, sobre todo si las zonas de contraste no son muchas. Jerarqua visual por contrastes de colores (azul, naranja y blanco)
Por el contrario, si las zonas son de colores anlogos, pertenecientes a una misma gama, la importancia de ambos se disminuye, aunque sean colores vivos, ya que se distinguir una zona de atraccin, pero sus elementos aparecern difuminados, poco relevantes. En cuanto a los elementos textuales, a los que tambin son aplicables los mtodos de color y contraste, podemos establecer una jerarqua en ellos mediante los tamaos relativos de los mismos. Los ttulos de pgina, los cabeceros o los titulares de una noticia o apartado pueden ser destacados aumentando su tamao segn su importancia en la composicin o pgina web. Este mtodo es siempre aconsejable, ya que organiza de forma lgica el contenido textual y rompe la monotona intrnseca de los textos.
79
Jerarqua visual en elementos textuales
Un elemento a evitar siempre en una composicin, salvo que nos convenga su uso, son los adornos grficos visualmente impactantes, como zonas de color intenso sin sentido, iconos que destaquen en exceso, lneas horizontales chillonas, animaciones que aporten poca informacin, etc. Su presencia atrae la vista del espectador, sin ofrecerle nada a cambio y desviando su inters de los elementos textuales y grficos que s aportan verdadera informacin.
Esto no quiere decir que no puedan emplearse. Son a veces muy tiles para romper la monotona de una composicin introduciendo en ella elementos que proporcionen frescor visual, pero deben ser usados siempre con moderacin. Los tamaos excesivamente grandes en los textos son tambin un factor a tener en cuenta. Una cabecera de pgina o de seccin deben destacar lo suficiente sobre el resto del contenido textual, pero nunca deben ser desproporcionadas ni atraer en exceso la atencin del usuario. En cuanto a la abundancia de ellos, hay que tener siempre en cuenta que un par de cabeceras de mayor tamao establecen unos niveles de importancia convenientes, pero multitud de textos de gran tamao aaden confusin a una composicin, ya que el usuario pierde las referencias sobre qu es importante en la misma. Resumiendo: Es muy importante establecer una organizacin jerrquica de los contenidos de nuestra composicin, pudindose usar para ello diferentes tcnicas de diseo, pero teniendo en cuenta que el mal uso o el abuso de ellas puede convertir la
composicin en algo que no despierta en inters del usuario o en un "pantaln de payaso", donde todo es chilln y nada destaca de forma clara.
TEORA DEL COLOR INTRODUCCIN

Es una parte fundamental de la web, productor de sensaciones. Estamos rodeados de colores. Estos forman parte de la vida misma, y el ser humano es uno de los seres privilegiados de la Naturaleza por poder disfrutar de ellos. Cuando vamos por la calle, cuando estamos trabajando o disfrutando de nuestro tiempo libre o cuando estamos navegando por Internet recibimos constantemente impresiones de color por medio de nuestra vista, y estas impresiones tienen la facultad de excitarnos, de tranquilizarnos, de ponernos de buen humor o de inspirarnos pena. Es el mundo de color.
Y si este aspecto de la vida es importante en todas y cada una de sus facetas an lo es mas en el mundo del diseo. Es tal vez una de sus partes fundamentales, y todava mas en el diseo web, pues disponemos de muy poco espacio y muy poco tiempo para poder expresar el alma de nuestro sitio y captar adecuadamente la atencin de nuestros visitantes, y el color es la primera forma de comunicacin entre una pgina web y el usuario.
81
Est demostrado que los nueve primeros segundos en los que una persona contempla nuestra pgina son cruciales, y de ellos depende que esta contine con agrado navegando por nuestro sitio, lo haga con indiferencia o nos abandone. Y de lo que ve en estos segundos lo que tal vez mas llame y capte su atencin sea la distribucin y la gama de colores de nuestra pgina.
Esta importancia del color se extiende a todas las artes, si bien un pintor, por ejemplo, dispone de mucho ms tiempo que nosotros para expresarse con el color. Tambin cuenta ste con un abanico de colores casi infinito, mientras que nosotros, los diseadores web, disponemos tan solo de unos cuantos colores para expresar lo que deseamos (y ya veremos ms adelante qu pocos colores tenemos en realidad a nuestro alcance).
En este captulo vamos a ver un poco el mundo del color en general, su aplicacin al diseo grfico y las restricciones que vamos a tener a la hora de trabajar con colores en el diseo de un sitio web.
NATURALEZA DEL COLOR

Descripcin formal del color como un fenmeno fsico. Teora del color. Naturaleza del color Podemos ver las cosas que nos rodean porque La Tierra recibe la luz del Sol. Nuestra estrella madre nos inunda constantemente con su luz, y gracias a ella es tambin posible la vida en nuestro planeta.
82
La luz del Sol est formada en realidad por un amplio espectro de radiaciones electromagnticas de diferentes longitudes de onda, formando un espectro continuo de radiaciones, que comprende desde longitudes de onda muy pequeas, de menos de 1 picmetro (rayos csmicos), hasta longitudes de onda muy grandes, de ms de 1 kilmetro.
El ser humano tan solo es capaz de visualizar un subconjunto de ellas, las que van desde 380 (violeta) a 780 nanmetros (rojo), como podemos apreciar claramente si la hacemos pasar por un prisma, efecto descubierto por Newton.
Cada longitud de onda define un color diferente (colores de emisin). La suma de todos los colores (longitudes de onda) da como resultado la luz blanca, siendo el color negro u oscuridad la ausencia de colores.
83
Si una vez descompuesta la luz solar en sus longitudes de onda constituyentes volvemos a juntarlas con otro prisma, volveremos a obtener la luz blanca.
LA PERCEPCIN DEL COLOR

Como el ojo puede detectar y clasificar los colores que le llegan. Bien, ya sabemos de dnde vienen los colores, pero, cmo puede el ojo humano ver estas ondas y distinguirlas unas de otras?. La respuesta a esta cuestin se encuentra en el ojo humano, bsicamente una esfera de 2 cm de dimetro que recoge la luz y la enfoca en su superficie posterior.
Object 1
En el fondo del ojo existen millones de clulas especializadas en detectar las longitudes de onda procedentes de nuestro entorno. Estas maravillosas clulas, principalmente los conos y los bastoncillos, recogen las diferentes partes del espectro de luz solar y las transforman en impulsos elctricos, que son enviados luego al cerebro a travs de los nervios pticos, siendo ste el encargado de crear la sensacin del color.
Los conos se concentran en una regin cerca del centro de la retina llamada fvea. Su distribucin sigue un ngulo de alrededor de 2 contados desde la fvea. La cantidad de
conos es de 6 millones y algunos de ellos tienen una terminacin nerviosa que va al cerebro. Los conos son los responsables de la visin del color y se cree que hay tres tipos de conos, sensibles a los colores rojo, verde y azul, respectivamente. Dada su forma de conexin a las terminaciones nerviosas que se dirigen al cerebro, son los responsables de la definicin espacial. Tambin son poco sensibles a la intensidad de la luz y proporcionan visin fotpica (visin a altos niveles). Los bastones se concentran en zonas alejadas de la fvea y son los responsables de la visin escotpica (visin a bajos niveles). Los bastones comparten las terminaciones nerviosas que se dirigen al cerebro, siendo por tanto su aportacin a la definicin espacial poco importante. La cantidad de bastones se sita alrededor de 100 millones y no son sensibles al color. Los bastones son mucho ms sensibles que los conos a la intensidad luminosa, por lo que aportan a la visin del color aspectos como el brillo y el tono, y son los responsables de la visin nocturna.
Existen grupos de conos especializados en detectar y procesar un color determinado, siendo diferente el total de ellos dedicados a un color y a otro. Por ejemplo, existen ms clulas especializadas en trabajar con las longitudes de onda correspondientes al rojo que a ningn otro color, por lo que cuando el entorno en que nos encontramos nos enva demasiado rojo se produce una saturacin de informacin en el cerebro de este color, originando una sensacin de irritacin en las personas. Cuando el sistema de conos y bastoncillos de una persona no es el correcto se pueden producir una serie de irregularidades en la apreciacin del color, al igual que cuando las partes del cerebro encargadas de procesar estos datos estn daadas. Esta es la explicacin de fenmenos como la Daltonismo. Una persona daltnica no aprecia las gamas de colores en su justa medida, confundiendo los rojos con los verdes.
85
Debido a que el proceso de identificacin de colores depende del cerebro y del sistema ocular de cada persona en concreto, podemos medir con toda exactitud la longitud de onda de un color determinado, pero el concepto del color producido por ella es totalmente subjetivo, dependiendo de la persona en s. Dos personas diferentes pueden interpretar un color dado de forma diferente, y puede haber tantas interpretaciones de un color como personas hay. En realidad el mecanismo de mezcla y produccin de colores producido por la reflexin de la luz sobre un cuerpo es diferente al de la obtencin de colores por mezcla directa de rayos de luz, como ocurre con el del monitor de un ordenador, pero a grandes rasgos y a nivel prctico son suficientes los conceptos estudiados hasta ahora.
MODELOS DE COLOR
Descripcin de los tipos de color conocidos, as como se aborda una explicacin de como los objetos adquieren los colores. Los colores obtenidos directamente naturalmente por descomposicin de la luz solar o artificialmente mediante focos emisores de luz de una longitud de onda determinada se denominan colores aditivos. No es necesaria la unin de todas las longitudes del espectro visible para obtener el blanco, ya que si mezclamos solo rojo, verde y azul obtendremos el mismo resultado. Es por esto por lo que estos colores son denominados colores primarios, porque la suma de los tres produce el blanco. Adems, todos los colores del espectro pueden ser obtenidos a partir de ellos.
86
Los colores aditivos son los usados en trabajo grfico con monitores de ordenador, ya que, segn vimos cuando hablamos de los componentes grficos de un ordenador, el monitor produce los puntos de luz partiendo de tres tubos de rayos catdicos, uno rojo, otro verde y otro azul. Por este motivo, el modelo de definicin de colores usado en trabajos digitales es el modelo RGB (Red, Green, Blue). Todos los colores que se visualizan en el monitor estn en funcin de las cantidades de rojo, verde y azul utilizadas. Por ello, para representar un color en el sistema RGB se le asigna un valor entre 0 y 255 (notacin decimal) o entre 00 y FF (notacin hexadecimal) para cada uno de los componentes rojo, verde y azul que lo forman. Los valores ms altos de RGB corresponden a una cantidad mayor de luz blanca. Por consiguiente, cuanto ms altos son los valores RGB, ms claros son los colores.
De esta forma, un color cualquiera vendr representado en el sistema RGB mediante la sintaxis decimal (R,G,B) o mediante la sintaxis hexadecimal #RRGGBB. El color rojo puro, por ejemplo, se especificar como (255,0,0) en notacin RGB decimal y #FF0000 en notacin RGB hexadecimal, mientras que el color rosa claro dado en notacin decimal por (252,165,253) se corresponde con el color hexadecimal #FCA5FD. Esta forma aditiva de percibir el color no es nica. Cuando la luz solar choca contra la
superficie de un objeto, ste absorbe diferentes longitudes de onda de su espectro total, mientras que refleja otras. Estas longitudes de onda reflejadas son precisamente las causantes de los colores de los objetos, colores que por ser producidos por filtrado de longitudes de onda se denominan colores sustractivos. Este fenmeno es el que se produce en pintura, donde el color final de una zona va a depender de las longitudes de onda de la luz incidente reflejadas por los pigmentos de color de la misma. Un coche es de color azul porque absorbe todas las longitudes de onda que forman la luz solar, excepto la correspondiente al color azul, que refleja, mientras que un objeto es blanco porque refleja todo el espectro de ondas que forman la luz, es decir, refleja todos los colores, y el resultado de la mezcla de todos ellos da como resultado el blanco. Por su parte, un objeto es negro porque absorbe todas las longitudes de onda del espectro: el negro es la ausencia de luz y de color. En esta concepcin sustractiva, los colores primarios son otros, concretamente el cian, el magenta y el amarillo. A partir de estos tres colores podemos obtener casi todos los dems, salvo el blanco y el negro.
Efectivamente, la mezcla de pigmentos cian, magenta y amarillo no produce el color blanco, sino un color gris sucio, neutro. En cuanto al negro, tampoco es posible obtenerlo a partir de los primarios, siendo necesario incluirlo en el conjunto de colores bsicos sustractivos, obtenindose el modelo CMYK (Cyan, Magenta, Yellow, Black). El sistema CMYK, define los colores de forma similar a como funciona una impresora de inyeccin de tinta o una imprenta comercial de cuatricroma. El color resulta de la superposicin o de colocar juntas gotas de tinta semitransparente, de los colores cian (un azul brillante), magenta (un color rosa intenso), amarillo y negro, y su notacin se corresponde con el valor en tanto por ciento de cada uno de estos colores. De esta forma, un color cualquiera vendr expresado en el sistema CMYK mediante la expresin (C,M,Y,K), en la que figuran los tantos por ciento que el color posee de los
componentes bsicos del sistema. Por ejemplo, (0,0,0,0) es blanco puro (el blanco del papel), mientras que (100,0,100,0) corresponde al color verde.
Los colores sustractivos son usados en pintura, imprenta y, en general, en todas aquellas composiciones en las que los colores se obtienen mediante la reflexin de la luz solar en mezclas de pigmentos (tintas, leos, acuarelas, etc.). En estas composiciones se obtiene el color blanco mediante el uso de pigmentos de ese color (pintura) o usando un soporte de color blanco y dejando sin pintar las zonas de la composicin que deban ser blancas (imprenta).
Los sistemas RGB, CMYK se encuentran relacionados, ya que los colores primarios de uno son los secundarios del otro (los colores secundarios son los obtenidos por mezcla directa de los primarios). Otro modelos de definicin del color es el modelo HSV, que define los colores en funcin de los valores de tres importantes atributos de estos, matiz, saturacin y brillo.
89
El matiz (Hue) hace referencia al color como tal, por ejemplo el matiz de la sangre es rojo. La saturacin o intensidad indica la concentracin de color en el objeto. La saturacin de rojo de una fresa es mayor que la del rojo de unos labios. Por su parte, el brillo (Value) denota la cantidad de claridad que tiene el color (tonalidad ms o menos oscura). Cuando hablamos de brillo hacemos referencia al proceso mediante el cual se aade o se quita blanco a un color. Ms adelante estudiaremos con detalle estos conceptos. Por ltimo, existen diferentes sistemas comerciales de definicin de colores, siendo el ms conocido de ellos el sistema Pantone.
Creado en 1963 y buscando un estndar para la comunicacin y reproduccin de colores en las artes grficas, su nombre completo es Pantone Matching System, y se basa en la edicin de una serie de catlogos sobre diversos sustratos (superficies a imprimir), que suministran una codificacin estandarizada mediante un nmero de referencia y un color especfico.
TIPOS DE COLOR
En este captulo describiremos como a partir de los colores primarios se pueden conseguir otros, y dependiendo de las tonalidades hacer diferentes clasificaciones. El sistema de definicin de colores aditivos RGB, usado en diseo grfico digital y en diseo web, parte de tres colores primarios, rojo, verde y azul, a partir de los cuales es posible obtener todos los dems de espectro.
As, por mezcla directa de los colores primarios obtenemos los colores secundarios, cian, magenta y amarillo, y por mezcla directa de estos los colores terciarios. Si continuamos mezclando colores vecinos iremos obteniendo nuevos colores, consiguiendo una representacin de stos muy importante en diseo, denominada crculo cromtico, representativa de la descomposicin en colores de la luz solar, que nos va a ayudar a clasificar stos y a obtener sus combinaciones idneas.
91
Partiendo del crculo cromtico podemos establecer diferentes clasificaciones de los colores, entre las que destacan: Colores en clidos y fros
Los colores clidos dan sensacin de actividad, de alegra, de dinamismo, de confianza y amistad. Estos colores son el amarillo, el rojo, el naranja y la prpura en menor medida. Los colores fros dan sensacin de tranquilidad, de seriedad, de distanciamiento. Colores de este tipo son el azul, el verde, el azul verdoso, el violeta, cian, aqua, y a veces el celeste. Un color azul acuoso es perfecto para representar superficies metlicas. Verdes oscuros saturados expresan profundidad. Colores claros o luminosos y oscuros
92
Los colores claros inspiran limpieza, juventud, jovialidad, como ocurre con amarillos, verdes y naranjas, mientras que los oscuros inspiran seriedad, madurez, calma, como es el caso de los tonos rojos, azules y negros. Colores apagados o sucios y los colores pastel
Obtenidos cuando se aumenta o disminuye la luminosidad de todo el crculo cromtico. Los colores apagados expresan oscuridad, muerte, seriedad, mientras que los pastel sugieren luz, frescura y naturalidad. Gama de grises
93
Son colores neutros, formados por igual cantidad de rojo, verde y azul. Los colores grises tienen todos una expresin RGB hexadecimal del tipo #QQQQQQ, es decir, los seis caracteres iguales. Los grises son colores idneos para expresar seriedad, ambigedad, elegancia, aunque son por naturaleza colores algo tristes. En general, las tonalidades de la parte alta del espectro (rojos, anaranjados, amarillos) suelen ser percibidas como ms enrgicas y extravertidas, mientras que las de las partes bajas (verdes, azules, prpuras) suelen parecer ms tranquilas e introvertidas. Los verdes y los azules se perciben calmados, relajados y tranquilizantes. A la vez, los rojos, naranjas, y amarillos son percibidos como colores clidos, mientras que los azules, verdes y violetas son considerados colores fros. Las diferentes tonalidades tambin producen diferentes impresiones de distancia: un objeto azul o verde parece ms lejano que un rojo, naranja o marrn. NOTA: Hay que tener en cuenta siempre que la percepcin de un color depende en gran medida del rea ocupada por el mismo, siendo muy difcil apreciar el efecto de un color determinado si este se localiza en una zona pequea, sobre todo si est rodeado de otros colores.
PROPIEDADES DE LOS COLORES

Los colores tienen unas propiedades inherentes que les permite distinguirse de otros y acuar distintas definiciones de tipo de color. Todo color posee una serie de propiedades que le hacen variar de aspecto y que definen su apariencia final. Entre estas propiedades cabe distinguir: Matiz (Hue) Es el estado puro del color, sin el blanco o negro agregados, y es un atributo asociado con la longitud de onda dominante en la mezcla de las ondas luminosas. El Matiz se define
como un atributo de color que nos permite distinguir el rojo del azul, y se refiere al recorrido que hace un tono hacia uno u otro lado del circulo cromtico, por lo que el verde amarillento y el verde azulado sern matices diferentes del verde.
Los 3 colores primarios representan los 3 matices primarios, y mezclando estos podemos obtener los dems matices o colores. Dos colores son complementarios cuando estn uno frente a otro en el crculo de matices (crculo cromtico). Saturacin o Intensidad Tambin llamada Croma, este concepto representa la pureza o intensidad de un color particular, la viveza o palidez del mismo, y puede relacionarse con el ancho de banda de la luz que estamos visualizando. Los colores puros del espectro estn completamente saturados. Un color intenso es muy vivo. Cuanto ms se satura un color, mayor es la impresin de que el objeto se est moviendo.
Tambin puede ser definida por la cantidad de gris que contiene un color: mientras ms
gris o ms neutro es, menos brillante o menos "saturado" es. Igualmente, cualquier cambio hecho a un color puro automticamente baja su saturacin. Por ejemplo, decimos "un rojo muy saturado" cuando nos referimos a un rojo puro y rico. Pero cuando nos referimos a los tonos de un color que tiene algn valor de gris, los llamamos menos saturados. La saturacin del color se dice que es ms baja cuando se le aade su opuesto (llamado complementario) en el crculo cromtico. Para desaturar un color sin que vare su valor, hay que mezclarlo con un gris de blanco y negro de su mismo valor. Un color intenso como el azul perder su saturacin a medida que se le aada blanco y se convierta en celeste.
Otra forma de desaturar un color, es mezclarlo con su complementario, ya que produce su neutralizacin. Basndonos en estos conceptos podemos definir un color neutro como aquel en el cual no se percibe con claridad su saturacin. La intensidad de un color est determinada por su carcter de claro o apagado.
Esta propiedad es siempre comparativa, ya que relacionamos la intensidad en comparacin con otras cosas. Lo importante es aprender a distinguir las relaciones de intensidad, ya que sta muchas veces cambia cuando un color est rodeado por otro. Valor o Brillo (Value) Es un trmino que se usa para describir que tan claro u oscuro parece un color, y se refiere a la cantidad de luz percibida. El brillo se puede definir como la cantidad de "oscuridad" que tiene un color, es decir, representa lo claro u oscuro que es un color respecto de su color patrn. Es una propiedad importante, ya que va a crear sensaciones espaciales por medio del color. As, porciones de un mismo color con un fuertes diferencias de valor (contraste de valor) definen porciones diferentes en el espacio, mientras que un cambio gradual en el valor de un color (gradacin) da va a dar sensacin de contorno, de continuidad de un objeto en el espacio. El valor es el mayor grado de claridad u oscuridad de un color. Un azul, por ejemplo, mezclado con blanco, da como resultado un azul ms claro, es decir, de un valor ms alto.
Tambin denominado tono, es distinto al color, ya que se obtiene del agregado de blanco o negro a un color base.
A medida que a un color se le agrega mas negro, se intensifica dicha oscuridad y se obtiene un valor ms bajo. A medida que a un color se le agrega ms blanco se intensifica la claridad del mismo por lo que se obtienen valores ms altos. Dos colores diferentes(como el rojo y el azul) pueden llegar a tener el mismo tono, si consideramos el concepto como el mismo grado de claridad u oscuridad con relacin a la misma cantidad de blanco o negro que contengan, segn cada caso. La descripcin clsica de los valores corresponde a claro (cuando contiene cantidades de blanco), medio (cuando contiene cantidades de gris) y oscuro (cuando contiene cantidades de negro). Cuanto ms brillante es el color, mayor es la impresin de que el objeto est ms cerca de lo que en realidad est. Estas propiedades del color han dado lugar a un sistema especial de representacin de estos, tal como hemos visto en el apartado anterior, sistema HSV. Para expresar un color en este sistema se parte de los colores puros, y se expresan sus variaciones en estas tres propiedades mediante un tanto por ciento.
Podemos usar estas propiedades en la bsqueda de las gamas y contrastes de colores adecuados para nuestras pginas, siendo posible crear contrastes en el matiz, en la saturacin y en el brillo, y es tal vez este ltimo el ms efectivo. Grupos de colores Con estos conceptos en mente y tomando como base la rueda de colores podemos definir los siguientes grupos de colores, que nos crearn buenas combinaciones en una pgina web: Colores acromticos : aquellos situados en la zona central del crculo cromtico, prximos al centro de este, que han perdido tanta saturacin que no se aprecia en ellos el matiz
original.
Colores cromticos grises : situados cerca del centro del crculo cromtico, pero fuera de la zona de colores acromticos, en ellos se distingue el matiz original, aunque muy poco saturado.
Colores monocromticos : variaciones de saturacin de un mismo color (matiz), obtenidas por desplazamiento desde un color puro hasta el centro del crculo cromtico.
98
Colores complementarios : colores que se encuentran simtricos respecto al centro de la rueda. El Matiz vara en 180 entre uno y otro.
Colores complementarios cercanos : tomando como base un color en la rueda y despus otros dos que equidisten del complementario del primero.
Dobles complementarios : dos parejas de colores complementarios entre s.
99
Tradas complementarias : tres colores equidistantes tanto del centro de la rueda, como entre s, es decir, formando 120 uno del otro.
Gamas mltiples : escala de colores entre dos siguiendo una graduacin uniforme. Cuando los colores extremos estn muy prximos en el crculo cromtico, la gama originada es conocida tambin con el nombre de colores anlogos.
Mezcla brillante-tenue : se elige un color brillante puro y una variacin tenue de su complementario.
100
Todos estos grupos de colores forman paletas armnicas, aptas para ser usadas en composiciones grficas.
CONTRASTES DE COLOR
El contraste es un fenmeno con el que se pueden diferenciar colores atendiendo a la luminosidad, al color de fondo sobre el que se proyectan... Vimos en el tema sobre el diseo equilibrado que el contrate entre elementos era un aspecto importante a la hora de crear una composicin grfica, y que una de las formas ms efectiva de conseguirlo era mediante el color.
Cuando dos colores diferentes entran en contraste directo, el contraste intensifica las diferencias entre ambos. El contraste aumenta cuanto mayor sea el grado de diferencia y mayor sea el grado de contacto, llegando a su mximo contraste cuando un color est rodeado por otro. El efecto de contraste es recproco, ya que afecta a los dos colores que intervienen. Todos los colores de una composicin sufren la influencia de los colores con los que entran en contacto.
Existen diferentes tipos de contrastes: Contraste de luminosidad Tambin denominado contraste claro-oscuro, se produce al confrontar un color claro o saturado con blanco y un color oscuro o saturado de negro.
Es uno de los ms efectivos, siendo muy recomendable para contenidos textuales, que deben destacar con claridad sobre el fondo. Contraste de valor Cuando se presentan dos valores diferentes en contraste simultneo, el ms claro parecer ms alto y el ms oscuro, mas bajo. Por ejemplo, al colocar dos rectngulos granates, uno sobre fondo verdoso y el otro sobre fondo naranja, veremos ms claro el situado sobre fondo verdoso.
La yuxtaposicin de colores primarios exalta el valor de cada uno. Contraste de saturacin Se origina de la modulacin de un tono puro, saturndolo con blanco, negro o gris. El contraste puede darse entre colores puros o bien por la confrontacin de stos con otros no puros. Los colores puros pierden luminosidad cuando se les aade negro, y varan su saturacin mediante la adiccin del blanco, modificando los atributos de calidez y frialdad. El verde es el color que menos cambia mezclado tanto con blanco como con negro.
102
Como ejemplo, si situamos sobre un mismo fondo tres rectngulos con diferentes saturaciones de amarillo, contrastar ms el ms puro. Contraste de temperatura Es el contraste producido al confrontar un color clido con otro fro.
La calidez o frialdad de un color es relativa, ya que el color es modificado por los colores que lo rodean. As un amarillo puede ser clido con respecto a un azul y fro con respecto a un rojo. Y tambin un mismo amarillo puede ser ms clido si est rodeado de colores fros y menos clido si lo rodean con rojo, naranja, etc. Contraste de complementarios Dos colores complementarios son los que ofrecen juntos mejores posibilidades de contraste, aunque resultan muy violentos visualmente combinar dos colores complementarios intensos.
Para lograr una armona conviene que uno de ellos sea u color puro, y el otro est modulado con blanco o negro.
Contraste simultneo Es el fenmeno segn el cual nuestro ojo, para un color dado, exige simultneamente el color complementario, y si no le es dado lo produce l mismo.
El color complementario engendrado en el ojo del espectador es posible verlo, pero no existe en la realidad. Es debido a un proceso fisiolgico de correccin en el rgano de la vista. Otros contrastes Un color puro y brillante aplicado en una gran extensin de la pgina suele resultar irritante y cansino (especialmente, el amarillo), mientras que ese mismo color, usado en pequeas proporciones y sobre un fondo apagado puede crear sensacin de dinamismo.
Dos colores claros brillantes puestos uno al lado de otro impactan en nuestra vista, produciendo un efecto de rechazo, mientras que si esos dos mismos colores los situamos uno dentro del otro el efecto cambia por completo, resultando agradable.
Un mismo color puede cambiar mucho su aspecto visual dependiendo del color en el que
se encuentre embutido. Este efecto del cambio de apariencia de un color dependiendo de la luz incidente sobre l, del material de que esta formado o del diferente color que le sirva de fondo recibe el nombre de Metamerismo.
En este ejemplo vemos dos cuadrados, uno de color de fondo azul, y otro negro, ambos con un cuadrado amarillo dentro. Los dos cuadrados interiores son del mismo amarillo, pero parecen diferentes: en fondo azul se enmascara la pureza del amarillo, mientras que en fondo negro el amarillo muestra toda su pureza y frescura.
ESTUDIO DE ALGUNOS COLORES

En este captulo describiremos las sensaciones que producen algunos colores como el rojo, el verde y el azul, as como su posible uso y su significado en una web. Es bien sabido por los psiclogos la influencia emocional que desencadenan los colores en el espritu humano. Las respuestas emocionales varan enormemente dependiendo del color y de la intensidad de ste, as como de las diferentes combinaciones de colores que se pueden dar. Normalmente cada color individual lleva asociado un conjunto de emociones y asociaciones de ideas que le es propio. Hay que destacar que estas emociones asociadas corresponden a la cultura occidental, ya que en otras culturas los colores pueden expresar sentimientos totalmente opuestos a los arriba indicados (por ejemplo, en Japn el color blanco simboliza la muerte). Las sensaciones que producen los colores dependen de factores culturales y ambientales, y muchas veces de los propios prejuicios del usuario. Adems hay que sumar a esto que no todas las personas ven los colores de la misma forma, ya que hay personas que slo pueden ver bien la gama azul / naranja, otras la roja / verde y otras degeneran a la gama blanco / negro. Incluso se perciben los colores de forma diferente con el ojo derecho que con el izquierdo. Vamos a estudiar a continuacin las propiedades psicolgicas de los principales colores y sus combinaciones ms acertadas. Rojo El rojo es el nico color brillante de verdad y puro en su composicin. es exultante y
agresivo. Es el smbolo de la pasin ardiente y desbordada, de la sexualidad y el erotismo. Es un color clido, asociado con el sol y el calor, de tal manera que es posible sentirse ms acalorado en un ambiente pintado de rojo, aunque objetivamente la temperatura no haya variado. Su nombre procede del latn "russus".
El rojo es el color de la sangre, de la pasin, de la fuerza bruta y del fuego. Se utiliza en las fiestas del Espritu Santo, iluminando la llama del amor divino, y en las fiestas de los Mrtires, en la Pasin, y el Pentecosts. Color fundamental, ligado al principio de la vida, sugiere vitalidad, entusiasmo, pasin, agitacin, fuerza, sexo, calor, fuego, sangre, amor, audacia, valor, coraje, clera, crueldad, intensidad y virilidad, estando asociado con sentimientos enrgicos, con la excitacin apasionada o ertica. Es el color ms sensual de todo el crculo cromtico.
Tambin sugiere alarma, peligro, violencia, ira y enfado. Muchos animales y plantas usan el rojo para indicar su peligrosidad, y el hombre lo utiliza en todo tipo de indicaciones de
prohibicin y peligro.
El rojo es un color controvertido, pudiendo ser atractivo y seductor como unos labios de mujer pintados o desencadenar asco o mareo, como cuando se contempla un charco de sangre. En una composicin puede ser usado para llamar la atencin, para incitar una accin o para marcar los elementos ms importantes de una composicin o pgina web, pero cuando es usado en gran cantidad cansa la vista en exceso.
Un problema asociado al uso del color rojo es la mala gradacin que ofrece, ya que al modificar sus propiedades vamos obteniendo colores rosceos, poco aptos para su uso en la web.
Una posible solucin a este problema es desplazarnos en el crculo cromtico hacia los violetas o hacia los naranjas, es decir, usar el rojo como centro de la gama y completar sta con sus colores anlogos.
107
Otra buena forma es combinar el rojo grises y con los colores de su trada. En cuanto a su complementario, el verde, aunque contrasta muy bien con l, juntos no crean un efecto visual adecuado. Verde El verde es el color ms tranquilo y sedante de todos. Es el color de la calma indiferente: no transmite alegra, tristeza o pasin. Su nombre deriva del latn "viridis" (que tiene savia). Est asociado a conceptos como Naturaleza, salud, dinero, frescura, crecimiento, abundancia, fertilidad, plantas, bosques, vegetacin, primavera, frescor, esmeralda, honor, cortesa, civismo y vigor. El verde que tiende al amarillo cobra fuerza activa y soleada; si en l predomina el azul resulta ms sobrio y sofisticado.
Significa la esperanza, los bienes que han de venir, el deseo de vida eterna. Es el color propio del ao eclesistico y de gran nmero de fiestas, as como de ciertos domingos antes de Pentecosts. Su paleta de variaciones es rica en colores aprovechables para el diseo grfico y la web.
Se dice que es el color mas descansado para el ojo humano y que tiene poder de curacin ( ser por eso que las batas de los cirujanos son verdes?).
Es un color contradictorio. A muchas personas les influye un carcter desagradable, mientras que a otras les sugiere ms pasin que el rojo.
109
En las composiciones grficas y pginas web da buen juego. Sus degradados son buenos y sus variaciones tonales tambin, formando gamas apropiadas para diseo.
Su complementario es el rojo y, aunque contrastan muy bien, no suelen hacer buena combinacin. Con sus anlogos y su trada es posible obtener paletas aceptables para una pgina web.
Azul El color azul es el smbolo de la profundidad. Inmaterial y fro, suscita una predisposicin favorable. La sensacin de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Es un color reservado y entra dentro de los colores fros. Expresa armona, amistad, fidelidad, serenidad, sosiego, verdad, dignidad, confianza, masculinidad, sensualidad y comodidad. Su nombre es de origen incierto, pero parece que procede del snscrito "rajavarta" (rizo del rey). Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Cuanto ms se clarifica ms pierde atraccin y se vuelve indiferente y vaco. Cuanto ms se oscurece ms atrae hacia el infinito. Posee tambin la virtud de crear la ilusin ptica
de retroceder.
Es el color del cielo sin nubes, sin amenazas, donde vuelan las aves con libertad, del agua cristalina, fuente de vida para animales y plantas, de la Tierra, nuestro bello planeta azul.
Est asociado a conceptos como seriedad, compromiso, lealtad, justicia y fidelidad, pero tambin puede expresar melancola, tristeza, pasividad y depresin. Si es muy plido puede inspirar frescura e incluso fro. Si es intermedio, da sensacin de elegancia, de frescura. Si es oscuro da sensacin de espiritualidad, de seriedad, de responsabilidad.
111
El azul es un color que da mucho juego en las composiciones grficas en general y en las pginas web en concreto. Es utilizado ampliamente como color corporativo, por la seriedad y confianza que inspira, y admite buenas gradaciones, pudiendo ser el color dominante en una pgina.
Combina muy bien con su complementario, el naranja, y con las variaciones de ste, siendo tpicos los fondos azules con textos naranjas, sobre todo en dinteles con logotipo.
Tambin ofrece una buena gama de anlogos y hace buenos juegos con los colores de su triada.
Es un color que influye sobre el apetito, disminuyendo ste, seguramente porque no hay ningn alimento azul en la naturaleza, por lo que no es aconsejable su uso para una pgina sobre recetas de cocina o productos alimenticios.
Amarillo El color amarillo es el smbolo de la deidad en muchas culturas, y es el color ms luminoso, ms clido, ardiente y expansivo. Es un color optimista, moderno, y denota alegra, entusiasmo, pasin, fuerza, sexo, calor, primavera, inocencia, infancia, juventud. Tambin se usa para expresar peligro y precaucin. Su nombre procede del latn "amrus" (amargo). Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo.
Si es muy brillante puede indicar peligro, y si es muy suave puede sugerir delicadeza. Un entorno amarillo medio o plido hace a la gente sentirse cmoda, caliente.
Se ha asociado siempre el amarillo a la intelectualidad y al pensamiento claro y hay psiclogos que dicen que este color ayuda a memorizar datos a las personas.
El amarillo llama mucho la atencin en un entorno o composicin, utilizndose a menudo en elementos que conviene hacer visibles. Pero hay que tener en cuenta que es el color que fatiga mas a la vista humana, pudiendo llegar a ser aplastante, porque causa una estimulacin visual excesiva, pudiendo originar sensacin de irritabilidad en las personas.
Con el amarillo se obtienen mejores degradados que con el rojo, pero conforme se le va quitando saturacin se va haciendo poco perceptible sobre fondos claros.
Sin embargo, es un color que combina bien con sus cercanos (verdes y anaranjados), pudiendo obtenerse con ellos buenas paletas para una composicin.
114
Con sus anlogos combina muy bien, as como con su complementario, el morado, pero con los de su triada crea a veces un efecto visual demasiado pesado, debiendo estudiarse con cuidado su uso conjunto.
Como regla general, su uso en una pgina web debe quedar limitado a elementos puntuales (formando parte de un logotipo o icono, en textos cortos sobre fondo oscuro, etc), procurando siempre que ocupe una zona limitada. Naranja El color naranja tiene un carcter acogedor, clido, estimulante y una cualidad dinmica muy positiva y energtica. Posee una fuerza activa, radiante y expansiva. Su nombre deriva del rabe "narandj". Representa la alegra, la juventud, el calor, el verano. Es el color de la carne y el color amistoso del fuego del hogar. Es vibrante como la luz del sol, extico como las frutas tropicales, jugoso como la naranja, sugiere informalidad en el trato y amistad. Pero tambin puede expresar inestabilidad, disimulo e hipocresa.
115
La paleta de variaciones del naranja es la misma que la del color marrn, ya que ambos colores son de naturaleza similares.
Es un color que destaca mucho sobre el entorno que le rodea, por lo que se puede usar para dar un mayor peso visual a ciertos elementos de una composicin, aunque hay que ser comedido en su uso, ya que si es brillante llena mucho la vista del espectador.
116
Admite buenos degradados, y combina muy bien con su complementario, dando buenos contrastes, sobre todo cuando uno es claro y el otro oscuro.
Por el contrario, con los colores de su trada crea combinaciones que pueden resultar demasiado coloridas, por lo que, de usarse, se debern utilizar con sumo cuidado, dejndolos para elementos de pequeas dimensiones.
Rosa El color rosa, una especie de prpura plido, sugiere calma y tranquilidad. Asociado al sexo femenino en nuestra cultura, puede llegar a interpretarse como debilidad en ciertos entornos. Su nombre viene del latn "rosa", y su paleta de variaciones es la misma que la del prpura, al ser ambos colores similares en su naturaleza.
Es un color de uso complicado. Tiene muy malos degradados y capta mucho la atencin del espectador, sobre todo si es brillante o muy saturado, por lo que queda indicado en la web para zonas de pequea superficie o elementos puntuales. Si es apagado o poco
saturado, puede usarse como fondo de pgina, sobre todo en pginas destinadas a pblico femenino.
Prpura El prpura se define color un rojo subido que tira a violado. Es de naturaleza similar al rosa, y ambos colores tienen asociada la misma paleta de variaciones.
Su nombre viene de un molusco marino que segrega una tinta que al contacto del aire adquiere un color rojo ms o menos oscuro, rojo violceo o violado, con la que se preparaba un tinte muy costoso, con el que se daba color a las vestiduras propias de sumos sacerdotes, cnsules, reyes, emperadores, etc. Por este motivo, en la antigedad era considerado el ms bello, el ms estable y el ms precioso de los colores.
118
Es un color bastante contradictorio. Sugiere abundancia, sofisticacin, inteligencia, espiritualidad, religiosidad, dignidad, tranquilidad, misterio, aristocracia y pasin. Pero tambin puede evocar frivolidad, artificialidad, luto, muerte, nausea, orgullo y pomposidad.
Es un color que combina bien, permitiendo gamas variadas, y contrasta fuertemente con su complementario, el amarillo.
Violeta El violeta es un color morado claro, parecido al de la flor del mismo nombre, obtenido mezclando rojo y azul. Su nombre deriva del latn "viola". Es el color de la templanza, de la lucidez y de la reflexin. Es mstico, melanclico y
puede representar tambin la introversin. Es la ensea de la penitencia, y se emplea por el Adviento, en Cuaresma, en las Vigilias y Cuatro Tiempos, Septuagsima y Rogaciones. Cuando el violeta deriva el lila o morado, se aplana y pierde su potencial de concentracin positiva. Cuando tiende al prpura proyecta una sensacin de majestad.
Presenta una paleta de variaciones completa, pero no muy til en diseo web, sobre todo en caso de zonas de tamao medio y grande, ya que es un color extrao.
Representa la fantasa, el juego, la impulsividad y los estados de sueo, aunque tambin puede sugerir pesadillas o locura. Marrn El color marrn como tal es una mezcla en la que predominan el rojo y el verde, pudiendo obtenerse por desaturacin del naranja o por mezcla de este color con el negro, por lo
que en diferentes tratados sobre el color aparecen asociados ambos colores, siendo su paleta de variaciones la misma.
Es un color masculino, severo, confortable, evocador del ambiente otoal, y da la impresin de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos. Su nombre procede del francs "marrn" (castaa comestible de ese color), y sugiere edad, cosas viejas, madera, ladrillo, piel, cuero, hogar.
En las pginas web da buenos resultados, ya que es un color suave, agradable a la vista, cmodo, que genera una gama extensa de colores aprovechables.
Negro, gris y blanco El color negro viene definido por la ausencia de luz y color, siendo su cdigo hexadecimal representativo #000000, aunque casi todos lo colores al quitarles brillo, tono o saturacin van acercndose al negro. Las superficies de color negro son aquellas que absorben todas las longitudes de onda de la luz solar, por lo que no reflejan ninguna radiacin visible. Su nombre procede del latn "nger". El negro confiere nobleza y elegancia, sobre todo cuando es brillante, y es el color de la
elegancia, de la seduccin, del misterio, del silencio, de la noche, del cuervo, del mal, de lo clandestino o ilegal y, de la tristeza y la melancola, de la infelicidad y desventura, del enfado y la irritabilidad. En nuestra cultura es tambin el color de la muerte y del luto, y se reserva para las misas de difuntos y el Viernes Santo. Es un color casi imprescindible en toda composicin, pudiendo usarse como color del contorno de ciertos elemento, en elementos separadores de espacios o como color de fondos, en cuyo caso en los contenidos de la pgina debern predominar los colores claros para que se puedan visualizar correctamente.
Es tambin el color ms usado para los textos, debido al alto contraste que ofrece sobre fondos blancos o claros.
El negro no posee degradados propios, al ser un color puro (o un no-color), y en cuanto modificamos su saturacin obtenemos grises, colores neutros, formado por cantidades iguales de rojo, verde y azul. En pintura se obtiene normalmente mezclando el blanco y el negro. El gris es un color neutro y pasivo, que aporta poco a ninguna informacin visual. Es el color del cielo cubierto, del hierro y del mercurio, y sugiere seriedad, madurez, neutralidad, equilibrio, indecisin, ausencia de energa, duda y melancola, y se usa para expresar las cosas o personas carentes de atractivo o singularidad. Su nombre parece derivar del provenzal "gris".
122
Es un color que puede resultar montono si se usa en demasa en una composicin, y est muy asociado a las aplicaciones informticas, tal vez porque la mayora de las interfaces grficas son de color gris o lo contienen.
Los grises medio-claros (alrededor del #CCCCCC) tienen poca atraccin visual, siendo idneos para fondos o elementos de relleno que no aporten informacin al espectador.
Si vamos aumentando progresivamente la luminosidad del gris llega un momento en que obtenemos el color blanco, de cdigo #FFFFFF, la luz pura, la unin del 100% de los tres colores primarios aditivos, rojo, verde y azul. El blanco representa la pureza, la inocencia, la limpieza, la ligereza, la juventud, la suavidad, la paz, la felicidad, la pureza, la inocencia, el triunfo, la gloria y la inmortalidad.. Es el color de la nieve, de las nubes limpias, de la leche fresca. Se emplea en las fiestas del Seor, de la Virgen, de los santos y en las ceremonias nupciales. Es un color latente, capaz de potenciar los otros colores vecinos, creando una impresin luminosa de vaco positivo y de infinito. El blanco es el fondo universal de la comunicacin grfica. En imprenta no se suele manejar color, sino que se aprovecha para representarlo el color blanco del soporte sobre el que se imprime. En la web, el color blanco se produce en el monitor enfocando en los puntos de pantalla los tres caones de color a la mxima intensidad. Es un color fundamental en diseo, ya que, adems de usarse como color para los elementos grficos y textuales, tambin define normalmente los espacios vacos de la composicin o pgina web.
123
Estos espacios en blanco son elementos de diseo tan importantes como los de color, y se pueden observar con facilidad alejndose de la pantalla del ordenador y entornando los ojos, con lo que distinguiremos mejor las diferentes zonas visuales de la pgina.
No suele ser conveniente para los textos, salvo que estn situados sobre un fondo muy oscuro sobre el que contrasten bien. No olvidemos que los contenidos textuales deben aparecer siempre perfectamente legibles en una pgina. NOTA: El significado del color puede cambiar en los diferentes pases, culturas y religiones. Por ejemplo, en China el rojo se asocia con las bodas y representa buena suerte y en la India este color est unido a la caballerosidad. Tradicionalmente se relaciona con los celos, la envidia, la adolescencia, la risa y el placer, e incluso en algunos casos se le denomina como el color de la mala suerte. Por este motivo, a la hora de usar los colores como fuente de impulsos psicolgicos deberemos estudiar con detenimiento el pblico objetivo al que ir destinada la composicin grfica o pgina web.
124
EL COLOR EN LA WEB COLORES DISPONIBLES PARA LA WEB

Descubriremos el nmero de colores que podremos usar en una web, y si son estos los mismos se la web se ejecuta en un ordenador o en otro. El ojo humano puede distinguir aproximadamente entre 7 y 10 millones de colores, lo que hace que la vista sea para nosotros el principal sentido que nos une con el exterior, pudindose afirmar que alrededor del 80% de la informacin que recibimos del mundo exterior es visual.
Pintores y diseadores grficos utilizan esta capacidad humana de apreciar colores para crear obras que profundicen en el alma y que inspiren sentimientos en los seres que las contemplan. Pero qu podemos hacer cuando debemos expresarnos con un nmero limitado de colores?. Hace tan slo unos pocos aos la mayora de los ordenadores de los que dispona el pblico en general eran, con la visin que tenemos hoy en da, unos trastos grandes, lentos y con pocas prestaciones, no slo a nivel de memorias y procesadores, si no tambin a nivel de prestaciones grficas. Y los perifricos eran asimismo muy limitados. Todo ello originaba que a nivel grfico estos equipos trabajaran tan slo con 256 colores. Actualmente los equipos informticos aumentan da a da sus prestaciones, y lo normal ahora es trabajar con millones de colores y con monitores de altas prestaciones. La mayora de la gente dispone ya de avanzadas tarjetas grficas, con memorias de hasta 64 megas, que desarrollan un trabajo de millones de texels (el txel, elemento de textura, es a los grficos 3D lo que el pxel es a los grficos bidimensionales). Pero a la hora de la verdad de cuantos colores disponemos para trabajar los diseadores web?. La respuesta a sta pregunta es desalentadora, ya que nosotros dependemos a la hora de mostrar nuestras pginas de unos programas especficos, los navegadores o
browsers, que son los encargados de presentar en pantalla el contenido de las pginas que le llegan desde el servidor mediante el protocolo HTTP. Estos programas, aparte de la gran diferencia a la hora de trabajar que hay entre ellos, interaccionan con el sistema operativo en el que corren, lo que origina al final un galimatas que hace que los colores de nuestras pginas varen segn el ordenador usado, segn el navegador y segn el sistema operativo en el que ste est montado. Por todo esto, los millones de colores de los que se disponen para trabajar quedan reducidos a tan slo unos pocos (y tan pocos) a la hora de crear pginas web. El sistema operativo identifica tres colores bsicos, a partir de los cuales construye todos los dems mediante un proceso de mezcla por unidades de pantalla (pixels). Estos colores, como ya hemos visto, son el rojo, el azul y el verde, y el sistema por ellos definido se conoce como RGB. Los bits de profundidad de color marcan cuntos bits de informacin disponemos para definir los colores derivados de stos colores primarios. A ms bits, mayor nmero de variaciones de un color primario podemos tener. Para 256 colores se precisan 8 bits, para obtener miles de colores necesitamos 16 bits (color de alta densidad) y para obtener millones de colores hacen falta 24 bits (color verdadero). Existe tambin otra profundidad de color, 32 bits, pero con ella no se consiguen ms colores, si no que los que usemos se muestren ms rpido. En sus inicios, la mayora de los usuarios disponan de monitores capaces de interpretar tan solo 256 colores (8 bits). Si tenemos en cuenta que el propio sistema operativo de queda con 40 para su gestin interna, el resultado es que quedaban 216 colores para presentar grficos en pantalla, colores que por otro lado no estaban definidos de forma estndar. En 1994 la empresa Netscape estableci una subdivisin del crculo cromtico en 216 colores equidistantes entre s, obteniendo un conjunto de colores que denominaron Netscape Color Cube.
Esta divisin del crculo se corresponde con 6 tonos de rojo, 6 de azul y 6 de verde, a partir de los cuales se obtienen, por mezcla entre ellos, los 216 colores posibles, por lo que todos ellos tendrn un cdigo hexadecimal en el que cada color primario viene definido por una pareja de valores iguales, debiendo estos ser 00,33,66,99,CC o FF.
126
Con el paso del tiempo los ordenadores fueros aumentando sus prestaciones grficas, siendo comn en la actualidad profundidades de color de 16, 24 y 32 bits. Si usamos una profundidad de 24 bits, correspondiente a millones de colores, disponemos de una amplia gama para trabajar. Cuando usamos una profundidad de color de 16 bits disponemos de miles de colores, pero surge entonces el problema adicional de que la divisin de esta gama de colores no se corresponde con la de 256 colores ni con la de millones de colores, dando el mismo cdigo colores levemente diferentes. Por ejemplo, #663399 es el mismo color a 256 y a millones, pero no es igual que el obtenido con miles de colores.
Con el paso del tiempo se ha adoptado una lista de colores a los que se le ha puesto un nombre representativo en ingls, de tal forma que los modernos navegadores interpretan el mismo y lo traducen internamente por su valor hexadecimal equivalente.
Paletas de color seguras. Websafe y Reallysafe

Las paletas de colores dan limitaciones a la hora de presentar los colores que contiene la web. En este captulo vamos a ver cuales son estas limitaciones. La mayora de los colores obtenidos con 16 bits de profundidad son diferentes a los obtenidos con 8 y 24 bits. Adems, si se usan 8 bits (256 colores), el monitor ser incapaz de presentar muchos de los colores obtenidos si la pgina se ha diseado a millones de
colores. Queda patente entonces la necesidad de trabajar con una gama de colores compatible con todas las profundidades. Pero cuntos son estos colores?. Aqu viene la decepcin del diseador web, ya que este nmero es en realidad muy bajo. Tradicionalmente se ha considerado como paleta de colores segura la que hemos antes mencionado, formada por los 216 colores del tipo #aabbcc, donde a, b y c deben ser 0,3,6,9,C o F, que recibe el nombre de WebSafe. Esta paleta no es en realidad segura, debido al problema con la profundidad de miles de colores. Si ha esto aadimos la variable adicional de que cada sistema operativo y cada navegador interpreta los colores a su antojo, el resultado final es que slo disponemos de una pequea paleta, formada por 22 colores. Esta paleta se conoce con el nombre de ReallySafe. En la siguiente imagen tenis la paleta WebSafe. Dentro de ella, destacados en color rojo, se encuentran los colores de la paleta ReallySafe.
128
Como comprenderis, trabajar tan slo con los 22 colores de la paleta ReallySafe no nos va a permitir construir un sitio web muy atractivo, ya que la limitacin impuesta resulta excesiva. Como alternativa podemos trabajar dirigindonos al mayor nmero de usuarios posibles, y para ello podemos disear nuestras pginas usando bien la paleta de 216 colores, con lo que tendremos cubierto el rango de usuarios con sistemas de color de 8 bits y de 24 bits. Esta paleta WebSafe segn el sistema operativo usado.
129
Y tambin segn el navegador web.
130
Estas limitaciones de colores pueden parecer una traba al diseo de pginas web, pero no debemos darle ms importancia de la debido. En primer lugar, 216 colores bien utilizados dan mucho juego. En segundo lugar, podemos disear nuestras pginas con toda la gama de 24 bits (millones de colores) ya que actualmente la mayora de usuarios manejan ordenadores de altas prestaciones. En este punto, el sentido comn, la experiencia y el testeo de la pgina en diferentes sistemas y navegadores son las mejores armas para conseguir el diseo buscado.
EL PROBLEMA DE LAS IMGENES

Los colores de las imgenes pueden sufrir cambios si deben ir encapsulados en estructuras tales como tablas, capas, etc. Esto puede tener una solucin aproximada, pero no ptima. Vamos a ver los problemas que se pueden presentar. Un problema adicional relacionado con los colores se produce cuando deseamos insertar en nuestra pgina una imagen dentro de la celda de una tabla, de una capa, etc., especialmente si se trata de una imagen en formato GIF, ya que este tipo de grficos tienen limitados su gama de colores a 256. El hecho es que frecuentemente nos encontraremos que el color de fondo de la imagen no nos va a coincidir con el color de fondo de la celda o capa, aunque el cdigo hexadecimal empleado en ambos sea el mismo.
Esto es debido a que a veces el formato GIF no es capaz de interpretar debidamente colores que estn fuera de la paleta segura, en cuyo caso puede optar por aproximarlo al color ms parecido de su paleta o intentar simular el color pedido mezclando dos colores de los que dispone, procedimiento que se conoce con el nombre de dithering.
El problema se acentuar ms an si el usuario dispone de un sistema de 256 colores, ya que entonces el sistema no ser capaz de interpretar correctamente ni el color del fondo del GIF ni el color de fondo de la tabla o contenedor, con lo que el contraste entre imagen
y celda o capa se acenta.
Para solucionar este problema podemos hacer tres cosas:

Usar colores e fondo pertenecientes a la paleta WebSafe. Usar imgenes GIF de fondo transparente. Situar las imgenes fuera de celdas de tabla o capas que deban tener color de fondo.
Ninguna de estas soluciones es ptima, pero son las nicas de que disponemos. Si optamos por usar una imagen de fondo transparente, deberemos pensar que si sta va a funcionar como un enlace y hemos configurado un estilo para el estado hover de estos elementos, al color de fondo de la imagen cambiar cuando el puntero del ratn se site sobre ella. Si estamos diseando para millones de colores podemos guardar la imagen en formato PNG, que tericamente soporta millones de colores y transparencias, aunque hay ocasiones en que la interpretacin del color de fondo de la imagen no es correcta en este formato. Por lo tanto la mejor solucin al problema de las imgenes es utilizar siempre para los fondos colores de la paleta WebSafe, ya que de esta forma tendremos garantizada la compatibilidad entre fondos a 256 colores y a millones de colores.
COLORES Y PARTES DE UNA PGINA

Es importante saber escoger los colores que definirn una parte de la pgina para que sea factible el cometido de sta. Veremos que colores son los ms apropiados para cada seccin del sitio. Cada elemento de una pgina web y cada agrupacin de ellos debe desempear en la misma un papel perfectamente definido, que adems debe corresponderse con su peso visual dentro del total de la pgina. Una de las herramientas ms potentes con las que cuenta el diseador web para cumplir este objetivo es el uso adecuado de los colores. En los casos de pginas ms complejas, y desde el punto de vista de lo que observa el usuario, podemos dividir estas en cuerpo o seccin principal, dintel, men y pie de pgina. Sin duda alguna la parte ms importante de las mencionadas es el cuerpo de la pgina , ya que en l va a figurar la informacin que queremos transmitir al visitante. Por esto, los colores dominantes en ella deben permitir una lectura de contenidos clara y amena, as como una perfecta visualizacin de sus elementos grficos. Para ello, deberemos usar un color para el texto que contraste adecuadamente sobre el del fondo de la pgina. Buenos contrastes se obtienen: - Con fondos claros y textos oscuros, o al revs.
132
- Con fondos fros y textos clidos, o al revs, siempre que no sean anlogos.
El tema del contraste entre fondo y texto es difcil de manejar en las pginas web, debido fundamentalmente a la poca resolucin que tenemos en la pantalla del monitor, que suele ser de unos 5.200 puntos por pulgada cuadrada, casi 300 veces menos de la resolucin que tiene una pgina de revista tradicional. Por esto, el tpico conjunto fondo blanco-texto negro sigue siendo en las pginas web el mas idneo para conseguir un contraste ptimo. Los fondos negros o muy oscuros pueden dar un buen contraste con casi cualquier color de texto que sea luminoso, mientras que los fondos coloreados pueden llegar a trabajar bien si son apagados y de baja saturacin, como es el caso de tonos pasteles, grises o tierra. Por otro lado, no es recomendable usar imgenes de fondo en las pginas web, salvo que esta sea de un color y tono muy apagados y con poco contenido grfico por unidad de pantalla, ya que despistan mucho al usuario y enmascaran excesivamente el texto y los dems elementos de la pgina. Slo se deben usar cuando se realiza un buen estudio del mismo por un profesional del diseo web, ya que adems de lo antes expuesto ralentizan mucho la carga de la pgina. Los enlaces que figuren en esta seccin deben ser claramente diferenciados por el usuario, sobre todo si la pgina va dirigida a un pblico muy general. Si no usamos los colores de enlace estndares (azules vivos con texto subrayado), s que deberemos usar un color que destaque claramente del texto informativo y del fondo.
133
El dintel se localiza por costumbre en la parte superior de la pgina, y en l suele (y casi debe) figurar el logotipo de nuestra pgina, asociacin o empresa. Es importante la presencia de un logotipo, ya que crea un signo de continuidad y de identidad en nuestras pginas, mostrando a los visitante rpidamente dnde se encuentran. El color de este debe ser tal que destaque claramente sobre el fondo.
En los idiomas occidentales se leen las pginas de arriba abajo y de izquierda a derecha, motivo por el cual el logotipo se sita casi siempre en la esquina superior izquierda. Si el color de nuestro logo es parecido al que vamos a dar al fondo de la pgina podemos crear un entorno alrededor del mismo que permita su correcta visin, lo que se suele conseguir situando una banda en la zona superior de la pgina, con un color de fondo diferente al del cuerpo de la misma y tal que el logo destaque adecuadamente sobre l. Tambin es normal situar en esta zona, a la derecha del logo, un mensaje claro y directo sobre la identidad y contenido de la pgina. El men de navegacin es tal vez el elemento ms interactivo de una pgina, facilitando al visitante una rpida navegacin por todo el contenido del sitio web. Sus enlaces deben aunar el ser fcilmente visibles con el no ser demasiado impactantes, ya que no deben quitarle importancia ni al cabecero ni al texto del cuerpo.
134
Podemos crear para esta zona una banda vertical de un color diferente al del cuerpo, que puede ser igual al del cabecero o no. Sus enlaces pueden fundirse un poco con el fondo, dando as una sensacin de continuidad. Muchos diseadores se basan el los mens de imgenes para conseguir esto, pues les permiten tener un mayor control sobre el resultado final. En contrapartida, tardarn ms en cargar. Una buena solucin es el uso de textos o imgenes que inicialmente no destacan demasiado sobre el fondo, pero que al situar el cursor sobre ellas se iluminan o cambian de color, producindose un efecto positivo con ello.
Tambin es corriente usar la parte baja del dintel para insertar en ella el men de navegacin. En este caso, su color no debe destacar en exceso sobre el del dintel, debiendo buscar siempre la plena integracin visual entre ambos. Por ltimo, el pie de pgina es el elemento menos importante de la pgina, de tal forma que muchos autores ni siquiera lo consideran. Caso de usarse, no conviene que su color cambie respecto al del fondo del cuerpo, y si lo hace debe ser muy ligeramente, ya que si
no podemos distraer la atencin del usuario y crear un cuerpo de pgina encajonado.
En el pie de pgina se suelen colocar enlaces de tipo terciario, enlaces de correo o accesos a servicios secundarios que proporcione nuestro sitio web.
ELECCIN DE LA PALETA PARA UN SITIO WEB

Es necesario escoger colores acordes con los que lleva el logotipo de la pgina. En este captulo vamos a ver relaciones posibles para conseguir la funcionalidad esperada. A la hora construir una pgina lo primero que tenemos que tener claro es la gama de colores que vamos a emplear en sus distintas partes, y para ello debemos comenzar siempre con seleccionar un color o colores base, que ser el que de un espritu propio a nuestro sitio. Es importante la eleccin de esta gama, que, por regla general, ser conveniente mantener en todas las pginas del sitio, logrando con ello establecer una identidad propia y una continuidad entre todas las pginas que lo forman. Si tenemos elegido o impuesto un logotipo, sus colores van a ser los que marquen la gua para el resto de la pgina, trabajando en las diferentes partes de la pgina con los degradados claros y oscuros de estos colores base. De ser necesaria la introduccin de otros colores (uno o dos), tendremos que elegir estos de forma que sean equilibrados con los del logotipo y trabajen juntos en buena armona. Es conveniente que nos basemos en una de las gamas de colores estudiadas en el captulo anterior (monocromticas, anlogos, tradas, etc.), sobre todo si no tenemos gran experiencia en el diseo con colores, y que apliquemos los conceptos ya estudiados (jerarqua visual, escala, contrastes, etc.). Como ejemplos, podemos considerar las siguientes paletas genricas:
136
137
138
Adems, podemos seguir una serie de reglas generales que nos orientarn: - Los colores primarios, puros, brillantes, son demasiado comunes, por lo que dan muy poca informacin al ojo. Por esto no conviene basarse nunca en ellos para construir nuestras pginas.
139
- El color de los enlaces conviene que sea el azul estndar del navegador o al menos permanecer subrayados y con un color bien diferenciado de los del resto de elementos textuales de la pgina.
- Pginas destinadas a un pblico general deben estar basadas en combinaciones blanconegro- color logotipo, en colores ms bien neutros, que puedan gustar a la mayora, como colores secundarios o terciarios en tonos pastel, o en una bien estudiada gama de grises. Es fundamental en estas pginas dar a las pginas la identidad corporativa de la empresa u organizacin que representan.
- Pginas orientadas a un pblico joven pueden adoptar colores vivos, primarios, con altos contrastes entre fondo y contenido, o bien con fondos oscuros y textos claros, con la inclusin de pequeas animaciones en Flash de tonos vistosos.
140
- Pginas destinadas a un pblico adulto deben estar diseadas con colores serios, elegantes, fros, sin altos contrastes de tono, en colores neutros, incluso tirando a grises. Siempre podemos recurrir en este caso a el tpico estndar de fondo blanco y letras negras o gris oscuro.
- Pginas de empresa o de instituciones deben estar diseadas de acuerdo con los colores corporativos de la misma, incluyendo siempre el logotipo.
141
- Pginas divulgativas, como manuales y artculos, deben presentar el texto de forma que destaque adecuadamente sobre el fondo, sin usar colores chillones que cansen la vista, ya que el objetivo fundamental de estas pginas es ser ledas. Consejo: fondo claro y letras oscuras, que destaquen muy bien.
- Pginas exticas y a la vez elegantes se pueden obtener con fondo negro o color muy oscuro y letras y/o motivos dorados, blancos o prpuras-rojos.
142
- Pginas destinadas a ser impresas por el usuario final no deben emplear colores oscuros como fondo, ya que obligara a dar colores claros a los textos para que se pudieran visualizar. Si se hace as y el usuario no tiene activada la opcin de imprimir los colores de fondo, no ver nada en la pgina impresa, y si la tiene activada, gastar mucha tinta, obteniendo de todas formas un mal resultado. Consejo: fondos blancos o muy claros, con textos oscuros, o versin especial para impresin con estos colores.
Estas consideraciones generales pueden ayudarnos a manejar correctamente los colores en nuestras pginas web. Pero, como siempre, la practica es lo que manda, y afortunadamente podemos navegar y navegar por Internet, visualizando pginas del tipo concreto que queremos disear para aprender y ver cmo han resuelto el diseo unos y otros autores.
HERRAMIENTAS BSICAS PARA TRABAJAR CON COLORES

Existe una gran variedad de herramientas que nos permiten manipular las caractersticas de los colores para conseguir los que necesitemos. Abordamos una
amplia lista de programas en este captulo. Existen en el mercado multitud de aplicaciones grficas, tanto para trabajar con grficos vectoriales y animaciones como para retoque de imgenes, algunas de las cuales estudiaremos de forma general al final de este curso de Diseo Grfico para la Web. Pero hay tambin otras que, a pesar de su poco precio y tamao (algunas son gratuitas y ocupan muy pocos Kb), son muy tiles para el trabajo diario con colores en un ordenador, e imprescindibles para un diseador web. Entre ellas destacan por sus funcionalidades EyeDropper y 1 st QuickRes, de las cuales vamos a hablar un poco. EyeDropper EyeDropper es bsicamente un capturador de colores pantalla, capaz de obtener el cdigo de un punto dado en diferentes modelos de color. Adems, permite tambin capturar una zona de pantalla, copindola en el portapapeles, con lo que queda disponible para su uso en otras aplicaciones grficas. Es propiedad de la empresa Inetia, y podis descargarlo en http://eyedropper.inetia.com/ Es de fcil descarga e instalacin, y tras la misma aparecer un pequeo icono del programa en la barra de tareas, junto al reloj del sistema. Para lanzar la aplicacin basta hacer doble click sobre este icono, con lo que aparecer una ventana propia junto al puntero del ratn, que acompaa a ste en su movimiento por la pantalla. Esta ventana, se cierra haciendo de nuevo doble click sobre el icono.
En dicha ventana aparecer aumentada la zona situada alrededor del puntero, as como una cruz que indica el punto exacto sobre el que se encuentra, mostrando el color del mismo. En la parte derecha aparecen los cdigos del color, tanto en formato RGB hexadecimal y decimal como en formato CMYK, y las coordenadas del punto respecto la esquina superior izquierda de la pantalla activa del monitor. Si pulsamos con el botn derecho del ratn sobre el icono de EyeDropper aparecer un men emergente con la opcin Properties, que nos llevar a una ventana de configuracin con una serie de pestaas, entre las que destacan las siguientes:
- Preferences: Define las propiedades generales de la aplicacin.
En esta ventana podemos fijar en qu modelo de color deseamos que aparezcan los cdigos, si deben aparecer las coordenadas del punto y si la aplicacin debe inicializarse cuando arranquemos el sistema operativo (aconsejable). - Clipboard: Configura el mtodo de captura del cdigo del color en el portapapeles.
La opcin ms aconsejable para el diseador web es definir la captura en el modelo RGB hexadecimal, usando para ello las combinaciones estndar del sistema, que en el caso de Windows son las teclas CTRL+C para copiar el cdigo en el portapapeles y CTRL+V para pegarlo en otras aplicacin. - Screen Capture: Establece la tecla que activa la captura de una zona de la pantalla como una imagen, as como el mtodo de finalizacin de la misma.
145
Como tecla de activacin es conveniente escoger alguna que no se use normalmente, como una de las teclas superiores F. En cuanto al mtodo de finalizacin, lo normal es establecer el evento up del botn izquierdo del ratn, habitual en los programas de captura. Si definimos como tecla de captura F2, por ejemplo, para iniciar la capturar pulsaremos dicha tecla, luego el botn izquierdo del ratn y, sin soltarlo, definimos un rectngulo en pantalla, que ser la zona capturada. Para finalizar, soltamos el botn del ratn, quedando la imagen capturada en el portapapeles, lista para ser pegada en cualquier otra aplicacin, grfica o no (podemos pegarla en cualquier aplicacin de Office, como Word o Power Point). - Convert Colors: Define el tipo de paleta en que queremos capturar el color.
Sus posibles valores son Normal (aconsejado), que utiliza la profundidad de color activa en nuestro ordenador, Grayscale, que captura el color en paleta de grises, y WebSafe, que lo aproxima al color ms cercano en la paleta web segura de 256 colores. Como veis, EyeDropper es un programa muy til, imprescindible para el diseador, que
con un poco de prctica facilita espectacularmente el trabajo con colores. 1 st QuickRes En su trabajo diario, el diseador web debe verificar cmo se visualizan las pginas que est creando a diferentes resoluciones y profundidades de color. Los sistemas operativos ofrecen un panel de configuracin propio para estas tareas, pero acceder constantemente al mismo nos hace perder mucho tiempo. Propiedad de la empresa GreenParrots, 1 st QuickRes es una pequea aplicacin que nos ayuda a manejar las propiedades de nuestro monitor de forma rpida y cmoda. Podis descargarla desde la direccin http://www.greenparrots.com Una vez instalada, la aplicacin se lanza desde un icono situado en la barra de tareas, junto al reloj del sistema, pulsando sobre el mismo con el botn derecho del ratn.
Al hacerlo, aparece la ventana de la aplicacin mostrando diferentes combinaciones resolucin-profundidad de color. Basta entonces pulsar sobre una de ellas para que la configuracin de nuestro monitor cambie.
La aplicacin tambin permite cambiar el fondo de pantalla, el salvapantallas, la apariencia visual del sistema operativo y la tasa de refresco del monitor.
Otra de las opciones presentes en la ventana de la aplicacin es Options, que nos va a permitir definir atajos de teclado para lanzar la ventana o para cambiar rpidamente la resolucin de pantalla. Conviene que elijamos para ello algunas de las teclas que no se utilizan normalmente, como las del grupo F presentes en la parte superior del teclado. Un regalito en Flash Para finalizar, la empresa Mundidesign nos ofrece una pequea animacin Flash que nos facilita la composicin con colores, al permitirnos visualizar el efecto de diferentes combinaciones de color.
Object 2
En la esquina inferior derecha tenis tres opciones de trabajo: combinacin de tres colores en vertical, combinacin de tres colores yuxtapuestos y combinacin de colores en una interfase web. Para definir los colores de las diferentes partes, basta con arrastrarlos desde la paleta izquierda hasta la zona elegida. La versin online de esta animacin est disponible en la direccin: http://www.mundidesign.com/webct/webct.html Donde encontrareis tambin otras animaciones sobre el tema, incluyendo una muy buena sobre los principios generales del diseo grfico. Muy recomendable.
149
TIPOGRAFA INTRODUCCIN
En esta seccin vamos a hablar de los contenidos textuales de las pginas web, y en este primer captulo, vamos a hacer una introduccin a este estudio. La misin principal de una composicin grfica es transmitir un mensaje determinado a los espectadores que la visualizan. Para ello, el diseador dispone de dos herramientas principales: las imgenes y los contenidos textuales. Las imgenes o contenidos grficos aportan sin duda un aspecto visual muy importante a toda composicin, siendo capaces de transmitir por s solos un mensaje de forma adecuada. Ahora bien, el mejor medio de transmisin de ideas a un gran nmero de personas es por excelencia la palabra escrita, lo que hace que los contenidos textuales en una composicin sean tanto ms importantes cuanto ms informacin se desea transmitir.
La esencia del buen diseo grfico consiste pues en comunicar ideas por medio de la palabra escrita, combinada a menudo con dibujos o con fotografas. Las representaciones visuales de los contenidos textuales son bsicamente las letras, elementos formadores de los abecedarios de los diferentes idiomas. Con las letras se forman palabras, con las palabras frases, y con las frases se representan ideas y conceptos. Adems de su componente significativo, cada letra de una palabra es por s misma un elemento grfico, que aporta riqueza a la composicin final. Por este motivo, el aspecto visual de cada una de las letras que forman los textos de una composicin grfica o una pgina web es muy importante, interviniendo en el mismo conceptos similares a los que caracterizan cualquier otro componente grfico: forma, tamao, color, escala, etc.
150
De este planteamiento se deriva que el diseador grfico debe emplear las letras en una composicin tanto para comunicar ideas como para configurar el aspecto visual de la misma, siendo necesario para ello conocer a fondo los diferentes tipos existentes y sus propiedades, conocimientos que se agrupan en la ciencia o arte de la Tipografa. Se denomina Tipografa al estudio, diseo y clasificacin de los tipos (letras) y las fuentes (familias de letras con caractersticas comunes), as como al diseo de caracteres unificados por propiedades visuales uniformes, mientras que las tcnicas destinadas al tratamiento tipogrfico y a medir los diferentes textos son conocidas con el nombre de Tipometra. Tradicionalmente el estudio de las letras, sus familias y sus tipos ha sido desarrollado por los impresores y, ms modernamente, por diseadores grficos que realizan trabajos para ser luego impresos. Pero con la aparicin de los ordenadores y de Internet ha sido necesario un replanteamiento de la Tipografa clsica, puesto que las fuentes que trabajan bien en imprenta no se adaptan correctamente al trabajo en un monitor de ordenador.
UN POCO DE HISTORIA
Vamos a ver como ha evolucionado la escritura desde los tiempos de los babilonios hasta nuestros das, pasando por el acotecimiento tipogrfico ms importante: la invencin de la imprenta. El origen de nuestros actuales alfabetos (sistemas de signos abstractos que representan sonidos articulados) hay que buscarlo en la remota antigedad, en el primigenio uso de signos y smbolos para representar elementos naturales y actividades cotidianas. El primer pictograma (dibujo representando un objeto o una idea sin que la pronunciacin de tal objeto o idea sea tenida en cuenta) del que tenemos constancia se remonta al ao 3.500 a.C., y es una tablilla en pieza caliza hallada en la ciudad de Kish (Babilonia).
151
Ms tarde, los sumerios desarrollaron ideogramas (smbolos que representan ideas asociadas menos concretas), sistema que fue desarrollndose hasta dar lugar al sistema cuneiforme sumerio de escritura, basado en slabas que imitaban el lenguaje hablado. Un ejemplo de escritura de este tipo es la tablilla hallada en Ur, fechada sobre el 2900-2600 a. C., que describe una entrega de cebada y comida a un templo.
La evolucin posterior de este sistema silbico dio lugar a la escritura cuneiforme (2.800 a.C.), que utiliza lo que podemos considerar como el primer alfabeto, cuyas letras se impriman sobre arcilla usando una cua.
De esta poca datan multitud de tablillas que contienen textos econmicos, religiosos, poticos, y legales, como el famoso cdigo de Hammurabi, uno de los documentos jurdicos ms antiguos que existen.
152
Sobre el ao 1.500 a.C. se desarrollaron en Egipto tres alfabetos (jeroglfico, hiertico y demtico). De ellos el jeroglfico (mixto ideogrfico y consonntico), basado en 24 smbolos consonantes, era el ms antiguo.
Los fenicios adoptaron este alfabeto egipcio 1.000 aos antes de Cristo, usando para escribir pieles y tablillas enceradas, y tambin lo transmitieron por el mundo civilizado, de tal forma que poco despus fue adoptado tambin por los hebreos y los arameos, sufriendo con el tiempo una evolucin propia en cada un de estas culturas.
El alfabeto fenicio fue tambin adoptado por etruscos y griegos, y de ellos lo fue por los romanos, que en el siglo I ya manejaban un alfabeto idntico al actual, a falta de la J, la W y la V. El Imperio Romano fue decisivo en el desarrollo del alfabeto occidental, por crear un alfabeto formal realmente avanzado, y por dar la adecuada difusin a este alfabeto por toda Europa conquistada, ya que muchas lenguas que no tenan sistema propio de escritura adoptaron el alfabeto romano o latino.
La escritura romana adopt tres estilos fundamentales: Quadrata (maysculas cuadradas romanas, originalmente cinceladas en piedra), Rstica (versiones menos formales y ms
rpidas en su ejecucin) y Cursiva (modalidades de inclinacin de las maysculas). Partiendo del modelo fenicio-nabateo se desarroll tambin, alrededor del siglo IV d. C, el alfabeto rabe, formado por 28 consonantes y en el que, al igual que el resto de alfabetos semticos, se escribe sin vocales, de derecha a izquierda.
En occidente el alfabeto romano fue evolucionando y, en el siglo X, en el monasterio de St. Gall, en Suiza, se desarroll un nuevo tipo de letra comprimida y angulosa, la letra gtica, ms rpida de escribir y que aprovechaba mejor el papel, factores importantes en un momento que la demanda de escritos se haba incrementado notablemente, escritos que se realizaban a mano, primeramente en pergaminos y luego, a partir del ao 1.100, en papel. La letra gtica se difundi por toda Europa, surgiendo diferentes variantes (Textura, Littera Moderna, Littera Antiqua, Minscula de Niccoli,, etc.). En 1.450 se produjo uno de los hechos ms importantes para el desarrollo de la Tipografa y de la cultura humana: Johann Gutenberg (1398 1468) inventa a la vez los caracteres mviles y la prensa, creando la imprenta. El primer texto occidental impreso, la "Biblia de 42 lneas" de Mazarino, sale en 1.456, al parecer de la imprenta de Gutenberg.
El trabajo de impresin posibilit el uso de nuevos tipos de letra. En 1470 Nicolas Jenson graba el primer tipo en estilo romano inspirndose en las Quadratas romanas, en 1.495 Francesco Griffo disea el tipo conocido como Bembo, en 1.501 Francesco de Bolonia disea para el veneciano Aldo Manucio el primer tipo mecnico cursivo y en 1.545 el impresor francs Claude Garamond crea una fundicin y comienza a fundir un tipo ms informal que la letra romana trajana, basado en el trazo de la pluma de ave.
154
Desde entonces, multitud de tipgrafos aportaron su granito de arena a la creacin de nuevas fuentes, entre los que destacan Alberto Durero, Giambattista Bodoni, Fournier, Didot, Caslon, Baskerville, Bodoni y, ya en el siglo XX, Max Meidinger (creador de la fuente Helvetica en 1.957), Cooperplate y Novarese.
MEDIDAS TIPOGRFICAS
Seguimos con un poco ms de historia de la tipografa, en este caso con sus medidas y cmo se han ido adaptando a las necesidades actuales. A partir de la invencin de la imprenta por Gutenberg se comenzaron a disear y fundir diferentes tipos de letra segn las necesidades tcnicas de cada diseador, sin ningn tipo de norma comn que marcara las caractersticas de las letras. Cada tipo era conocido por el nombre que le daba su creador (generalmente el suyo propio), siendo su tamao total (denominado cuerpo) y el de sus partes totalmente arbitrarios. Consecuencia directa de esta libertad de creacin fue que las imprentas no podan intercambiar material tipogrfico entre ellas.
Una de las primeras unidades tipogrficas fue la pica , nombre dado en la Inglaterra del siglo XV a unos libros destinados a regular el ritual de las fiestas movibles eclesisticas. Aparentemente se compusieron en un cuerpo de letra que se acab llamando como ellos. Equivale a 1/6 de pulgada o 12 puntos (4'233 mm.). Martn Domingo Fertel y Claude Garamond buscaron ya establecer pautas en la fundicin de tipos, pero fue Pierre Simon Fournier el Joven, uno de los mejores punzonistas y fundidores del siglo XVIII, quien public en 1737 su Manuel Typographique, en el que defini un sistema de proporciones para la fundicin sistemtica de los caracteres, que llam duodecimal. Para ello tom el tipo de letra ms pequeo que comnmente se usaba, llamado nomparela, y lo dividi en seis partes, a cada una de las cuales dio el nombre de punto; y a base de ste empez a fabricar, desde 1742, todo el material tipogrfico que funda. A la medida 12 puntos (el doble de la nomparela, equivalente a 4,512 mm) la llam ccero , ya que era similar al cuerpo empleado en la edicin de la obra
Cicern, de Oratore, que realiz el impresor Schffer a finales del siglo 15.
En 1760 Francois Ambroise Didot propone mejoras al sistema de Fournier, adoptando como base el pie de rey, medida de longitud usada en aquella poca, que dividi en 12 partes, obteniendo una nueva definicin de ccero, compuesto ahora por 12 puntos (aproximadamente 0,377 mm). A partir de ese momento se comenzaron a utilizar tipos en tamaos constantes, llamados por el nmero de puntos que media el cuerpo de los mismos. Considerando Didot que un punto de pie de rey era excesivamente delgado para formar una apreciable graduacin de caracteres, adopt como unidad bsica el grueso de dos puntos. As, dos puntos de pie de rey equivalen a un punto tipogrfico, cuatro puntos de pie de rey equivalen a dos puntos tipogrficos, etc. La altura del tipo la fij en 63 puntos fuertes (llamados as porque la altura exacta oscila entre 63 puntos y 63 y medio, equivalentes a 23,688 mm).
El sistema Didot ha sido adoptado en todas las fundiciones del mundo, excepto en Inglaterra y Estados Unidos, en donde el punto tipogrfico est basado sobre la pulgada inglesa, cuya equivalencia con el sistema mtrico es de 0,352 mm. En 1886 la American Type Founder's Association estableci la medida de la pica en 1/72,27 de una pulgada (aproximadamente 0,3515 mm), siendo adoptado este sistema por los Estados Unidos y
las colonias inglesas. Los tipos se funden generalmente en tamaos estandarizados que van desde los 6 hasta los 96 puntos, mantenindose su altura en 63 puntos (23,312 mm). La escala comn de tamaos es la siguiente: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 60, 72, 84, 96 Con la aparicin de los ordenadores y su aplicacin al trabajo editorial y al diseo grfico se hizo necesaria la introduccin de nuevos sistemas de definicin de fuentes para pantalla que permitieran su correcta impresin posterior y de nuevas unidades de medida que se acercaran ms a la naturaleza propia de los monitores.
Entre los sistemas surgidos destaca uno de la compaa Adobe, llamado Postscript, que permite a los ordenadores comunicarse con los perifricos de impresin. Este sistema fue lanzado inicialmente lanzado en 1985 dentro del programa de edicin Page Maker, opera almacenando los nmeros en forma de pila y est basado en el formato de texto ASCII, el normal para caracteres. Como unidad bsica de medida utiliza el punto de pulgada (una pulgada tiene 72 puntos, equivalente a 2,54 centmetros). Por otra parte, los monitores de ordenador utilizan como unidad de medida el pxel , definido como la menor unidad de informacin visual que se puede presentar en pantalla, a partir de la cual se construye las imgenes.
El tamao de un pxel no es absoluto, ya que depende de la resolucin usada (un pixels a resolucin 800x600 es mayor que uno a resolucin 1024x768).
157
Resumiendo, actualmente se usan dos sistemas de medidas tipogrficas para trabajo en imprenta clsica:

El europeo, basado en el punto de Didot (0,376 mm) y el ccero, formado por 12 puntos de Didot (4, 512 mm.). El anglosajn, que tiene como unidades el punto de Pica (0,351 mm.) y la Pica, formada por 12 puntos de Pica (4,217 mm.).
La conversin de unas unidades a otras es incmoda, y lo normal es que nadie las realice en los talleres. Normalmente, los cceros y las picas vienen en unas regletas, llamadas tipmetros, que en ocasiones pueden simultanear ambos sistemas, el anglosajn y el europeo. Por otra parte, en trabajos digitales se utilizan otros dos sistemas:

Adobe Postscript, cuya unidad es el punto de pulgada (unos 0,352 mm). Una pulgada tiene 72 puntos (2,54 centmetros). Pxeles, unidades dependientes de la resolucin de pantalla usada.
Existen muchas propuestas por lograr unificar las medidas tipogrficas a escala mundial, entre las que destacan las basadas en el sistema mtrico decimal, como la propuesta por la ISO (International Organization for Standarization), pero hasta la fecha sin ninguna de ellas ha cuajado. Por otra parte, el propio avance de los medios digitales est estableciendo por si solo una estandarizacin basada en el sistema Postcript de Adobe, altamente difundido y aceptado en la actualidad, as como la utilizacin de los pxeles como unidad de medida, no slo en el diseo grfico digital y el diseo web, sino tambin en sistemas fotogrficos digitales y en televisiones de alta gama.
PARTES DE UNA LETRA

Vamos a conocer las partes fundamentales de una letra y saber distinguirlas en el caso de tener que crear familias tipogrficas. Se da el nombre de letras (del latn littera) al conjunto de los grficos usados para representar un lenguaje. Sus equivalente en tipografa e imprenta son tipo (del latn typus, del griego typos, modelo o carcter grabado), que define a los signos que se emplean para la ejecucin de los moldes tipogrficos, y carcter (del griego charakter), resultado de la impresin de los tipos.
158
Para poder definir con claridad y precisin una letra se distinguen en ella diferentes partes, cuyos nombres son a veces similares a los de la anatoma humana, entre las que podemos destacar las siguientes:
Altura de las maysculas: altura de las letras de caja alta de una fuente, tomada desde la lnea de base hasta la parte superior del carcter. Altura de la x o altura X: altura de las letras de caja baja excluyendo los ascendentes y los descendentes. Anillo u hombro: asta curva cerrada que encierra el blanco interno en letras tales como en la b, la p o la o. Asta: rasgo principal de la letra que define su forma esencial. Sin ella, la letra no existira. Asta ascendente: asta de la letra que sobresale por encima de la altura x, como en la b, la d o la k. Asta descendente: asta de la letra que queda por debajo de la lnea de base, como en la p o en la g. Astas montantes: astas principales verticales u oblicuas de una letra, como la L, B, V o A. Asta ondulada o espina: rasgo principal de la S o de la s. Asta transversal o barra: rasgo horizontal en letras como la A, la H, f o la t. Basa: proyeccin que a veces se ve en la parte inferior de la b o en la G. Blanco interno: espacio en blanco contenido dentro de un anillo u ojal. Brazo: parte terminal que se proyecta horizontalmente o hacia arriba y que no est incluida dentro del carcter, como ocurre en la E, la K, la T o la L. Bucle u ojal: porcin cerrada de la letra g que queda por debajo de la lnea de base. Si ese rasgo es abierto se llama simplemente cola. Cartela: trazo curvo o poligonal de conjuncin entre el asta y el remate. Cola: asta oblicua colgante de algunas letras, como en la R o la K. Cola curva: asta curva que se apoya sobre la lnea de base en la R y la K, o debajo de ella, en la Q. En la R y en la K se puede llamar sencillamente cola. Cuerpo: altura de la letra, correspondiente en imprenta a la del paraleleppedo metlico en que est montado el carcter. Inclinacin: ngulo del eje imaginario sugerido por la modulacin de espesores de los rasgos de una letra. El eje puede ser vertical o con diversos grados de
159
inclinacin. Tiene una gran importancia en la determinacin del estilo de los caracteres. Lnea de base: lnea sobre la que se apoya la altura de la x. Oreja o Ibulo: pequeo rasgo terminal que a veces se aade al anillo de algunas letras, como la g o la o, o al asta de otras como la r. Serif, remate o gracia: trazo terminal de un asta, brazo o cola. Es un resalte ornamental que no es indispensable para la definicin del carcter, habiendo alfabetos que carecen de ellos (sans serif). Vrtice: punto exterior de encuentro entre dos trazos, como en la parte superior de una A, o M o al pie de una M.
Estas son las partes fundamentales de una letra. Si bien no es imprescindible su conocimiento para el uso comn de letras y fuentes en diseo grfico y web, s que es importante distinguirlas en el caso de tener que crear una familias tipogrficas especiales para un trabajo determinado, ya que van a definir las caractersticas comunes que deben reunir las letras de la misma para mantener un estilo propio.
FAMILIAS TIPOGRFICAS
Vamos a conocer las familias tipogrficas y sus grupos y clasificaciones. Una familia tipogrfica es un grupo de signos escriturales que comparten rasgos de diseo comunes, conformando todas ellas una unidad tipogrfica. Los miembros de una familia (los tipos) se parecen entre si, pero tambin tienen rasgos propios. Las familias tipogrficas tambin son conocidas con el nombre de familias de fuentes (del francs antiguo fondre, correspondiente en espaol a derretir o verter, refirindose al tipo hecho de metal fundido). Una fuente puede ser metal, pelcula fotogrfica, o medio electrnico. Existen multitud de familias tipogrficas. Algunas de ellas tienen ms de quinientos aos, otras surgieron en la gran explosin creativa de los siglos XIX y XX, otras son el resultado de la aplicacin de los ordenadores a la imprenta y al diseo grfico digital y otras han sido creadas explcitamente para su presentacin en la pantalla de los monitores, impulsadas en gran parte por la web. Unas y otras conviven y son usadas sin establecer diferencias de tiempo, por lo que es necesario establecer una clasificacin que nos permita agrupar aquellas fuentes que tienen caractersticas similares. Son muchos los intentos por lograr agrupar las formas tipogrficas en conjuntos que renan ciertas condiciones de igualdad. Generalmente estn basados en la fecha de
creacin, en sus orgenes dentro de las vertientes artsticas por las que fueron influenciadas o en criterios morfolgicos. Los sistemas de clasificacin de fuentes ms aceptados son: Clasificacin de Maximilien Vox (1954) Divide las familias en:

Humanas Garaldas Reales Didonas Mecanos Lineales Incisas Scriptas Manuales
Clasificacin de Robert Bringhurst Divide las fuentes en:

Renacentistas Barrocas Neoclsicas Romnticas Realistas Modernistas geomtricas Modernistas lricas Posmodernistas
Clasificaciones AtypI La ATYPI (Asociacin Tipogrfica Internacional, http://www.atypi.org/), con objeto de establecer una clasificacin general de las familias tipogrficas, realiz en 1964 una adaptacin de la clasificacin de Maximilien Vox, conocida comoVOX-ATypI.
Esta clasificacin est relacionada tambin con la evolucin de las familias tipogrficas a lo largo de la historia, aunque modifica ciertos elementos de la clasificacin de VOX..
161
Otra clasificacin de fuentes de la ATypI, evolucin de la anterior, es la basada en la agrupacin de fuentes por caractersticas comunes, normalizada con el nombre DIN 16518. Divide las familias tipogrficas en los siguientes grupos:
Romanas Formado por fuentes que muestran influencias de la escritura manual, en concreto de la caligrafa humanista del s. XV, y tambin de la tradicin lapidaria romana, donde los pies de las letras se tallaban para evitar que la piedra saltase en los ngulos. Las fuentes Romanas son regulares, tienen una gran armona de proporciones, presentan un fuerte contraste entre elementos rectos y curvos y sus remates les proporcionan un alto grado de legibilidad.
Las Romanas se dividen cinco grupos fundamentales:
Antiguas: tambin llamadas Garaldas (por Garamond), aparecen a fines del siglo XVI en Francia, a partir de los grabados de Grifo para Aldo Manuzio. Se caracterizan por la desigualdad de espesor en el asta dentro de una misma letra, por la modulacin de la misma y por la forma triangular y cncava del remate, con
162
discretas puntas cuadradas. Su contraste es sutil, su modulacin pronunciada, cercana a la caligrafa, y su trazo presenta un mediano contraste entre finos y gruesos. Entre ellas destacan las fuentes Garamond, Caslon, Century Oldstyle, Goudy, Times New Roman y Palatino. De Transicin: se manifiestan en el siglo XVIII y muestran la transicin entre los tipos romanos antiguos y los modernos, con marcada tendencia a modular ms las astas y a contrastarlas con los remates, que dejan la forma triangular para adoptar la cncava o la horizontal, presentando una gran variacin entre trazos. Esta evolucin se verific, principalmente, a finales del siglo XVII y hasta mediados del XVIII, por obra de Grandjean, Fournier y Baskerville. Ejemplos de este grupo son las fuentes Baskerville y Caledonia. Modernas: aparecen a mediados del siglo XVIII, creadas por Didot, reflejando las mejoras de la imprenta. Su caracterstica principal es el acentuado y abrupto contraste de trazos y remates rectos, lo que origina fuentes elegantes a la vez que fras. Sus caracteres son rgidos y armoniosos, con remates finos y rectos, siempre del mismo grueso, con el asta muy contrastada y con una marcada y rgida modulacin vertical. Resultan imponentes a cuerpos grandes, pero acusan cierta falta de legibilidad al romperse los ojos del carcter, al componerse a cuerpos pequeos y en bloques de texto corrido. Ejemplos destacables podran ser Firmin Didot, Bodoni, Fenice y Modern N 20. Mecanos: son un grupo aislado que no guarda ninguna semejanza constructiva con el resto de los tipos romanos con remate, tan solo el hecho de poseer asiento sus caracteres. No tienen modulacin ni contraste. Entre sus fuentes podemos destacar Lubalin y Stymie. Incisas: otro grupo aislado dentro de las romanas, al igual que las mecanos, son letras en la tradicin romana ms antigua, ligeramente contrastadas y de rasgo adelgazado ahusado. No se puede hablar de remates, pero sus pies abocinados sugieren, tal como ocurre con las serif, una lnea imaginaria de lectura. Su ojo grande y sus ascendentes y descendentes finos, hacen de l un tipo que, aunque es extremadamente difcil de digitalizar, es muy legible a cualquier cuerpo. A pequea escala, puede confundir y parecer de palo seco al perderse la gracia de su rasgo. Como ejemplos podemos citar las fuentes Alinea y Baltra.
Palo Seco Las fuentes Palo Seco se caracterizan por reducir los caracteres a su esquema esencial. Las maysculas se vuelven a las formas fenicias y griegas y las minsculas estn conformadas a base de lneas rectas y crculos unidos, reflejando la poca en la que nacen, la industrializacin y el funcionalismo.
Tambin denominadas Gticas, Egipcias, Sans Serif o Grotescas, de dividen en dos grupos principales:
Lineales sin modulacin: formadas por tipos de un grosor de trazo uniforme, sin contraste ni modulacin, siendo su esencia geomtrica. Admiten familias largusimas, con numerosas variantes, aunque su legibilidad suele ser mala en
163
texto corrido. Ejemplos de este tipo seran Futura, Avant Garde, Eras, Helvtica, Kabel y Univers. Grotescas: caracterizadas porque el grosor del trazo y el contraste son poco perceptibles y por ser muy legibles en texto corrido. La principal fuente de este tipo es Gill Sans.
Rotuladas Las fuentes rotuladas advierten ms o menos claramente el instrumento y la mano que los cre, y la tradicin caligrfica o cursiva en la que se inspir el creador.
Existen tres grupos principales de fuentes rotuladas:
Caligrficas: aglutina familias generadas con las influencias ms diversas (rstica romana, minscula carolingia, letra inglesa, caracteres unciales y semiunciales), basadas todas ellas en la mano que las cre. Con el tiempo la escritura caligrfica se hizo cada vez ms decorativa. En la actualidad se utiliza en invitaciones a ceremonias o determinados acontecimientos. Como ejemplos de este tipo podemos citar las fuentes American Uncial, Commercial Script, Cancelleresca Seript, Bible Seript Flourishes, Zapf Chancery, Young Baroque. Gticas: de estructura densa, composicin apretada y verticalidad acentuada, manchan extraordinariamente la pgina. Adems, no existe conexin entre letras, lo que acenta ms su ilegibilidad. Ejemplos de este tipo son Fraktur, Old English, Koch Fraktur, Wedding Text, Forte Grotisch. Cursivas: suelen reproducir escrituras de mano informales, ms o menos libres. Estuvieron muy de moda en los aos 50 y 60, y actualmente se detecta cierto resurgimiento. Ejemplos: Brush, Kauffman, Balloon, Mistral, Murray Hill, Chalk Line y Freestyle Script.
Decorativas Estas fuentes no fueron concebidas como tipos de texto, sino para un uso espordico y aislado.
Existen numerosas variaciones, pero podemos distinguir dos grupos principales:
Fantasa: similares en cierto modo a las letras capitulares iluminadas medievales,

164
resultan por lo general poco legibles, por lo que no se adecuan en la composicin de texto y su utilizacin se circunscribe a titulares cortos. Ejemplos de este tipo son las fuentes Bombere, Block-Up, Buster, Croissant, Neon y Shatter. poca: pretenden sugerir una poca, una moda o una cultura, procediendo de movimientos como la Bauhaus o el Art Dec. Anteponen la funcin a lo formal, con trazos sencillos y equilibrados, casi siempre uniformes. Muy utilizados en la realizacin de rtulos de sealizacin de edificios y anuncios exteriores de tiendas. Ejemplos de este grupo son Futura, Kabel, Caslon Antique, Broadway, Peignot, Cabarga Cursiva, Data 70, LCD, Gallia.
Variantes de una familia Dentro de cada familia, las variables tipogrficas permiten obtener diferentes soluciones de color y ritmo. Las variables constituyen alfabetos alternativos dentro de la misma familia, manteniendo un criterio de diseo que las "emparenta" entre s.
Las variaciones de una fuente se obtienen modificando propiedades como:

El cuerpo o tamao: maysculas, minsculas y capitales. El grosor del trazado: ultrafina, fina, book, redonda, media, seminegra, negra y ultranegra. La inclinacin de los ejes: redonda, cursiva e inclinada. La proporcin de los ejes: condensada, comprimida, estrecha, redonda, ancha, ensanchada y expandida. La forma del trazado: perfilada, sombreada, etc. Otras variantes de una fuente incluyen versalitas, nmeros, nmeros antiguos, smbolos de puntuacin, monetarios, matemticos y miscelneos, etc.
Algunas familias poseen muchas variaciones, otras slo unas pocas o ninguna, y cada variacin tiene un uso y una tradicin, que debemos reconocer y respetar.
FUENTES SERIF Y FUENTES SANS SERIF

Vemos la clasificacin de fuentes tipogrficas en Serif y Sans Serif. Una clasificacin de las familias de fuentes mucho ms general que la DIN 16518-AtypI, pero muy utilizada en medios digitales, es la que divide las familias tipogrficas en Serif y Sans Serif. Las fuentes serif o serifas tienen origen en el pasado, cuando las letras se cincelaban en bloques de piedra, pero resultaba difcil asegurar que los bordes de las letras fueran rectos, por lo que el tallador desarroll una tcnica que consista en destacar las lneas cruzadas para el acabado de casi todas las letras, por lo que las letras presentaban en sus extremos unos remates muy caractersticos, conocidos con el nombre de serif.
165
Otra particularidad comn de las fuentes serif, derivada del hecho de que las tipografas romanas se basaban en crculos perfectos y formas lineales equilibradas, es que las letras redondas como la o, c, p, b, etc, tienen que ser un poco ms grandes porque opticamente parecen ms pequeas cuando se agrupan en una palabra junto a otras formas de letras. El grosor de las lneas de las fuentes serif modernas tambin tiene su origen en la historia. Las primeras se realizaron a mano implementando un clamo, permitiendo la punta plana de la pluma distintos grosores de trazado. Esta caracterstica se ha conservado por la belleza y estilo natural que aporta a las letras. Las fuentes serif incluyen todas las romanas. Son muy apropiadas para la lectura seguida de largos textos, ya que los trazos finos y los remates ayudan al ojo a fijar y seguir una lnea en un conjunto de texto, facilitando la lectura rpida y evitando la monotona. Como ejemplos de fuentes serif podemos citar Book Antiqua, Bookman Old Style, Courier, Courier New, Century Schoolbook, Garamond, Georgia, MS Serif, New York, Times, Times New Roman y Palatino. Las fuentes sans serif o etruscas hacen su aparicin en Inglaterra durante los aos 1820 a 1830. No tienen remates en sus extremos (sin serif), entre sus trazos gruesos y delgados no existe apenas contraste, sus vrtices son rectos y sus trazos uniformes, opticamente ajustados en sus empalmes. Representan la forma natural de una letra que ha sido realizada por alguien que escribe con otra herramienta que no sea un lpiz o un pincel.
Asociados desde su inicio a la tipografa comercial, su legibilidad y durabilidad los hacan perfectos para impresiones de etiquetas, embalajes, envolturas y dems propsitos comerciales. Aunque este uso motiv que fueran despreciados por aquellos que se preocupaban por los tipos bellos y la impresin de calidad. Poco a poco las fuentes sans serif fueron ganando terreno a las serif. Una de las razones de su triunfo fue que los modernos mtodos mecnicos de fabricacin de los tipos estaban especialmente bien adaptados para este particular estilo de letra. Otro, que la ausencia de remates y sus trazos finos las hacan muy apropiadas para letras grandes usadas en unas pocas palabras para ser vistas a una cierta distancia, como es el caso de
rtulos, carteles, etc., elementos de comunicacin cada vez ms en auge. Las fuentes sans serif incluyen todas las Palo Seco, resultando especialmente indicadas para su visualizacin en la pantalla de un ordenador, resultando muy legibles a pequeos tamaos y bellas y limpias a tamaos grandes. Sin embargo, no estn aconsejadas para textos largos, ya que resultan montonas y difciles de seguir. Entre las fuentes sans serif se encuentran Arial, Arial Narrow, Arial Rounded MT Bold, Century Gothic, Chicago, Helvetica, Geneva, Impact, Monaco, MS Sans Serif, Tahoma, Trebuchet MS y Verdana.
167
TIPOGRAFA DIGITAL
Vemos como podemos interletrar y disear caracteres de mejor calidad La aplicacin de la informtica a la impresin, al diseo grfico y, porteriormente, al diseo web, ha revolucionado el mundo de la tipografa. Por una parte, la multitud de aplicaciones informticas relacionadas con el diseo grfico y editorial han hecho posible la creacin de nuevas fuentes de forma cmoda y fcil. Por otra, ha sido necesario redisear muchas de las fuentes ya existentes para su correcta visualizacin y lectura en pantalla, haciendo que se ajusten a la rejilla de pxeles de la pantalla del monitor.
El tipo digital permite interletrar y disear caracteres mejor y con mayor fidelidad que el tipo metlico, existiendo actualmente en el mercado la mayora de las familias tipogrficas adaptadas al trabajo en ordenador, y las modernas aplicaciones de autoedicin y diseo permiten manejar fcilmente las diferentes fuentes y sus posibles variantes en tamao, grosor e inclinacin. Tambin se han superado los problemas de falta de calidad de perifricos de salida mediante la tecnologa lser y la programacin PostScript. Esta ltima, especialmente, ha supuesto un gran impulso para el campo tipogrfico, al permitir contornos de letras perfectamente definidos, basados en funciones matemticas. Otro importante avance en la tipografa digital vino de la mano de la compaa Apple, que lanz el sistema de fuentes TrueType, basado tambin en la definicin matemtica de las letras, lo que permite un perfecto escalado de las mismas, sin efectos de dientes de sierra, de forma similar a lo que ocurre en los grficos vectoriales.
Por lo que respecta a las fuentes disponibles en un ordenador, los sistemas operativos instalan por defecto un nmero variable de ellas. Posteriores instalaciones de aplicaciones de ofimtica, autoedicin y diseo instalan otras fuentes nuevas, de tal forma que resulta
difcil saber en un momento dado qu fuentes estn disponibles en un cierto ordenador. Las principales familias tipogrficas incluidas en los sistemas operativos Windows son Abadi MT Condensed Light, Arial, Arial Black, Book Antiqua, Calisto MT, Century Gothic, Comic Sans MS, Copperplate Gothic Bold, Courier New, Impact, Lucida Console, Lucida Handwriting Italic, Lucida Sans, Marlett, News Gothic MT. OCR A Extended, Symbol, Tahoma, Times New Roman, Verdana, Webdings, Westminster y Wingdings. A estas hay que aadir las instaladas por otras apicaciones de Microsoft, como Andale Mono, Georgia y Trebuchet MS. Por su parte, entre las tipografas incluidas en el sistema operativo MacOS se encuentran Charcoal, Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Symbol y Times. Adems, existen infinidad de fuentes disponibles en todo tipo de soportes (disquete, CD, DVD, pginas web, etc.), as como aquellas no estndares creadas por autores puntuales, todas ellas fcilmente instalables en cualquier mquina.
El principal inconveniente de este desconocimiento es que no podemos saber a ciencia cierta si las fuentes que estamos usando en pantalla van a estar luego disponibles en la imprenta, en la impresora o en el ordenador del lector, por lo que es conveniente usar fuentes estndar o comprobar la compatibilidad de las fuentes usadas con los medios de impresin necesarios. Una excepcin a esta regla es el caso de que los textos sean guardados como fichero grfico (formatos TIFF, GIF, JPG, PNG, SVG, SWF, etc.), ya que en este caso la impresora o monitor interpretarn el texto de forma adecuada, aunque generalmente con peor calidad.
FUENTES PARA IMPRESIN Y FUENTES PARA PANTALLA

Vemos tcnicas y tipos de fuentes tipogrficas para tipos de resoluciones de pantalla e impresin. Las fuentes tipogrficas diseadas para sistemas de impresin tradicionales estn pensadas para ser reproducidas en alta resoluciones y generalmente se visualizan mal en las pantallas de los ordenadores, sobre todo en pequeos tamaos, ya que las formas de los caracteres no han sido concebidas para ser reproducidas en una pantalla de baja resolucin.
169
Este factor ha hecho necesaria la creacin de fuentes especficas para ser visualiadas en el monitor de un ordenador, diseadas para ser fcilmente legibles en condiciones de baja resolucin. Se trata de fuentes como Verdana, Tahoma (sans serif) y Georgia (serif).
Mientras que las fuentes de impresin se tornan indefinidas e ilegibles al ser sometidas a antialiasing para suavizar el escalonado de los trazos, en las tipografas concebidas para su visualizacin en pantalla cada trazo y cada punto encaja exactamente en la trama de pixeles que compone la misma.
Su diseo evita, en lo posible, las curvas, tendiendo a las lneas verticales u horizontales, lo que hace que aparezcan ntidas y definidas en cuerpos pequeos. Pixelizacin y antialiasing Las fuentes diseadas para pantalla presentan la desventaja de que, al estar diseadas para un tamao determinado, no es posible redimensionarlas de forma correcta, apareciendo los trazos verticales y horizontales que las componen distorsionados. Una solucin posible sera redimensionarlas exactamente con un mltiplo de su tamao natural, ya que coincidira nuevamente con la rejilla de pxeles de la pantalla, pero entonces se ven pixeladas, con efectos de dientes de sierra.
170
Esta efecto indeseado se puede eviar mediante la tcnica del antialiasing, consistente en un difuminado de los bordes de los caracteres, creando unos pxeles intermedios entre el color del carcter y el del fondo, para que el cambio entre ambos no sea tan brusco, con lo que se consigue que se los mrgenes se vean suaves y no en forma de dientes de sierra.
El antialiasing, tambin conocido como antialias, es un mecanismo muy utilizado en el tratamiento de imgenes de mapas de bits, disponiendo casi todos los programas grficos de filtros especficos para su aplicacin.
Por lo que respecta a los textos, los sistemas operativos suelen ofrecer opciones de configuracin del antialiasing para evitar su escalado en pantalla. En los sistemas Windows, por ejemplo, se accede a esta funcionalidad desde Inicio > Panel de control > Pantalla > Apariencia, donde suele haber un checkbox para habilitar el antialiasing. Como la aplicacin de este mtodo de visualizacin de textos es configurable por el usuario, nunca podremos estar seguros de su activacin, por lo que no sabemos de antemano cmo se vern las fuentes en el monitor de cada usuario. Como alternativa, podemos convertir los textos en imgenes, siempre que sean de corta extensin (titulares cortos, cabeceros, etc.), ya que entonces s que podremos aplicarles el antialiasing y estar seguros de su visualizacin final. Hinting Otra tcnica aplicable a las fuentes destinadas a pantalla es el denominado proceso de hinting, indispensable para cualquier fuente que intente funcionar en cuerpos pequeos y en dispositivos de baja resolucin.
Es un mtodo para definir exactamente qu pixeles se encienden para crear el mejor dibujo posible de un carcter de tamao pequeo a baja resolucin. Como el mapa de bits que dibuja cada signo en la pantalla se genera a partir de un dibujo de lnea o outline, a menudo es necesario modificar este contorno para que la combinacin deseada de pixeles se encienda. Un hint es una instruccin matemtica que se agrega a una fuente tipogrfica con el fin de modificar el dibujo de los caracteres en determinados cuerpos.
ADMINISTRACIN DE FUENTES EN UN ORDENADOR

Vemos donde estan las fuentes en nuestro ordenador, los rasgos caracteristicos, y como las administra el ordenador. Como hemos visto, todo sistema operativo instala un conjunto de fuentes por defecto, nmero que se ve aumentado con posteriores instalaciones de diferente software, especialemente aplicaciones de autoedicin, de ofimtica, de diseo grfico y de diseo web. Generalmente, cada una de estas fuentes es almacenada como fichero individual en una carpeta destinada a almacenar todas las fuentes del sistema. Por ejemplo, Windows lo hace en una carpeta denominada Fonts, que cuelga directamente de la carpeta principal de instalacin del sistema, Windows.
Aunque ciertas aplicaciones pueden instalar determinadas fuentes para su uso exclusivo, en la carpeta Fonts encontraremos todas las fuentes que estarn luego disponibles para los diferentes programas de edicin y grficos. Si accedemos a dicha carpeta, veremos los ficheros de las fuentes disponibles en nuestra mquina y los nombres comunes de cada una de ellas.
172
Windows puede manejar diferentes tipos de fuentes. Unas son de resolucin fija, entre ellas las fuentes de pantalla y las de impresora. Este tipo de fuentes, en especial las primeras, no las utilizaremos casi nunca en las aplicaciones. Son las que emplean los programas para sus propios mens y resto de interfaz grfica. Si deseamos ver cmo se presentan dichas fuentes, basta hacer doble click sobre su fichero, con lo que se abrir el visualizador de fuentes de Windows, mostrndonos la frase "El veloz murcilago hind coma feliz cardillo...12340567890" a diferentes tamaos de letra. La eleccin de esta frase se debe a que en ella se encuentran la mayora de los caracteres del alfabeto, con lo que podemos hacernos una buena idea del aspecto de la fuente.
Los tipos de letra que casi siempre emplearemos con nuestras aplicaciones, tanto en el ordenador como para imprimir, son las fuentes escalables. Existen dos tipos principales de fuentes escalables: fuentes TrueType y fuentes Postscript Type 1.
173
Truetype (TT) y Postscript Tipo 1 (PS1) son fuentes de contorno multiplataforma y en ambas sus formas estn definidas por medio de lneas y curvas. Su representacin es independiente de la resolucin del dispositivo de salida y por lo tanto pueden ser escaladas a cualquier tamao sin ninguna perdida de calidad.
Las fuentes PS1 tienen su origen en el lenguaje de descripcin de pgina Postscript de Adobe, mientras que la tecnologa TrueType fue desarrollada por la empresa Apple. La principal diferencia entre estas tecnologas consiste en la forma matemtica que utilizan para describir las curvas de los caracteres, ya que mientras PS1 utiliza curvas Bzier, con nodos y puntos de control que definen las forma, TT se basa en unas funciones propias, denominadas "splines". Otra diferencia es que las fuentes TT disponen de todos los datos en un solo fichero (de extensin .TTF), mientras que las PS1 requieren dos ficheros separados (uno .PFB y otro .PFM ), uno que contiene la definicin del contorno de la fuente para la impresora y otro que contiene los datos mtricos. La principal ventaja de las fuentes TT sobre las PS1 est en el hecho que las TT permite mejores procesos de "hinting", que incluyen controles diagonales y movimientos especfico de puntos para aumentar la legibilidad. Aparte de las fuentes instaladas directamente por el sistema operativo y por applicaciones posteriores, existen en el mercado multitud de fuentes adicionales, unas gratuitas y otras de pago, que podemos utilizar en nustras aplicaciones grficas y de edicin. Para haceros una idea, basta acudir a Google e introducir en la caja de bsqueda las palabras "download fonts", bsqueda que nos producir aproximadamente 1.400.000 resultados. Una vez descargada una fuente en nuestra mquina, para que puedan ser utilizadas es
necesario cargarlas en memoria, existiendo tres Cargar temporalmente el fichero de la fuente en memoria. Instalar de forma permanente la fuente. Incrustar (embedding) la fuente dentro de un documento.
formas
bsicas para
ello:
Cargar una fuente en la memoria es una forma de poner a disposicin de las aplicaciones dicha fuente durante un intervalo de tiempo limitado (hasta que se descargue de nuevo de la memoria, o hasta que se apague el sistema). Es una forma muy conveniente de emplear fuentes que slo pretendemos usar para un proyecto concreto, o para un grfico. Para realizar este proceso, podemos en primer lugar acceder con el explorador de Windows a la carpeta que contenga los ficheros de las fuentes (no es necesario que sea la carpeta Fonts del sistema en este caso), haciendo doble click sobre el fichero de fuente que queremos cargar en memoria, con lo que aparecer la ventana del visualizador con la fuente cargada. Si ahora minimizamos la ventana, podremos utilizar la fuente en cuestin en casi cualquier aplicacin mientras no cerremos la ventana de vista previa de la fuente (esto la mantiene cargada en memoria) o hasta que apaguemos el sistema. Una alternativa conveniente es usar la pequea utilidad gratuita FontLoader, que se puede descargar de Moon Software (http://www.moonsoftware.com/fxplorer.asp). Su funcionamiento es muy simple, bastando hacer clic con el botn derecho sobre un fichero de fuentes truetype y seleccionar una de las opciones disponibles (instalar / desinstalar / cargar / descargar). Un hecho a tener en cuenta es que algunos programas, como Illustrator y Freehand no admiten fuentes cargadas temporalmente siendo necesario instalar la fuente antes de ejecutar el programa.
Si deseamos que una fuente y que est a disposicin de los programas de forma permanente necesitaremos instalar dicha fuente en el sistema. Para ello, basta ir a Inicio > Panel de Control > Fuentes y en el men Archivo seleccionar la opcin Instalar nueva
fuente, eligiendo el fichero de la fuente a instalar en el pequeo navegador que aparece. Soluciones alternativas son arrastrar el fichero de la fuente dentro de la carpeta Windows\ Fonts o utilizar una programa de gestin de fuentes, como FontLoader. La desinstalacin es semejante, bastando elegir la opcin correspondiente a desinstalar. Cuidado con esta operacin, si el programa pide confirmacin para eliminar el archivo de fuente del disco; asegurmonos de tener otra copia disponible en otra carpeta o en un disquette o cd-rom. De otra manera, la perdemos irreversiblemente. Como norma general, nunca deberamos instalar ms all de un centenar o unos pocos centenares de fuentes en el ordenador, ya que se cargan en memoria al arrancar el sistema operativo, ralentizando el sistema y la ejecucin de programas. Si necesitamos trabajar con numerosas fuentes, lo mejor es crearnos una carpeta exclusivamente destinada a almacenarlas, en la que crearemos diferentes subcarpetas que nos ayuden a clasificar las fuentes de acuerdo a algn sistema vlido para nuestros propositos (Type1 y TrueType, serif y sans serif, modernas, ornamentales, de comics, de ofimtica, etc.). Cuando necesitemos utilizar alguna de ellas, la cargamos en memoria. Si estamos trabajando con Ilustrator, instalamos las fuentes necesarias, abrimos la aplicacin y trabajamos con ellas. Una vez finalizado el trabajo, cerramos Ilustrator y desinstalamos las fuentes. Finalmente, podemos incrustar la fuente dentro de un documento. Con esta ltima opcin, en realidad, no dispondremos de la fuente para nuestro propio trabajo, ya que lo que se incrusta es una representacin de la fuente para verla en pantalla y / o imprimirla, no el fichero de sta. Los documentos PDF suelen incluir fuentes incrustadas de esta forma, y tambin puede hacerse con otros programas, como por ejemplo el mismo Microsoft Word. Antes de finalizar el tema, conviene mcionar un programa indispensable para trabajar con Type 1. Nos estamos refiriendo a Adobe Type Manager, cuya versin Light (gratuita) podemos descargar desde la direccin http://www.adobe.com/products/atmlight/main.html. Los programas que permiten organizar este tipo de fuentes, tales como Fontlister, Typograf, Font navigator, etc, no pueden hacerlo por s solos, Adobe Type Manager se ha de instalar primero.
TIPOGRAFA Y DISEO
En esta ocasin vemos la eleccin de la paleta de fuentes y de sus variantes, asi como el color, el grosor y otras caractersticas. En una composicin grfica o pgina web cualquiera, los contenidos textuales son los principales responsables de la transmisin del mensaje al espectador final. En este entorno, la tipografa la materia que intermedia entre el receptor y la informacin. Los caracteres matizan las palabras y le aportan o refuerzan el sentido. La mala seleccin de esas formas pueden interferir negativamente en la comunicacin. Junto con el color, la tipografa puede alterar por completo el significado que asociamos a un diseo. El texto puede decir una cosa; las letras, otra muy diferente.
176
Para conseguir una tipografa adecuada a la obra es necesario considerar diferentes aspectos de la misma, entre los que destacan los siguientes: Eleccin de la paleta de fuentes Todo diseador debe tener la habilidad de analizar, explorar y reconocer las caractersticas conceptuales, formales, histricas y tcnicas de los diferentes tipos de letras. Cada familia tipogrfica tiene sus propias caractersticas y su propia personalidad, que permiten expresar diferentes notas visuales, unas ms fuertes y otras ms sutiles, unas ms refinadas y otras ms toscas, unas ms geomtricas y otras ms orgnicas, por lo que la seleccin de las familias tipogrficas a usar en una composicin debe hacerse con un amplio sentido de la responsabilidad. Para lograr una composicin tipogrfica adecuada, es necesaria una correcta seleccin de las familias tipogrficas a utilizar, teniendo en cuenta su legibilidad, sus proporciones, el contraste entre los trazos gruesos y delgados, la existencia del remate o su falta, su inclinacin y su forma. La eleccin del tipo ms adecuado depende en gran medida del tipo de mensaje al que va enfocada la composicin. En algunos casos necesitaremos un tipo de letra refinada, elegante o delicada, mientras que en otros necesitaremos letras sobrias, macizas y sin ningn tipo de remilgos.
En general, las familias de origen romano, con serifas de pie, funcionan mejor como tipo de lectura en imprenta. Por el contrario, las de palo seco o sin serifas, dan mejor resultado en monitores y pantallas, sobre todo cuando hablamos de resoluciones bajas. El factor ms determinante sobre la eleccin de una fuente debe ser su legibilidad, propiedad derivada del diseo mismo de los tipos de letra, especialmente importante para textos largos. Para bloques de texto ms cortos tenemos mayor libertad de eleccin, y para los ttulos podemos emplear la fuente que queramos, en funcin del espritu del documento y la sensacin que nos interese crear.
177
Deberemos escoger fuentes cuyos caracteres sean abiertos y bien proporcionados, con regularidad en los tipos y con remates clsicos. Los caracteres que contienen afectaciones estilsticas o irregularidades son menos legibles, por lo que son menos recomendables utilizarlos en bloques de textos y ms adecuados para textos cortos o titulares. Para la pantalla, algunas fuentes sans como Verdana o Tahoma ofrecen ptima legibilidad. Las fuentes ornamentales o caligrficas no deben emplearse ms all de unas pocas lneas, puesto que seran causa inmediata de fatiga visual. Un concepto relacionado con la legibilidad, pero independiente del mismo, es el de la comprensin de un contenido textual, las capacidad del mismo de ser o no interpretado. Por ejemplo, un texto compuesto todo en maysculas, puede ser legible pero tener muy baja comprensin (en el idioma ingls se utilizan los trminos legibility y readability). Hay una diferencia importante entre legibilidad y comprensin. Mientras que la legibilidad se refiere a la facilidad con la que los lectores pueden decodificar la informacin en un documento, la comprensin se refiere al contenido del mismo. Las dos tienen un efecto importante en el xito o fracaso de la lectura del documento; la comprensin no puede ser adquirida sin la legibilidad. Una vez elegida la tipografa con la que trabajaremos para hacer legible el trabajo, tendremos que tener en cuenta otros aspectos como el cuerpo con el que trabajaremos, la longitud de la lnea o el interlineado. Cuando conseguimos que stos tres elementos armonicen (tipografa y su tamao, longitud e interlineado) se producir una mayor facilidad de lectura, ser ms natural nuestro recorrido visual sobre el texto. Cuando variamos uno de estos aspectos en la tipografa, deberemos ajustar los otros para que la armona se siga produciendo. Otro factor a tener en cuenta es la asociacin temporal o geogrfica de una fuente dada. Hay fuentes asociadas a pocas concretas, otras a lugares determinados, por lo que la eleccin de una fuente acorde con el mensaje a trasnmitir es esencial para conseguir el ambiente comunicativo adecuado. Las etiquetas y carteles de cervezas, por ejemplo, suelen utilizar tipos de letras de inspiracin gtica, al estar este producto asociado a las abadas de monjes que lo producan es esa poca.
Una buena estrategia de trabajo es preparar una paleta de fuentes con una letra serif para el texto, una letra sans para los ttulos y subttulos, con tamaos mayores, otra para los pies de foto, resmenes, citas y notas,de menor tamao, y tal vez, una letra especial para el ttulo principal. Es una frmula que es simple y efectiva, que evita la mezcla de diferentes fuentes de palo seco juntas o diferentes letras serif juntas, combinaciones que raramente funcionan.
Algunas tipografas tienen versin sans y versin serif y suelen formar una perfecta combinacin: por ejemplo, la forma serif para el texto y la sans para el resto. Con fuentes diferentes, es cuestin de probar. La fuente elegida para el texto puede incluir, naturalmente, la variante cursiva y en negrilla. Ambas deben emplearse slo para enfatizar partes del documento, no en fragmentos extensos. Conviene evitar lo que ya est muy visto. Una fuente que todo el mundo usa hace que nuestros documentos sean indistinguibles, un producto clnico de los dems. Fuentes como Arial (Helvetica), Courier y Times New Roman son tan frecuentes que convierten un documento en algo anodino, sin impacto visual. Como alternativa hay fuentes que, siendo bsicamente del mismo tipo, sacarn del anonimato y aburrimiento a los textos que preparemos.
179
Variantes de una fuente Generalmente, cada familia tipogrfica dispone de una serie de variantes de sus letras, que pueden ser utilizadas para proporcionar variedad al texto y para particularizar en el mismo ciertas palabras. Estas variantes se obtienen por modificacin de alguna de las siguientes propiedades:
Grosor del trazo: La pesadez o ligereza de los trazos que componen los tipos efectan a su legibilidad. Segn el grosor del trazo, una letra puede clasificarse en "extrafina", "fina", "redonda", "negra" y "supernegra". En los tipos demasiado pesados los ojales se llenan y desaparecen, mientras que la tipografa demasiado fina puede no distinguirse fcilmente del fondo. Por lo tanto el diseador tendr que utilizar para textos extensos un grosor adecuado o normal de tipografa y hacer uso de distintos grosores en momentos puntuales. Por ejemplo, utilizar un grosor contrastado sirve para destacar un prrafo dentro del texto. Proporcin entre ejes vertical y horizontal: segn sus valores relativos obtenemos las variantes redonda (cuando son iguales), estrecha (cuando el horizontal es menor que el vertical), y expandida (cuando el horizontal es mayor). Las tipografas estrechas son efectivas cuando hay abundancia de texto y debe ahorrarse espacio. Pero se disminuye la legibilidad cuando las letras son demasiado estrechas (condensadas) o demasiado anchas (expandidas). La condensacin es adecuada cuando debemos utilizar columnas estrechas. Inclinacin del eje vertical:nos proporciona la variante itlica o cursiva de una fuente. sirve para resaltar una parte del texto, ms que para formar bloques de texto, y debe usarse con prudencia, porque una gran cantidad de caracteres inclinados en el texto dificulta la lectura. Tamao de la caja : aumentando el tamao respecto a la caja baja obtenemos las maysculas. Todo el texto escrito en letras maysculas no slo consume ms espacio, sino que tambin hace ms lenta la lectura. La minscula o caja baja llena el texto de seales creadas por la abundancia de las formas de la letras, trazos ascendentes y descendentes y formas irregulares, sin embargo el mismo texto en mayscula pierde estas seales, tan tiles para facilitar la lectura.
Como norma general, las letras redondas y minsculas suelen ser dentro de una familia las ms legibles, ms que las cursivas, negritas, maysculas y estrechas.
Las negritas (bold) llaman poderosamente la atencin dentro de un texto e incluso distraen seriamente, por lo que nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. Deben quedar reservadas para enfatizar algunas palabras, siempre de manera muy restringida, y nunca en frases completas. Si son utilizadas adecuadamente ayudan a ojear rpidamente el texto y facilitan la rpida comprensin de la informacin.
180
Las maysculas son mucho ms difciles de leer que las minsculas, por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto le hacen un recurso muy valioso para captar atencin sobre un elemento de informacin. Una opcin interesante para publicidad la constituyen las combinaciones de maysculas y minsculas en una misma palabra. Esta combinacin presenta una muy difcil lectura lo que requiere mayor procesamiento y por tanto puede producir un mayor recuerdo, si bien esto ltima hiptesis no ha sido comprobada empricamente. Las itlicas o cursivas son muy poco legibles y son poco recomendables, solo deben ser utilizadas con fuentes de tamao suficientemente grande. Tamao de las fuentes El tamao de la letra debe elegirse teniendo en cuenta la naturaleza de la composicin y la distancia a la que se va a leer. Para pequeos formatos como informes, libros, folletos, manuales o pginas web, conviene utilizar fuentes entre 8 y 12 puntos para cuerpos de texto. El cuerpo promedio de 11 puntos funciona a la perfeccin con impresoras de 300 dpi. Elementos textuales menos importantes en la composicin, como notas de pie, pueden ir a tamaos de 7-8 puntos, siempre y cuando resulten legibles en la fuente elegida. En lo que respecta a grandes formatos, para un cartel que ser observado a 10 metros, la altura de la letra debe ser, al menos, de 2,5 cm, mientras que para una valla publicitaria que deba leerse a 60 metros, la altura de la letra deber ser, al menos, de 15 cm. Espaciado entre caracteres La legibilidad de un texto va a depender del correcto espaciado entre letras y palabras que lo forman. Los principales aspectos a considerar sern el tipo de letra utilizado (familia tipogrfica), el cuerpo (tamao de letra) con el que trabajemos y el grosor de la letra. Una combinacin adecuada de estos tres elementos (set) nos proporciona una textura homognea del texto, lo lo que aumentar su legibilidad. Dos importantes conceptos que debemos estudiar y utilizar para modificar el espaciado entre letras son el track y el kern. El track o tracking ajusta el espacio entre caracteres, abrindolo cuando se trata de cuerpos pequeos y cerrndolo cuando se trata de cuerpos grandes, con lo que se consigue alterar la densidad visual del texto. El track acta globalmente sobre todo el texto y depende del tamao de los caracteres. Como regla general, cuanto ms grande
sea el cuerpo ms apretado debe ser el track.
El kern o kerning se utiliza para ajustar el espacio entre entre las letras de una misma palabra o en algunos pares de caracteres determinados que llaman la atencin por estar demasiado juntos o separados, normalmente en cuerpos grandes. El kern es estrictamente proporcional, ya que el espacio eme (la unidad en la que se basa) tiene el mismo tamao en puntos que el cuerpo de los caracteres, es decir que el espacio eme para un texto de 12 puntos mide 12 puntos.
Tanto el track como el kern se miden en unidades relativas al tamao en puntos de los caracteres. Cada carcter de una fuente concreta est rodeado por una cierta cantidad de espacio lateral, establecida por su diseador. La anchura de un carcter comprende no slo el carcter en s, sino tambin este espacio lateral. El kern y el track modifican tambin la anchura de los caracteres, al modificar su espacio lateral. Un conjunto adecuado de estos valores proporciona un color homogneo de texto, consiguiendo que las letras fluyan de forma natural y rtmica en las palabras, y las palabras en las lneas. Las palabras parecen de un tono ms luminoso si las letras estn ms separadas. Del mismo modo, si se incrementa el espaciado que hay entre palabras y lneas, el tipo parece adquirir un valor ms brillante. El espacio que pone la barra espaciadora entre una palabra y otra forma parte del diseo de la fuente, como un carcter ms. Las lneas demasiado sueltas producen discontinuidad en la lectura, mientras que las demasiado apretadas hacen que sea complicado distinguir las mnimas unidades significativas (las palabras). Como norma general, la separacin entre letras y palabras debe realizarse de forma coherente, para que sea fcil de leer, teniendo en cuenta especialmente las maysculas y sobre todo en rotulacin. No es la misma separacin la que deben tener las letras D y O que la M, la I o la N en una palabra como DOMINO.
182
El ajuste vara segn las combinaciones de letras que van juntas, por ejemplo en la silaba "To" la "o" debe entrar unos pocos pxels debajo de la "T". Ancho de lnea Otro factor decisivo en la facilidad de lectura de un texto y en su poder comunicativo es el ancho de lnea. Es conocido por todos que a una menor longitud de lnea, mayor velocidad de lectura, razn por la cual los peridicos tienen columnas muy estrechas. Sin embargo, lneas demasiado cortas dificultan la lectura por el ritmo visual al que obliga con el cambio constante de lnea. Una mayor longitud de lnea requiere de un salto de mayor longitud de un punto de fijacin ocular (el extremo derecho final de una lnea) al siguiente (el inicio izquierdo de la siguiente). A mayor longitud del salto, ms inexactitud en la siguiente fijacin y por tanto mayor dificultad de lectura. Como regla, podemos tomar para una lnea ms de 40 caracteres y menos de 70. En lneas muy cortas, es importante la correcta distribucin de las unidades de significado, procurando siempre que cada lnea ofrezca al lector una entidad significativa propia, lo que hace el texto mucho ms fcil de leer y ms comprensible. Interlineado El interlineado (leading), espacio vertical entre las lneas de texto, es un factor importante para que el lector pueda seguir correctamente la lectura sin equivocarse de lnea o cansar la vista, adems de ser uno de los responsables de la sensacin de color que toma un bloque de texto.
Como regla general, conviene darle al interlineado uno o dos puntos ms que el valor del cuerpo de la fuente, o sea, que si tenemos un texto en cuerpo 10, un interlineado de 12 da un blanco apropiado en la interlinea. Si se utilizan valores de interlineado menores al cuerpo de texto las lneas pueden comerse unas a otras o volverse difcil leer.
A mayor espacio entre lneas, mayor facilidad de lectura. Se recomienda un interlineado ptimo de un ancho de lnea de 1,5. Alineacin de los textos El texto puede alinearse de cinco formas distintas: alineado a la izquierda, alineado a la derecha, justificado, centrado o asimtrico. El texto alineado a la izquierda es el ms natural y recomendable para textos largos. Crea una letra y un espacio entre palabras muy uniforme, y dado que las lneas terminan en diferentes puntos, el lector es capaz de localizar fcilmente cada nueva lnea. Esta es posiblemente la forma de alineacin de textos que resulta ms legible. En cuanto a legibilidad los estudios en papel impreso no han encontrado diferencias entre el texto justificado o el alineado a la izquierda, aunque si han demostrado que los "malos" lectores (lo que puede incluir a algunos tipos de discapacitados) leen mejor texto alineado a la izquierda que el justificado. Por el contrario, la alineacin a la derecha va en contra del lector, porque es dificil encontrar la nueva lnea. Este mtodo puede ser adecuado para un texto que no sea muy extenso, pero no para grandes bloques. El texto justificado (alineado a derecha e izquierda) puede ser muy legible si el diseador asegura que el espacio entre letras y palabras sea uniforme y los molestos huecos entre palabras, denominados "ros", no interrumpan el curso del texto. En caso contrario, los textos resultan menos legibles y provoca que algunas palabras con mayor espacio entre caracteres sean involuntariamente enfatizadas. Resulta adecuado en columnas estrechas o bloques de texto de poca extensin, ya que resulta montono y cansa al lector.
Las alineaciones centradas dan al texto una apariencia muy formal y son adeucadas cuando se usan mnimamente. Pero debe evitarse configurar textos demasiado largos con este modelo. Las alineaciones asimtricas se usan cuando el diseador desea romper el texto en unidades de pensamiento lgicas, o para dar a la pgina un aspecto ms expresivo. Obviamente la configuracin de grandes cantidades de texto de esta manera acaba por cansar al lector. Color de los textos El color, aplicado discretamente a algunas partes del texto, puede mejorar mucho su legibilidad, darle un mayor peso visual e incluso crear la impresin de mayor variedad de fuentes. Un ligero toque de color en los subttulos, o remarcando una cita, es un recurso muy til y elegante, pero hacer un collage de colores en una pgina de texto que pretende
ser serio o informativo pone en evidencia un mal gusto y un escaso sentido comn. Cuando tenemos que buscar un color para asociar a un tipo, lo primero que deberemos de examinar son los objetivos del trabajo que tenemos que realizar y el pblico al que va dirigido. No es lo mismo un cartel destinado a anunciar el ltimo disco de un grupo musical que un folleto sobre planes de pensiones de un banco. Ambos temas son totalmente diferentes y estn destinados a pblicos con preferencias y necesidades distintas. Uno de los factores ms importante de los textos, que influye sobremanera en la legibilidad de los mismos, es el contraste entre estos y el fondo sobre el que se situan. Un contraste adecuado hace que los textos se lean bien y que su lectura no canse al lector, condicin muy importante en obras de contenido textual importante. Si el tipo se disminuye en tamao, debe incrementarse la fuerza de contraste de color.
Estamos acostumbrados a ver tipos negros sobre papel blanco, y tradicionalmente esta combinacin es la ms legible. Adems muchos tipos se han diseado para ser leidos como letras negras sobre fondo blanco y ofrecen una optima legibilidad impresos de este modo.
En el momento en que se aade color al tipo o al fondo, se altera la legibilidad del texto. En consecuencia, la tarea del diseador es combinar las propiedades del tipo y el color para multiplicar su potencial comunicativo. Estos dos elementos pueden dar vida a un texto que, de otro modo, fracasara en su vertiente comunicativa. Para alcanzar la ptima legibilidad cuando se disea con tipos y color se han de sopesar cuidadosamente las tres propiedades del color (tono, valor e intensidad) y determinar el contraste apropiado entre las letras y su fondo. Podemos usar contrastes de tono (clidos y fros), contrates de valor (luminosos y oscuros) o contrastes de saturacin (vivos y apagados). Los colores azul y naranja, complementarios totalmente saturados, ofrecen un contraste tonal pleno, pero cuando lo aplicamos a tipo y fondo los bordes de las letras tienden a oscilar y complica la lectura del texto. Esto ocurre porque ambos colores poseen un brillo que rivaliza entre s y que reclaman atencin propia. La solucin es suavizar o acentuar uno de los tonos haciendo que su valor pase a ser claro u oscuro. Un texto de color amarillo sobre fondo blanco perdera importancia, ya que, no resaltara al ser los dos colores claros, sin embargo, si el color de fondo es negro, el amarillo cobrara fuerza. Segn algunos estudios, la letra ms legible es la negra sobre fondo
amarillo.
Por otra parte, si dos colores anlogos estn demasiado cerca en el crculo cromtico y no aportan suficiente contrate de tono o valor, deberan reajustarse para agudizar dicho contraste. Un buen principio es coger colores que no estn directamente enfrentados ni estn demasiado prximos en el crculo cromtico. Deben buscarse colores compatibles, pero tambin colores que difieran en valor e intensidad. Tendremos que tener tambin en cuenta las cualidades y caractersticas de cada tipo, ya que un tipo muy fino o estrecho, o una letra de trazo puede parecer muy dbiles o ilegibles si los tonos son muy similares o si los valores estn demasiado prximos. Por lo tanto, debe de existir el contraste suficiente para proteger la fidelidad de las letras. Si el contraste de colores no basta por s solo para destacar el tipo sobre el fondo, pueden aadirse perfiles y sombras. De todas formas no es recomendable utilizar estos efectos en los bloques de texto, pues en trminos de legibilidad sera ms perjudicial que beneficioso. Los mejores resultados se consiguen con tipos grandes o en titulares. Otra solucin, cuando el contraste de color es escaso o cuando debe imprimirse en color un gran fragmento textual, es configurar correctamente los espaciados, pues favorecen la legibilidad. Empleando tramas podemos enriquecer la variedad cromtica de un texto sin tener que aadir colores adicionales. Las tramas resultan especialmente tiles en trabajos de impresin con uno o dos colores.
Otras recomendaciones Adems de todas los conceptos anteriores, existen otras reglas bsicas de composicin que siempre dan buenos resultados:
Los comienzos de prrafo deben ser fcilmente reconocibles, pudiendo usar para este fin los indentados, los estilos o la separacin de prrafos con un retorno (uno, nunca dos). Hay que evitar en lo posible el texto subrayado, en especial ttulos y subttulos, ya que las lneas los separan del texto al que pertenecen. En caso de necesitar destacar estos elementos, es mejor utilizar itlicas en lugar de subrayados. Es una buena idea dejar un espacio mayor por encima de los ttulos y subttulos que por debajo, as como evitar ponerlos todos en maysculas. Las vietas (bullets) y sangras (indent) son recursos tiles para estructurar la informacin, separar conceptos, subordinar unos a otros, crear dependencias, etc. Los espacios en blanco hacen los documentos ms fciles de leer y le dan un espacio ms limpio.
186
TIPOGRAFA EN LA WEB
A la hora de manejar fuentes en una pgina web tenemos que tener en cuenta las limitaciones que presenta este medio particular. Las familias tipogrficas disponibles en cada sistema operativo son diferentes. Aunque las versiones actuales de Internet Explorer instalan un conjunto de fuentes similar en Windows y Mac Os, hay que tener en cuenta que existen otros navegadores y otros sistemas operativos, por lo que es importante asegurarnos de que los contenidos textuales tendrn el mismo aspecto (oel ms parecido posible) sea cual sea la pareja SOnavegador de cada usuario. Puesto que un 97% de los usuarios de Internet utilizan PC+Windows o Mac+Mac Os, parece lgico disear nuestras pginas web buscando la mayor compatibilidad tipogrfica entre ambos sistemas. Las fuentes instaladas por defecto en Windows y Mac OS (fuentes seguras) son:
En cuanto a Linux, el nmero de fuentes instaladas por defecto depende de la versin, aunque suelen ser pocas. Estas fuentes por defecto se van ampliando segn las aplicaciones instaladas posteriormente. Las aplicaciones de ofimtica suelen instalar fuentes propias, as como los navegadores web, especialmente Internet Explorer.
187
Por otra parte, Microsoft, Apple y las distintas empresas involucradas en Linux ofrecen a sus usuarios paquetes gratuitos de fuentes, por lo que el nmero de ellas presentes en una mquina puede aumentar considerablemente. Un ejemplo de estos paquetes es Windows Font Pack, que facilita fuentes tanto para entornos PC y Mac. Buscando siempre la mxima compatibilidad entre plataformas, en el diseo de pginas web deberemos usar tan solo fuentes seguras, prescindiendo de las adicionales que hayan podido instalar en los ordenadores aplicaciones complementarias o los propios usuarios. Equivalencia entre fuentes Windows y Mac OS Como las fuentes instaladas por defecto son diferentes en el caso de un PC con Windows y un Mac, puede darse el caso de que una pgina web no se visualice de forma correcta si utilizamos fuentes incompatibles. Las fuentes equivalentes en los sistemas PC y Mac son las siguientes:
Para asegurarnos de la correcta visualizacin en ambos sistemas habr que utilizar siempre Hojas de Estilos en Cascada (CSS), asignando a los elementos textuales dos fuentes equivalentes, una para PC y otra para Mac. Si adems queremos estar seguros de una visualizacin similar en otros sistemas (Linux, por ejemplo), podemos asignar tambin una familia tipogrfica genrica, como serif, sans-serif, cursive, etc.). Ejemplo: <style type="text/css"> .titular{font-size:16px;font-family:Arial, Helvetica,sans-serif;} </style> ... <p class="titular">Esto es un titular</p> Generalmente los usuarios de Mac disponen de las fuentes incluidas en Windows Font
Pack, ya que ste se instala automticamente desde que Mac Os viene por defecto con Internet Explorer, pero nunca estaremos seguros de qu versin tiene el usuario final, as que la regla de declarar fuentes alternativas mediante CSS deberemos aplicarla siempre. Tamao de las fuentes Un Mac trabaja por defecto a una resolucin de 72 ppp (pixels por pulgada), por lo que en l existe una equivalencia exacta entre punto y pxel, cosa que no ocurre en un PC con Windows, cuya resolucin de trabajo por defecto es de 96 ppp. Mac: 12 pt ---------- 12 px PC: 12 pt ----------- 16 px Como consecuencia, el tamao de una fuente definida en puntos es diferente en ambos sistemas, por lo que los usuarios de Mac vern las fuentes ms pequeas que los de PC.
La siguiente imagen muestra la equivalencia entre puntos y pxeles, as como la visualizacin de los diferentes tamaos en fuente Verdana.
189
Como se puede apreciar en la imagen, los tamaos inferiores a 9 pxeles (7 puntos) no se visualizan correctamente, ya que las letras se hacen demasiado pequeas a esos tamaos. Por el contrario, a tamaos superiores a 16 pxeles (12 puntos), las letras comienzan a escalarse, producindose un efecto de dientes de sierra en sus contornos, sobre todo en las zonas inclinadas y curvas de las mismas. Por estos motivos, el tamao de los contenidos textuales para la web debe oscilar entre 9 y 15 pxeles (7 y 11 puntos), ya que con estos valores los caracteres resultan legibles y sin escalado. Si necesitamos incluir textos de mayor o menos tamao en una pgina, la alternativa pasa por hacerlo como fichero grfico, en formato GIF o PNG, teniendo en cuenta entonces la imposibilidad de modificar dichos textos en el aire", por lo que no es viable este sistema para contenidos que deban cambiar con el idioma, por ejemplo (habra que crear versiones de la imagen para cada opcin posible). Una consideracin adicional referente a los tamaos de las fuentes, vlida tanto para puntos como para pxeles, es que conforme se aumenta la resolucin de pantalla disminuye el tamao relativo de las fuentes, es decir, su tamao de visualizacin final. Esto obliga a tener especial cuidado al usar textos de pequeo tamao a resolucin 800x600, ya que para los usuarios que visualicen la pgina web a 1024x768 pueden resultar ilegibles. Caso de ser necesario incluir textos en estas condiciones, una buena solucin es crear dos ficheros de estilos CSS, uno para cada resolucin, asignando un fichero u otro a la pgina mediante JavaScript segn la resolucin empleada por cada usuario. Ventajas e inconvenientes de usar medidas en pxeles La especificacin de tamaos de fuente en pxeles ofrece la ventaja de permitirnos controlar en todo momento la visualizacin final de los contenidos textuales, ya que nos asegura la mxima compatibilidad entre sistemas operativos y la inmutabilidad del tamao de los textos frente a posibles configuraciones personalizadas de los navegadores web (Ver > Tamao de la fuente > Grande, por ejemplo).
190
Sin embargo, con su uso pueden producirse problemas de accesibilidad, ya que impide la personalizacin por parte de los usuarios con problemas de visin de mayores tamaos para las fuentes. Como norma general, y si las especificaciones del proyecto no nos marcan condiciones especficas sobre accesibilidad, usaremos siempre como unidad de medida en trabajos web el pxel. Fuentes a usar en las pginas web A la hora de seleccionar las fuentes que vamos a usar en una pgina, deberemos tener en cuenta que existe algunas especialmente diseadas para su visualizacin en la pantalla de un monitor, por lo que suelen resultar las ms apropiadas para la web. Estas fuentes suelen ser sans serif, destacando entre ellas Verdana, Arial y Helvetica, pudiendo especificarse tambin el tipo genrico sans-serif, con lo que el navegador usar la fuente sans serif que por defecto tenga instalada la mquina del usuario. En caso de facilitar a los usuarios de la web documentos o pginas para impresin, es conveniente sustituir las fuentes anteriores por alguna tipo serif (con remates en sus extremos), ya que son ms legibles en documentos impresos y menos montonas. Entre ellas podemos destacar Times New Roman, Courier y Courier New, pudiendo especificarse tambin el tipo genrico serif, con lo que el navegador usar la fuente serif que por defecto tenga instalada la mquina del usuario. Es posible asignar a una pgina web mediante CSS dos conjuntos de fuentes diferentes, uno para su visualizacin en pantalla y otro para su impresin. Basta con declarar los dos bloques de estilos separadamente, especificando en el atributo media de la etiqueta style el tipo de medio en el que ser vlido cada uno.
191
Ejemplo: <style type="text/css" madia="screen"> .contenidos{font-size:12px;font-family:Verdana,Helvetica,sans-serif;} </style> <style type="text/css" madia="print"> .contenidos{font-size:10px;font-family:Times New Roman,Times,serif;} </style> Conclusiones A la hora de trabajar con textos en nuestras pginas web deberemos siempre especificar el tamao de las fuentes y las familias mediante estilos CSS. Los tamaos se especificarn normalmente en pxeles, considerando valores vlidos aquellos comprendidos entre 9 y 16 pxeles. Si debemos usar el tamao 8 pxeles en resolucin 800x600, se deber comprobar su correcta visualizacin en resolucin 1024x768, implementando un fichero de estilos para cada resolucin caso de ser necesario. En ningn caso se usarn tamaos inferiores a 8 pxeles. Si debemos usar tamaos superiores a 16 pxeles, es conveniente sustituir el texto afectado por una imagen en la que figure el mismo, evitndose con ello el escalado. Las fuentes a usar sern aquellas que tengan un equivalente en PC y Mac, declarando ambas en estilos CSS. Se elegirn preferentemente las fuentes Verdana, Helvetica y Arial para la presentacin de textos en pantalla, aadiendo adems la fuente genrica sans-serif, en aras de la correcta visualizacin en todos los casos. Si ofrecemos pginas alternativas para la impresin, se usarn en ellas preferentemente las fuentes Times New Roman y Times, aadiendo la fuente genrica serif.
DISPOSICIN DE TEXTOS EN UNA PGINA WEB

Para acabar con el tema de tipografas, tratamos la disposicin correcta de textos en las pginas web. A la hora de manejar textos en las pginas web son vlidas todas las consideraciones vistas para el diseo grfico general, pero adaptadas a un medio que impone fuertes limitaciones. En primer lugar, leer de la pantalla de una computadora es cansado para los ojos y un 25% ms lento que la lectura en papel. Como consecuencia, los usuarios tienden a minimizar el nmero de palabras que leen, por lo que la comprensin y retencin se reduce aproximadamente a un 50%. Adems, la web es un medio interactivo, y los usuarios tienden a navegar ms que a leer, por lo que hay que tener especial cuidado en ofrecerles contenidos de calidad, perfectamente estructurados e interesantes, que consigan atraer su atencin y mantenerla durante la lectura.
Una buena disposicin de textos en una pgina web es la siguiente:

Un titular que describa de forma clara el tema tratado. Un pequeo resumen de la informacin ofrecida. Una serie de palabras clave destacadas (en forma de vnculos, utilizando variables tipogrficas o cambios de color). Segementacin de los contenidos en unidades ms pequeas, reforzadas con ndices y listas con items. Subttulos significativos, tiles. Una idea por prrafo. La mitad o menos de palabras que las que normalmente se utilizan en textos impresos.
La inclusin de grficos de calidad, buen nivel de escritura y vnculos a otras pginas o websites que den idea de dnde provienen las fuentes o cules son las relaciones con otros medios, son elementos que aportan credibilida a los contenidos, lo que har que los visitantes estn ms dispuestos a leer los textos de la pgina. En cuanto al medio en s, existen notables diferencias entre una pgina web y cualquier otro formato de presentacin. La orientacin de las pginas horizontal, generalmente no se ve al mismo tiempo la totalidad del material, se tiene mucho menor control de la tipografa que en el material impreso y la resolucin es menor, por lo que los detalles finos no estn bien definidos. Por lo que respecta a la tipografa, cada sistema operativo dispone de un conjunto de fuentes bsico para presentar en pantalla los contenidos textuales, siendo diferente el grupo de fuentes que por defecto instala Windows del que instala Mac OS o Linux. Adems, las fuentes disponibles para construir pginas web son tan solo un pequeo subconjunto del conjunto de ellas que posee cada sistema operativo. Cuanto texto puede haber en una pgina? La cantidad de texto conveniente en una pgina web depende ante todo de qu tipo de pgina sea, ya que no es lo mismo, ni en concepcin ni en desarrollo, un sitio web dedicado al comercio electrnico que uno dedicado a la divulgacin cientfica, ni este que
uno dedicado a la presentacin de obras pictricas. Lo que s hay es una serie de normas generales que a grandes rasgos pueden definir el comportamiento del texto en cualquier pgina web. As por ejemplo, si nuestra pgina contiene mucho texto es conveniente agrupar ste en columnas, ya que est comprobado que una gran cantidad de texto seguido en formato de lneas anchas cansa mucho la vista del usuario y le impulsa abandonar pronto el documento. Como regla general, podemos establecer como longitud correcta de las lneas de una pgina la que comprende 12-15 palabras. Si estamos en la pgina principal de un sitio, que es la que en cierta forma da la bienvenida a un visitante y le informa a grandes rasgos de qu es el sitio web en el que se encuentra, el texto debe ser poco y muy explcito, para que pueda sacar con prontitud una idea clara de dnde esta y qu es lo que puede encontrar en el sitio. Si nuestra pgina pretende comunicar al visitante una serie de conocimientos, como por ejemplo esta pgina que lees ahora, el texto es entonces el elemento fundamental de la misma, y te veras en la necesidad de elaborar pginas con gran cantidad del mismo. Procura entonces no hacer pginas que ocupen en altura ms de una pgina y media (dos a lo sumo), para no obligar al usuario a utilizar continuamente la barra lateral de scroll, cosa que cansa mucho y hace que se pierda inters por el contenido. Si el tema de tu pgina es principalmente grfico, como puede ser el caso de un sitio dedicado al arte o a la fotografa, el texto debe ser poco, slo el necesario para expresar una serie de ideas claras y concisas, ya que el verdadero protagonista de tu pgina deben ser las fotografas y elementos grficos. Como podis ver, hay tantas normas como sitios se puedan hacer, siendo la experiencia y el mtodo prueba-correccin las verdaderas tcnicas maestras para lograr una serie de pginas atractivas y funcionales. Disposicin del texto. Niveles de cabeceras Como ya hemos dicho antes, y al igual que ocurre en otros soportes divulgativos, la maquetacin y el diseo tipogrfico es aplicable en casi todos sus niveles al diseo de una pgina web, por lo que es necesario que para establecer un documento claro y atractivo dividamos el texto de nuestras pginas en una serie de apartados, que vendrn iniciados por una cabecera que defina el contenido de cada bloque, sobre todo si el contenido de nuestras pginas es eminentemente textual. Como podemos tener bastantes apartados y cabeceras, es necesario ir remarcando la importancia relativa de cada una de ellas en el conjunto del documento, lo que podemos lograr mediante su tamao y peso, as como con el color de su texto. Como norma general, las cabeceras que definen temas completos deben ser las de mayor tamao y peso, los apartados principales del tema deben seguirle en importancia, y as deberemos ir reduciendo el tamao y peso de las cabeceras conforme vayamos bajando en el rbol jerrquico de temas del documento.
194
Dentro de cada bloque, y ya definidas las cabeceras, deberemos ir situando bloques de texto que desarrollen la idea general introducida por la cabecera. El sangrado de este texto puede ser diferente dependiendo de la cantidad de texto en el apartado. As, si tenemos poco texto podemos distribuirlo como si de un pequeo libro o folleto se tratase, sangrando cada prrafo y justificando el texto del mismo.
Pero si el apartado contiene mucho texto, aunque podemos seguir sangrando los comienzos de prrafo, en este caso no es conveniente la justificacin del texto, ya que este tipo de alineacin cansa la vista por su monotona, por lo que es preferible dejar una
alineacin a la izquierda, en la que el efecto conseguido con la finalizacin de cada lnea en un punto diferente consigue un resultado de descanso visual y hace el contenido mas legible. Con un poco de lectura general y con la contemplacin de pginas en Internet podemos ir poco a poco aprendiendo cual es la forma idnea de colocar nuestros textos en cada caso. Recomiendo sobremanera el estudio de unos buenos manuales de maquetacin, diseo grfico y tipografa. Colores de los textos Otro tema de vital importancia es el color que vamos a dar a nuestros textos. Es conocido el efecto psicolgico de los colores y cmo afectan y transmiten uno u otro sentimiento, adems de crear el conjunto disposicin-color un estado receptivo en el usuario que le puede impulsar a continuar navegando en nuestra pgina o por el contrario abandonarla rpidamente. Como norma general debemos procurar que el color de nuestros textos sea tal que destaque claramente del fondo de la pgina, sobre todo en el caso en que usemos una imagen de fondo, ya que el texto es la va principal de transmisin de ideas, y por lo tanto debe ser la parte de nuestra pgina que ms clara resulte al visitante. O no colocamos imagen de fondo o lo hacemos de tal forma que el texto, por su disposicin y color destaque claramente sobre el fondo. Un color de texto nico para toda la pgina puede resultar montono, sobre todo si el tema principal de esta es artstico o colorista, por lo que a veces es conveniente usar diferentes colores para diferentes partes del texto. En estos casos deberemos usar una gama de colores compatibles, que puede parar por el uso de colores anlogos (de la misma gama o familia)o por el uso de colores complementarios, que consiguen un efecto visual equilibrado, potencindose mutuamente, y especialmente indicados cuando queremos destacar un texto sobre un fondo de color. Es conveniente para ello el estudio de uno cualquiera de los grficos de gamas de colores que podemos encontrar en cualquier obra dedicada a la pintura. En la imagen de la izquierda tenis la rueda de colores; los complementarios se encuentran opuestos en la rueda, mientras que los anlogos a un color estn alrededor del mismo. Si nuestra pgina esta orientada a un pblico juvenil, como puede ser una pgina sobre el mundo de los video juegos, el texto puede estar definido por una gama de colores agresivos, como son el rojo con amarillos, o con una gama de colores que le de aspecto sugestivo, como letras blancas, rojas o doradas sobre un fondo negro. Pero si nuestra pgina esta concebida para un pblico serio y/o general, como puede ser una pgina sobre economa o poltica, deberemos emplear una gama de colores neutros, como grises, azule grisceos o tonos pastel, apta para todo tipo de pblicos. Por ltimo, si nuestra pgina es corporativa, como puede ser el caso de una pgina de empresa o de un banco, los colores deben ser los marcados por la propia empresa, ya que cada empresa tiene uno o mas logotipos y un conjunto de colores corporativos propios, que son los que dan identidad propia a esa empresa entre todas las dems, siendo fundamental transmitir en la pgina esa individualidad que le es propia. Estudiaremos mejor el mundo de los colores en el captulo sobre imgenes. Familias de fuentes en los textos Otro tema a tener en cuenta a la hora de disear nuestros textos es qu tipo de fuentes vamos a usar en nuestra pgina.
Al igual que ocurre en el caso de los colores, es posible y casi conveniente el mezclar varios tipos de fuentes, buscando sobre todo romper la monotona que crea una sola fuente. Si deseamos mezclar fuentes deberemos, como regla general, no usar ms de dos o trs tipos diferentes. Por ejemplo, podemos usar dos fuentes que sean parecidas, una de ellas Sans Serif para las cabeceras, y otra Serif para los bloques de texto. Recordemos que las fuentes Serif pintan una especie de terminaciones de adorno en los extremos de las letras, mientras que las Sans Serif no, pintando todas las letras planas. Fuentes Serif son por ejemplo la Times New Roman y la Georgia, y fuentes Sans Serif son la Verdana y la Arial. Si la pgina va dedicada a un pblico corporativo o adulto podemos usar fuentes serias o clsicas, como Times New Roman o Arial. Si esta orientada a pblico general podemos usar Verdana, Helvetica o Tahoma. Y si nuestro pblico va a ser joven podemos usar fuentes mas dinmicas, como Comic Sans MS, Impact o Lucida Console. Ejemplos: Fuente Times New Roman (Serif) Fuente Tahoma (Sans Serif) Fuente Impact (Sans Serif) Como en todo, la mejor forma es experimentar y experimentar, hasta que encontremos aquella combinacin que exprese lo que deseamos transmitir, pero ponindonos siempre en el lugar del usuario potencial, no en el lado del diseador, ya que es este el verdadero destinatario y juez de nuestro trabajo final. Cuidado con la ortografa Deberemos tener siempre especial cuidado con la sintaxis y la ortografa en nuestros textos, ya que un buen trabajo de diseo puede verse arruinado si lo que transmitimos esta mal expresado y/o mal escrito. Al fin y al cabo nuestro pblico va a sacar de nosotros, y lo que es ms importante, de la empresa o entidad que representan las pginas web, la impresin que le demos a travs las mismas, y un texto lleno de errores ortogrficos denota un mal trabajo, por lo que es fcil que el usuario final abandone rpidamente el sitio web entero, con las consecuencias que pueda traer eso. Para ayudarnos en este tema podemos usar un buen procesador de textos, utilizando su herramienta de correccin sintctica y ortogrfica, lo que nos va a permitir obtener un texto bien escrito sin necesidad de ser licenciados en filologa. Consejos generales Vamos a resumir escuetamente una serie de consejos para el buen uso de textos en una pgina web:
No abusar de la maysculas: estas letras poseen un fundamento sintctico y gramatical propio, pero adems son un elemento idneo para remarcar ciertas partes de informacin de la pgina. Su uso excesivo mata este factor, convirtiendo un texto interesante en una serie montona de caracteres que no dicen nada, y que por lo tanto no captan la atencin del visitante. Usa las maysculas al principio de cada frase, los nombres propios, los ttulos y subttulos de la pgina. No usar textos de pequeo tamao en tipos serif: debido a que este tipo de
197
letras estn pensadas para ser impresas, no para ser contempladas en pantalla, y si son de pequeo tamao se deforman y se hacen ilegibles. Esto pasa tambin con los tipos son Sans Serif de pequeo tamao. No abusar de las letras en cursiva: ya que el texto en itlica es difcil de leer en pantalla, debido a la inclinacin del mismo, que provoca un escalonado en los bordes de las letras que las deforma, sobre todo en tamaos pequeos de fuente. No abusar de los textos en negrita: ya que la misin de este es reforzar la importancia de una parte de la informacin que damos en la pgina, y se debe usar slo para este fin. Adems ocurre algo parecido al caso de las cursivas, ya que para pintar en pantalla una letra en negrita lo que hace el ordenador es aadir pixels adicionales en los bordes de la letra. Si esta es de pequeo tamao, se produce un desagradable efecto de emborronado, y si es de gran tamao se produce el efecto de escalonamiento, no siendo convenientes ninguno de ellos. No usar, y menos an abusar, de los efectos de parpadeo o deslizamiento: como pueden ser textos en marquesina, en efecto Blink o en desplazamientos mediante scripting, ya que son irritantes y marean y confunden al usuario. No usar demasiados tipos de fuentes ni demasiados colores diferentes , ya que rompen la armona que debe haber en el contenido de todo documento, aparte de que corremos el riesgo de que el usuario no tenga alguna de las fuentes usadas instaladas en su ordenador, lo que har que ste las sustituya por la fuente estndar, rompiendo con ello todo nuestro esquema de estiolo. Conviene usar siempre las fuentes estndar. Cuidar la accesibilidad de la informacin: ya que si usamos letras de pequeo tamao, efectos compatibles slo con algunos ordenadores o colores que necesiten pretaciones especiales, estamos eliminando de la lista de nuestros visitantes a aquellas personas que no pueden acceder a este tipo de contenidos. Usar enlaces visualmente independientes: es decir, que los enlaces de la pgina se distingan clramente del resto del texto. Piensa que no todos tus visitantes estn tan acostumbrados como t a navegar por Internet, por lo que debes marcar las diferentes partes de tu pgina de forma clara. Presentar el texto de una forma lgica: no olvidemos que al fin y al cabo una pgina web es un documento como otro cualquiera, por lo que debe tener una lgica de desarrollo y de presentacin si queremos que cumpla su misin principal, que es facilitar informacin clara al visitante. Usar siempre caracteres compatibles con el estndar: que tradicionalmente ha sido el el conjunto de caracteres ASCII, y que incluye la letras, los nmeros, los signos de puntuacin y algunos caracteres especiales como los tabuladores. Con objeto de dar apoyo a otros idiomas, posteriormente se tom como modelo el juego de caracteres ISO 8859-1, tambin llamado a veces ISO Latin-1, que no est orientado a ningn idioma en particular, por lo que para especificar uno de los subgrupos de este correspondiente a un idiomas determinado, es necesario especificarlo en la cabecera de la pgina mediante la etiqueta CHARSET. Y ltimamente, a partir de las especificaciones del HTML 4.0, se ha tomado como estndar el juego de caracteres UNICODE.
Para evitar contradicciones y malas interpretaciones es conveniente ceirse casi siempre al juego ASCII, por lo que si escribes en castellano, no acentes las palabras directamente, si no que debes usar los caracteres especiales que hay para tal efecto.
198
LOS GRFICOS DIGITALES

Qu son, como nos ayudan en los diseos y la manera de trabajar con los grficos digitales. Una composicin grfica es un conjunto de elementos textuales y grficos que trabajan conjuntamente para transmitir una informacin, un mensaje, a los espectadores o usuarios finales. En este trabajo en equipo, los contenidos grficos no slo aportan aspectos visuales y estticos, sino que su presencia, sus formas y colores, afectan profundamente a la informacin ofrecida por los elementos textuales, reforzando su impacto final sobre el espectador.
Una imagen bien seleccionada y situada correctamente en el documento centra la atencin del lector y aade significado al mismo. Las imgenes se presentan en una gran variedad de formas: ilustraciones, fotografas, diagramas, iconos, etc, cada una de ellas con su propia personalidad y funcionalidades, pero todas ellas con un factor en comn: su naturaleza digital.
Atrs quedaron los tiempos en que las composiciones grficas eran un compendio de elementos individuales separados, que el impresor tena que montar con todo su arte para crear una entidad nica. Los modernos equipos informticos y las aplicaciones de autoedicin, diseo grfico, diseo industrial y diseo web han hecho posible reducir todos los elementos participantes en una composicin cualquiera a sucesiones de dgitos
binarios fcilmente encajables entre s. A la hora de trabajar con elementos grficos, el primer paso ser recopilar los que necesitemos para nuestra composicin, pudiendo usar diferentes fuentes y tcnicas para ello: escaneado de documentos, ilustraciones o fotografas en papel, creacin directa mediante programas de diseo grfico, dibujo digital mediante tabletas digitalizadoras, obtencin de fotografas con cmaras digitales, utilizacin de grficos y fotografas ya existentes, gratuitas o no, etc.
Normalmente, estas primeras versiones de nuestros componentes grficos no se adaptarn a nuestras necesidades al 100%, por lo que ser preciso un posterior trabajo con programas de retoque de imgenes para conseguir esas caractersticas finales buscadas. Conforme vayamos obteniendo las versiones finales de nuestras imgenes necesitaremos nombrarlas y almacenarlas mediante algn sistema que haga posible una gestin efectiva de las mismas y de sus originales, de tal forma que podamos tenerlas localizadas y disponibles en cualquier momento. Por ltimo, deberemos montar en la composicin todos los elementos grficos y textuales, utilizando generalmente para ello algn programa de autoedicin, diseo grfico o diseo web. Para poder realizar todo este trabajo es preciso tener un conocimiento profundo de la naturaleza de las imgenes digitales, de sus tipos y propiedades (mapas de bits y grficos vectoriales), de los diferentes formatos de almacenamiento y de las herramientas fsicas (hardware) y lgicas (software) necesarias para su obtencin, manipulacin y composicin.
GRFICOS DE MAPA DE BITS RESOLUCIONES

Vemos uno de los tipos de grficos digitales: los mapas de bits. Conocemos qu son las resoluciones y cules son las adecuadas para los distintos trabajos. Existen dos tipos principales de imgenes digitales: los mapas de bits, en los que la imagen se crea mediante una rejilla de puntos de diferentes colores y tonalidades, y los grficos vectoriales, en los que la imagen se define por medio de diferentes funciones matemticas. Las imgenes de mapa de bits (bitmaps o imgenes raster) estn formadas por una rejilla de celdas, a cada una de las cuales, denominada pxel (Picture Element, Elemento de Imagen), se le asigna un valor de color y luminancia propios, de tal forma que su agrupacin crea la ilusin de una imagen de tono continuo.
200
Un pxel es pues una unidad de informacin, pero no una unidad de medida, ya que no se corresponde con un tamao concreto. Un pxel puede ser muy pequeo (0.1 milmetros) o muy grande (1 metro).
Una imagen de mapa de bits es creada mediante una rejilla de pxeles nica. Cuando se modifica su tamao, se modifican grupos de pxeles, no los objetos o figuras que contiene, por lo que estos suelen deformarse o perder alguno de los pxeles que los definen. Por lo tanto, una imagen de mapa de bits est diseada para un tamao determinado, perdiendo calidad si se modifican sus dimensiones, dependiendo esta prdida de la resolucin a la que se ha definido la imagen. Los grficos de mapa de bits se obtienen normalmente a partir de capturas de originales en papel utilizando escneres, mediante cmaras digitales o directamente en programas grficos. Tambin existen multitud de sitios en Internet que ofrecen imgenes de este tipo de forma gratuita o por una cantidad variable de dinero. Resolucin de una imagen de mapa de bits La resolucin de una imagen es el un concepto que suele confundir bastante, principalmente porque no es un concepto nico, sino que depende del medio en el que la imagen vaya a ser visualizada o tratada. As, podemos hablar de resolucin de un archivo digital, resolucin de impresin, resolucin de semitono, resolucin de escaneado, etc. Tal vez el concepto ms ligado a la propia naturaleza de la imagen digital sea el de resolucin del archivo digital, definida como el nmero de pxeles distintos que tiene una imagen por unidad de longitud, es decir, la densidad de stos en la imagen. Sus unidades de medida son los pxeles por pulgada (ppp o ppi, pixels per inch, en ingls) o los pxeles por centmetro (ms raramente). Cuanto mayor sea esta resolucin, ms contenedores de informacin (pxeles) tiene el fichero digital, ms calidad tendr la imagen y ms peso en Kb tendr el fichero.
201
Esta resolucin est muy ligada al concepto de resolucin de pantalla en un monitor, referida al nmero de pxeles por pulgada existentes en la pantalla del monitor en el que se visualiza la imagen. Una configuracin del monitor en alta resolucin exhibir ms pxeles por pulgada, por lo que stos sern ms pequeos, permitiendo una mejor visualizacin de la imagen en pantalla. En ningn caso podremos visualizar una imagen a mayor resolucin que la de pantalla, que suele ser de 72 ppp en un sistema Mac y de 96 ppp en un PC.
Una vez definida la resolucin de pantalla, el tamao de los pxeles depender del tamao fsico de la pantalla, medido en pulgadas. Las resoluciones de pantalla ms comunes en la actualidad son 800x600 y 1024x768 pxeles, oscilando los tamaos de pantalla entre 15 y 21 pulgadas. En el trabajo de digitalizacin de imgenes con escner se maneja el concepto de resolucin de muestreo, que define el nmero de muestras que se toman por pulgada. Su unidad de medida son las muestras por pulgada (spi, samples per inch). Cuanto ms muestras por pulgada tenga una imagen escaneada, ms cercana estar la imagen digital a la imagen original. Este forma de medir la resolucin se utiliza poco, habindose adoptado como medida de calidad de un imagen escaneada los pxeles por pulgada que tiene la imagen digital resultante del proceso.
202
En trabajos con imgenes destinadas a la impresin se maneja el concepto de resolucin de impresin, que se refiere a la capacidad mxima de discriminacin que tiene una mquina de impresin, es decir, los puntos de tinta o toner que puede colocar una impresora u otro dispositivo de impresin dentro de una pulgada para imprimir la imagen. Su unidad de medida son los puntos por pulgada lineal (dpi, doths per inch). En general, cuantos ms puntos, mejor calidad tendr la imagen impresa.
Por ltimo, en el entorno de la imprenta se suele utilizar el concepto de resolucin de trama o semitono, definida como la capacidad mxima de imprimir una trama con diferentes tonos de gris (hasta un mximo de 256). Tambin conocida con el nombre de lineatura (linescreen) o frecuencia de lnea, su unidad de medida son las lneas por pulgada (lpi). La resolucin de trama est relacionada con la capacidad de reproducir las imgenes simulando sus tonos continuos por medio de lneas de puntos de semitono, y se obtiene fcilmente dividiendo la resolucin mxima de impresin de la mquina en cuestin por el nmero de tonos que se quieren obtener.
Una forma comn de clasificar las imgenes segn su resolucin es aquella que las divide en imgenes de alta resolucin (hi-res) e imgenes de baja resolucin (low-res). Una
imagen de alta resolucin est prevista para la impresin, teniendo generalmente 300 ppp o ms. Una imagen de baja resolucin est prevista solamente para su exhibicin en pantalla, teniendo generalmente una resolucin de 100 ppp o menos.
A mayor resolucin, ms pxeles hay en una imagen, ms grande es su mapa de bits, mayor informacin contiene y mayor capacidad de distinguir los detalles espaciales finos, por lo que tendr ms definicin, permitiendo un mayor detalle, unas transiciones de color ms sutiles y una mayor calidad de reproduccin. Las imgenes de mapas de bits dependen de la resolucin a la que han sido creadas, por lo que al modificar su tamao pierden calidad visual. Si lo disminuimos, los trazos finos perdern definicin, desapareciendo partes de los mismos, mientras que si lo aumentamos, la imagen se pixelizar, al tener que cubrirse de forma aproximada pxeles que inicialmente no existan, producindose el conocido efecto de dientes de sierra.
La resolucin de una imagen est relacionada con su tamao, de tal forma que cuando le asignemos una resolucin estaremos asignando un tamao a los pxeles que la forman, con lo que sabremos qu tamao tiene la imagen. Por ejemplo, si una imagen tiene 100 pxeles por pulgada, querr decir que cada 2,54 cm. habr 100 pxeles, con lo que cada pxel equivaldr a 2,54 mm. Si dijramos que esa imagen tiene una resolucin de 1 pxel por pulgada, lo que sabramos es que ahora cada pxel tendr un tamao de 2,54 cm. Otra consecuencia de la relacin resolucin-tamao es que para mantener la calidad de reproduccin, al variar el tamao de una imagen tamao, tendremos que variar tambin su resolucin. En lneas generales, si queremos que mantenga el mismo nivel de calidad hay que mantener la cantidad de informacin que posee la imagen (nmero de bits que ocupa) cuando modificamos sus dimensiones.
204
Eleccin de la resolucin La resolucin de una imagen no debe ser nunca mayor que la del medio en el que se va a publicar, pues supondra un exceso de informacin que no va a ser utilizada. Si representamos en un grfico la relacin calidad imagen-resolucin para un medio de publicacin determinado, llega un punto en que por mucho que aumentemos la resolucin, la calidad no aumentar, pero s el peso del fichero y los recursos necesarios.
Las imgenes de alta resolucin reproducen generalmente ms detalle y transiciones ms sutiles del color que imgenes de baja resolucin. Sin embargo, el aumento de la resolucin de una imagen baja resolucin separa solamente la informacin original en un mayor nmero de peles, pero raramente mejora la calidad de la imagen. Los diferentes medios utilizan diferentes resoluciones, siendo las ms comunes las siguientes: Medio Resolucin de trabajo Pantalla de ordenador 72 ppp Prensa (periodicos, revistas, Normalmente, 90 ppp, aunque puede subir a 300 ppp en etc.) impresin offset Diferentes resoluciones, generalmente entre 300 ppp y 600 Impresora ppp (impresoras laser) Fotografa Suele emplear imgenes de 800-1500 dpp y mayores Imprenta Es necesario saber la lineatura de impresin, pues la resolucin de una imagen se corresponde con la lineatura de impresin en una escala de 2:1 (para imprimir a 150 lpp, deberemos trabajar las imgenes al doble, 300 ppp. En fotocomponedoras para impresin se suele trabajar a 1200 ppp Si estamos trabajando con imgenes destinadas a la impresin, los ficheros grficos grandes, con mucha resolucin y/o tamao, tardan ms en ser procesados por el RIP (Raster Image Processor), el procesador de imgenes de un aparato postscript. Cualquier ahorro sensato de tamao es algo que redundar en trabajos manejables y menos dados a causar problemas y retrasos. Adems, la lineatura no es algo que podamos elegir al azar. Aunque las cmaras digitales o las filmadoras sean capaces de llegar a resoluciones muy altas, el limite de trabajo lo va a marcar el medio en el que vayamos a imprimir, el mtodo que vayamos a usar para ello y el dinero que estemos dispuestos a pagar por ello.
Si la imagen est destinada a ser impresa en una impresora de inyeccin de tinta, habr que digitalizar la imagen a una resolucin de 300 ppp para que la definicin final sea correcta, ya que sta es la resolucin mxima que suelen dar estos dispositivos. Si una imagen est destinada a ser visualizada en un monitor de ordenador, hay que tener en cuenta que la resolucin de estos perifricos es de 72 ppp en los aparatos Macintosh y 96 pxeles por pulgada en los PCs con sistemas Windows, por lo que habr que digitalizarla a estas resoluciones. Si le damos mayor resolucin estaremos desperdiciando recursos, sobre todo si la imagen est destinada a la web, ya que tardar mucho ms en bajarse desde el servidor sin conseguir ninguna ventaja visual con ello.
Resumiendo: Hay que trabajar siempre en unos niveles de resolucin adecuados al medio en el que se va a usar la imagen. Resoluciones mayores necesitarn unos recursos excesivos que no son aprovechables. En el extremo contrario, resoluciones menores que las del medio suelen producir una mala visualizacin o impresin, presentando las imgenes el conocido efecto de pixelizacin o dientes de sierra. DIMENSIONES DE UNA IMAGEN DE MAPA DE BIT Explicacin de los distintos tipos de medidas de las dimensiones de los mapas de bits. Puesto que la resolucin de una imagen se mide en pulgadas o centmetros, parecera lgico pensar que estas mismas unidades se utilizaran para definir las dimensiones de una imagen. El principal inconveniente de obrar as es que estas unidades expresan valores de medida absolutos, mientras que los dispositivos de salida suelen trabajar en dimensiones relativas (pxeles o puntos de impresin). Por ejemplo, los monitores trabajan en pxeles, adaptando las dimensiones de los objetos que presenta a la resolucin de pantalla usada, por lo que una imagen se visualizar ms pequea cuanto mayor sea la resolucin.
206
Adems, si se utilizan centmetros o pulgadas ser necesario tambin conocer tambin la resolucin de la imagen, medida en pxeles por unidad de longitud, para saber la informacin grfica que contiene. Es conveniente entonces utilizar como unidades de medida de las dimensiones de una imagen bien los pxeles de pantalla, si est destinada a mostrarse en un monitor, bien los puntos de impresin, si est destinada a la imprenta o impresora. El espacio relativo de pantalla ocupado por una imagen de dimensiones 150x100 pxeles ser el mismo sea cual sea la resolucin, con la nica diferencia de que cuanto menor sea sta, ms grande ser su tamao absoluto en pulgadas o centmetros, al ser de mayor tamao los pxeles. No olvidemos que la resolucin til de una imagen nunca es mayor que la del medio en el que se visualiza. Una imagen escaneada a 200 ppp se visualizar en un monitor de PC con la configuracin por defecto a 96 ppp, desperdicindose el resto de informacin sobre los valores de los pxeles de la imagen, mientras que una imagen escaneada a 50 ppp se visualizar igualmente a 96 ppp en la pantalla del monitor, aunque en este caso su calidad ser escasa, al no contener los pxeles suficiente informacin grfica. Resumiendo, sea cual sea el tamao de los pxeles o puntos de una imagen, una vez presentados en un medio dado su tamao se adaptar al de los pxeles ste, por lo que esta unidad de medida resulta la ms conveniente en todos los casos. Una consideracin importante: las dimensiones de una imagen en pantalla no suelen coincidir con las dimensiones de la imagen impresa, ya que, mientras en la resolucin de pantalla permanece constante, la resolucin propia de la imagen vara al cambiar el tamao de sta, y viceversa, segn las siguientes reglas:

Si disminuimos la resolucin de la imagen, la anchura y la altura aumentarn. Si aumentamos la resolucin, la anchura y la altura disminuirn. Si aumentamos la anchura o la altura, la resolucin disminuir. Si disminuimos la anchura o la altura, la resolucin aumentar.
Por lo tanto, si queremos aumentar las dimensiones de una imagen en un programa como Photoshop sin perder calidad, lo mejor es trabajar con la imagen en una alta resolucin (sobre dos veces la resolucin final deseada). Entonces, disminuiremos la resolucin o
aumentaremos la anchura y la altura (ambas acciones producirn resultados similares). Una vez que las dimensiones de la imagen sean las deseadas podremos disminuir la resolucin al valor deseado. Por otra parte, el tamao de visualizacin de una imagen en pantalla es a menudo diferente de su tamao impreso. Los pxeles de la imagen se traducen directamente a pxeles del monitor, por lo que cuando la resolucin de la imagen es ms alta que la resolucin del monitor aparece la imagen en pantalla ms grande que sus dimensiones especificadas para la impresin. Por ejemplo, una imagen de 1 x 1 pulgadas a una resolucin de 144 ppp ocupar en una pantalla de resolucin 72 ppp un rea de 2 x 2 pulgadas, ya que como el monitor puede exhibir solamente 72 pxeles por pulgada, necesita 2 pulgadas para mostrar los 144 pxeles de la imagen.
MODOS DE COLOR
Continuamos con los grficos digitales, estudiando los modos de color, que es la cantidad mxima de colores de la paleta de un mapa de bits. El modo de color expresa la cantidad mxima de datos de color que se pueden almacenar en un determinado formato de archivo grfico. Podemos considerar el modo de color como el contenedor en que colocamos la informacin sobre cada pxel de una imagen. As, podemos guardar una cantidad pequea de datos de color en un contenedor muy grande, pero no podremos almacenar una gran cantidad de datos de color en un contenedor muy pequeo. Los principales modos de color utilizados en aplicaciones grficas son: Modo Bit Map o monocromtico Correspondiente a una profundidad de color de 1 bit, ofrece una imagen monocromtica formada exclusivamente por los colores blanco y negro puros, sin tonos intermedios entre ellos.
Para convertir una imagen a modo monocromtico hay que pasarla antes a modo escala de grises. En este modo no es posible trabajar con capas ni filtros. Modo Escala de Grises Este modo maneja un solo canal (el negro) para trabajar con imgenes monocromticas de 256 tonos de gris, entre el blanco y el negro.
208
El tono de gris de cada pxel se puede obtener bien asignndole un valor de brillo que va de 0 (negro) a 255 (blanco), bien como porcentajes de tinta negra (0% es igual a blanco y 100% es igual a negro). Las imgenes producidas con escneres en blanco y negro o en escala de grises se visualizan normalmente en el modo escala de grises. El modo Escala de Grises admite cualquier formato de grabacin, y salvo las funciones de aplicacin de color, todas las herramientas de los programas grficos funcionan de la misma manera a como lo hacen con otras imgenes de color. Si se convierte una imagen modo de color a un modo Escala de Grises y despus se guarda y se cierra, sus valores de luminosidad permanecern intactos, pero la informacin de color no podr recuperarse. Modo Color Indexado Denominado as porque tiene un solo canal de color (indexado) de 8 bits, por lo que slo se puede obtener con l un mximo de 256 colores.
En este modo, la gama de colores de la imagen se adecua a una paleta con un nmero restringido de ellos, por lo que puede resultar til para trabajar con algunos formatos que slo admiten la paleta de colores del sistema. Tambin resulta til reducir una imgenes a color 8 bits para su utilizacin en aplicaciones multimedia, ya que con ello se consiguen ficheros de menos peso. Su principal inconveniente es que la mayora de las imgenes del mundo real se componen de ms de 256 colores. Adems, aunque admite efectos artsticos de color, muchas de las herramientas de los principales programas grficos no estn operativas con una paleta de colores tan limitada. Modo Color RGB Trabaja con tres canales, ofreciendo una imagen tricromtica compuesta por los colores primarios de la luz, Rojo(R), Verde(G) y Azul(B), construida con 8 bits/pixel por canal (24 bits en total). Con ello se consiguen imgenes a todo color, con 16,7 millones de colores distintos disponibles, ms de los que el ojo humano es capaz de diferenciar.
Es un modelo de color aditivo (la suma de todos los colores primarios produce el blanco), siendo el estndar de imagen de todo color que se utilice con monitores de video y pantallas de ordenador. Las imgenes de color RGB se obtienen asignando un valor de intensidad a cada pxel, desde 0 (negro puro) a 255 (blanco puro) para cada uno de los componentes RGB. Es el modo ms verstil, porque es el nico que admite todas las opciones y los filtros que proporcionan las aplicaciones grficas. Adems, admite cualquier formato de grabacin y canales alfa. Modo Color CMYK Trabaja con cuatro canales de 8 bits (32 bits de profundidad de color), ofreciendo una imagen cuatricromtica compuesta de los 4 colores primarios para impresin: Cyan (C), Magenta (M), Amarillo(Y) y Negro (K).
Es un modelo de color sustractivo, en el que la suma de todos los colores primarios produce tericamente el negro, que proporciona imgenes a todo color y admite cualquier formato de grabacin, siendo el ms conveniente cuando se enva la imagen a una impresora de color especial o cuando se desea separar los colores para la filmacin o imprenta (fotolitos). Su principal inconveniente es que slo es operativo en sistemas de impresin industrial y en las publicaciones de alta calidad, ya que, exceptuando los escneres de tambor que se emplean en fotomecnica, el resto de los digitalizadores comerciales trabajan en modo RGB. El proceso de convertir una imagen RGB al formato CMYK crea un separacin de color. En general, es mejor convertir una imagen al modo CMYK despus de haberla modificado. Modificar imgenes en modo RGB es ms eficiente porque los archivos CMYK son un tercio ms grandes que los archivos RGB. Modo Color Lab Consiste en tres canales, cada uno de los cuales contiene hasta 256 tonalidades
diferentes: un canal L de Luminosidad y dos canales cromticos, A (que oscila entre verde y rojo) y B (que oscila entre azul y amarillo). El componente de luminosidad L va de 0 (negro) a 100 (blanco). Los componentes A (eje rojo-verde) y B (eje azul-amarillo) van de +120 a -120.
El modelo de color Lab se basa en el modelo propuesto en 1931 por la CIE (Commission Internationale d'Eclairage) como estndar internacional para medir el color. En 1976, este modelo se perfeccion y se denomin CIE Lab.
El color Lab es independiente del dispositivo, creando colores coherentes con independencia de los dispositivos concretos para crear o reproducir la imagen (monitores, impresoras, etc.). Este modo permite cambiar la luminosidad de una imagen sin alterar los valores de tono y saturacin del color, siendo adecuado para transferir imgenes de unos sistemas a otros, pues los valores cromticos se mantienen independientes del dispositivo de salida de la imagen.
Se usa sobre todo para trabajar en imgenes Photo CD o para modificar la luminancia y los valores del color de una imagen independientemente. Tambin se puede usar el modo Lab para conservar la fidelidad del color al trasladar archivos entre sistemas y para imprimir en impresoras de PostScript de Nivel 2.
Slo las impresoras PostScript de nivel 2 puede reproducir esta imgenes. Para impresiones normales, se recomienda pasar las imgenes a RGB o a CMYK. Modo Duotono Modo de color que trabaja con imgenes en escala de grises, a las que se le pueden aadir tintas planas (3 para cada imagen, ms el negro), con el fin de colorear distintas gamas de grises.
Slo posee un canal de color (Duotono, Tritono o Cuatritono, dependiendo del nmero de tintas). Con este mtodo podemos obtener fotos en blanco y negro viradas al color que queramos. Suele ser empleado en impresin, donde se usan dos o ms planchas para aadir riqueza y profundidad tonal a una imagen de escala de grises. El problema que presenta este modo es que en los duotonos, tritonos y cuadritonos slo hay un canal, por lo que no es posible tratar cada tinta de forma distinta segn las zonas de la imagen. Es decir, no podemos hacer una zona en la que solo haya, por ejemplo, un parche cuadrado de tinta roja, mientras que en el resto slo hay una imagen de semitono en blanco y negro. Modo Multicanal Posee mltiples canales de 256 niveles de grises, descomponiendo la imagen en tantos canales alfa como canales de color tuviera el original (una imagen RGB quedar descompuesta en 3 canales y una CMYK en 4 canales). En este modo, cada tinta es un canal que a la hora de imprimir se superpondr en el orden que determinemos sobre los otros. Por ello, es posible tratar cada zona de forma particularizada.
Se utiliza en determinadas situaciones de impresin en escala de grises. Tambin, para ensamblar canales individuales de diversas imgenes antes de convertir la nueva imagen a un modo de color, pues los canales de color de tinta plana se conservan si se convierte una imagen a modo multicanal.
Al convertir una imagen en color a multicanal, la nueva informacin de escala de grises se basa en los valores de color de los pxeles de cada canal. Si la imagen estaba en modo CMYK, el modo multicanal crea canales de tinta plana cian, magenta, amarilla y negra. Si estaba en modo RGB, se crean canales de tinta plana cian, magenta y amarilla.
COLOR Y MAPA DE BITS

Cmo se trata el color en los mapas de bits. Profundidad de color de las imgenes, paletas, etc. Los grficos de mapa de bits almacenan una completa informacin sobre el color de cada uno de sus pxeles constituyentes. Cuantos ms colores pueda tener la imagen, ms calidad final tendr y ms informacin ser necesario almacenar. Relacionados con el nmero de colores posibles, sus caractersticas y su almacenamiento encontramos los siguientes conceptos: Profundidad de color La profundidad de color de una imagen se refiere al nmero de colores diferentes que puede contener cada uno de los puntos o pxeles que la forman, y depende de la cantidad de informacin (nmero de bits) que puede almacenar un pxel.
Cuanto mayor sea la profundidad de bit en una imagen, mayor ser la cantidad de tonos (escala de grises o color) que puedan ser representados, ms colores habr disponibles y ms exacta ser la representacin del color en la imagen digital. Las imgenes digitales se pueden producir en blanco y negro, a escala de grises o a color. Profundidad de color 1 bit por pixel Colores posibles 2 Comentarios Arte Lineal (B&N). Modo Mapa de Bits
213
4 bits por pixel 8 bits por pixel
16 256
16 bits por pixel 24 bits por pixel 32 bits por pixel
65.536 16.777.216
Modo Escala de Grises Modo Escala de Grises. Modo Color Indexado. Cantidad estndar de colores que admiten los formatos GIF y PNG-8, as como muchas aplicaciones multimedia. High Color True Color. Modo RGB 8 bits por canal (8x3=24). Modo Lab 8 bits por canal
4.294.967.29 Modo CMYK 6 Una imagen en blanco y negro (bitonal) est representada por pxeles que constan de 1 bit de informacin cada uno, por lo que pueden representar dos tonos (tpicamente negro y blanco), utilizando los valores 0 para el negro y 1 para el blanco o viceversa. Una imagen a escala de grises est compuesta por pxeles representados por mltiples bits de informacin, que tpicamente varan entre 2 bits (4 tonos) a 8 bits (256 tonos) o ms. Una imagen a color est tpicamente representada por una profundidad de bits entre 8 y 32 bits. En una imagen de 24 bits, los bits por lo general estn divididos en tres grupos (8 para el rojo, 8 para el verde y 8 para el azul). Para representar otros colores se utilizan combinaciones de esos bits, consiguindose en total 16,7 millones de valores de color. Con 32 bits por pxel tambin se siguen utilizando 24 bits para la representacin del color. Los 8 bits restantes se utilizan para el denominado canal alfa, valor independiente del color que se asigna a cada pxel de la imagen, utilizado para definir el grado de transparencia de cada punto de la imagen. Un valor 0 indica que el punto es totalmente transparente, mientras que un valor 255 indica que ser totalmente visible (opaco). La cantidad de colores utilizados en la imagen influye mucho en el tamao del archivo que la contiene. cuantos ms colores se utilicen, ms grande ser el tamao del fichero grfico necesario. Rango dinmico Es el rango de diferencia tonal entre la parte ms clara y la ms oscura de una imagen. Cuanto ms alto sea el rango dinmico, ms matices se podrn representar, a pesar de que el rango dinmico no se correlaciona en forma automtica con la cantidad de tonos reproducidos.
En este ejemplo, la imagen de la derecha posee un rango dinmico ms amplio, pero una cantidad limitada de tonos representados (observa la falta de detalle en las sombras). La
imagen izquierda, por el contrario, posee un rango dinmico ms estrecho, pero una mayor cantidad de tonos representados. El rango dinmico tambin describe la capacidad de un sistema digital de reproducir informacin tonal. Esta capacidad es ms importante en los documentos de tono continuo, como las fotografas, donde puede ser el aspecto ms importante de la calidad de imagen. Paletas de color A la hora de trabajar con imgenes en formato digital se debe tener en cuenta la configuracin de los sistemas utilizados para visualizarlas, ya que esto condicionar el proceso de edicin de las mismas. La mayora de los ordenadores personales limitan el nmero de colores que se pueden mostrar simultneamente a 256. Los colores disponibles, en lugar de ser un conjunto fijo, pueden ser seleccionados de una paleta de 16 millones de colores (el modelo RGB). Es decir, la gama total de colores cubre todas esas combinaciones, pero en cada momento slo es posible mostrar 256 diferentes. Para solucionar esta deficiencia, manteniendo un nmero mximo de 256 colores (8 bits por canal), se introdujeron las paletas de color, en las que se utilizan los colores que sean ms apropiados para la imagen (desde 4 a 256). La paleta puede ser exacta (escoge los mismos colores que aparecen en la imagen), adaptable (escoge los colores que encuentra), web (escoge los colores ms prximos dentro de la paleta WebSafe), etc.
Las imgenes que utilizan una paleta de colores propia requieren un espacio adicional en el archivo para guardar esta informacin. La informacin de cada uno de los colores utilizados en la paleta ocupar 24 bits (8 bits par cada color bsico), por lo que para almacenar una paleta de 256 colores se requerirn 6.144 bits (256 valores x 24 bits = 6.144 bits). Una vez definida la paleta, la informacin relativa a cada uno de los puntos que forman la imagen no contendr el valor absoluto del color de ese punto, sino que har referencia a uno de los colores de la paleta. Ser la tarjeta grfica del ordenador la que utilizar la informacin de la paleta de color para saber en qu proporciones se debe mezclar los tres colores bsicos que permiten cada uno de los colores. El resultado es una gama de colores casi real con un nmero de colores pequeo, con lo que el fichero grfico resultante ocupar menos espacio. Por este motivo, y por la existencia de formatos grficos que slo permiten trabajar con 256 colores, las paletas de
color se mantienen vigentes, a pesar de la mejora de prestaciones de las tarjetas de vdeo, capaces de trabajar en la actualidad con millones de colores sin prdida de rendimiento del sistema.
PESO DE UN FICHERO GRFICO

Estudio del tamao que ocupan los mapas de bits en disco, que suele estar relacionado con el nmero de colores con el que est codificado el grfico. Los mapas de bits pueden estar definidos en un nmero variable de colores. Como regla general, cuantos ms colores tenga la imagen, mayor calidad tendr, aunque esta regla depende mucho de la imagen en s. Por ejemplo, una letra negra sobre fondo blanco (1 bit de profundidad de color), formada por lneas rectas horizontales y verticales, slo necesitar estos dos colores para visualizarse de forma correcta, aunque aumentemos su tamao (resolucin).
Si trabajamos con una profundidad de color de 8 bits tendremos 256 colores posibles para cada pxel (caso de iconos o ilustraciones en formato GIF, por ejemplo) y si aumentamos la profundidad a 24 bits tendremos millones de colores para cada pxel de la imagen (caso de fotografas en formato JPG o PNG, por ejemplo). Tambin podemos definir diferentes resoluciones para una imagen. Cuanto mayor sea la resolucin, ms pxeles formarn la imagen, ms datos de informacin necesitar y, por lo tanto, mayor ser el tamao del fichero resultante. Por lo tanto, cuantos ms colores tenga una imagen y cuanto mayor sea su resolucin, mayor peso tendr el fichero necesario para almacenarla.
En la frmula anterior, ancho y alto estn dados en pulgadas, resolucin en pxeles por pulgada y profundidad del color en bites. Para una imagen de 3 x 2 pulgadas a una resolucin de 72 ppp y con una profundidad de color de 8 bits, por ejemplo, tendremos: Peso fichero = [[(3 x 72) x (2 x 72)] x 8] / 8 = 31104 bytes = 31 Kb Si las dimensiones de la imagen est en centmetros, basta dividir estos por 2,54. As, una imagen de 1 x 1 pulgadas a una resolucin de 300 ppp y con una profundidad de color de
24 bits (color real) tendr un peso de: contiene un total de 90.000 pxeles. Peso fichero = [[(1 x 300) / 2,54 x (1 x 300) / 2,54] x 24] / 8 = 41850 bytes = 419 Kb Si trabajamos directamente con pxeles (captura con cmara digital, por ejemplo), bastar multiplicar las dimensiones de la imagen entre s y por la profundidad de color en bits para determinar la cantidad de bits presentes en un archivo de imagen., y dividiendo el resultado entre 8, tendremos el peso del fichero en bytes.
Como vemos, los pesos obtenidos son muy altos, sobre todo en el caso de imgenes destinadas a Internet, donde el ancho de banda es un recurso limitado.
217
OPTIMIZACIN DE UN FICHERO GRFICO

Cmo reducir el tamao en bytes de un archivo grfico. Ejemplos de tcnicas utilizadas para optimizar el peso de las imgenes. Generalmente, los ficheros de imgenes de mapa de bits necesitan almacenar mucha informacin grfica, lo que hace que su peso final en bytes sea excesivo, tanto para su impresin (si la imagen es muy grande puede durar mucho el proceso de impresin) como para su transferencia por Internet, medio en el que el ancho de banda est muy limitado. Con objeto de minimizar el peso de los ficheros grficos se han desarrollado diferentes tcnicas de optimizacin basadas en dos principios diferentes:

Reducir el nmero de colores utilizados en la imagen. Comprimir los datos de la imagen para que ocupen menos espacio.
Reduccin de colores (dithering) El principio del dithering se basa en la reduccin del nmero de colores usado en una imagen, al considerar que en la mayora de los casos se utiliza demasiada informacin grfica en un fichero, informacin que se puede eliminar sin prdidas notables en la calidad final de la imagen.
Si una determinada imagen utiliza slo 40 colores, para reducir el tamao de su archivo bastara con definir los 40 colores utilizando una paleta de color, guardando luego los puntos de la imagen con una profundidad de 8 bits. Por otra parte, una imagen que utilice 256 colores puede tener una calidad aceptable en relacin a la misma imagen con 16,8 millones de colores, siendo, su tamao tres veces ms pequeo. Para obtener un color no presente en la paleta de 256 colores de la imagen siempre es posible mezclar los que s estn, consiguiendo en la mayora de los casos una buena aproximacin al necesitado.
218
La tcnica del dithering va a ser la encargada de calcular la proporcin con que se deben mezclar los colores de la paleta para obtener otros. Para obtener una determinada tonalidad de color se utilizan varios puntos que tienen un color muy prximo al que se desea conseguir. Cuando se observar la imagen desde una cierta distancia, el color de los puntos adyacentes se mezcla, dando lugar a la ilusin de nuevas tonalidades de color. Este sistema de optimizacin por reduccin de colores es utilizado por ejemplo en el formato GIF. Reduccin de datos (compresin) La compresin es una tcnica que permite reducir el tamao de un fichero mediante procesos matemticos, facilitando as la transferencia de los mismos por red o su almacenamiento en cualquier otro soporte. Todas las tcnicas de compresin reducen la cadena de cdigo binario de una imagen sin comprimir a una forma abreviada matemtica basada en complejos algoritmos, apoyndose en la teora de que en una imagen existe informacin repetida que en realidad slo se debe guardar una vez.
Los algoritmos matemticos que el ordenador emplea para generar la compresin son muy variados y los hay realmente complejos. Algunos valen para todo tipo de imgenes y otros son eficaces solamente con un tipo de ellas. Existen dos tipos bsicos de algoritmos de compresin, los que actan sin prdidas y los
que comprimen con prdidas. Los sistemas sin prdida abrevian el cdigo binario sin desechar informacin, por lo que los datos de salida de la decodificacin son idnticos bit a bit a los de la fuente original. Los factores de compresin conseguidos son pequeos, menores de 10:1 en el mejor de los casos, no pudindose garantizar un factor de compresin determinado, ya que depende de la cantidad de redundancia de la informacin original . Estos sistemas se suelen usar en el escaneado bitonal de material de texto. Los sistemas con prdida utilizan diferentes formas de compensar o desechar la informacin menos importante de una imagen basndose en la percepcin visual humana, consiguiendo a veces resultados casi idnticos al original con un peso mucho menor. La calidad de la imagen no slo depende del factor de compresin, sino tambin del algoritmo empleado. Los factores de compresin son altos, de 40:1 a 100:1 Se suelen utilizar con imgenes tonales, particularmente con imgenes de tono continuo, en las que la simple abreviatura de informacin que proporcionan los sistemas sin prdida no tienen como resultado un ahorro de archivo apreciable. Existe una variacin de los sistemas de compresin, los sistemas emergentes, que ofrecen la capacidad de proporcionar imgenes de resolucin mltiple desde un solo archivo, con la consiguiente flexibilidad en la entrega y presentacin de las imgenes a los usuarios finales. Los principales algoritmos de compresin usados en ficheros grficos son: RLE (Run Length Encoded) Es tal vez el esquema de compresin sin prdidas ms sencillo, y tambin uno de los ms ineficaces. Est basado en sustituir la informacin grfica de pxeles que se repiten por el valor del color de uno de ellos y la posicin de cada uno de los puntos que lo utilizan. Esta tcnica es eficiente cuando dentro del fichero grfico que se va a comprimir se repite un byte sucesivamente un nmero grande de veces. En estos casos, todos los bytes iguales se sustituyen por dos, el primero de los cuales indica el numero de veces que se repite el segundo.
Existen diferentes formas de implementar RLE, todas ellas patentadas. Una de ellas, la ms ineficiente, es utilizar un carcter, llamado comnmente DLE, que sirva para indicar que se ha producido una repeticin de un carcter. Otra es utilizando un carcter "centinela", con un bit que indica si la siguiente informacin es acerca de una repeticin o son datos sin repeticin.
220
Este mtodo permite obtener un alto nivel de compresin en imgenes que contengan muchas reas del mismo color, sin que se produzcan prdidas de calidad. El problema surge cuando los colores de la imagen son muy dispares, caso en el que se pueden obtener archivos de mayor tamao que los originales. RLE es el algoritmo utilizado en los formato grficos BMP y PCX, aunque cada uno usa un mtodo distinto de implementacin. LZW (Lempel-Ziv-Welch) Sistema de compresin sin prdidas, actualmente propiedad de la empresa Unisys, desarrollado por los matemticos Abraham Lempel y Jakob Ziv en los aos 1977 y 1978, y refinado por Terry Welch en1984. Este algoritmo surgi con objeto de que todas las personas de la empresa Compuserve pudieran intercambiar de forma rpida imgenes en formato grfico GIF, independientemente de la plataforma usada.
LZW es un compresor tipo diccionario, que utiliza para la compresin una tabla de cadenas, reemplazando las cadenas de caracteres iguales del fichero por cdigos numricos nicos que las representan, con lo que es capaz de comprimirlas aunque no se encuentre en sucesin. En el fichero comprimido no aparece explcitamente la tabla de cadenas, slo la tabla de caracteres individuales y el conjunto de todos los cdigos generados. De esta forma se consiguen niveles de compresin mxima de 2:1 Este sistema es recomendable para comprimir ficheros que contengan muchos datos repetidos, como imgenes sencillas, monocromticas o que contengan reas de color de gran tamao, siendo utilizado en los formatos TIFF, GIF y JPG-LS, as como en archivos de lenguaje PostScript. JBIG (Joint Bi-level experts Image Group) Sistema de compresin sin prdidas muy robusto para imgenes bi-nivel (en blanco y negro), que opera tanto en modo secuencial como en modo progresivo.
Cuando se decodifica una imagen codificada progresivamente, inicialmente se dispone de una imagen de baja resolucin con respecto a la original, imagen que va aumentando su resolucin conforme ms datos son decodificados.
La codificacin progresiva presenta varios beneficios. En primer lugar, una misma base de datos de imgenes puede servir a diferentes dispositivos de salida con resoluciones distintas. Solamente aquella informacin en el archivo imgenes comprimidas que permita la reconstruccin a la resolucin del dispositivo de salida en particular necesita ser enviado y decodificado. En segundo lugar, permite que una imagen de baja resolucin sea rpidamente transmitida y mostrada, con el mejoramiento de la resolucin deseado. En tercer lugar, permite al usuario un rpido reconocimiento de la imagen, lo que hace posible que pueda interrumpir la transmisin de una imagen indeseada. Este sistema es el usado en el formato grfico TIFF, no siendo soportado por ningn navegador web actual. JPEG (Joint Photograph Expert Group) Sistema de compresin con prdidas muy perfeccionado, basado en estudios de la percepcin visual humana, que permite codificar imgenes en color (24 bits) y en escala de grises (8 bits) mediante la eliminacin de datos redundantes que no son importantes y el suavizado de los bordes y reas que tienen un color similar. Con ello se producen prdidas que degradan levemente la calidad de la imagen, pero a cambio proporciona altos ndices de compresin, ajustables a la calidad final de la imagen que se desea codificar.
En realidad, JPEG, estndar internacional 10918, describe una familia de tcnicas de compresin basadas en complejas operaciones matemticas, como conversin del formato de color, transformacin separada del coseno (DCT), cuantizaciones y codificacin entrpica, definiendo tres sistemas diferentes de codificacin:
Un sistema de codificacin bsico, con prdidas, que se basa en la Transformada Discreta del Coseno y es apropiado para la mayora de las aplicaciones de compresin. la precisin de los datos de entrada y de salida est limitada a 8 bits. Un sistema de codificacin extendida, para aplicaciones de mayor compresin, mayor precisin, o de reconstruccin progresiva. se usa principalmente para proporcionar decodificacin parcial rpida de una imagen comprimida, para que la apariencia general de esta pueda determinarse antes de que se decodifique totalmente. Un sistema de codificacin independiente sin prdidas, para la compresin reversible.
JPEG es un algoritmo de codificacin simtrico (decodificar lleva tanto tiempo como codificar), que ofrece niveles de compresin de 20:1 o mayores, permitiendo realizar ciertas transformaciones geomtricas (por ejemplo, rotacin de imagen) directamente en la matriz transformada, sin regenerar la imagen original. Es el mtodo de compresin ms utilizado actualmente para la compresin de imgenes con prdida, siendo usado en los formatos grfico JPG, TIFF, FlashPix, en ficheros PDF y en archivos de lenguaje PostScript. Adems, es la base del estndar multimedia para imgenes en movimiento, MPEG. En cuanto a los navegadores web, es soportado desde Internet Explorer 2 y Netscape Navigator 2.
GRFICOS VECTORIALES
Descripcin de los grficos vectoriales. Ejemplos de creacin y usos de los mismos. Los grficos vectoriales, tambin conocidos como grficos orientados a objetos, son el segundo gran grupo de imgenes digitales. Son ms simples que los grficos de mapas de bits, ya que en ellos las imgenes se almacenan y representan por medio de trazos geomtricos controlados por clculos y frmulas matemticas, tomando algunos puntos de la imagen como referencia para construir el resto.
Por lo tanto, las imgenes en los grficos vectoriales no se construyen pxel a pxel, sino que se forman a partir de vectores, objetos formados por una serie de puntos y lneas rectas o curvas definidas matemticamente. Por ejemplo, una lnea se define en un grfico de mapa de bits mediante las propiedades
de cada uno de los pxeles que la forman, mientras que en un grfico vectorial se hace por la posicin de sus puntos inicial y final y por una funcin que describe el camino entre ellos. Anlogamente, un crculo se define vectorialmente por la posicin de su punto central (coordenadas x,y) y por su radio (r).
Cada vector en un grfico vectorial tiene una lnea de contorno, con un color y un grosor determinados, y est relleno de un color a elegir. Las caractersticas de contorno (o filete) y relleno se pueden cambiar en cualquier momento. Las imgenes vectoriales se almacenan como una lista que describe cada uno de sus vectores componentes, su posicin y sus propiedades. En cuanto a la resolucin, los grficos vectoriales son independientes de la resolucin, ya que no dependen de una retcula de pxeles dada. Por lo tanto, tienen la mxima resolucin que permite el formato en que se almacena. Curvas de Bzier Los principales elementos constituyentes de un vector son las denominadas curvas de Bzier, desarrolladas por Pierre Bzier por encargo de la empresa Renault, que buscaba una familia de curvas representables matemticamente (son curvas de tercer grado) que permitieran representar las curvaturas suaves que deseaban dar a sus automviles.
Una curva Bzier queda totalmente definida por cuatro puntos caractersticos, los puntos inicial y final de la curva (nodos o puntos de anclaje) y dos puntos de control (puntos de control, manejadores o manecillas), invisibles en el grfico final, que definen su forma. Para modificar su forma, basta cambiar de posicin uno de sus nodos o uno de sus puntos de control. Son curvas de manejo poco complejo y muy elegantes, con un desarrollo muy suave, capaces de adaptarse a casi cualquier forma imaginable, por lo que son muy usadas para disear logotipos e iconos y para copiar cualquier figura. Tambin son enormemente verstiles, pudiendo adoptar desde curvaturas muy suaves (casi lneas rectas) a curvaturas muy fuerte (curvas complejas), pasando por todos los
valores intermedios. Pueden, incluso, cambiar de cncavas a convexas alrededor de un punto. Ventajas y limitaciones de los grficos vectoriales Las principales ventajas que ofrecen los grficos vectoriales, derivadas de su naturaleza matemtica, son:
Almacenan las imgenes en archivos muy compactos, ya que slo se requiere la informacin (frmulas matemticas) necesaria para generar cada uno de los vectores. dado que no se ha de almacenar informacin para definir cada punto de la pantalla, sino una serie de frmulas matemticas. Permiten modificar el tamao de las imgenes y de sus objetos componentes sin que se produzca prdida de informacin, pues se actualizan de forma matemtica todas las nuevas relaciones y posiciones de los elementos geomtricos que las componen. Con ello, los cambios de tamao de las imgenes vectoriales no afectan a la calidad de las mismas, apareciendo siempre con la misma nitidez. Son muy tiles a la hora de imprimir imgenes, ya que no es necesario pasar a la impresora la informacin de cada punto. Basta con ir pasndole la informacin de los vectores que forman la imagen. Cada objeto viene definido por sus propias frmulas matemticas y se maneja independientemente del resto, pudiendo escalarse, distorsionarse y cambiarse de forma o de posicin sin afectar para nada los otros elementos del dibujo. Es posible un control independiente del color, tanto del contorno como del relleno, admitiendo la aplicacin de texturas, degradados, transparencias, etc. Se puede controlar con gran precisin la forma, orientacin y ordenacin de los elementos. Cualquier efecto que se aplique a los objetos puede rectificarse en cualquier momento, ya que el dibujo es siempre editable. Esto no ocurre en las imgenes de mapas de bits, en las que una vez pintado un elemento ya no es posible modificarlo. Es fcil reutilizar un dibujo o una parte del mismo en otros proyectos. Basta copiarlo y pegarlo en un nuevo fichero o en uno ya existente. Los objetos del grfico pueden fusionarse fcilmente entre s, creando una serie de formas intermedias. Por ejemplo, se puede pasar de un cuadrado a un tringulo en cinco formas interpoladas. Se puede relacionar de diferentes formas con el resto de objetos del grfico (agrupar, separar, recortar, intersectar, etc.). Se puede ordenar las formas de cualquier manera si est en superposicin unas con otras. Permiten un manejo de textos muy avanzado, ya que admiten fuentes TrueType, que tambin son objetos vectoriales. Adems, las letras se pueden convertir en contornos editables, descomponiendo un texto en los objetos vectoriales que lo constituyen. Una vez convertidas las letras en objetos, ya no har falta tener instalada la fuente para seguir editando los contornos, porque ya no sern letras, sino objetos dentro del grfico vectorial, pudiendo ser modificadas como tales. Se pueden incluir bitmaps en un dibujo vectorial, bien para rellenos de formas, bien como elementos separados. En el otro sentido, un vector puede exportarse a un formato de mapa de bits estndar, como GIF o JPG.
225
Hasta la aparicin de Macromedia Flash y los ficheros SWF la inclusin directa de grficos vectoriales en la web no era posible. Su introduccin en las pginas web supuso un considerable avance, ya que permiten incluir grficos de tamao modificable sin prdida de calidad, muy tiles en logotipos, planos, diagramas, etc. Como ejemplo, si pulsis sobre la imagen siguiente con el botn derecho del ratn y seleccionis "Aumentar" (Zoom In) o "Reducir" (Zoom Out), sta cambiar de tamao conservando sus caractersticas visuales.
Object 3
El principal inconveniente de las imgenes vectoriales es que tiene un aspecto ms fro que los grficos de mapa de bits, con su contorno demasiado perfecto, que los hace a veces poco naturales, aunque siempre es posible crear premeditadamente contornos un poco irregulares, para que se parezca algo ms al dibujo natural. Otros inconvenientes de este tipo de grficos son su falta de eficacia para representar imgenes de tipo fotogrfico, la dificultad que presenta para tratar algunas efectos (sombras, luces, etc...) y que cuando son muy grandes o muy complejas pueden volverse extremadamente difciles de manejar por los programas grficos y por los medios de impresin.
METAFICHEROS GRFICOS
Tipo de ficheros grficos que permiten trabajar tanto con mapas de bits como con vectores. Descripciones detalladas y usos. Como hemos visto, los grficos de mapas de bits y los grficos vectoriales poseen sus propias ventajas e inconvenientes. Por ejemplo, mientras los mapas de bits son especialmente tiles para presentar imgenes de tonos continuos, como las fotografas, los grficos vectoriales son idneos para realizar interacciones entre sus objetos componentes. Parece lgico pensar que un tipo de grficos digitales que permitiera trabajar tanto con mapas de bits como con vectores sera una buena solucin para compaginar lo mejor de ambos formatos. Este es el origen de los metaficheros (metafiles), sistemas de grabacin de datos que pueden admitir contenidos de distintos tipos. Un metafichero permite guardar contenidos de varios tipos en un mismo fichero, como fotografas, textos, vectores, e incluso sonido y vdeo, aunque estos ltimos elementos caen fuera del propsito de este curso. Los formatos grficos que permiten trabajar con metaficheros se denominan metaformatos.
226
Para componer una imagen en un metaformato se utilizan elementos bitmaps para representar los elementos fotogrficos y las figuras irregulares y elementos vectoriales para definir las lneas, los textos y los dibujos. Son pues una categora hbrida en las que se combinan las ventajas de los mapas de bits y de los grficos vectorial. Esto les permite almacenar imgenes muy complejas y avanzadas en ficheros de poco peso. Un problema que puede surgir con los metaformatos es que pueden usar elementos componentes grficos (y de audio y vdeo) propietarios no estndares, que precisen para su manejo aplicaciones o plugins particulares, con la prdida de compatibilidad que ello supone.
Los metaformatos grficos ms habituales son GEM (Ventura Publisher), WMF (Windows Meta-File) y WPG (Word-Perfect Grafics Format).
227
DIGITALIZACIN DE IMGENES INTRODUCCIN

Vemos los tipos, tratamiento y formas de almacenamiento de las imgenes digitales. La utilizacin de imgenes digitales en proyectos de diseo pasa necesariamente por la obtencin de las mismas, su tratamiento y su almacenamiento en el formato grfico adecuado. Este proceso se completa con una acertada gestin del material grfico usado en el proyecto.
La obtencin de las imgenes necesarias puede realizarse por diferentes medios, siendo los ms comunes la digitalizacin de las mismas mediante escneres, su obtencin directa usando cmaras digitales o programas grficos y su adquisicin a empresas o particulares dedicados a esta labor, bien sea en CDs temticos o a travs de los sitios web de las mismas. Una vez obtenidos los originales adecuados, generalmente es necesario un proceso de tratamiento de los mismos para adecuarlos a las necesidades particulares de nuestra composicin grfica o pgina web, proceso que puede incluir cambios en el tamao o resolucin de las imgenes, obtencin de alguna de las partes de las mismas, retoque o aplicacin de filtros, etc.
Finalizado su tratamiento, ser necesario almacenar las imgenes en el formato o formatos grficos adecuados al proyecto. Si la imagen est destinada a ser presentada en pantalla deberemos guardarla preferiblemente en un formato sin prdidas, que mantenga su calidad original, como BMP. Si va a ser utilizada en una composicin impresa ser
conveniente almacenarla en uno de los formatos tpicos de este medio, como TIFF. En caso de estar destinada a su inclusin en una pgina web, los formatos adecuados sern aquellos que reduzcan significativamente el peso del fichero manteniendo la mejor calidad posible, como GIF, JPG, PNG o SWG. Por ltimo, el material grfico usado en nuestros proyectos debe ser recopilado y almacenado adecuadamente, siendo necesario para ello un proceso de gestin que defina la estructura de almacenamiento, los soportes utilizados, la confeccin y forma de los catlogos, etc, de tal forma que sea posible la conservacin y la rpida recuperacin del material grfico utilizado. Vamos a estudiar en este captulo los principales mecanismos de obtencin y retoque de imgenes digitales, concretamente los escneres, las cmaras digitales, los programas grficos y las tabletas digitalizadoras.
EL ESCNER
Definimos el escner, los elementos que lo forman y su modo de utilizacin. Un escner es un dispositivo que transforma una imagen analgica en una digital convirtiendo la luz reflejada en un objeto en una seal digital que puede ser editada, mostrada y almacenada.
Bsicamente, un escner est formado por los siguientes elementos:

Una fuente de luz fluorescente o incandescente para iluminar el objeto que se desea digitalizar. Un sistema ptico, generalmente formado por espejos, que recoge la luz reflejada por el objeto y la dirige hacia el fotosensor. Un fotosensor que recoge la luz reflejada por el objeto y la transforma en una seal elctrica analgica, normalmente un chip CCD. Un conversor analgico/digital (ACD o A/D), que convierte la seal elctrica que produce el fotosensor en impulsos digitales en formato binario (ceros y unos), entendibles por un equipo informtico. Un dispositivo que se encarga de almacenar esa imagen o de traspasarla a un ordenador para que sea almacenada all.
229
Adems, los escneres necesitan de un software especfico para poder tratar las imgenes que a travs de l se obtienen. Existen dos tipos bsicos de software de tratamiento de imgenes:

Programas para la digitalizacin de objetos en imgenes. Producen ficheros digitales grficos formados por imgenes de mapa de bits. Programas para la digitalizacin de documentos como textos, denominados OCR (Optical Character Recognition) o ICR (Intelligent Character Recognition). Producen documentos digitales formados por caracteres ASCII que se pueden editar y almacenar y por elementos grficos de mapas de bits. Para digitalizar un objeto con un escner se debe situar el mismo (un documento, una fotografa, una ilustracin, una diapositiva, un dibujo, etc.) sobre la pantalla del escner, donde es baado por haces de luz procedentes de la fuente de luz del escner. La luz reflejada por el objeto pasa al sistema ptico, que centra la luz en el fotosensor, generalmente del tipo CCD, que convierte la intensidad de la luz que reciben en una serie de seales elctricas analgicas equivalentes.
El CDC (Charge Coupled Device) puede contener hasta 4000 clulas fotoelctricas densamente empaquetadas que actan convirtiendo la seal luminosa de intensidad variable que reciben en una seal elctrica de voltaje proporcional. El CCD puede ser lineal o matricial, El primero se utiliza en los escneres planos y de mano, y los segundos en escneres de transparencias, cmaras digitales y cmaras de video. Las seales elctricas analgicas procedentes del fotosensor son enviadas al ADC, que las convierte en seales digitales codificadas aptas para ser ledas por el software apropiado. Con el paso del tiempo se ha logrado establecer un software estndar, denominado TWAIN, que suelen traer casi todos los escneres del mercado, y que se instala como un controlador que puede ser utilizado por cualquier aplicacin que cumpla con dicho estndar, permitiendo que podamos digitalizar una imagen desde la aplicacin con la que vamos a retocarla, evitando pasos intermedios. Adems, proporciona un interfaz visual desde el que podemos controlar todos los parmetros del escaneado
(resolucin, nmero de colores, brillo, etc), as como definir el tamao de la zona que queremos procesar.
Los escneres pueden realizar el proceso de lectura del original en uno o ms pasos. En el primer caso, el mecanismo del escner captura en una sola pasada la imagen con todos sus atributos de color, separndose luego los componentes de color rojo, azul y verde de la luz reflejada mediante un prisma o un filtro, siendo enviados entonces a una franja de CCDs responsables de cada color particular. En el proceso de tres pasos, la imagen se escanea en tres veces, una para cada canal de color primario (rojo, verde y azul). La luz reflejada en cada paso es enviada a un filtro coloreado y centrada en la franja de CCDs responsables de ese color. El sistema de un paso es obviamente ms rpido que el de tres pasos, pero tiene el inconveniente que necesita ms CCDs para procesar la informacin. El escner es un dispositivo de captura de imgenes imprescindible para un diseador grfico, existiendo modelos bsicos, que se pueden conectar al ordenador a travs del puerto paralelo, USB o SCSI, capaces de digitalizar hasta un tamao DIN-A4.
TIPOS DE ESCNERES
En este captulo trataremos sobre los modelos de escneres, sus caractersticas, ventajas y desventajas y precios entre otras cuestiones. Existen en el mercado diferentes tipos de escneres, cada uno de los cuales utiliza una forma particular de escaneado, una tecnologa ms o menos avanzada y, consecuentemente, una calidad (y un precio) mayor o menor. Los tipos de escner ms comunes son:
Escneres de mano: El escner de mano es, con mucho, la alternativa ms econmica, puesto que elimina gran parte de los mecanismos que encarecen a los dispositivos de sobremesa, como el de traccin, siendo el usuario quien mueve el escner sobre la imagen o documento a digitalizar.
Resultan especialmente eficaces para escanear rpidamente fotos de libros encuadernados, artculos periodsticos, facturas y toda clase de pequeas imgenes, y resultan bastante econmicos. Como inconvenientes, citar el limitado tamao del original a escanear (generalmente puede ser tan largo como queramos, pero de poco ms de 10 cm de ancho como mximo), su baja velocidad y la poca fiabilidad del proceso, ya que depende de la habilidad y el pulso del usuario. Hasta hace unos pocos aos eran los nicos modelos con precios asequibles para el usuario medio, ya que los de sobremesa eran extremadamente caros. Pero con los precios actuales de este tipo de escneres, los de mano estn desapareciendo del mercado, quedando aquellos que por sus caractersticas tcnicas estn especialmente preparados para trabajos de calidad en trabajos de campo. Escneres planos: Tambin llamados escneres de sobremesa, estn formados por una superficie plana de vidrio sobre la que se sita el documento a escanear, generalmente opaco, bajo la cual un brazo se desplaza a lo largo del rea de captura. Montados en este brazo mvil se encuentran la fuente de luz y el fotosensor (por lo general un CCD). Conforme va desplazndose el brazo, la fuente de luz baa la cara interna del documento, recogiendo el sensor los rayos reflejados, que son enviados al software de conversin analgico/digital para su transformacin en una imagen de mapa de bits, creada mediante la informacin de color recogida para cada pxel.
232
La mayora de estos escneres pueden trabajar en escala de grises (256 tonos de gris) y a color (24 y 32 bits) y por lo general tienen un rea de lectura de dimensiones 22 x 28 cm. y una resolucin real de escaneado de entre 300 y 400 ppp, aunque mediante interpolacin pueden conseguir resoluciones de hasta 1600 ppp. Estn indicados para digitalizar objetos opacos planos (como fotografas, documentos o ilustraciones) cuando no se precisa ni una alta resolucin ni mucha calidad. Algunos modelos admiten tambin adaptadores especiales para escanear transparencias, y otros poseen manipuladores de documento automticos (ADH), que pueden aumentar el rendimiento y disminuir la fatiga del operador en el caso de grupos de documentos uniformes que se encuentran en condiciones razonablemente buenas. Una variante del escner plano es el escner de trayectoria area , el cual permite escanear volmenes encuadernados con las hojas hacia arriba gracias a que la fuente de luz y el sensor CCD se encuentran ensamblados a un brazo de trayectoria area.
Los escneres planos son los ms asequibles y usados, pues son veloces, fciles de manejar, producen imgenes digitalizadas de calidad aceptable (sobre todo si estn destinadas a la web) y son bastante baratos. Como desventajas, citar que presentan limitaciones respecto al tamao del documento a escanear, que queda limitado a los formatos DIN-A5 o DIN-A4. Escneres con alimentador de hojas: En este tipo de escneres el sensor y la fuente de luz permanecen fijos mientras que lo que se mueve es el documento, ayudado por un transporte de rodillos, de cinta, de tambor o de vaco. Diseados generalmente para digitalizar grandes cantidades de documentos, normalmente escanean en blanco y negro o en escala de grises y resoluciones relativamente bajas, utilizando la misma tecnologa bsica que los escneres planos, pero maximizando el rendimiento a expensas de la calidad.
233
No todos los documentos son vlidos para su digitalizacin en este tipo de escneres. Deben tener un tamao uniforme y ser lo suficientemente resistentes como para soportar una manipulacin brusca, aunque los mecanismos de transporte de algunos modelos ms nuevos reducen la tensin. Una subtipo de escneres con alimentador de hojas son los modelos de pie, especficamente diseados para documentos de gran formato, como mapas y planos arquitectnicos. Escneres de tambor: Los escneres de tambor son los que ms fielmente reproduce al documento original, ya que producen digitalizaciones de gran resolucin (hasta 4.000 ppp en modo ptico) y calidad. En contrapartida, son lentos, no son indicados para documentos de papel quebradizo y requieren un alto nivel de habilidad por parte del operador. Adems, son bastante caros.
Utilizan una tecnologa diferente a la del CCD. Los originales, normalmente transparencias (aunque se pueden escanear opacos tambin), se colocan en un cilindro transparente de cristal de gran pureza, que a su vez se monta en el escner. El tambor gira entonces a gran velocidad mientras se hace la lectura de cada punto de la imagen. La fuente de luz suele ser un lser que se encuentra dentro del tambor, y el sensor un Tubo Foto Multiplicador (PMT) situado en la parte exterior del tambor. Producen digitalizaciones de alta resolucin y buena gama dinmica entre bajas y altas luces, con imgenes en colores primarios, que pueden ser convertidas en CMYK mientras el lector recorre la imagen. Suelen ser usados exclusivamente por empresas especializadas del sector de las artes grficas (laboratorios, imprentas, editoriales, etc.). Escneres para microfilm: Los escneres para microfilm son dispositivos especializados en digitalizar pelculas en rollo, microfichas y tarjetas de apertura.
Puede ser difcil obtener una calidad buena y consistente en un escner de este tipo, debido principalmente a que los suelen tener un funcionamiento complejo, la calidad y condicin de la pelcula puede variar y ofrecen una capacidad de mejora mnima. Son escneres muy caros, existiendo pocas empresas que los fabriquen.
Escneres para transparencias: Los escneres para transparencias se utilizan para digitalizar diapositivas, negativos fotogrficos y documentos que no son adecuados para el escaneado directo. Pueden trabajar con varios formatos de pelcula transparente, ya sea negativa, positiva, color o blanco y negro, de tamao desde 35 mm hasta placas de 9 x 12 cm.
Existen dos modalidades de este tipo de escneres: Escneres de 35 mm. Solo escanean negativos y transparencias, pero lo hacen a resoluciones muy altas. Escneres multiformato. Suelen capturar transparencias y negativos hasta formato medio o hasta formato de placas 4x 5 o incluso 5x 7, tienen una resolucin muy alta y un rango dinmico en ocasiones sorprendente, pero frecuentemente no permiten escanear opacos. El uso de medios transparentes por lo general produce imgenes con un buen rango dinmico, pero, dependiendo del tamao del original, la resolucin puede ser insuficiente para algunas necesidades. Su calidad es mayor que la de los escneres planos, consiguiendo imgenes con un buen rango dinmico, aunque el rendimiento suele ser bajo y hay que tener cuidado con la presencia de motas de polvo o rascaduras en las transparencias, que pueden ocasionar la aparicin de impurezas en la imagen digitalizada resultante.
RESOLUCIN DE UN ESCNER
Hablamos de las distintas resoluciones de un escaner y recomendamos las ms
indicadas segn el tipo de imgen. 30/3/05 - El fotosensor, generalmente de tipo CCD, es el componente fundamental de un escner, ya que de l depende en gran parte la resolucin que puede alcanzar la imagen digitalizada. En general, la resolucin de un escner se ve condicionada por los siguientes factores:

Tipo de escner. Tipo de sensor del CCD y alineacin del mismo. Interpolacin. Sistema ptico (longitud del foco, profundidad de campo de las lentes, calidad, estabilidad, cambios de temperatura, humedad, etc.). Ruido superfluo de los circuitos electrnicos y del CCD. Escala de resolucin. Respuesta de frecuencia de los circuitos electrnicos.
En un escner podemos considerar diferentes tipos de resolucin: Resolucin ptica o real: Es el nmero de puntos individuales de una imagen que es capaz de captar el CCD. Es la resolucin ms importante, ya que define los lmites fsicos del escner, y se expresa dando los puntos horizontales y los puntos verticales que hay en una pulgada lineal. Por ejemplo, un escner con una resolucin de 400 x 600 dpi es capaz de captar 400 puntos individuales en una lnea horizontal de una pulgada y 600 puntos individuales en una lnea vertical de una pulgada. Resolucin interpolada: Es una resolucin artificial, que crea el software del escner o del ordenador que procesa la imagen interpolando puntos entre los puntos captados en la resolucin real. Estos nuevos puntos deben sus caractersticas a los puntos reales que tengan al lado. La interpolacin es el mtodo por el que se calculan ms puntos de muestra, de acuerdo con un algoritmo del software adecuado, para compensar las limitaciones de la resolucin ptica. Por lo tanto, si la resolucin ptica es de 1000 dpi, la interpolacin slo se utilizar si son necesarias resoluciones mayores que este valor.
236
La interpolacin es especialmente til en aquellos casos en que se necesita aumentar las dimensiones de una imagen sin que sufra prdidas desastrosas de calidad. Si la imagen se aumenta sin interpolacin, el mismo nmeros de puntos se tendrn que situar en un rea dos veces mayor, dando a la imagen una calidad granulada inconsistente. Con la interpolacin, la densidad de la imagen se mantiene introduciendo el nmero de puntos que se requieran en el espacio abierto, dando as a la imagen resultante una mejor calidad. En estos casos, la imagen se escanear a la mayor resolucin ptica posible, y el programa de tratamiento de imgenes interpolar la imagen capturada a la resolucin necesaria. El resultado final depender de la resolucin ptica o real. Cuanto ms resolucin real haya, mejores interpolaciones se conseguirn. Resolucin de escaneado: Resolucin configurable, definida por el usuario. Puede ir desde un mnimo de 75 dpi hasta el mximo que pueda alcanzar el escner con la definicin interpolada. Existe una relacin directa entre la resolucin de la imagen y su nmero de colores con la calidad de la imagen y con el tamao del fichero de imagen resultante de proceso de escaneado. A mayor resolucin y mayor nmero de colores, mayor peso tendr el fichero resultante.
Cuando pasamos una imagen digitalizada a un programa de edicin, como Photoshop o Paint Shop Pro, si la resolucin de escaneado usada ha sido alta la imagen tendr unas dimensiones elevadas, produciendo un fichero de mucho peso. Aun que guardemos una copia del original para futuros trabajos, es conveniente adaptar la imagen a la resolucin del medio en el que se va a usar. Para imgenes destinadas a la web la resolucin necesaria es slo de 72 ppp 96 ppp (en estos casos se pueden considerar la equivalencia entre dpi y ppp), por lo que emplear una resolucin mayor aumentar excesivamente el peso del fichero sin producir aumentos de calidad apreciables.
237
Escala de Resolucin: La escala de resolucin determina cunta informacin real se captura sin interpolacin en la imagen resultante, siendo determinada por el escner automticamente, sin intervencin del usuario. Es una variable compleja, que vamos a mencionar ms que nada por no dejar lagunas en lo que a resolucin se refiere, y que nos puede dar una idea de la calidad real del escner. De acuerdo con la teora del muestreado digital, el escner, si no quiere perder calidad en el proceso de digitalizacin, tiene que trabajar a un escala dos veces superior a la periodicidad mxima de la imagen que est siendo muestreada. Esto significa que si escanea una imagen de 200 lpi (recordemos que la resolucin de imgenes impresas se mide en lneas por pulgada), la escala de muestra tiene que ser de al menos 400 dpi. La escala de muestra del escner se determina por el nmero de elementos fotosensibles en una franja del sensor y por la distancia a que se mueve la cabeza lectora por la imagen en un tiempo de exposicin determinado. Una escala de resolucin tpica sera de 300 x 600 dpi, por lo que, si una franja de 5000 CCDs se escanea una anchura de 8,5 pulgadas, la escala de resolucin ser 5000/ 8,5 = 600 dpi, mientras que para escanear una imagen de 4,25 pulgadas de anchura, la escala de muestra sera de 1200 dpi. Escalado: Se entiende por escalado el proceso de aumentar o reducir el tamao relativo de una imagen de manera que la altura y la anchura continen teniendo la misma proporcin.
Cuando se aumenta el tamao de una imagen, la interpolacin aade ms detalles para compensar las prdidas en resolucin en el aumento. Por el contrario, cuando se reduce su tamao, la informacin no necesaria se elimina para mantener la resolucin aparente. De ello se deriva que es preferible escanear a mucha resolucin y reducir luego el tamao hasta las dimensiones necesarias que escanerla a menor resolucin y aumentar luego su tamao aplicando interpolacin. La interpolacin se produce siempre que se modifica el tamao de una imagen, tanto si se aumenta como si se disminuye, ya que si no se realizara interpolacin apareceran trazos en los contornos de la misma. Resoluciones recomendadas: A la hora de digitalizar un objeto con un escner podemos elegir la resolucin a que va a
realizarse el proceso. Es este un valor muy importante, ya que segn el medio en que va a ser usada la imagen resultante necesitaremos ms o menos resolucin, con lo que el fichero grfico que la almacene tendr ms o menos tamao. Como siempre, una de las misiones principales del diseador va a ser determinar la relacin calidad/peso ms conveniente. En general, la resolucin de captura debe ser el doble de la resolucin del dispositivo de salida, ya que de esta forma podremos imprimirla o visualizarla en pantalla a tamao real, e incluso aumentarlo un poco, sin prdidas de calidad. Si la resolucin de captura es menor y aumentamos el tamao de la imagen digitalizada (al fin y al cabo, un mapa de bits), se perder calidad y aparecern bordes dentados. Por lo tanto, si la imagen digitalizada est destinada a ser impresa en un dispositivo que trabaja a 300 dpi, la resolucin de escaneo debe ser de 600 dpi. En cambio, si la imagen est destinada a ser visualizada en pantalla, como las usadas en las pginas web, no necesita ms de 96 dpi (72 dpi en caso de un MAC), por lo que si la hemos escaneado con mayor resolucin, al preparar la imagen conviene bajar la misma a 96 (72) ppp.
TRABAJANDO CON EL ESCNER

Cmo empezar a trabajar con un escner de sobremesa, instalacin, configuracin, y caractersticas. Vamos a explicar el funcionamiento de un escner de sobremesa, ya que es el ms usado por los diseadores grficos y diseadores web. En primer lugar habr que conectar el escner a la corriente elctrica, lo que se puede hacer bien directamente, bien por medio de la fuente de alimentacin que traen algunos modelos. Despus tendremos que conectar el escner a nuestro ordenador por el puerto adecuado (paralelo, USB o SCSI), usando para ello el cable de conexin que traen al efecto. A continuacin ser necesario instalar el software que va a permitir el manejo del escner por parte de las diferentes aplicaciones grficas de nuestro ordenador (el escner suele incluir uno o varios de estos programas, pero se puede escanear directamente desde aplicaciones como Photoshop o Paintshop Pro. Este software es habitualmente un controlador Twain (o Twain-32.), estndar de facto en este tipo de dispositivos. La instalacin del software puede realizarse desde el Panel de control del ordenador, opcin Agregar hardware, con lo que el sistema operativo comenzar a buscar el nuevo dispositivo instalado y nos pedir la ubicacin del software asociado, que normalmente viene en un CD Rom. Este mtodo no ser necesario si el escner es del tipo Plug & Play, ya que entonces ser reconocido por el sistema operativo en cuanto lo conectemos al ordenador, que nos pedir el software necesario.
239
Una vez instalado el escner, si situamos sobre la placa de captura del mismo un documento y cerramos la tapa, automticamente se cargar el programa de escaneado que por defecto traiga el escner. Tambin se puede iniciar el proceso de captura desde la mayora de las aplicaciones de tratamiento de imgenes accediendo al men Archivo > Adquirir, colocando el original sobre la placa del escner y siguiendo las instrucciones que irn apareciendo.
Muchos controladores Twain lanzan inicialmente una previsualizacin de la imagen, que muestra en pantalla una captura previa del original a baja resolucin. En la previsualizacin podemos seleccionar la parte de la imagen que nos interesa, la resolucin de captura y el nmero de colores a usar (color, gris o blanco y negro). Incluso en algunos escneres es posible rotar la imagen, aplicar efectos de Moare o Gaussianos y otras funcionalidades avanzadas. Es posible configurar adecuadamente los parmetros en que se va a realizar la captura, ya que de ellos depende la calidad final de la imagen digitalizada. Los parmetros ms habituales en los escneres son: Resolucin: Cuanto ms resolucin se use, mayor detalle tendr la captura y mayor peso tendr el fichero resultante. Sin embargo, llega un momento en que el aumento de resolucin deja de producir una ganancia evidente, mientras que el peso sigue aumentando.
240
La clave est entonces en determinar la resolucin necesaria para capturar todos los detalles importantes que estn presentes en el documento fuente, ni ms ni menos. Umbral: En el caso de que el documento a capturar con el escner sea en blanco y negro (escaneado bitonal), como un documento escrito a mquina, el umbral define el punto, en una escala que vara entre 0 (negro) y 255 (blanco), en el cual los valores grises capturados se convertirn en pxeles negros o blancos.
Profundidad de bits: La profundidad de bits usada en la captura va a definir el nmero de colores con que se va a realizar sta, que ser los mximos que pueda tener luego la imagen digital resultante. La profundidad de bits tambin va a determinar el rango dinmico, total de variaciones tonales desde el ms claro de los claros hasta el ms oscuro de los negros, as como el peso del fichero resultante. En general, al aumentar la profundidad de bits quedarn afectados los requisitos de resolucin, tamao de archivo y mtodo de compresin utilizado. Obtener una captura que reproduzca fielmente los colores del original es tal vez uno de los aspectos ms difcil de la digitalizacin de imgenes, pues depende de una serie de variables como el nivel de iluminacin al momento de la captura, la profundidad de bits capturada y generada, las capacidades del sistema de escaneado y la representacin matemtica de la informacin del color a medida que la imagen es capturada, cuyo control en conjunto es difcil de conseguir.
241
En general, si el original es en blanco y negro con escala de grises, obtendremos mejores resultados si lo escaneamos en color de 24 bits, y luego lo pasamos a escala de grises en nuestro programa de tratamiento de imgenes. Y si el original es en blanco y negro sin grises (un dibujo a lpiz, por ejemplo), los mejores resultados los obtendremos si lo escaneamos en escala de grises y luego lo reducimos a blanco y negro en el programa de tratamiento. Resumiendo: es mejor capturar con ms informacin de color que la que tiene el original, y luego adaptar el resultado a nuestras necesidades (y lo mismo podramos decir de la resolucin). Filtros adicionales: Muchos escneres permiten aplicar en el proceso de previsualizacin diferentes filtros de correccin de errores. En general, estos filtros aumentan la calidad del escaneado, pero su utilizacin genera inquietudes acerca de la fidelidad y autenticidad. Los filtros ms comunes son: Eliminacin de muar (descreening) Eliminacin de puntos (despeckling) Eliminacin de oblicuidad (deskewing) Aumento de nitidez (sharpening) Correccin del efecto muar
242
Correccin del contraste Halftones: El muar se produce porque cuando los CCDs del escner captan el color, a veces no pueden diferenciar perfectamente los tonos a ciertas frecuencias altas. Se origina entonces un efecto de colores o de patrones muy pequeos, conocido con el nombre de muar (o moir). El filtro de eliminacin previene opticamente este efecto, al reducir la informacin de alta frecuencia que registran los fotodiodos del CCD.
La correccin del contraste es til ya que el ojo humano tiene la tendencia a desenfocar las imgenes procedentes de un escaneado. Este error no tiene dependencia de la resolucin de escaneado, incluso imgenes escaneadas en un escner de tambor producen este efecto. La herramienta de correccin del contraste que ofrecen algunos escneres permite paliar este efecto negativo durante el proceso de captura.
Por su parte, el proceso de escaneado mediante halftones nos ofrece la posibilidad de conseguir tonos continuos aparentes con slo 1 bit de profundidad. La imagen se forma mediante un patrn de celdas de puntos negros consiguindose as un aspecto de escala
de grises.
Conforme aplicamos cualquiera de estos filtros generalmente podremos ver su resultado en pantalla. Sea como sea, una vez fijados los parmetros deseados se produce el verdadero proceso de captura, que es ms o menos lento dependiendo del escner usado y de las prestaciones del ordenador. La imagen digital obtenida en el proceso queda disponible para ser guardada o es enviada a la aplicacin grfica que orden el escaneo para su tratamiento. Una vez tratada la imagen hasta el resultado final deseado, es hora de almacenarla en alguno de los formatos grficos existentes. Es conveniente siempre guardar una copia de la imagen original sin tratar y otra de la imagen tratada en el formato nativo de la aplicacin, ya que as la tendremos siempre disponible para otros trabajos con su mxima calidad. Luego tendremos que salvar otra copia, la que utilizaremos en nuestra composicin, en un formato adecuado al medio en que va a usarse. Ms adelante estudiaremos los principales formatos grficos que podemos usar.
FOTOGRAFA DIGITAL
Las cmaras digitales, tipos, precios y caractersticas. Una opcin prctica, verstil y de calidad aceptable para capturar directamente escenas del mundo real es la fotografa digital. La fotografa tradicional ha sido desde siempre uno de las herramientas ms tiles para el diseador grfico, ya que permite convertir en imgenes elementos del entorno real, tal como se encuentran naturalmente o mediante la preparacin del escenario y los personajes u objetos adecuados. El principal inconveniente de este sistema es su complejidad y su coste, ya que es necesario realizar muchas fotografas para elegir luego la ms acertada, revelarlas, pasarlas a papel y escanearlas para obtener al fin la imagen deseada en formato digital (aunque ya sabemos que es posible escanear directamente los negativos).
244
Con la aparicin de las cmaras digitales el proceso se ha simplificado enormemente, ya que las escenas exteriores se capturan directamente en formato digital, eliminando del proceso el revelado, el paso a papel y el escaneado, lo que reduce mucho el tiempo de procesado y los costes. En comparacin con las cmaras de pelcula tradicionales que utilizan una emulsin basada en un halogenuro de plata para producir imgenes, las cmaras digitales utilizan componentes electrnicos. En una cmara digital, un captador sensible a la luz reemplaza la pelcula. Este captador convierte la luz que recibe en informacin digital, que almacena en una memoria en archivos de imagen similares a los archivos JPEG o TIFF usados en un ordenador. Aunque en un principio su precio era muy elevado, actualmente las cmaras digitales comienzan a ser realmente asequibles, siendo una prctica herramienta para el diseo, en especial para el diseo web, porque en estas condiciones no es precisa una resolucin demasiado alta. Las cmaras de tipo bajo y medio suelen ser porttiles, almacenando las fotografas en un soporte de memoria ubicado en la propia cmara, desde donde son transferidas luego al ordenador para su visualizacin, retoque o impresin. Por el contrario, en las cmaras profesionales de gama alta el almacenamiento de las imgenes se realiza directamente en un ordenador conectado a la cmara.
Las cmaras pueden ser compactas, en las que el visor de imagen es independiente de la lente, o rflex, en las que la porcin de imagen que capta la lente coincide exactamente con lo que puede visualizarse a travs del visor de imagen. En cuanto a los visores, pueden ser LCD, que permiten componer la imagen observando una reproduccin digital de sta a travs del mismo, o TTL, en los que la imagen visionada es exactamente la misma que capta la lente.
Describimos detalladamente el funcionamiento de una cmara digital. Las cmaras digitales suelen emplear la ptica y los mecanismos de las cmara tradicionales, pero sustituyen la pelcula por un fotosensor electrnico (CCD, CMD o Cmos).
Generalmente, el fotosensor es un CCD de tipo rea (Area Array CCD), consistente en una matriz reticular de cientos de miles de clulas fotosensibles microscpicas (fotodiodos). A cada fotodiodo le corresponde un pxel, por lo que cuantos ms fotosensores tenga el CCD, mejor ser la calidad obtenida con la cmara, siendo valores habituales en las cmaras actuales 128.000 (320 x 400 pxeles de resolucin) en las de gama baja, 4.200.000 (2.024 x 2.024 pxeles) en las de gama media y ms de 6.000.000 en las profesionales de gama alta.
Durante el tiempo de exposicin, la luz que pasa a travs del juego de lentes de la cmara es dirigida a los fotosensores del CCD, que se encuentran cubiertos por un filtro rojo, verde o azul, encargados de dejar pasar slo la longitud de onda correspondiente a uno de los colores bsicos aditivos. Por ejemplo, el filtro rojo detiene los rayos verdes y azules, pero deja pasar el componente rojo de la luz.
246
La energa luminosa filtrada es convertida entonces en cargas elctricas, que son amplificadas y enviadas a un conversor A/D, que las transforma en informacin binaria de color (ceros y unos) asociada a cada uno de los pxeles de la imagen digital resultante, para pasar luego a la memoria interna de la cmara, donde es almacenada manteniendo el orden de captura, de forma que los pxeles estn dispuestos correctamente de acuerdo con el modelo fotografiado.
La imagen obtenida con una cmara digital consta generalmente de millones de pxeles ordenados en lneas y columnas.
247
Una variante mejorada del CCD es el Super CCD, desarrollado por Fujifilm, que se caracteriza por la inclusin de pxeles por interpolacin para conseguir imgenes con una resolucin mayor, pero incidiendo directamente en una prdida de su calidad. El Super CCD dispone los pxeles octogonalmente, en forma de panel de abejas, de modo distinto al tpico CCD, que lo hace rectangularmente. El proceso de captura puede realizarse en una o ms pasadas, en cada una de las cuales se recoge informacin del modelo real. En caso de captura en una sola pasada, uno de cada cuatro elementos del CCD lee la informacin correspondiente al rojo, otro la correspondiente al verde y los dos restantes la correspondiente al azul, siendo rellenados los vacos de informacin cromtica que se produzcan mediante interpolacin. La captura puede hacerse tambin en mtodo entrelazado, en el que el sensor de la cmara recoge informacin sobre la imagen procesando primero las lneas impares y luego las pares, o en el mtodo progresivo, en el que el sensor recoge informacin sobre la imagen procesando las lneas de forma secuencial, una detrs de otra. Una vez capturada la imagen, es necesario almacenarla temporalmente en la cmara hasta su descarga al ordenador. Dependiendo de la marca y del modelo de la cmara se guardar la imagen digital en formatos grficos puros, como RAW, TIF, FlashPix o Targa (TGA). Las imgenes digitales fotogrficas contienen una gran cantidad de datos, por lo que generan ficheros de mucho tamao, hacindose necesario el uso de algn tipo de soporte que permita almacenar gran cantidad de datos en un espacio fsico reducido o de mecanismos de compresin que permitan disminuir el peso del fichero grfico (sistema habitual en las cmaras porttiles). La compresin de la imagen es realizada por un programa especfico residente en los componentes electrnicos de la cmara. En funcin de la calidad elegida por el usuario, esta compresin producir un archivo de imagen JPEG de tamao variable. Finalmente, se almacena la imagen en el soporte de almacenamiento de la cmara, normalmente tarjetas de memoria CompactFlash, de las que existen los modelos CF Tipo I, de 5 mm, y CF Tipo II, de 9 mm. Las capacidades de almacenamiento ms comunes varan entre 16 Mb (la ms habitual en cmaras de gama baja-media), hasta 256 Mb o ms.
Otras posibilidades de almacenamiento son los discos Floppy (normalmente de 1,44 Mb),
los discos compactos CD-R y CD-RW (hasta 750 Mb), muy usados en cmaras de la marca Sony, las unidades Iomega Clik! Disk (hasta 40 MB), los discos pticos de 12 o 14 pulgadas (hasta varios Gb) y las unidades Microdrive, pequeos discos duros de la empresa IBM (170, 340 y 512 y 1000 Mb). Explicamos cuales son los factores que influyen en mayor medida en la calidad de las imgenes. La calidad de la imagen digital depende fundamentalmente de dos variables: La resolucin espacial, tamao del pxel o potencia resolutiva: define la capacidad de la cmara para capturar los detalles finos del modelo original. Cuanto ms definidos sean los detalles visibles, mayor es la resolucin.
Depende de la potencia resolutiva del objetivo, del nmero de celdas fotosensibles existentes en el CCD y de la distancia desde el centro de una celda hasta el centro de la siguiente, valor conocido con el nombre de separacin. Resoluciones habituales en las cmaras fotogrficas digitales son 320 x 400 pxeles, 640 x 480 pxeles (VGA), 1024 x 768 pxeles (XGA), 2024 x 2024 pxeles y 1600 x 1200 pxeles (UXGA). La resolucin espacial es fundamental en la fase de muestreo de la captura (sampling). La resolucin de luminosidad, profundidad de color o nitidez, relacionada con el nmero de dgitos binarios asociados a cada celda, es decir, a la cantidad de informacin sobre la luz y el color recibidos que puede procesar cada fotosensor. La resolucin de luminosidad es determinante en la fase de cuantizacin de la captura (quantization).
249
Cuando una cmara digital muestrea la imagen fotogrfica la divide en pxeles, cuyo tamao va a depender del nmero de clulas fotosensibles existentes en el CCD. Un CCD con pocas clulas fotosensibles muestrear a baja resolucin, con lo que los pxeles se apreciarn a simple vista, fenmeno conocido con el nombre de pixelizacin. Por el contrario, un CCD con muchas clulas fotosensibles muestrear con una elevada resolucin espacial, obtenindose una imagen digital de gran calidad en la que no se ver los pxeles individuales. Otros factores que influyen sobre la calidad de la imagen escaneada son el rango dinmico, el ruido, la interpolacin de captura y la compresin de la imagen digitalizada. El rango dinmico: establece la capacidad de la cmara para diferenciar entre niveles extremos de luz, por lo que si es excesivamente bajo las sombras perdern detalle, mientras que las zonas saturadas quedarn descoloridas.
El ruido: (noise) son pequeas variaciones aleatorias en la luminosidad del color captadas por los fotosensores del CCD, que degradan la calidad de la imagen capturada. La cantidad de ruido captada va a depender de la relacin entre seal y ruido de los fotosensores (cuanto ms baja sea, ms ruido captarn y peor ser la calidad de la imagen resultante).
La interpolacin: producida cuando se originan vacos de informacin en la captura, puede producir iridiscencias no deseadas. Las cmaras digitales de bajo coste que utilizan un CCS con
pocos elementos fotosensores incrementan an ms el nmero de pxeles capturados por la interpolacin adicional. La compresin de las imgenes capturadas: habitual en cmaras porttiles, puede basarse el algoritmos con prdidas, que eliminan variaciones cromticas secundarias de un pxel al siguiente, con lo que el detalle de la imagen se reduce, perdiendo calidad. Adicionalmente, se pueden producir errores debidos a una mala interpretacin de la informacin de la imagen durante el proceso de compresin, conocidos con el nombre de artifacting, que pueden ocasionar defectos de color a una imagen JPEG comprimida. Adems de estos factores, afectan a la calidad de la imagen obtenida otros tambin habituales en la fotografa clsica, como enfoque, abertura del diafragma, ajuste de la exposicin, etc. Generalmente, el detalle mnimo que puede ser resuelto por los objetivos que se suministran con las cmaras de 35 mm se encuentra entre 20 y 30 micras. Este lmite est determinado por el dimetro de los crculos de indiscriminacin producidos por los errores de los objetivos (aberraciones). El objetivo idneo para una cmara digital debera producir crculos de indiscriminacin cuyo dimetro no supere el de separacin de los elementos fotosensores del CCD, que actualmente vara entre 7 y 25 micras. Dos pequeas listas con las posibles ventajas e inconvenientes de las cmaras digitales. Entre las ventajas de la fotografa digital como medio de captura podemos citar las siguientes: 1. Se consigue un mayor control sobre la calidad de la imagen, optimizndose la fidelidad entre la vista original y la imagen capturada. 2. Las cmaras digitales tienen una sensibilidad luminosa muy elevada, de manera que pueden hacerse fotografas en condiciones de poca luz (una cmara ordinaria requerira una pelcula especial). 3. Se puede elegir entre fotografiar en color, blanco y negro, sepia, negativo, etc, sin necesidad de cambiar de pelcula. 4. No hay que esperar a que se termine el carrete ni revelar, quedando las imgenes disponibles inmediatamente para su tratamiento e incorporacin al diseo. 5. No hay que usar pelcula, revelar ni escanear, reducindose los consumibles necesarios. 6. El soporte es reutilizable y transferible directamente de una mquina a otra, o de la mquina al ordenador. 7. El almacenamiento de la imagen se realiza en formato digital, que se mantienen inalterables a lo largo del tiempo, con lo que la calidad de la imagen no disminuir nunca. 8. La reproduccin de una imagen almacenada en un soporte digital puede ser repetida tantas veces como se desee, producindose siempre un duplicado de la misma calidad que la imagen original. 9. La imagen digital est especialmente preparada para su retoque en aplicaciones grficas especializadas que permiten corregir defectos del original, variar su propiedades fundamentales (brillo, contraste, saturacin, profundidad del color, etc.) y aplicar multitud de efectos y filtros.
10.A pesar de ser ms lentas y ms difciles de utilizar que los escneres planos, las cmaras digitales se adaptan a una amplia variedad de documentos y objetos, siendo muy tiles para fotografa de detalle (macrofotografa). Se pueden capturar en forma segura los materiales ms frgiles, aunque la necesidad de proporcionar iluminacin externa significa que el dao causado por la luz puede ser una preocupacin.
Entre las desventajas de las captura fotogrfica digital podemos mencionar: 1. El coste de un estudio bien equipado (cmara digital de calidad, ordenador con suficientes prestaciones, unidades de iluminacin adecuadas, objetivos de alta resolucin y equipo para el almacenamiento masivo de datos) puede ser muy elevado. 2. Se trata de una tecnologa relativamente inmadura, por lo es probable que los equipos que se compren en la actualidad queden rpidamente obsoletos (an as, las ventajas aportadas por las cmaras digitales, siempre que se utilicen suficientemente, permitir su rpida amortizacin). 3. La calidad conseguida con la fotografa digital es suficiente para la mayora de los trabajos, pero, hoy por hoy, es inferior a la que se puede conseguir con las cmaras tradicionales basadas en procesos qumicos. 4. A la vista de lo expuesto, queda claro que las cmaras digitales son una herramienta til y prctica que puede ayudar a los diseadores a conseguir sus propias imgenes de calidad y econmicas.
PROGRAMAS GRFICOS
Vemos los tipos de programas grficos para el tratamiento de las imgenes escaneadas. Una vez digitalizadas las imgenes que necesitamos para nuestra composicin grfica (folleto, cartel, poster, tarjeta, pgina web, etc.), generalmente se hace preciso un tratamiento de retoque para configurarlas de acuerdo a nuestras necesidades de presentacin (resolucin, nmero de colores, dimensiones, peso del fichero, etc.) y darles el aspecto final deseado. La clave del tratamiento de las imgenes digitales son los programas grficos, que podemos dividir en tres categoras principales: programas de retoque fotogrfico, programas de ilustracin vectorial y programas de creacin de animaciones.
Los programas grficos son herramientas fundamentales para el diseador, interviniendo en la mayor parte de las fases de creacin grfica, desde el escaneado de un documento o la creacin directa de un nuevo grfico hasta el almacenamiento de la imagen digital resultante en el formato grfico ms adecuado. Tambin nos van a permitir retocar imgenes ya existente, configurar sus propiedades, aplicarles filtros y efectos, incluirles contenidos textuales e incluso crear con ellas vistosas animaciones interactivas.
Existen en el mercado multitud de aplicaciones grficas de todos los tipos y precios, aunque hay algunas de ellas que se han ganado a pulso su fama, como Adobe Photoshop y Adobe Ilustrator, Macromedia Flash y Macromedia Freehan, Corel Draw, Paint Shop Pro, etc. Un factor importante a la hora de decidirse por un juego de programas grficos concretos (generalmente uno de retoque y uno de ilustracin) es conveniente sopesar a fondo la relacin precio/calidad, ya que no siempre lo ms caro es lo mejor, existiendo programas como Paint Shop Pro que son bastante econmicos, resultan muy tiles y son muy fciles de aprender y manejar.
253
PROGRAMAS DE PINTURA Y RETOQUE

Pequea descripcin de los mejores programas de retoque y pintura existentes en la actualidad en el mercado y mencin de sus herramientas ms bsicas. Los programas de pintura o retoque, tambin denominados Paint, trabajan normalmente con imgenes de mapa de bits, permitiendo el cambio de resolucin de las mismas, su redimensionamiento, la aplicacin de filtros y efectos especiales y, los ms potentes, el trabajo con capas y mscaras y la inclusin de textos y objetos vectoriales (aunque una vez definidos suelen convertirlos a mapa de bits).
Estn especialmente indicados para el trabajo con fotografas y capturas mediante escner o cmara digital, as como para la creacin directa de imgenes de mapa de bits. Tambin permiten, en mayor o menor grado, la optimizacin de imgenes para la web y la exportacin a diferentes formatos de mapa de bits. Entre los programas de retoque existentes en el mercado podemos citar: Adobe Photoshop: Nmero uno, tanto por sus amplio uso como por sus caractersticas tcnicas, permite el uso de capas, mscaras, transparencias, contornos, efectos especiales, filtros, etc. Su principal inconveniente es el precio, bastante elevado. Paint Shop Pro: Una buena alternativa de la caja Jasc Software, ofreciendo funcionalidades avanzadas , filtros y manejo de capas a un precio mucho ms asequible. Ideal para trabajos rpidos. Paint de Windows: Viene instalado por defecto con los sistemas operativos Windows, por lo que su principal ventaja es que no nos va a costar dinero. Resulta til para grficos simples, permitiendo la inclusin de textos en los mismos. Picture Publisher: otra buena herramienta para el diseador, de la casa Micrografx, con asistentes interactivos y tutoriales en lnea, exportacin e importacin de archivos en diferentes formatos grficos y diversos efectos y macros.
254
Corel PhotoPaint: Buena y econmica alternativa de la casa Corel, que ofrece las herramientas habituales de este tipo de programas. La interfaz grfica es similar en todos ellos, y est formada por una superficie rectangular, denominada lienzo, en la que se trabaja con la imagen, una barra superior de mens, similar a la de la mayora de aplicaciones (men Archivo, men Edicin, men Herramientas, etc., y una serie de paletas de herramientas, flotantes o situadas en un lateral.
La paleta de herramienta principal incluye generalmente:

Un pincel con formas variables, para pintar tanto lneas rectas como trazos a mano alzada. Herramientas de dibujo de formas bsicas (elipses, rectngulos, polgonos, estrellas, etc.), que se dibujan haciendo clic y arrastrando el cursor. Herramientas de seleccin, entre las que se incluyen selecciones rectangulares y circulares, selecciones a mano alzada (lazo) y la famosa varita mgica, que selecciona zonas de colores similares con un grado de tolerancia configurable. Herramientas de adicin y modificacin de texto. Herramientas de tratamiento de color, tanto para seleccin de los colores del frontal y de fondo como un cuentagotas o chupn que permite seleccionar el color de una zona ya existente. Los programas de retoque ms avanzados disponen de un conjunto de paletas de herramientas adicionales, encargadas del manejo de funcionalidades ms avanzadas. Entre ellas destacan las capas, los canales y las mscaras.
255
Las capas son una especie de lminas transparentes sobre las que se pueden dibujar cualquier tipo de elementos, de tal forma que se pueden colocar sucesivas capas unas encima de las otras visualizndose las partes dibujadas de cada una de ellas. Es algo semejante a las hojas de acetato superpuestas utilizadas en la produccin clsica de dibujos animados. La paleta de control de las capas muestra las capas existentes, permite cambiar su orden, aadir o eliminar capas, asignar el nombre que se quiera a cada capa, decidir si son o no visibles (smbolo del ojo), imprimibles, editables (smbolo del lpiz o pincel) o transparentes (en un grado configurable).
Debe quedar claro que las capas son una forma interna de trabajar del programa de retoque, ya que al exportar la imagen a un formato til para el diseo el resultado es una imagen normal de mapa de bits, con todos sus elementos situados en una sola capa. Los canales separan los diferentes valores cromticos de la imagen. Por ejemplo, en modo CMYK hay cuatro canales, para los colores bsicos sustractivos cin, magenta, amarillo y negro.
256
Cada canal se puede modificar por separado, se pueden crear canales artificiales que preserven una parte de la imagen de cualquier modificacin de los colores, y se puede procesar el color por partes. Este procedimiento es muy til para colorear ilustraciones de todo tipo. Las mscaras o reservas realizan una seleccin de parte de la imagen que hace que slo se pueda modificar sta mientras que el resto queda protegido.
Photoshop por ejemplo tiene una excelente herramienta para ello, llamada mscara rpida, que esencialmente convierte al momento el pincel o cualquier otra herramienta en un aplicador de mscara. Al acabar, y pasar al modo normal, todo lo que hayamos seleccionado o pintado se convierte en un rea seleccionada. Este sistema permite efectos especiales y retoques avanzados.
257
Los programas de retoque son muy tiles, aunque presentan una serie de limitaciones nacidas de su propia naturaleza de trabajo con mapas de bits. En primer lugar, la resolucin de la imagen es fija, por lo que pierde calidad al modificarla (cambiando su tamao). Cualquier modificacin que apliquemos a una zona de la imagen puede afectar a los pxeles vecinos.
PROGRAMAS DE ILUSTRACIN
Hablamos de los programas de dibujo ms importantes y de sus herramientas principales. Los programas de dibujo o ilustracin han sido diseados bsicamente para la creacin de nuevas imgenes, disponiendo de herramientas especficas para la creacin deimgenes desde cero.
Trabajan de forma nativa con objetos vectoriales, generalmente formados por curvas de Bzier, aunque permiten la inclusin de imgenes de mapa de bits, como fotografas y texturas. Los objetos que forman el dibujo pueden ordenarse unos respecto de otros, agruparse o mantenerse independientes.
258
Entre los programas de dibujo vectorial existentes cabe destacar los siguientes: Adobe Ilustrator: Uno de los programas ms utilizados por los diseadores profesionales, que ofrece funcionalidades como trabajo con capas, pinceles, motivos, smbolos, operaciones diversas con objetos vectoriales (ordenacin, corte, interseccin, extrusin, agrupamiento, combinacin, etc.) y exportacin a los formatos PDF y SWF (Flash). Adems, su interfaz grfica es similar a la de Photoshop, programa al que complementa a la perfeccin. Su principal inconveniente es el mismo que Photoshop: su elevado precio. Corel Draw: Buen programa de grficos vectoriales de la casa Corel, funcional y econmico, que adems de ofrecer las funcionalidades habituales en este tipo de aplicaciones viene con multitud de clipart (dibujos vectoriales) listos para su uso. Macromedia Freehand: Una de las alternativas ms importantes a Ilustrator, con la ventaja adicional de trabajar perfectamente con Macromedia Flash. Al igual que ocurre con las aplicaciones de retoque, los diferentes programas de ilustracin ofrecen al usuario un conjunto de herramientas de dibujo similares, entre las que cabe destacar por su utilidad las siguientes: Herramientas de seleccin: Permiten seleccionar uno o ms objetos vectoriales. Una variacin son las herramientas de seleccin directa, que permiten seleccionar nodos especficos de un objeto. Plumas: Encargadas de crear nuevos nodos y modificar y eliminar los ya existentes. Herramienta Texto: Permite crear textos editables y escalables, que luego pueden ser convertidos en trazos, aunque entonces pierden su cualidad textual pasando a ser vectores.
259
Herramientas de dibujo geomtrico: Permiten dibujar figuras vectoriales de formas diversas, como cuadrados, rectngulos, crculos, elipses, estrellas, etc, todas ellas de carcter vectorial. Lpices y pinceles: Dibujan trazos lineales simples y complejos, definidos por vectores, que imitan incluso diferentes motivos predefinidos o creados por el usuario. Paletas de color y degradados: Definen los colores utilizados en cada objeto, tanto en su borde como en su relleno, permitiendo adems crear diferentes tipos de degradados y mallas de degradado. Suelen admitir diferentes sistemas de color (Escala de grises, RGB, CMYK, HSB, Pantone, etc.). Herramientas de manejo de objetos: Permiten agrupar y desagrupar diferentes objetos del dibujo, fusionarlos, combinarlos, recortarlos, ordenarlos, alinearlos, etc. Herramienta transparencia: Ofrece la posibilidad de definir el grado de transparencia de cada objeto del dibujo, que puede oscilar entre un valor 0% (objeto opaco) y 100% (objeto totalmente transparente). Capas: Funcionalidad heredada de las aplicaciones de retoque, las capas permiten definir diferentes niveles de dibujo que se superponen, similares a papeles transparentes apilados, de tal forma que el usuario puede colocar objetos en cada uno de ellos, cambiar su posicin relativa en el apilamiento, mostrarlos u ocultarlos, bloquearlos para que no se puedan modificar, agruparlos, etc.
Los grficos obtenidos con los programas vectoriales de ilustracin difcilmente pueden ser tan realistas como los mapas de bits (resultan demasiado perfectos, muy geomtricos), pero pueden escalarse a cualquier tamao sin perder calidad, resultando idneos para creacin grfica de ilustraciones lineales y estilizadas, esquemas, texto, dibujo tcnico, logotipos, iconos, etc.
260
Una de las principales aplicaciones de este tipo de programas es el diseo interfaces grficas de usuario (IGU). En el caso de una interfaz web, por ejemplo, podemos ir construyendo cada uno de los elementos que la forman (logotipo, sistemas de navegacin, iconos, contenidos textuales, etc.) y posicionndolos en el espacio de trabajo de diferentes formas, hasta encontrar aquella ms equilibrada y funcional.
Una gran ventaja de disear con programas vectoriales de ilustracin es que cambios posteriores de colores, tamaos y posicionamientos son fciles de realizar.
261
CREACIN DE ANIMACIONES VECTORIALES

Seguimos con el curso de digitalizacin de imgenes explicando un poco sobre el programa de animacin vectorial Macromedia Flash. El tercer grupo de aplicaciones grficas son aquellas destinadas fundamentalmente a crear animaciones de grficos vectoriales, dentro del cual destaca con todo su esplendor Macromedia Flash (actualmente en su versin MX), completa aplicacin que permite no slo crear grficos vectoriales avanzados, trabajar con capas, aplicar transparencias, implementar botones interactivos, definir smbolos, etc. Una de las funcionalidades ms avanzadas de Flash son los frames, especie de cuadros independientes, al estilo de los fotogramas de las pelculas de cine clsicas.
Cada frame es un contenedor de dibujo independiente en el que se pueden situar objetos, en una o varias capas. Posteriormente los frames son visualizados en sucesin, pudiendo ser mostrado cada frame un intervalo de tiempo determinado, con lo que se consigue crear complejas animaciones.
Las herramientas que ofrece Flash son las comunes de los programas de dibujo vectorial, a las que se que aaden las especficas para el manejo de frames. Entre ellas destaca la denominada lnea de tiempo, en la que se visualizan y manejan los frames existentes en la pelcula, de una forma similar a la herramienta del mismo nombre de las aplicaciones de edicin de vdeo.
262
En las animaciones creadas con Flash es posible incluir imgenes de mapa de bits, sonidos y vdeos. Tambin soporta conectividad persistente con datos XML, lo que le permite mostrar informacin en tiempo real. La interactividad de la pelcula se complementa con un lenguaje de script propio, ActionScript, similar a JavaScript pero orientado al manejo de frames y objetos propios de Flash. Mediante ActionScript se puede iniciar o detener la animacin, saltar a un frame determinado, responder con acciones complejas a los eventos producidos por accin del usuario, crear contadores, etc.
Tanto ha sido el xito de Flash que otras empresas han lanzado programas que lo imitan, aunque ninguno de ellos llega al nivel de la aplicacin de Macromedia. Entre ellos podemos destacar a Swish, que permite la creacin de animaciones de texto en formato SWF.
TABLETAS DIGITALIZADORAS
Para finalizar el tema de digitalizacin de imgenes, vamos a estudiar un poco otra de las herramientas de que dispone el diseador grfico y el diseador web para sus trabajos: las tabletas digitalizadoras.
263
Las tabletas digitalizadoras son unos dispositivos de entrada que permiten digitalizar figuras y grficos vectoriales. Estn formadas generalmente por una superficie plana que contiene en su interior una rejilla formada por cientos de lneas de cobre por las que circulan corrientes perpendiculares independientes. Para dibujar se utiliza un lpiz especial o trazador conectado a la tableta, en cuyo interior se encuentra un pequeo electroimn que modifica el voltaje en cada una de las rejillas de la tableta proporcionalmente a su posicin sobre ella, lo que permite a sta establecer la posicin del puntero del lpiz, su orientacin e inclinacin y la presin con que el usuario aprieta el lpiz. La tableta est conectada al ordenador, donde un programa grfico va recogiendo los puntos y trazos marcados por el lpiz sobre la tableta, presentndolos en pantalla y asumindolos a todos los efectos como propios y pertenecientes al grfico que en ese momento se encuentra activo en el mismo. Las tabletas suelen presentar un rea activa mnima de tamao DIN A5 (101 x 76 mm 3 x 4 pulgadas) y una resolucin que ronda las 1.500 lpi (lneas por pulgada), aunque tambin es normal encontrarlas de tamao DIN-A4 con 3000 lpi y ms. Se conectan al ordenador a travs de cualquier puerto vlido al efecto (generalmente un puerto USB) o por medios inalmbricos, que presentan la ventaja de eliminar las posibles molestias causadas por los cables.
Si el programa grfico es de retoque (Corel, Photoshop, Painter, PaintShop Pro, etc.), los
trazos se interpretan como sucesiones de bits del color activo en ese momento en el mismo, y si es un programa vectorial (Ilustrator, Frenad, etc.) los trazos son asimilados como nuevos vectores, con sus nodos y puntos de anclaje. El lpiz grfico es sensible a la presin (son capaces de reconocer cientos de niveles de presin), pudiendo conseguirse con l multitud de efectos, como la simulacin de dibujo natural sobre papel o de escritura caligrfica. Este suele tener forma de lpiz o cursor, y est unido al resto del sistema por un cable flexible. En el ltimo caso el cursor tiene una ventana cerrada con una lupa, en cuyo interior se encuentra embebida una retcula en forma de cruz para sealar o apuntar con precisin el punto a digitalizar. El mando puede disponer de uno o varios pulsadores para controlar la modalidad de funcionamiento, forma de transmisin y seleccin de opciones del programa que gestiona la digitalizacin. Existen multitud de tabletas digitalizadoras disponibles en el mercado, desde las ms simples a las que ofrecen funcionalidades avanzadas. Como norma general, cuanto mayor es el rea de trabajo, mayor es su resolucin y mayor es su precio, aunque para la mayora de los trabajos las ms pequeas son perfectamente adecuadas destacando Entre los fabricantes de estos dispositivos destacan Wacom y Genius, que ofrecen modelos bsicos de tarjetas digitalizadoras. Resultan un complemento perfecto para dibujar y pintar directamente en el ordenador, siendo muy usadas en asociacin a programas de retoque, de ilustracin y de dibujo tcnico y CAD, programas para los que el teclado y el ratn son dispositivos demasiado limitados para dibujar formas con precisin.
265
FORMATOS DE IMAGEN PARA WEB

Distintos formatos estndar de imgenes utilizables entre diversos programas grficos. Este tutorial tiene como finalidad ayudar a entender algunos de los formatos estndar utilizables entre diversos programas grficos, sus caractersticas, similitudes y particularidades. Los formatos que aqu trabajaremos son:

BMP- Mapa de bits GIF- Graphics Interchange Format JPG- Joint Photographic Experts Group PNG- Portable Network graphics TIF- Tagged-Image File Format
BMP es el formato ms usado en aplicaciones Windows y DOS. En la codificacin de la imagen no hay compresin y por lo general resultan archivos grandes. Su ventaja es que lo lee cualquier programa que maneje imagen. El formato GIF es el formato de archivo que se utiliza habitualmente para mostrar grficos e imgenes de color indexado en documentos HTML en Internet y otros servicios en lnea. GIF es un formato comprimido con LZW diseado para minimizar el tamao del archivo y el tiempo de transferencia electrnica. El formato GIF preserva la transparencia en imgenes de color indexado. El formato JPEG se utiliza habitualmente para mostrar fotografas y otras imgenes de tono continuo en documentos HTML en Internet y otros servicios en lnea. El formato JPEG admite los modos de color CMYK, RGB y Escala de grises pero no admite canales alfa (No preserva la transparencia). A diferencia del formato GIF, JPEG retiene toda la informacin de color de una imagen RGB pero comprime el tamao del archivo descartando datos selectivamente. Desarrollado como una alternativa sin patente al formato GIF, el formato de grficos de red porttiles PNG se utiliza para una compresin sin prdidas y para la visualizacin de imgenes en Internet. A diferencia del formato GIF, PNG admite imgenes de 24 bits y produce transparencia de fondo sin bordes irregulares; sin embargo, algunos navegadores Web no admiten imgenes PNG. El formato PNG admite imgenes RGB, de color indexado, en escala de grises y de mapa de bits sin canales alfa. PNG conserva la transparencia en imgenes en escala de grises y RGB, lo que resulta extremadamente til para utilizarse en Flash, donde PNG es totalmente compatible. TIFF es un formato flexible de imgenes de mapa de bits que prcticamente admiten todas los programas de pintura, edicin de imgenes y diseo de pginas. Admite imgenes CMYK, RGB, Lab, de color indexado y en escala de grises con canales alfa, e imgenes en modo de mapa de bits sin canales alfa. Photoshop puede guardar capas en un archivo TIFF; sin embargo, si abre el archivo en otra aplicacin, slo ser visible la imagen acoplada. Photoshop puede guardar tambin anotaciones, transparencias y datos
de pirmide multirresolucin en formato TIFF. No es un formato para Internet debido al gran tamao de los archivos con este formato.
267
En este artculo veremos las imgenes de tono continuo. Necesitaremos Adobe Photoshop, dreamweaver o word, y el explorador de Windows. 1. Abre Photoshop y pide un archivo nuevo. File> New. En el cuadro de dialogo New selecciona en el men desplegable Preset Size Default Photoshop Size, y activa transparent en la seccin contents.
Este archivo nos servir para crear en l grficos bsicos, para exportarlos con diferentes formatos, comparar su tamao en bits y despus ilustrar sus caractersticas bsicas en Dreamweaver o word. 2. Selecciona la herramienta Gradiente En la barra de opciones de la herramienta clic en el men desplegable para tipo de gradiente y selecciona De Color Frontal a Transparente.
268
3. Aplica la gradiente a todo tu documento.
4. Guarda el archivo para WEB. File>Save for Web. El cuadro Save For Web de Photoshop nos permite guardar imgenes en formatos comprimidos. Especialmente til para aplicaciones Web.
5. Clic en el men desplegable del formato (Resaltado en rojo en la ilustracin anterior). Selecciona GIF. Verifica que la opcin de Transparency est activada. El resto de los valores pueden ser los de la ilustracin siguiente.
269
6. Clic en el botn Save. En el cuadro Save Optimized As crea una nueva carpeta en el escritorio y guarda en ella la gradiente con el nombre GradGif.
7. Nuevamente File> Save For Web. Clic en el men desplegable del formato. Selecciona JPG. En la caja de texto Quality teclea 80. El resto de los valores pueden ser los de la ilustracin siguiente.
8. Clic en el botn Save. En el cuadro Save Optimized As guarda como GradJPG en la carpeta recin creada.
9. Otra vez File> Save For Web. Clic en el men desplegable del formato. Selecciona PNG-8. Notaras que los parmetros son iguales a los de GIF. Verifica que la casilla de Transparency est activada.
270
10. Clic en el botn Save. En el cuadro Save Optimized As guarda como GradPNG en la carpeta recin creada. 11. File> Save For Web. Clic en el men desplegable del formato. Selecciona PNG-24. Verifica que la casilla de Transparency est activada. 12. Clic en el botn Save. En el cuadro Save Optimized As guarda como GradPNG24 en la carpeta recin creada. En el explorador de Windows navega hacia la carpeta que creaste en el escritorio. En la barra de men Clic en Ver> Detalles para ver el tamao y tipo de los cuatro archivos. Notars que el archivo GIF es el ms grande de todos. Esto es por que GIF guarda una muestra de cada uno de los colores que aparecen en la imagen, por lo que no es el formato mas adecuado para tonos continuos como nuestra gradiente. JPG es lo ms recomendable. PNG 8 es una buena opcin sin embargo menos programas y navegadores reconocen el formato (ya lo vers en el ejemplo con dreamweaver). En este artculo veremos las imgenes de plasta de color. 1. En el archivo de photoshop que hemos estado trabajando, Presiona Ctrl+A para seleccionar todo y presiona la tecla Supr. Para dejar el archivo nuevamente en blanco. 2. Presiona ctrl.+D para eliminar la seleccin. 3. Clic en la herramienta Pincel y deja presionado el botn del Mouse hasta que aparezca la opcin del lpiz. Seleccinalo.
4. En la barra de opciones de la herramienta selecciona un pincel de 60px de bordes duros y con opacidad del 100%.
271
5. traza algunas lneas con tres o cuatro colores diferentes dejando algunas zonas transparentes.
Las imgenes en que los tonos cambian abruptamente, sin pasos graduales entre uno y otro se les llama de plasta de color. 6. File> Save For Web. Clic en el men desplegable del formato. Selecciona GIF. Verifica que la casilla de Transparency est activada. 7. Clic en el botn Save y guarda la imagen como flatGIF en la carpeta que creaste en el escritorio. 8. Como hicimos antes guarda un JPG, un GIF,un PNG-8 y un PNG-24. y activa la transparencia en los formatos que lo permitan. 9. En el explorador de Windows navega hacia la capeta que creaste y observa el tamao de los archivos. La relacin Gif-JPG ahora funciona a la inversa: el archivo GIF es mucho ms pequeo que el JPG. Lo mismo pasa en relacin a png-8 y png-24. Por tanto, en imgenes de plasta de color, GIF es un formato ms eficiente con respecto al tamao del archivo. Ahora veremos las caractersticas grficas de cada formato, esto es, como se comportan visualmente en entornos de edicin. Cierra Photoshop y abre DreamWeaver 1. En el cuadro de bienvenida pide un archivo nuevo haciendo clic en HTML de la columna Create New
2. En la barra de men Modificar>Propiedades de la pgina ( Modify> Page Properties). En el cuadro propiedades de pgina clic en el botn Examinar para buscar una imagen de fondo.
3. En el cuadro seleccionar origen de la imagen (Select Image Source) busca fondo.gif en la carpeta del ejercicio que copiaste al escritorio. Clic en aceptar al cuadro de advertencia y Aceptar (OK) al cuadro Propiedades de la pgina.
La imagen debe abarcar todo el fondo de tu pgina.
273
4. En la barra de men Insertar>Imagen. Busca la carpeta donde guardaste los archivos creados en Photoshop.
5. Selecciona flatGIF y clic en Aceptar. En el cuadro de advertencia clic en Aceptar.
274
La imagen aparece en tu pgina 6. Inserta del mismo modo cada una de las imgenes que exportaste de Photoshop y checa su comportamiento con respecto al fondo. Presiona f12 para una previsualizacin Web. 7. Notaras que la transparencia de png 24 no es reconocida por Dreamweaver mientras que la de GIF y PNG8 si es respetada. A esto me refiero cuando hablo de la compatibilidad de los formatos. En general los programas de edicin de imagen o video reconocen sin problemas los canales Alpha o de transparencia de los formatos que exportamos. Dreamweaver no es un editor de imagen por eso sus posibilidades se limitan al lenguaje que maneja (HTML) y a los navegadores WEB donde se ver el producto final que no todos reconocen png24 sin la ayuda de otros lenguajes anidados o de dePlug-ins. 8. Abre Illustrator y pide un documento nuevo y en blanco. 9. Dibuja algunos objetos en la capa 1 10. Crea una capa nueva. Elije File> Place. 11. Ahora: importa una imagen de las que guardamos con Photoshop, pon atencin en su formato ( gif, jpg, png) y observa su comportamiento con respecto a la capa 1 que hace de fondo. Este programa s reconoce la medias transparencias de PNG24, o transparencia Alfa, permitiendo resultados grficos muy variados, que la transparencia total de GIF no permite. Conociendo las caractersticas de cada formato y su comportamiento grfico puedes seleccionar el formato que ms te convenga segn las necesidades grficas de tu proyecto.
275

Design e Multimédia

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Design e Multimédia

Încărcat de

Drepturi de autor:

Formate disponibile

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

Grabado en piedra con jeroglficos (Egipto)

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

INTRODUCCIN AL DISEO WEB Prlogo a los primeros pasos en el diseo web

Introduccin al diseo web

Caractersticas especiales de la publicacin web

Algo ms sobre el diseo web?

Herramientas para profesionales del diseo web

Ayuda. Cumple. Duradero. Se integra (con las personas, sistemas, usuarios).

DISEO DE PGINAS WEB Y MULTIMEDIA

Diseo Web. Problemas generales

Conclusin a la introduccin al diseo web

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO GRFICO EN LA WEB

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

COMPONENTES GRFICOS DE UN ORDENADOR

DISEO DE PGINAS WEB Y MULTIMEDIA

Tubo de rayos catdicos de un monitor CRT

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

Porcentajes de color y cdigos

DISEO DE PGINAS WEB Y MULTIMEDIA

CALIBRACIN DEL MONITOR

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

FORMAS BSICAS EN DISEO GRFICO

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

Las principales caractersticas del punto son:

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

EL DISEO EQUILIBRADO INTRODUCCIN

tamao 210*297 420*297 420*594

relacin 0.0625 m(x/y=0.707) 0.125 m (x/y=1.4142) 0.25 m (x/y=0.707)

0.5 m (x/y=1.4142) 1.0 m (x/y=0.707)

La relacin visual entre los distintos formatos DIN es la siguiente:

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

DISEO DE PGINAS WEB Y MULTIMEDIA

elemento en una composicin, situndolo sobre un color que contraste con l.

DISEO DE PGINAS WEB Y MULTIMEDIA

tamao 210297 420297 420*594