Curso Práctico de Diseño Web - Parte IV

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Curso prctico de diseo web Parte 4

Un 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 Moreno
Consultor, 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.

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.


Dentro de cada bloque, y ya definidas las cabeceras, deberemos ir situando bloques de texto que desarrollen la idea general
introducida por la cabecera. El sangrado de este texto puede ser diferente dependiendo de la cantidad de texto en el
apartado. As, si tenemos poco texto podemos distribuirlo como si de un pequeo libro o folleto se tratase, sangrando cada
prrafo y justificando el texto del mismo.
Pero si el apartado contiene mucho texto, aunque podemos seguir sangrando los comienzos de prrafo, en este caso no es
conveniente la justificacin del texto, ya que este tipo de alineacin cansa la vista por su monotona, por lo que es preferible
dejar una alineacin a la izquierda, en la que el efecto conseguido con la finalizacin de cada lnea en un punto diferente
consigue un resultado de descanso visual y hace el contenido mas legible.
Con un poco de lectura general y con la contemplacin de pginas en Internet podemos ir poco a poco aprendiendo cual es
la forma idnea de colocar nuestros textos en cada caso. Recomiendo sobremanera el estudio de unos buenos manuales de
maquetacin, diseo grfico y tipografa.
Colores de los textos
Otro tema de vital importancia es el color que vamos a dar a nuestros textos. Es conocido el efecto psicolgico de los
colores y cmo afectan y transmiten uno u otro sentimiento, adems de crear el conjunto disposicin-color un estado
receptivo en el usuario que le puede impulsar a continuar navegando en nuestra pgina o por el contrario abandonarla
rpidamente.
Como norma general debemos procurar que el color de nuestros textos sea tal que destaque claramente del fondo de la
pgina, sobre todo en el caso en que usemos una imagen de fondo, ya que el texto es la va principal de transmisin de ideas,


y por lo tanto debe ser la parte de nuestra pgina que ms clara resulte al visitante. O no colocamos imagen de fondo o lo
hacemos de tal forma que el texto, por su disposicin y color destaque claramente sobre el fondo.
Un color de texto nico para toda la pgina puede resultar montono, sobre todo si el tema principal de esta es artstico o
colorista, por lo que a veces es conveniente usar diferentes colores para diferentes partes del texto. En estos casos
deberemos usar una gama de colores compatibles, que puede parar por el uso de colores anlogos (de la misma gama o
familia)o por el uso de colores complementarios, que consiguen un efecto visual equilibrado, potencindose mutuamente, y
especialmente indicados cuando queremos destacar un texto sobre un fondo de color. Es conveniente para ello el estudio de
uno cualquiera de los grficos de gamas de colores que podemos encontrar en cualquier obra dedicada a la pintura. En la
imagen de la izquierda tenis la rueda de colores; los complementarios se encuentran opuestos en la rueda, mientras que los
anlogos a un color estn alrededor del mismo.
Si nuestra pgina esta orientada a un pblico juvenil, como puede ser una pgina sobre el mundo de los video juegos, el
texto puede estar definido por una gama de colores agresivos, como son el rojo con amarillos, o con una gama de colores
que le de aspecto sugestivo, como letras blancas, rojas o doradas sobre un fondo negro. Pero si nuestra pgina esta
concebida para un pblico serio y/o general, como puede ser una pgina sobre economa o poltica, deberemos emplear una
gama de colores neutros, como grises, azule grisceos o tonos pastel, apta para todo tipo de pblicos.
Por ltimo, si nuestra pgina es corporativa, como puede ser el caso de una pgina de empresa o de un banco, los colores
deben ser los marcados por la propia empresa, ya que cada empresa tiene uno o mas logotipos y un conjunto de colores
corporativos propios, que son los que dan identidad propia a esa empresa entre todas las dems, siendo fundamental
transmitir en la pgina esa individualidad que le es propia.
Estudiaremos mejor el mundo de los colores en el captulo sobre imgenes.
Familias de fuentes en los textos
Otro tema a tener en cuenta a la hora de disear nuestros textos es qu tipo de fuentes vamos a usar en nuestra pgina.
Al igual que ocurre en el caso de los colores, es posible y casi conveniente el mezclar varios tipos de fuentes, buscando sobre
todo romper la monotona que crea una sola fuente.
Si deseamos mezclar fuentes deberemos, como regla general, no usar ms de dos o trs tipos diferentes. Por ejemplo,
podemos usar dos fuentes que sean parecidas, una de ellas Sans Serif para las cabeceras, y otra Serif para los bloques de
texto. Recordemos que las fuentes Serif pintan una especie de terminaciones de adorno en los extremos de las letras,
mientras que las Sans Serif no, pintando todas las letras planas. Fuentes Serif son por ejemplo la Times New Roman y la
Georgia, y fuentes Sans Serif son la Verdana y la Arial.
Si la pgina va dedicada a un pblico corporativo o adulto podemos usar fuentes serias o clsicas, como Times New Roman
o Arial. Si esta orientada a pblico general podemos usar Verdana, Helvetica o Tahoma. Y si nuestro pblico va a ser joven
podemos usar fuentes mas dinmicas, como Comic Sans MS, Impact o Lucida Console.
Ejemplos:
Fuente Times New Roman (Serif)

Fuente Tahoma (Sans Serif)
Fuente Impact (Sans Serif)
Como en todo, la mejor forma es experimentar y experimentar, hasta que encontremos aquella combinacin que exprese lo
que deseamos transmitir, pero ponindonos siempre en el lugar del usuario potencial, no en el lado del diseador, ya que es
este el verdadero destinatario y juez de nuestro trabajo final.
Cuidado con la ortografa
Deberemos tener siempre especial cuidado con la sintaxis y la ortografa en nuestros textos, ya que un buen trabajo de
diseo puede verse arruinado si lo que transmitimos esta mal expresado y/o mal escrito.
Al fin y al cabo nuestro pblico va a sacar de nosotros, y lo que es ms importante, de la empresa o entidad que representan
las pginas web, la impresin que le demos a travs las mismas, y un texto lleno de errores ortogrficos denota un mal
trabajo, por lo que es fcil que el usuario final abandone rpidamente el sitio web entero, con las consecuencias que pueda
traer eso.


Para ayudarnos en este tema podemos usar un buen procesador de textos, utilizando su herramienta de correccin sintctica
y ortogrfica, lo que nos va a permitir obtener un texto bien escrito sin necesidad de ser licenciados en filologa.
Consejos generales
Vamos a resumir escuetamente una serie de consejos para el buen uso de textos en una pgina web:
No abusar de la maysculas: estas letras poseen un fundamento sintctico y gramatical propio, pero adems son
un elemento idneo para remarcar ciertas partes de informacin de la pgina. Su uso excesivo mata este factor,
convirtiendo un texto interesante en una serie montona de caracteres que no dicen nada, y que por lo tanto no
captan la atencin del visitante. Usa las maysculas al principio de cada frase, los nombres propios, los ttulos y
subttulos de la pgina.
No usar textos de pequeo tamao en tipos serif: debido a que este tipo de 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


Introduccin a los grficos digitales

Qu son, como nos ayudan en los diseos y la manera de trabajar con los grficos digitales.
Una composicin grfica es un conjunto de elementos textuales y grficos que trabajan conjuntamente para transmitir una
informacin, un mensaje, a los espectadores o usuarios finales.
En este trabajo en equipo, los contenidos grficos no slo aportan aspectos visuales y estticos, sino que su presencia, sus
formas y colores, afectan profundamente a la informacin ofrecida por los elementos textuales, reforzando su impacto final
sobre el espectador.
Una imagen bien seleccionada y situada correctamente en el documento centra la atencin del lector y aade significado al
mismo. Las imgenes se presentan en una gran variedad de formas: ilustraciones, fotografas, diagramas, iconos, etc, cada
una de ellas con su propia personalidad y funcionalidades, pero todas ellas con un factor en comn: su naturaleza digital.
Atrs quedaron los tiempos en que las composiciones grficas eran un compendio de elementos individuales separados, que
el impresor tena que montar con todo su arte para crear una entidad nica. Los modernos equipos informticos y las
aplicaciones de autoedicin, diseo grfico, diseo industrial y diseo web han hecho posible reducir todos los elementos
participantes en una composicin cualquiera a sucesiones de dgitos binarios fcilmente encajables entre s.
A la hora de trabajar con elementos grficos, el primer paso ser recopilar los que necesitemos para nuestra composicin,
pudiendo usar diferentes fuentes y tcnicas para ello: escaneado de documentos, ilustraciones o fotografas en papel,
creacin directa mediante programas de diseo grfico, dibujo digital mediante tabletas digitalizadoras, obtencin de
fotografas con cmaras digitales, utilizacin de grficos y fotografas ya existentes, gratuitas o no, etc.


Normalmente, estas primeras versiones de nuestros componentes grficos no se adaptarn a nuestras necesidades al 100%,
por lo que ser preciso un posterior trabajo con programas de retoque de imgenes para conseguir esas caractersticas finales
buscadas.
Conforme vayamos obteniendo las versiones finales de nuestras imgenes necesitaremos nombrarlas y almacenarlas
mediante algn sistema que haga posible una gestin efectiva de las mismas y de sus originales, de tal forma que podamos
tenerlas localizadas y disponibles en cualquier momento.
Por ltimo, deberemos montar en la composicin todos los elementos grficos y textuales, utilizando generalmente para ello
algn programa de autoedicin, diseo grfico o diseo web.
Para poder realizar todo este trabajo es preciso tener un conocimiento profundo de la naturaleza de las imgenes digitales,
de sus tipos y propiedades (mapas de bits y grficos vectoriales), de los diferentes formatos de almacenamiento y de las
herramientas fsicas (hardware) y lgicas (software) necesarias para su obtencin, manipulacin y composicin.
Artculo por
Luciano Moreno
Grficos de mapas de bits. Resoluciones

Vemos uno de los tipos de grficos digitales: los mapas de bits. Conocemos qu son las resoluciones y
cules son las adecuadas para los distintos trabajos.
Existen dos tipos principales de imgenes digitales: los mapas de bits, en los que la imagen se crea mediante una rejilla de
puntos de diferentes colores y tonalidades, y los grficos vectoriales, en los que la imagen se define por medio de diferentes
funciones matemticas.
Las imgenes de mapa de bits (bitmaps o imgenes raster) estn formadas por una rejilla de celdas, a cada una de las cuales,
denominada pxel (Picture Element, Elemento de Imagen), se le asigna un valor de color y luminancia propios, de tal forma
que su agrupacin crea la ilusin de una imagen de tono continuo.
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.


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

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.
Artculo por
Luciano Moreno
Dimensiones de una imagen de mapa de bits

Explicacin de los distintos tipos de medidas de las dimensiones de los mapas de bits.
Puesto que la resolucin de una imagen se mide en pulgadas o centmetros, parecera lgico pensar que estas mismas
unidades se utilizaran para definir las dimensiones de una imagen.
El principal inconveniente de obrar as es que estas unidades expresan valores de medida absolutos, mientras que los
dispositivos de salida suelen trabajar en dimensiones relativas (pxeles o puntos de impresin). Por ejemplo, los monitores
trabajan en pxeles, adaptando las dimensiones de los objetos que presenta a la resolucin de pantalla usada, por lo que una
imagen se visualizar ms pequea cuanto mayor sea la resolucin.

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

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.
Artculo por
Luciano Moreno

19

Color y mapas de bits

Cmo se trata el color en los mapas de bits. Profundidad de color de las imgenes, paletas, etc.
Los grficos de mapa de bits almacenan una completa informacin sobre el color de cada uno de sus pxeles constituyentes.
Cuantos ms colores pueda tener la imagen, ms calidad final tendr y ms informacin ser necesario almacenar.
Relacionados con el nmero de colores posibles, sus caractersticas y su almacenamiento encontramos los siguientes
conceptos:
Profundidad de color
La profundidad de color de una imagen se refiere al nmero de colores diferentes que puede contener cada uno de los
puntos o pxeles que la forman, y depende de la cantidad de informacin (nmero de bits) que puede almacenar un pxel.
Cuanto mayor sea la profundidad de bit en una imagen, mayor ser la cantidad de tonos (escala de grises o color) que
puedan ser representados, ms colores habr disponibles y ms exacta ser la representacin del color en la imagen digital.
Las imgenes digitales se pueden producir en blanco y negro, a escala de grises o a color.
Profundidad de color
Colores
posibles
Comentarios
1 bit por pixel
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
24 bits por pixel
16.777.216
32 bits por pixel
High Color
True Color. Modo RGB 8 bits por canal (8x3=24). Modo
Lab 8 bits por canal
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.
Artculo por
Luciano Moreno
Peso de un fichero Grfico

Estudio del tamao que ocupan los mapas de bits en disco, que suele estar relacionado con el nmero de
colores con el que est codificado el grfico.
Los mapas de bits pueden estar definidos en un nmero variable de colores. Como regla general, cuantos ms colores tenga
la imagen, mayor calidad tendr, aunque esta regla depende mucho de la imagen en s.
Por ejemplo, una letra negra sobre fondo blanco (1 bit de profundidad de color), formada por lneas rectas horizontales y
verticales, slo necesitar estos dos colores para visualizarse de forma correcta, aunque aumentemos su tamao (resolucin).

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

Optimizacin de ficheros grficos

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

Comprimir los datos de la imagen para que ocupen menos espacio.
Reduccin de colores (dithering)

El principio del dithering se basa en la reduccin del nmero de colores usado en una imagen, al considerar que en la
mayora de los casos se utiliza demasiada informacin grfica en un fichero, informacin que se puede eliminar sin prdidas
notables en la calidad final de la imagen.
Si una determinada imagen utiliza slo 40 colores, para reducir el tamao de su archivo bastara con definir los 40 colores
utilizando una paleta de color, guardando luego los puntos de la imagen con una profundidad de 8 bits.
Por otra parte, una imagen que utilice 256 colores puede tener una calidad aceptable en relacin a la misma imagen con 16,8
millones de colores, siendo, su tamao tres veces ms pequeo. Para obtener un color no presente en la paleta de 256
colores de la imagen siempre es posible mezclar los que s estn, consiguiendo en la mayora de los casos una buena
aproximacin al necesitado.

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

Curso Práctico de Diseño Web - Parte IV

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso Práctico de Diseño Web - Parte IV

Caricato da

Copyright:

Formati disponibili

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte 4

Autores del manual

Consultor, diseador y desarrollador web

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Disposicin del texto. Niveles de cabeceras

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Fuente Times New Roman (Serif)

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Introduccin a los grficos digitales

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Grficos de mapas de bits. Resoluciones

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Prensa (periodicos, revistas,

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

Diferentes resoluciones, generalmente entre 300 ppp y 600 ppp

Suele emplear imgenes de 800-1500 dpp y mayores

Es necesario saber la lineatura de impresin, pues la resolucin

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Dimensiones de una imagen de mapa de bits

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Si disminuimos la resolucin de la imagen, la anchura y la altura aumentarn.

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

Color y mapas de bits

1 bit por pixel

Arte Lineal (B&N). Modo Mapa de Bits

4 bits por pixel

Modo Escala de Grises

8 bits por pixel

Modo Escala de Grises. Modo Color Indexado. Cantidad

Curso prctico de diseo web Parte IV: http://www.desarrolloweb.com/manuales/47/

Tu mejor ayuda para aprender a hacer webs

16 bits por pixel

24 bits por pixel