curso práctico de diseño web - parte iv

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

Curso prctico de diseo web Parte 4Un manual que trata el diseo orientado a la web, con una interesante introduccin al diseo en general y el desarrollo del diseo en la web en particular.

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:

Luciano MorenoConsultor, diseador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseo centrado en el usuario. (61 captulos)

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

1

http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/


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.


2



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,


3



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.


4



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

Artculo por Luciano Moreno


5



Introduccin a los grficos digitalesQu 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.


6



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 mapas de bits. ResolucionesVemos 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.

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


7



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.

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.


8



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.

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.


9



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.


10



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.

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.


11



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, etc.)

Normalmente, 90 ppp, aunque puede subir a 300 ppp en impresin offset

Impresora Diferentes resoluciones, generalmente entre 300 ppp y 600 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.


12



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


13



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.


14



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


15



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.


16



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.


17



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,


18



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.



19



Color y mapas de bitsCmo 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 Colores posibles Comentarios

1 bit por pixel 2 Arte Lineal (B&N). Modo Mapa de Bits

4 bits por pixel 16 Modo Escala de Grises

8 bits por pixel 256 Modo Escala de Grises. Modo Color Indexado. Cantidad estndar de colores que admiten los formatos GIF y PNG-8, as como muchas aplicaciones multimedia.


20



16 bits por pixel 65.536 High Color

24 bits por pixel 16.777.216 True Color. Modo RGB 8 bits por canal (8x3=24). Modo Lab 8 bits por canal

32 bits por pixel 4.294.967.296 Modo CMYK

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


21



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


22



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.



23



Optimizacin de ficheros grficosCmo 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.


24



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


25



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.

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.


26



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.


27



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


28



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.


29



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


30



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.

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 1

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


31



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



32


Introduccin a los grficos digitalesGrficos de mapas de bits. ResolucionesDimensiones de una imagen de mapa de bitsModos de colorColor y mapas de bitsPeso de un fichero GrficoOptimizacin de ficheros grficosGrficos vectorialesMetaficheros grficos

curso práctico de diseño web - parte iv

Documents