Professional Documents
Culture Documents
www.desarrolloweb.com
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,
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
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.
Artculo por
Luciano Moreno
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.
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.
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.
Una forma comn de clasificar las imgenes segn su resolucin es aquella que las divide en imgenes de alta resolucin (hires) 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
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
Impresora
Fotografa
Imprenta
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
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.
Artculo por
Luciano Moreno
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:
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
Luciano Moreno
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.
15
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 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
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.
Artculo por
Luciano Moreno
19
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
16
256
20
65.536
16.777.216
High Color
True Color. Modo RGB 8 bits por canal (8x3=24). Modo
Lab 8 bits por canal
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
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.
Artculo por
Luciano Moreno
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.
Artculo por
Luciano Moreno
23
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
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
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.
Artculo por
Luciano Moreno
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.
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.
Artculo por
Luciano Moreno
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.
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 (WordPerfect Grafics Format).
Artculo por
Luciano Moreno
32