1

H Imagenes digitales
H.1 Introduccin
La imagen digital, bien sea generada por el ordenador o bien creada a travs de algn
instrumento de captura, tal como una cmara o un escner, supone la traduccin de los
valores de luminosidad y color a un lenguaje que pueda entender el ordenador y los
perifricos con l relacionados, esto es, un lenguaje digital. La principal ventaja aportada
por este lenguaje es la estabilidad: mientras que la emulsin de una imagen fotogrfica
clsica sufren una degradacin qumica con el paso del tiempo, que repercute en la calidad
de dicha reproduccin, los ceros y unos que componen una imagen digital permanecen
estables, con lo que la imagen no variar a lo largo del tiempo.
Ahora bien, la calidad ofrecida por los procedimientos analgicos actuales sigue siendo
superior, en la mayora de los casos, a la que el estado actual de la tecnologa permite en los
equipos digitales accesibles al gran pblico.
El inters principal que puede suscitar la imagen digital, especialmente cuando nos
planteamos su utilizacin en Internet, proviene de la posibilidad de construir y distribuir
mensajes en los que la incorporacin de imgenes puede enriquecer el contenido de la
informacin sin tener que recurrir a costosas inversiones de equipamiento o reproduccin.
Uno de los entornos en los que la presencia de la imagen puede resultarnos
particularmente til es la elaboracin de documentos HTML para su distribucin a travs
de Internet.
H.2 La imagen en la pantalla del ordenador
Podramos considerar la pantalla del ordenador como un panal formado por celdas
cuadradas. Cada una de esas celdas recibir una determinada estimulacin elctrica de las
partculas de fsforo que la componen que har que presente un color u otro.
Partiendo de esta idea bsica vamos a ver los elementos que condicionan el tipo de
imgenes que aparecen en nuestra pantalla:
Tipo de imagen
Resolucin del monitor
2
H Imagenes digitales
Resolucin de la imagen
Profundidad de color
H.2.1 Tipos de imagen
A grandes rasgos podramos dividir las imgenes digitales en dos grandes grupos:
Imgenes vectoriales, en las que la informacin de cada uno de los puntos se recoge
en forma de ecuacin matemtica que lo relaciona con el resto de los puntos que
forman la imagen. Ofrece la gran ventaja de que la calidad de la imagen no vara al
modificar el tamao, ya que la informacin de cada punto no es absoluta sino
relativa al resto de la imagen. Adems, debido a su definicin matemtica apenas
ocupa espacio, ya que una frmula que represente su forma es suficiente para
representar todos los puntos que la componen. es el tipo adecuado para el diseo de
lnea y figura y no es soportado de forma directa por los programas navegadores de
Internet.
Imgenes de mapa de bits o bitmap que, tal como nos sugiere su nombre se
construyen describiendo cada uno de los puntos que componen la imagen y llevan,
por tanto, informacin acerca de la posicin absoluta y el color de cada uno de ellos.
Podramos decir que cada punto sera la tesela de un mosaico con sus propias
caractersticas. La ventaja que presenta este formato es la posibilidad de recoger una
amplsima gama tonal, por lo que es el tipo adecuado para representar imgenes
captadas de la realidad. A cambio, la variacin de tamao supondr modificaciones
en la calidad, ya que el nmero de celdas que forman la imagen permanece
invariable, por lo que un aumento del tamao hace que el nico recurso posible sea
ampliar el tamao de cada una de ellas. Podemos deducir por lo dicho anteriormente
que su tamao es muy grande, ya que aqu s que tenemos informacin de cada uno
de los puntos que forman la imagen. Dentro de este tipo se encuentran muchos
formatos, algunos de los cuales son soportados directamente por los navegadores,
siendo pues el tipo de imgenes con las que vamos a trabajar en el curso
H.2.2 Resolucin del monitor
A grandes rasgos la resolucin del monitor viene determinada por dos variables:
El tamao de la celda, al que se denomina pitch dot y que en los monitores
actuales es, habitualmente, de 0,28 mm. Dado que la imagen que vemos est
compuesta por puntos adyacentes de diferentes colores, cuanto ms pequeos sean
dichos puntos obtendremos una mayor sensacin de continuidad.
El nmero de puntos que es capaz de enviar a la pantalla la tarjeta grfica del
ordenador. Este parmetro depende de la cantidad de memoria de la que disponga
la tarjeta para hacer los clculos necesarios. Actualmente la resolucin ms habitual
es de 1024 puntos horizontales por 768 puntos verticales, mientras que en los
equipos precedentes se situaba en 800x600 puntos. La variacin del nmero de
3
H.2 La imagen en la pantalla del ordenador
puntos infuir en el tamao relativo de las imgenes dentro de la pantalla, ya que al
ser fijo, la imagen ocupar un fragmento menor o mayor de la superficie de la misma
segn la cantidad total de puntos que se hayan representado en ella.
H.2.3 Resolucin de la imagen
Es un concepto relacionado con el anterior y recurriremos a un ejemplo prctico para
explicarlo. Cuando captamos una imagen con la cmara y la imprimimos comprobamos
que tiene unas dimensiones fsicas. Podemos comprobar que la cmara ha captado la
imagen a una resolucin de 72 puntos por pulgada (72 ppp). Ver Figura H-1.
Figura H-1: Imagen con una resolucin de 72 ppp (izquierda) y de 150 ppp (derecha)
Si a esta imagen le aumentamos la resolucin a 150 ppp conseguiremos varias cosas:
Su tamao en pantalla se habr multiplicado por cuatro al haber aumentado el
nmero al doble el nmero de puntos necesarios para representar cada pulgada de
anchura y de altura. Recordemos que el tamao del punto es una caracterstica fsica
del monitor.
El programa de tratamiento habr tenido que inventarse los puntos necesarios
para llegar a la nueva resolucin. Para ello habr realizado una interpolacin que
consiste en el clculo de cual sera el valor ms probable para intercalar entre dos
puntos que en la imagen original eran adyacentes. Lo ms probable es que esa
interpolacin haya reducido la calidad de la imagen ya que habr sido errnea en
muchas ocasiones.
Habremos aumentado el tamao del archivo que guarda la imagen, ya que ahora
tiene que almacenar mucha ms informacin. Sin embargo, si imprimimos la nueva
imagen observaremos que su tamao en el papel sigue siendo idntico al de la
imagen original.
Sin embargo, si estas imgenes estn situadas en una pgina web, y se imprime la
4
H Imagenes digitales
segunda imagen se imprime mucho ms grande. Sin embargo esto no es una inconsistencia
con lo que se acaba de decir, la justificacin est en que un navegador no es un programa de
tratamiento grfico y slo recoge la informacin referente al nmero de pixels que la
imagen ocupa en pantalla y as lo representa, pero cuando imprime lo que hace realmente
es volcar una copia de los elementos significativos de la pantalla en la impresora.
Como primera recomendacin prctica, si necesitamos presentar en una pgina web
una imagen con un tamao mayor del que ofrece la resolucin de su fichero, es
conveniente utilizar directamente la imagen original y escribir las rdenes necesarias para
que el navegador ample el tamao hasta las dimensiones deseadas. Seguiremos perdiendo
calidad, ya que el navegador aplicar una lupa que pondr de manifiesto los pixels que
forman la imagen, pero se utiliza un fichero de un tamao ms reducido.
Siguiendo este razonamiento, si necesitamos presentar en una pgina web una
imagen con un tamao menor del que ofrece la resolucin de su fichero, si conviene
generar un fichero nuevo para que el fichero, al igual que antes, tambin tenga el tamao
ms pequeo posible.
H.2.4 Profundidad de color
Se llama profundidad de color a la cantidad de colores diferentes que pueden presentarse
en una imagen. Para almacenar esta informacin se asigna un nmero de bits para indicar el
color de cada pixel.
Imaginemos un pixel blanco o negro: slo haran falta dos posiciones para indicar si est
encendido (1) o apagado (0), esto es 1 bit.
Si quisiramos saber el color de un pixel en una imagen de 16 colores necesitaramos
(2
4
)=16 combinaciones diferentes, esto es 4 bits y as sucesivamente. Veamos los bits
necesarios para cada profundidad de color.
La importancia de esta progresin reside en que al aumentar el nmero de colores
posibles en la imagen estamos incrementeando, inevitablemente, el espacio necesario para
almacenarla.
Ms an, cuando capturamos una imagen con un dispositivo que permita elegir
resolucin tal como un escner, solemos pensar que una mayor cantidad de pixels por
pulgada nos permitir obtener una mayor fidelidad con respecto al original, con lo que el
tamao de las imgenes se hace verdaderamente monstruoso.
H.2.5 Formatos grficos en pginas Web
Ya se ha comentado que, hasta el momento, los navegadores WEB soportan de forma
directa algunos formatos de ficheros de mapa de bits. Tambin son capaces de interpretar
Nmero de bits
Combinaciones
posibles
Nmero de colores
8 2
8
256
16 2
16
Aprox 65000
24 2
24
16,7 millones
Tabla H-1: Nmero de colores en funcin del numero de bits
5
H.2 La imagen en la pantalla del ordenador
otro tipo de archivos, tanto de mapa de bits como raster, pero para ello necesitan que se
incorporen a los navegadores algn tipo aadido, los denominados pluggins.
Si el objetivo de nuestras pginas WEB es comunicar informacin y que esta llegue a los
visitantes puede ser un riesgo incluir formatos grficos no estndar. Si lo hacemos as,
obligaremos al visitante a realizar la descarga de los pluggins necesarios para su
visualizacin, corriendo el riesgo de perder su inters y perderlo, y no logremos el objetivo
principal de transmitir la informacin o vender nuestro producto.
Teniendo en cuenta estas consideraciones nos centraremos en los formatos grficos que
comunmente soportan por los navegadores. Estos son los archivos con extensin GIF
(ficheros con extensin .GIF) y JPEG (ficheros con extensin .JPG).
La primera puntualizacin que debemos hacer respecto a las caractersticas de ambos
formatos es que, mientras el formato GIF slo soporta 256 colores, el JPEG puede
presentar 16,7 millones.
En ambos casos se incorporan algoritmos de compresin que hacen que los archivos de
imagen no sean tan grandes como deberan ser si se almacenaran con toda la informacin
para reproducir la imagen con su calidad mxima. Dependiendo de los algoritmos de
compresin cada uno de los formatos se adaptan mejor a un tipo de imgenes como
podemos comprobar a travs de los ejemplos de la Figura H-2.
Figura H-2: Imagen en formatos distintos
Para imgenes de origen fotogrfico la compresin del formato JPEG ofrece resultados
superiores al tratar zonas con matices y conseguir un tamao menor de fichero, mientras
que el formato GIF reduce sensiblemente la calidad, incluso utilizando procedimientos de
optimizacin de la paleta de color. Lo que acabamos de comentar se comprueba fcilmente
en el ejemplo de la Figura H-2, donde con una calidad mucho menor, el archivo guardado
en formato GIF ocupa ms del doble que el guardado como JPG.
Sin embargo, para imgenes generadas por el ordenador, el comportamiento es
similar en cuanto a la calidad de la imagen presentada en pantalla, pero el tamao del
archivo es superior cuando se almacena en formato JPG (ver Figura H-3).
Figura H-3: Imagen en formatos distintos
Adems, el formato GIF ofrece dos interesantes posibilidades:
Podemos hacer que un color, habitualmente el fondo, resulte transparente, con lo
que la imagen parece integrarse sobre el fondo de la pgina.
Fichero GIF (11Kb) Fichero JPG (5Kb)
Fichero GIF (1166 bytes) Fichero JPG (1591 bytes)
6
H Imagenes digitales
Tambin permiten la creacin de animaciones presentando de forma consecutiva
varios archivos GIF, tal como si estuviramos realizando una pelcula de dibujos
animados.
Optar entre uno u otro formato puede ser difcil en algunos momentos y, para mayor
complicacin, hay que tener en cuenta que para ahorrar recursos del sistema, o por falta de
ellos, algunos usuarios configuran la presentacin en pantalla con una profundidad de
color de 8 bits (256 colores), con lo que nuestras maravillosas imgenes de millones de
colores pueden quedar bastante desvirtuadas si no lo hemos avisado previamente.
En el CDROM del curso se ha includo un artculo, en formato PDF, con el nombre
00 Formatos graficos.PDF que explica con mucho detalle los distintos formas y
formatos de guadar informacin grfica digital.
H.2.6 Aplicaciones de tratamiento de imgenes
Como complemento imprescindible para trabajar en el diseo de pginas Web es
necesario emplear alguna herramienta de manejo y manipulacin de imgenes. Dentro del
CDROM del curso se ha incluido el fichero 01 Programas retoque fotografico.pdf
con una comparativa de los distintos programas de manipulacin de imgenes ms
conocidos, tanto gratuitos como de pago.
Dentro de las aplicaciones de uso gratuito, la ms completa se llama Gimp. En el
CDROM del curso se ha incluido el programa de instalacin de la versin en castallano de
Gimp, adems de el manual de usuario en ingls (Users Manual (2 Edition).pdf), y de
dos pginas web con documentacin en castellano adicional (manuales.htm y
documentacion.htm). Este programa es francamente bueno pero, sin ninguna duda,
excesivamente complicado para un usuario no avanzado.
Es numerosas ocasiones nos va a interesar colocar en pginas web un gran nmero de
fotografas en formato digital, para que puedan ser accedidas por personas relacionadas
con nosotros. Por ejemplo, colocar las fotos de algn evento familiar, de algn viaje, etc.
Contruir pginas web con decenas, o incluso centenas, de fotografias puede ser un trabajo
francamente tedioso. Dentro del CDROM del curso se han colocado varios artculos de
revista que explican cmo resolver este problema: 02 Albumes de fotos.pdf, 03 Crea
un album de fotos online.pdf y 04 Webs de fotos.pdf. Su lectura puede ser muy
interesante.
Como complemento muy interesante, tambin se han includo en el CDROM del curso
unos artculos que pueden se de gran utilidad a la hora de manipular imgenes digitales: 05
MiniCurso Retoque fotografico.PDF, 06 MiniCurso Fotografia Digital.PDF y 07
MiniCurso PhotoShop.PDF.
H.3 Paint Shop Pro
Dentro de las aplicaciones de pago, una de las ms conocidas, y de uso ms extendido, es
Paint Shop Pro. En el CDROM del curso se incluye la versin 7 de evaluacin.
Esta versin es shareware y el fabricante permite su utilizacin para la evaluacin
durante un periodo de 30 das. Transcurridos stos, el programa seguir funcionando
aunque mostrar un mensaje recordatorio.
Este captulo NO es, ni pretende ser, un manual completo del programa, sino que
7
H.3 Paint Shop Pro
simplemente trata de explicar algunos procedimientos de gran importancia cuando se
trabaja con imgenes en pginas Web. Dentro del CDROM del curso se han incluido dos
cursos de Paint Shop Pro, en formato HTML, a los que se accede desde la pgina
\Tratamiento imagenes\HTML\Indice.html. donde se pueden encontrar descripciones
detalladas de cmo realizar otras manipulaciones a las imgenes digitales no descritas en
este captulo.
Este documento se ha estructurado en la siguientes partes:
Seccin H.3.1: Instalacin (pgina 7). Describe con mucho detalle todo el proceso
de instalacin del programa, proceso relativamente sencillo al tener que reiniciar el
sistema un par de veces.
Seccin H.4: Ficheros GIF transparentes con Paint Shop Pro (pgina 11). Cuando
necesitemos incluir imgenes que dejen ver el color de la pgina Web, con la
intencin de obtener un efecto visual ms agradable, utilizaremos ficheros en
formato GIF con fondo transparente. En esta seccin se describen dos mtodos de
hacerlo.
Seccin H.5: Capturar imgenes con Paint Shop Pro (pgina 17). Aqu se describe
cmo pasar todo o parte del contenido de la pantalla de nuestro ordenador, en un
instante determinado, a una imagen. Esto es muy til a la hora de realizar manuales
como ste.
Seccin H.6: Compresin de imgenes (pgina 21). Las pginas Web, con todas sus
imgenes, deben viajar por Internet, red que est normalmente muy saturada.
Cualquier esfuerzo por minimizar la cantidad de informacin a transferir, siempre
es pequeo. Un punto crucial en este aspecto consiste en disminuir el tamao de los
ficheros de las imgenes que acompaan los documentos. En esta seccin se aborda
el proceso de compresin y se valoran las limitaciones que tiene.
H.3.1 Instalacin
Para instalar el programa Paint Shop Pro desde el CD-ROM del Curso no se requiere
tener instalado previamente ningn programa adicional. Simplemente hay que ejecutar el
programa de instalacin psp700ev.exe, colocando el ratn encima del dicho fichero,
situado en la carpeta \Graficos\Paint Shop Pro del CD-ROM (Figura H-4), y haciendo
click sobre l dos veces seguidas.
Figura H-4: Ventana con el programa de instalacin
8
H Imagenes digitales
Inmediatamente se empieza a cargar el programa de instalacin (ver Figura H-5). Al
finalizar es posible que solicite reiniciar el sistema. Hacer click sobre el botn Restart y
esperar a que el ordenador arranque de nuevo para que siga automticamente con la
instalacin.
Figura H-5: Ventanas iniciales de la instalacin
Figura H-6: Carga del programa de instalacin
Los pasos que siguen ahora son:
1) Muestra la ventana de la Figura H-6 y despus la ventana de la Figura H-7 con un
mensaje de bienvenida. Hacer click sobre el botn Next> para continuar.
2) Aparece la ventana de la Figura H-8 con las condiciones legales para el uso del
programa. Marcar la opcin I accept the terms in the license agreement y hacer
click sobre el botn Next> para continuar.
Figura H-7: Mensaje de bienvenida
3) A continuacin muestra la ventana de la Figura H-9 donde se nos pide que elijamos
el tipo de instalacin:
Complete: instalacin de todos los componentes del programa.
Custom: el usuario decide qu elementos instala.
9
H.3 Paint Shop Pro
En principio, y si tenemos espacio suficiente en disco, debemos seleccionar
Complete y hacer click sobre el botn Next> para continuar.
Figura H-8: Condiciones de la licencia de uso
4) Si en el punto anterior hemos elegido Custom, al hacer click sobre el botn Next>
se nos muestra la ventana de la Figura H-10 donde, al menos, debemos seleccionar
Paint Shop Pro 7 Application. Despus hacer click sobre el botn Next> para
continuar.
Figura H-9: Tipo de instalacin
Marcar
Seleccionar si
hay espacio de
disco suficiente
Seleccionar si
nohay espacio de
disco suficiente
10
H Imagenes digitales
Figura H-10: Seleccin de componentes a instalar
5) A continuacin aparece la ventana de la Figura H-11 donde se nos informa que la
instalacin ya est preparada para comenzar. Hacer click sobre el botn Install para
continuar.
Figura H-11: La instalacin va a comenzar
6) Una vez finalizado todo el proceso de instalacin, se muestra la ventana de la Figura
H-12. Hacer click sobre el botn Finish para continuar.
Figura H-12: La instalacin ha finalizado
7) Finalmente aparece la ventana de la Figura H-13 donde se nos informa que es
necesario reiniciar el ordenador para que tengan efecto los cambios hechos por el
Instalar
obligatoriamente
No son imprescindibles
11
H.4 Ficheros GIF transparentes con Paint Shop Pro
programa en la configuracin del sistema. Hacer click sobre el botn Yes para
reiniciar el sistema en ese momento.
Figura H-13: Autorizacin para reiniciar el ordenador
Despus de que el ordenador se reinicie, podemos acceder al programa recin instalado
desplegando el men Inicio, seleccionando Programas, Jacs Software y Paint Shop Pro
7 (ver Figura H-14).
Figura H-14: Arrancar el programa
H.4 Ficheros GIF transparentes con Paint Shop Pro
A la hora de utilizar imgenes grficas en nuestras pginas Web, nos encontramos con
que la forma de stas es necesariamente rectangular pero que su contenido muchas veces
no se ajusta a esta forma. La manera de resolver este problema consiste definir el color de
fondo de la imagen como transparente. Por ejemplo, la Figura H-15 tiene dos imgenes
iguales, el escudo de la UNED, pero en la inferior el color de fondo se ha configurado como
transparente, consiguindose un efecto visual muy agradable e integrndo mejor la imagen
en el diseo de la pgina.
Para definir un fichero grfico de estas caractersticas hay que utilizar necesariamente el
formato GIF.
12
H Imagenes digitales
Figura H-15: Ejemplo de Gif normal y Gif transparente
H.4.1 Mtodo 1
Paint Shop Pro proporciona varias formas de crear este tipo de ficheros. Aqu vamos a
ver una de ellas, quizs la ms sencilla de todas, pero que es posible que no llegue a obtener
resultados ptimos, dejando zonas opacas y que, sin embargo, nos interesara ver como
transparentes. Los pasos a seguir son los siguientes:
1) Si tenemos varias imgenes abiertas, seleccionar la ventana de la imagen con la que
vayamos a trabajar.
2) Desplegar el men Colors y seleccionar la opcin Set Palette Transparency... (ver
Figura H-16).
3) Para poder definir un color como transparente, es necesario que la imagen tenga un
mximo de 256 colores. En caso de que nuestra imagen no cumpla esta condicin,
el programa muestra un cuadro de dilogo con un mensaje de advertencia (ver parte
izquierda superior de la Figura H-17). Este cuadro de dilogo tambin propone
reducir l directamente el nmero de colores haciendo click sobre el botn Yes.
Haciendo esto, pasa a mostrar el cuadro de dilogo mostrado en la parte derecha
inferior de la Figura H-17. En principio los valores que propone por defecto son
aceptables, por lo que para continuar hacemos click sobre el botn OK.
Imagen normal
GIF transparente
13
H.4 Ficheros GIF transparentes con Paint Shop Pro
Figura H-16: Seleccin de la opcin para definir el color transparente
Figura H-17: Mensaje de advertencia si la imagen tiene ms de 256 colores
4) En el cuadro de dilogo siguiente (ver Figura H-18) seleccionar la opcin Set the
transparecy value palette entry.
Figura H-18: Mtodo de seleccin del color transparente
5) Moviendo ahora el cursor haca la imagen, veremos como ste toma forma de
cuentagotas (ver Figura H-19). Hacer click sobre un punto que tenga el color que
deseamos hacer transparente.
14
H Imagenes digitales
Figura H-19: Seleccin del color transparente
6) Hacer click sobre el botn OK del cuadro de dilogo de la Figura H-18.
7) Si ahora queremos comprobar la zona que ha sido definida como transparente dentro
de la imagen, desplegamos el men Colors y seleccionamos View palette
transparency. En este momento, la zona transparente aparece como una superficie
cuadriculada (ver Figura H-20).
Figura H-20: Ver la zona transparente de la imagen como superficie a cuadros
A la hora de seleccionar el color transparente es posible que zonas que deseariamos ver
como transparentes no lo sean. Esto es debido a que puede haber, aunque nosotros veamos
un unico color, zonas con ligeras variaciones imperceptibles para el hojo humano. El
Hacer click sobre el
color que interese
hacer transparente
15
H.4 Ficheros GIF transparentes con Paint Shop Pro
resultado es el mostrado en la Figura H-21. Para resolver utilizaremos el Mtodo 2
propuesto en la Seccin H.4.2.
Figura H-21: Comparacin de dos imgenes con zona transparente
H.4.2 Mtodo 2
Este segundo mtodo nos va a permitir solucionar el problema que se menciona al final
de la seccin anterior. Permite, adems de seleccionar un color como transparente, definir
un Factor de tolerancia que indica qu colores cercanos al seleccionado deben ser tambin
considerados como transparentes. Valores pequeos de este factor de tolerancia indica que
los colores deben ser muy cercanos al elegido y, sin embargo, valores grandes hacen que
colores no muy parecidos al elegido tambin sean considerados transparentes.
Este mtodo est compuesto por los siguientes pasos:
1) Primero hay que activar, o hacer aparecer, un nuevo conjunto de botones que en la
configuracin inicial del programa no se muestran. Para ello debemos desplegar el
men View y seleccionar la opcin Toolbars (ver Figura H-22 izquierda). En el
cuadro de dilogo que se muestra, marcar la opcin Web Toolbar y hacer click
sobre el botn Close (ver Figura H-22 derecha).
Hecho esto, observaremos como en el programa aparece el nuevo conjunto de
botones mostrado en la Figura H-23. Sin entrar en excesivos detalles, diremos que
estos botones dan acceso a una serie de utilidades para la manipulacin de imgenes
que vayan a ser incorporadas a pginas Web.
Gif transparente correcto
Gif transparente no correcto
con zonas claras que no
deberan verse.
16
H Imagenes digitales
Figura H-22: Activar la opcin Web Toolbar
Figura H-23: Botones con utilidades para trabajar con imgenes para pginas Web
2) Hacer click sobre el botn de la nueva botonera.
Figura H-24: Definir color transparente y tolerancia
Factor de tolerancia
En cuadros aparece
la zona transparente.
Hacer click sobre el
color que interese
hacer transparente
Seleccionar esta
etiqueta
17
H.5 Capturar imgenes con Paint Shop Pro
3) En el cuadro de dilogo que se muestra (ver Figura H-24), seleccionar la etiqueta
Transparency (est seleccionada por defecto).
4) Marcar la opcin Areas that match this color.
5) Moviendo ahora el cursor haca la imagen, veremos como ste toma forma de
cuentagotas. Hacer click sobre un punto que tenga el color que deseamos hacer
transparente. En la parte superior derecha del cuadro de dilogo con el que estamos
trabajando se muestra la zona transparente como un rea cuadriculada.
6) Si la zona que aparece como transparente no es la deseada, en el cuadro etiquetado
con Tolerance, ir poniendo valores cada vez mayores.
7) Cuando el resultado sea satisfactorio, hacer click sobre el botn OK.
8) Ahora aparece el tpico cuadro de dialogo de Windows para almacenar un fichero.
Seleccionamos la ubicacin y el nombre nuevo fichero GIF, y pulsamos el botn
Guardar.
H.5 Capturar imgenes con Paint Shop Pro
Otra forma de generar imgenes nuevas consiste en capturar partes de la pantalla del
ordenador. Estas imgenes se suelen emplear como ejemplos del manejo de aplicaciones
informticas, tal y como se ha hecho en la elaboracin de este pequeo y resumido manual.
Estas capturas pueden ser del contenido completo de toda la pantalla, de la ventana
activa que est activa en Windows en un instante determinado, del contenido de esta
ventana activa o de los controles de un programa.
H.5.1 Configuracin
Para realizar la captura de imgenes primero hay que realizar un proceso de
configuracin para indicar al programa qu es lo que deseamos capturar as como el
mtodo a utilizar en la captura. Para realizar esta configuracin hay que desplegar el men
File, seleccionar la opcin Screen Capture y seleccionar Setup (ver Figura H-25).
Figura H-25: Men para la captura de partes de la pantalla
Haciendo esto, Paint Shop Pro muestra el cuadro de dilogo de configuracin de la
Figura H-26 donde hay que hacer las siguientes selecciones:
18
H Imagenes digitales
1) Capture: permite definir qu zona de la pantalla es la que se va a capturar. A
continuacin se describe cada una de las posibilidades y se hace referencia a un
ejemplo en cada caso. Para entender mejor los ejemplos, considerar que el contenido
completo de la pantalla es el mostrado en la Figura H-27.
Full screen: captura la pantalla completa (ver Figura H-27).
Area: con el ratn se puede seleccionar la zona de la pantalla que se desea
capturar (ver Figura H-28).
Client Area: captura la zona de entrada de datos de la ventana activa (ver
Figura H-29).
Window: captura completa la ventana activa (ver Figura H-30).
Object: captura una parte de la ventana como puede ser un grupo de botones
de seleccin, etc. (ver Figura H-31).
.
Figura H-26: Configuracin de la captura de imgenes de la pantalla
Figura H-27: Ejemplo de captura de la pantalla completa (Full Screen)
Zona a capturar
Mtodo de activacin
de la captura
Opciones
19
H.5 Capturar imgenes con Paint Shop Pro
Figura H-28: Ejemplo de captura de una rea de la pantalla (Area)
Figura H-29: Ejemplo de captura de la zona de entrada de datos de una ventana (Client Area)
Figura H-30: Ejemplo de captura de una ventana completa
20
H Imagenes digitales
Figura H-31: Ejemplo de captura de un parte de una ventana (Object)
2) Activate capture using. Normalmente, antes de realizar la captura, es necesario
colocar los elementos de la pantalla de alguna forma determinada y, una vez
colocado todo en su sitio, indicar a Paint Shop Pro que inicie el proceso. En este
cuadro vamos a poder definir cundo o cmo se activa la captura.
Right mouse click: la captura se activa cuando se hace click en el botn
derecho del ratn. Esta opcin no es muy recomendable ya que el botn
derecho normalmente se emplea en Windows para abrir los mens
contextuales y, en algn caso, podra crear confusin.
Hot key: la captura se activa al pulsar el botn indicado. Hay que tener
cuidado de no seleccionar teclas que tengan ya asignada alguna accin. Se
aconseja emplear teclas raramente utilizadas como puede ser F11.
Delay timer: la captura se activa despus de transcurrido el tiempo
especificado.
3) Options. Permite definir dos opciones:
Include cursor. Si se activa, en la imagen capturada aparece tambin cursor
en la posicin que tuviera en la pantalla.
Multiple captures. Si se activa esta opcin, cuando se realicen varias
capturas sucesivas no es necesario maximizar la ventana de Paint Shop Pro
cada vez y volver a iniciar el proceso.
H.5.2 Proceso de captura
Una vez que se ha configurado Paint Shop Pro para hacer la captura, veamos cmo se
hara sta. Debemos abrir la aplicacin o ventana que deseamos que aparezca en la captura
y la colocamos en el lugar que creamos ms conveniente. Despus volvemos a la ventana
de Paint Shop Pro y optamos por una de las tres formas de arrancar el proceso de captura:
1) Desplegar el men File, seleccionar la opcin Screen Capture y seleccionar Start.
2) Pulsar en el teclado del ordenador la combinacin de teclas <Shift><C>.
3) Hacer click sobre el botn de la barra de herramientas.
En ese momento, la ventana de Paint Shop Pro se minimiza automticamente y el
ordenador queda a la espera de que se produzca el evento que iniciar el proceso de captura
y que fue definido en el cuadro de dilogo de configuracin visto en la seccin anterior (ver
Figura H-26 en la pgina 18). Recordemos los tres eventos que pueden iniciar la captura:
Hacer click con el botn derecho del ratn.
21
H.6 Compresin de imgenes
Pulsar la tecla definida en la opcin Hot Key.
Esperar a que transcurra el tiempo especificado en Delay Timer.
Posteriormente, dependiendo de la parte de la pantalla que vayamos a capturar y que
hemos seleccionado en la lista Capture del cuadro de dilogo de configuracin (ver Figura
H-26 en la pgina 18), la forma de operar va a ser distinta.
Area: el puntero del ratn pasa a tener forma de cruz. Haciendo click con el ratn
una primera vez queda seleccionada una de las esquinas del rea a capturar y,
haciendo click una segunda vez, queda determinada la esquina opuesta de dicho
rea rectangular.
Full screen. Se captura la pantalla completa.
Window. Se captura el contenido de la ventana activa.
Client area. Se captura la zona de entrada de datos de la ventana activa.
Object. Hay que mover el ratn hasta el objeto a captura y, una vez que este
aparezca seleccionado, hacer click en el ratn.
Si todo funciona correctamente, dentro de Paint Shop Pro debe haber una imagen con el
contenido de la captura realizada. Si no es as, se debe repetir el proceso indicado en este
apartado.
H.6 Compresin de imgenes
Un aspecto fundamental a la hora de incluir imgenes en una pgina Web es el tamao
de los ficheros correspondientes. Si stos son muy grandes, la pgina tardar un tiempo
considerable en cargarse, corriendo el riesgo de que el posible visitante no tenga la
paciencia suficiente y salte a otro lugar.
El formato ms utilizado a la hora colocar imgenes en pginas Web es el llamado JPEG,
correspondiente a los ficheros con extensin JPG. Este formato permite almacenar
imgenes con distintos grados de compresin, es decir, permite que una misma imagen
pueda ser almacenada en ficheros de distinto tamao. Es evidente que la compresin no
sale gratis, tiene un coste que se paga en calidad: a mayor grado de compresin, menor
calidad en la imagen. En la Figura H-32 se muestra un ejemplo donde la imagen original
ocupa 64K, pero con un factor de compresin de 99 tan slo 3K, aunque el nio, en este
ltimo caso, no es reconocible.
La seleccin del factor de compresin de un fichero JPEG se hace a la hora de guardarlo
en el disco. Por ejemplo, supongamos que estamos trabajando con una imagen y decidimos
almacenarla en un fichero del disco. El proceso a seguir sera:
1) Desplegar el men File y seleccionar la opcin Save as....
2) En el cuadro de dilogo que se muestra, adems de tener la tpica informacin de
Windows para poner el nombre al archivo y seleccionar su ubicacin dentro del
disco de nuestro ordenador, tenemos que elegir el tipo de archivo a crear. En nuestro
caso, en el cuadro etiquetado con Guardar como archivos de tipo: vamos a
seleccionar JPEG - JFIF Compliant (*jpg, *jif, *jpeg) (ver Figura H-33).
22
H Imagenes digitales
Figura H-32: Perdida de calidad de una imagen al aumentar el factor de compresin
3) Hacemos click sobre el botn Options....
4) En el cuadro de dilogo que se muestra (ver Figura H-34), moviendo la barra
deslizadora etiquetada con Compression factor se puede seleccionar el factor de
compresin deseado. Para acabar hacer click sobre el botn OK.
5) Hacer click sobre el botn Guardar.
Figura H-33: Cuadro de dilogo de Save as...
Imagen original Factor de compresin 80 Factor de compresin 99
Tamao fichero: 64K Tamao fichero: 6K Tamao fichero: 3K
23
H.6 Compresin de imgenes
Figura H-34: Seleccin del factor de compresin y mtodo de codificado
H.6.1 Codificacin progresiva
A veces en una pgina Web hay imgenes que ocupan un rea muy grande. Si no
hacemos nada especial, al posible visitante le va a ir apareciendo la imagen lentamente de
arriba a abajo, por lo que deber esperar un tiempo, quizs excesivo, para poder valorar su
contenido.
Una alternativa es codificar de forma progresiva la imagen. Al visitante en este caso le
aparecer la imagen completa rpidamente, pero con muy poco detalle y, a medida que
pase el tiempo, la imagen ir mejorando en nitidez. De esta forma, en un tiempo
relativamente corto se puede hacer una idea del contenido de la imagen y de su posible
inters por ella.
Para generar un fichero de estas caractersticas, simplemente hay que marcar la opcin
Progressive encoding en el cuadro de dilogo de la Figura H-34, que ya utilizamos en la
seccin anterior para definir el factor de compresin.