Texto 3

Tecsup
Virtu@l
Conceptos
de Diseo
grfico y
Fireworks
Conceptos de diseo grfico y Fireworks Tecsup
INDICE
1. Introduccin ................................................................................ 3
2. Objetivos ..................................................................................... 3
3. Caractersticas de la imagen........................................................ 3
3.1. Resolucin....................................................................... 3
3.2. Pxel................................................................................. 3
3.3. Profundidad del color ...................................................... 4
3.4. Filtros .............................................................................. 5
3.5. El estndar RGB.............................................................. 5
4. Tipos de imgenes....................................................................... 5
4.1. Imgenes de tipo Bitmap................................................. 5
4.2. Imgenes de tipo vectorial............................................... 7
5. Formatos de imgenes................................................................ 9
5.1. JPG .................................................................................. 9
5.2. GIF ................................................................................ 10
5.3. BMP .............................................................................. 11
5.4. PNG............................................................................... 11
5.5. Imgenes fotogrficas ................................................... 12
5.6. Imgenes renderizadas .................................................. 12
5.7. Imgenes sencillas......................................................... 13
6. Imgenes de fondo .................................................................... 13
6.1. Limite el tamao total de todas las imgenes................ 14
6.2. Opcin de carga progresiva........................................... 14
6.3. Use la misma imagen tantas veces como le sea posible 14
6.4. Realice pruebas ............................................................. 14
6.5. El banner ....................................................................... 14
7. Digitalizacin de imgenes ....................................................... 15
7.1. Proceso de escaneado.................................................... 16
8. Editores de imgenes................................................................. 16
8.1. Programas editores ........................................................ 16
9. Fireworks................................................................................... 17
9.1. Entorno de trabajo de Fireworks ................................... 18
9.2. Dibujo de formas........................................................... 23
9.3. Otras herramientas de trazado ....................................... 24
9.4. Edicin y remodelado de trazados editando los puntos 25
9.5. Edicin y remodelado de imgenes............................... 26
9.6. Importar imgenes......................................................... 26
9.7. Filtros o efectos ............................................................. 27
9.8. Optimizacin y exportacin de grficos simples .......... 29
9.9. Enmascaramiento de imgenes ..................................... 30
9.10. Gif animados ................................................................. 31
9.11. Creacin y organizacin de capas ................................. 34
10. Glosario ..................................................................................... 36
11. Referencias Bibliogrficas ........................................................ 37
2
Tecsup Conceptos de diseo grfico y Fireworks
1. Introduccin
Al crear pginas Web necesitaremos muchas veces crear o

modificar imgenes, por ello en esta unidad estudiaremos las
caractersticas principales de una imagen, los tipos y formatos de
una imagen. Y principalmente utilizaremos el programa
Fireworks que nos permitir modificar y crear imgenes.
2. Objetivos
Dominar los conceptos fundamentales del diseo grfico.

Manejar las herramientas de diseo Web y adquirir los
conocimientos necesarios para desarrollar un sitio Web.
Reconocer todos los parmetros de modalidad, formatos,
colores.
Utilizar las herramientas principales del Fireworks.
3. Caractersticas de la imagen
3.1. Resolucin
Se refiere a la nitidez y calidad de una imagen. El trmino

es mayormente usado al describir monitores, impresoras e
imgenes grficas. En el caso de las impresoras, la
resolucin indica el nmero de puntos por pulgada. Por
ejemplo, una impresora de 300 dpi (puntos por pulgada)
es aqulla que es capaz de imprimir 300 puntos distintos
en una pulgada.
Teniendo en cuenta la
Para los monitores grficos, la resolucin de la pantalla resolucin de la
significa el nmero de puntos (pxeles) en toda la pantalla. imagen y la resolucin
Por ejemplo, una resolucin de 640 x 480 es capaz de de la pantalla en la que
mostrar 640 puntos distintos en cada una de las 480 lneas. vemos la imagen, nos
podemos hacer una
Las impresoras, monitores y escneres a menudo se idea de cmo se ver
clasifican en alta resolucin, mediana resolucin y nuestra imagen de
baja resolucin, cuyos rangos actuales de cada uno de grande.
estos grados estn en constante cambio de acuerdo con los
avances tecnolgicos.
3.2. Pxel
Un pxel es el elemento ms pequeo que se puede

mostrar y que su conjunto hace que las imgenes se vean a
travs de un monitor o televisor. Una imagen tpica
contiene millones de pxeles. En imgenes basadas en
bitmap, a mayor cantidad de pxeles en una imagen,
mayor es su resolucin.
3
Este ejemplo es un icono de

una computadora con
dimensiones originales de
32x32 pxeles. La imagen ms
grande muestra el icono
aumentado en un 500%, de
esta forma usted puede ver
claramente los pxeles en la
imagen. Un pxel nico se
indica en un marco en la
esquina superior derecha.
3.3. Profundidad del color
Es el nmero de colores que "coexisten" en la imagen. No

existen normas fijas, dependiendo de la imagen ser
suficiente con 16 colores (dibujos sencillos), y en otras
necesitaremos ms (por ejemplo en fotografas).
Hay dos formas equivalentes de referirse al nmero de

colores, se puede decir el nmero de colores que coexisten
o se puede decir el nmero de "bits por pxel" (quiere decir
el nmero de bits que se necesitarn para almacenar cada
uno de los pxeles que forman la imagen). Por norma
general, el nmero de colores es igual a dos elevado a los
"bits por pxel".
No se puede elegir un Nmero de colores Bits por pixel Comentario

nmero de colores 2 1 bit Monocromo
cualquiera, sino que 16 4 bits Modo Escala de Grises
debemos "ajustarnos" 256 8 bits Modo Color Indexado
a unos estndares ya 64 000 16 bits Color de alta densidad
definidos. 16 Millones 24 bits 24 bits de Color Verdadero
4 mil millones 32 bits Modo MCYK
A partir de los 16 millones de colores se le llama "color

verdadero" (True Color) porque el ojo humano es incapaz
de distinguir entre tantas "tonalidades" distintas.
Las imgenes con 256 colores o menos tienen lo que se

Para la mayora de las llama una "paleta de colores", es decir, entre todos los
imgenes la mejor colores que se pueden representar se eligen por ejemplo 16
opcin es la de 256 colores distintos para guardar nuestra imagen. El trabajar
colores. con una paleta de colores as, suele ser incmodo, por lo
tanto normalmente, lo que se hace es disear la imagen en
color de alta densidad o en color verdadero y luego decirle
al programa que "reduzca" los colores usados.
4
3.4. Filtros
Los filtros nos permiten "retocar" las imgenes para

conseguir algunos efectos interesantes. Los hay de varios
tipos, algunos encaminados al retoque fotogrfico
(conseguir imgenes ms claras, ms definidas,
difuminarlas un poco, o por ejemplo darles un toque ms
azulado, etc.).
Otros tipos de filtros consiguen efectos "raros", como por

ejemplo convertir una imagen en "redonda", o darle forma
de "botn", o deformarla, esto lo veremos ms adelante y
lo aplicaremos con el software adjunto.
3.5. El estndar RGB
El RGB es una forma de "denominar" un color, los colores

se dividen en "componentes", y RGB se refiere a esas
componentes (Red, Green, y Blue). Un color cualquiera se
define con la cantidad de rojo, verde y azul que se usa
para componerlo.
En "color verdadero" (el de 24 bits) se usa un byte para

definir cada componente, lo que nos da que cada
componente puede variar entre 0 y 255. As, un rojo
brillante sera RGB (255,0,0), un marrn sera por ejemplo
(100,0,0). Un amarillo se obtiene mezclando componentes
roja y verde RGB (255,255,0) (cuidado aqu, estamos
trabajando con luz, no con "pintura", sabemos que
tradicionalmente el verde es azul y amarillo, pero en luz se
trabaja "al contrario"). Un blanco sera RGB (255,255,255)
y el gris sera (100,100,100), si las tres componentes son
iguales, nos estaremos "moviendo" en la escala de grises,
desde el RGB(0,0,0) que es el negro al blanco.
El conocer este estndar nos puede ser til en algunos

"retoques" que hagamos a fotos, para saber el efecto que
tendr el aumentar determinada componente de todos los
colores de la imagen.
4. Tipos de imgenes
4.1. Imgenes de tipo Bitmap
En el caso del grfico de mapa de bits se tiene una matriz

o rejilla de pxeles y se indica, para cada uno de ellos, si
est coloreado o no.
5
9 pxeles
5 pxeles
En el siguiente ejemplo se
muestra un icono de 32 x
32 pxeles, en otras
palabras hay 32 puntos de
color por pulgada en cada
direccin. Cuando se
combinan estos puntos,
forman una imagen. El
icono que se muestra en la
parte superior izquierda es
el icono en la resolucin de
pantalla normal. Como puede observar, cuando se
agranda la imagen se pierde calidad y en el icono de este
ejemplo ampliado se puede visualizar los cuadrados de
color.
Las imgenes bitmap son dependientes de su resolucin.

La resolucin se refiere al nmero de pxeles en una
imagen y es usualmente medido como DPI (dots per inch
puntos por pulgada) o PPI (pxeles per inch pxeles por
pulgada). Las imgenes bitmap son mostradas en la
pantalla de su computadora en una resolucin de pantalla:
72 96 ppi. Debido a que la resolucin de los bitmaps es
dependiente, es difcil incrementar o reducir su tamao sin
sacrificar un grado de calidad de imagen.
Cuando usted reduce el tamao de la imagen, su software

elimina pxeles, y cuando usted aumenta el tamao de la
imagen, el software crea nuevos pxeles. Cuando el
software crea nuevos pxeles, el software debe de estimar
los valores de color de los nuevos pxeles basados en los
pxeles de alrededor. Este proceso se denomina
interpolacin.
Formatos de Bitmap
BMP
GIF
JPEG, JPG
6
PNG
PICT (Macintosh)
PCX
TIFF
PSD (Adobe Photoshop)
Programas para edicin de Bitmap
Adobe Photoshop
Corel Photo-Paint
Jasc Paint Shop Pro
Micrografx Picture Publisher
Ulead PhotoImpact
Microsoft Paint o Paint de Windows
Observaciones
Todas las imgenes escaneadas son bitmaps.

Todas las imgenes tomadas de cmaras digitales son
bitmaps.
La conversin entre formatos bitmap son
generalmente tan simples como abrir la imagen a ser
convertida y usar su software. Con el comando Save As
o Guardar como, se puede grabar en otro formato
bitmap que es soportado por su software.
Las imgenes bitmap por s solas no tienen adheridas
el soporte de transparencia. Un par de formatos
especficos nombrados GIF y PNG soportan
transparencia. Adems, la mayora de programas de
edicin soportan transparencia, pero slo cuando la
imagen es guardada en el formato nativo del
programa.
Un error comn es que las reas transparentes de una
imagen se guarden cuando la imagen es guardada o
copiada en otro formato, o copiada y pegada en otro
programa. Esto no funciona as. Sin embargo, hay
tcnicas para ocultar o bloquear reas en un bitmap
que usted tiene la intencin de utilizar en otro
programa.
4.2. Imgenes de tipo vectorial
Las imgenes vectoriales estn realizadas de muchos

objetos individuales y escalables. Estos objetos son
definidos por ecuaciones matemticas, as que ellos
siempre se convierten en la mayor calidad. Los objetos
consisten en lneas, curvas y formas con atributos
editables como color, llenado y lnea de borde.
7
El cambio de atributos de un objeto vectorial no afecta al

objeto en s mismo. Usted puede cambiar libremente a
cualquier nmero, cualquier atributo sin destruir el objeto
bsico. Un objeto puede ser modificado no slo al cambiar
sus atributos, tambin transformando su forma con el uso
de nodos y puntos de control.
El funcionamiento del grfico vectorial se basa en definir

puntos en el plano mediante coordenadas. Para dibujar un
tringulo, bastara con definir las coordenadas de los tres
vrtices y aplicar la
accin de unirlos
por una recta o
lnea.
P1 = (50,10)
P2 = (10,50)
P3 = (50,50)
Si comparamos el espacio de cada imagen, la vectorial

necesitar unos pocos bytes, los suficientes para
almacenar tres coordenadas y tres lneas (y=ax+b).
Debido a que los vectores son escalables, las imgenes

vectoriales se basan en la interdependencia de su
resolucin. Usted puede incrementar o disminuir el
tamao del la imagen vectorial a cualquier grado y sus
lneas se formarn automticamente, tanto en la pantalla
como al momento de imprimirse. Los tipos de letras, por
ejemplo, son objetos de tipo vectorial.
Otra ventaja de las imgenes

vectoriales es que no estn
restringidas a una forma
rectangular como los bitmaps. Los
objetos vectoriales pueden ser
puestos sobre otros objetos, y los
objetos de abajo se mostrarn a
travs de ellos. Veamos el ejemplo
de la figura siguiente:
El vector circular y el bitmap circular parecen ser

exactamente iguales cuando estn sobre un fondo blanco.
Pero cuando el bitmap est sobre otro color, tiene una caja
rectangular alrededor de l, que provienen de los pxeles
blancos de la imagen. Todo lo contrario a la imagen
vectorial, que luce independiente sobre el fondo celeste.
8
La principal desventaja de las imgenes vectoriales, es que

no es un mtodo bueno para producir imagen de fotos
reales. Las imgenes vectoriales son usualmente hechas de
reas slidas de color o gradientes. Pero ellas no pueden
poner una cantidad de tonos continuos de una fotografa.
Debido a ello es porque la mayora de imgenes
vectoriales tienen una apariencia de dibujo de caricatura.
An as las imgenes vectoriales estn continuamente
avanzando, y nosotros podemos hacer infinidad de cosas
con imgenes vectoriales actualmente, que no hubiramos
podido hacer aos atrs. En la actualidad las herramientas
para vectores permiten aplicarse a texturas con bitmaps y
objetos dando una apariencia foto realista y usted puede
crear ahora texturas suaves, con transparencia, formas
irregulares, etc.
Formatos vectoriales comunes
AI (Adobe Illustrator)
CDR (CorelDRAW)
CMX (Corel Exchange)
CGM Computer Graphics Metafile
DRW (Micrografx Draw)
DXF AutoCAD
WMF Windows Metafile
SWF (Flash)
Programas de edicin de dibujo vectorial
Adobe Illustrator
CorelDRAW
Macromedia Freehand
Xara
Serif Dra
Macromedia Flash
5. Formatos de imgenes
5.1. JPG
J-PEG, las iniciales no dicen mucho, indican el grupo de

personas que lo inventaron. Este formato es el ideal para
transformar fotos escaneadas y guardadas en mapas de
bits. Por medio de un proceso algebraico, se decide cules
son las porciones de imagen que son redundantes o
similares al resto y slo se almacenan las principales. Para
nosotros e Internet, la diferencia entre este formato y el
9
BMP es que ocupa menos espacio. Se pierde calidad, pero

es imposible notar la diferencia. No es recomendable
utilizar este formato para imgenes de poca cantidad de
colores y lneas muy finitas, este formato las deforma o las
hace ocupar un poco ms. Este es un ejemplo de imagen
guardada en formato JPG y con diferentes compresiones.
Compresin 20.
Tamao del archivo
12.7 Kb
Compresin 90.
Tamao del archivo
2.93 Kb
Compresin 99.
Tamao del archivo
1.80 Kb
5.2. GIF
Para elegir el tipo de
formato ideal, la regla Este formato almacena de la imagen como mximo 256
general es usar el colores. Es pequeo, pero no es recomendable para fotos,
formato JPEG para para ello est el formato anterior. En este formato se
imgenes de tipo almacenan los dibujos y los dibujos animados y es posible
fotogrficas y usar el definir un color transparente, un color que en una pgina
formato GIF para de Internet no se ve, se confunde con el fondo.
figuras diseadas con
pocos colores.
10
5.3. BMP
Mapa de bits, es el formato que conserva la imagen

original tal cual se ve en pantalla, es decir no pierde
calidad cada vez que se abre o cierra. Sirve sobre todo
cuando se pretende procesar la foto escaneada, como por
ejemplo, trucarla, agregarle un borde o quitarle pedazos.
Su desventaja es que ocupa ms espacio que todos los
dems y no es posible usarlo para Internet. Si se usase
para Internet, las pginas tardaran mucho en cargarse.
5.4. PNG
PNG es el acrnimo de Portable Network Graphics. Fue

diseado para reemplazar al formato GIF por ser este
ltimo, ms simple y menos completo. El objetivo de este
formato es proporcionar un formato de compresin de
imgenes sin prdida para cualquier tipo de imagen. Las
caractersticas de este formato son:
Color indexado hasta 256 colores y True Color hasta 48

bits por pxel.
Mayor compresin que el formato GIF (+10%).
Compresin sin prdida.
Visualizacin progresiva en dos dimensiones.
Canal alfa (transparencia variable).
Deteccin de errores.
No permite animacin.
La especificacin de este formato es de libre distribucin,

adems existe cdigo gratuito para compresin y
descompresin de imgenes en este formato.
11
Como hemos visto, la eleccin que nosotros hacemos

cuando preparamos grficos para una pgina Web puede
dar un gran impacto. Nosotros debemos tener siempre
cuidado de la correcta eleccin del formato de archivo
para una imagen en particular.
La mejor eleccin es la que mantiene el correcto balance de

punto entre la apariencia y el tiempo de carga.
5.5. Imgenes fotogrficas
Imgenes obtenidas a travs de fotografas de personas o

lugares. Para este tipo de imgenes el formato ms
recomendado es el JPEG porque consigue una gran
compresin con una mnima prdida de calidad.
JPG GIF PNG
5.6. Imgenes renderizadas
Este tipo de imgenes son las obtenidas por un programa

de generacin de imgenes sintticas mediante algn
proceso de trazado de rayos o similar. Se caracterizan por
degradados suaves y lneas muy bien definidas.
JPG GIF PNG
12
Para este tipo de imgenes es recomendable usar el

formato PNG. Tenga presente que el formato PNG es el
ms reciente y puede no ser soportado en todos los
navegadores.
Las imgenes renderizadas van cargando poco a poco en

nuestra pantalla. (Slo se notar si el acceso a Internet es
lento)
Instante 1 Instante 2 Instante 3 Instante 4 Instante 5
5.7. Imgenes sencillas

JPG GIF PNG
Con el paso del tiempo
puede que el formato
PNG suplante al GIF
ya que el primero es
ms avanzado, pero
como su uso todava
Para las imgenes sencillas con pocos colores y con formas no est muy extendido
muy delimitadas, el formato ms recomendado es el GIF, recomendamos el
ya que se puede adaptar al nmero de colores de una formato GIF.
imagen.
6. Imgenes de fondo
Cuando use imgenes de fondo use el formato JPEG con alta Evite en lo posible
compresin, aunque la prdida de calidad es notable, tenga en usar imgenes de
cuenta que al ser una imagen de fondo, la persona no presta fondo en sus pginas
prcticamente ninguna atencin a la imagen. Otra recomendacin Web, pero si desea
de utilidad es elegir un color de fondo que se asemeje al color de usar imgenes de
la imagen de fondo, as mientras en esta todava se est cargando fondo elija unas que
la imagen, se puede leer el texto con comodidad. contengan poca
informacin visual, de
manera que el texto se
pueda leer con
facilidad.
13
6.1. Limite el tamao total de todas las imgenes
El tiempo que tarda la pgina en cargarse completamente

es de gran importancia, recuerde que el usuario no va a
esperar ms de 15 segundos a que la pgina termine de
cargarse.
6.2. Opcin de carga progresiva
Esto permite que se pueda visualizar una imagen

incompleta del grfico mientras ste todava se est
cargando. Esta caracterstica en los formatos GIF y PNG se
llama entrelazado y en el formato JPEG se llama
progresivo.
Secuencia de carga progresiva, formato GIF
6.3. Use la misma imagen tantas veces como le sea posible
De esta manera aprovecha la caracterstica que disponen

la mayora de navegadores de almacenar en la cach las
imgenes ya cargadas. Por consiguiente acelerar
notablemente la carga de las pginas.
6.4. Realice pruebas
Las recomendaciones dadas anteriormente no son

indiscutibles, son recomendaciones basadas en la
experiencia. Para algunos casos podran no ser del todo
acertadas, as que le recomendamos que pruebe a grabar
las imgenes en distintos formatos y seleccione el que le
parezca ms adecuado.
6.5. El banner
Es una imagen usada en Internet para hacer publicidad

sobre algo. Anuncio o spot publicitario basado en una
imagen grfica que se muestra al cargar una pgina Web.
14
Impresin
Medida de las veces que un banner es mostrado. Cada vez

que ste es mostrado, se incrementa en uno la impresin.
Ctr (click-through ratio)
Mtodo para medir las veces que un banner es pinchado

respecto a las veces que es visualizado. El CRT es el
nmero de veces que un banner es visualizado dividido
por el nmero de veces que es pinchado. Por ejemplo, si
un banner tiene un CRT de 20:1 indica por cada 20 veces
que el banner es visualizado una vez es pinchado, es decir
el banner es pinchado un 5% de las veces. Cuanto mayor
es este ratio mejor es el banner.
7. Digitalizacin de imgenes Alguna vez has

deseado colocar una
Todos los editores y diseadores de la foto o alguna imagen
Web encuentran siempre algn objeto en una pgina Web?
interesante para transformarlo en una
imagen digital, e incorporarlo a sus
pginas. Pero para esto necesitan
algunas herramientas imprescindibles
para desarrollar sus tareas: Como un
escner o una cmara digital; aunque un
buen hardware es slo una parte de la
ecuacin en la creacin de imgenes listas para
la Web.
Una vez almacenada esta informacin podemos manipular en

algn programa de edicin de imgenes.
Para desarrollar esta tarea, necesitas tambin tener algunos

conocimientos sobre el proceso de digitalizacin, que combinado
con los dispositivos adecuados, te permitir realizar un mejor
trabajo.
Los dispositivos de impresin y fotografa pueden tener millones

de colores y un alto nivel de detalle (300 dpi, puntos por
pulgadas); pero los navegadores y los monitores, medios de
salida de la Web, son bastante ms restrictivos.
Un monitor tpico VGA tiene una pantalla de 640x480 pxeles y

proyecta las imgenes en 72 dpi. Los formatos especficos para
almacenar las imgenes diseadas para la Web, tales como el GIF
y el JPG pueden comprimir imgenes de alta calidad.
15
7.1. Proceso de escaneado
Con la instalacin del escner tendr disponible un

Programa Controlador que ser capaz de tomar del
escner una fotografa y entregarla al programa que lo
requiera. Este punto es importante, no se puede llamar al
Programa Controlador (driver) por s solo, nicamente se
Los nuevos escneres puede desde un programa que lo permita, como un
traen programas que programa de dibujo o cualquier programa que sea capaz
trabajan directamente de recibir fotos para procesarlas. Los programas que slo
con el controlador y procesan fotos por lo general son los OCR (Optical
hacen que el proceso Character Recognition) Reconocimiento ptico de
de escaneado sea ms Caracteres, son programas que buscan en fotos que estn
sencillo para el slo en 'BLANCO O NEGRO' formas que se asemejen a
usuario. letras y lo convierten al formato 'TEXTO' para su posterior
modificacin.
8. Editores de imgenes
Los editores de imgenes son programas que nos permiten

realizar un tratamiento grfico sobre ellas, permitindonos
modificar las caractersticas de las mismas:
Cambio de formato.
Cambio de tamao de la imagen.
Cambio de la resolucin.
Tambin nos permiten realizar algunos efectos especiales. Entres

las funciones ms notables tenemos:
Desenfoques.
Calados.
Texturas.
Distorsiones.
8.1. Programas editores
Existen en el mercado muchos programas editores de

imgenes, entre los cuales podemos mencionar:
Adobe PhotoShop.
FireWorks.
Paint Shop Pro.
Corel Photo Paint.
Lview.
16
9. Fireworks
Fireworks es una aplicacin avanzada capaz de crear grficos

especialmente optimizados y con destino al diseo de pginas
Web dinmicas. El empleo de JavaScript y la exportacin en modo
HTML convierten esta aplicacin en la herramienta indispensable,
tanto del webmaster como del usuario que implemente o quiera
crear su primera pgina Web. Al entrar a Fireworks nos
encontramos ms o menos (puede variar de acuerdo con la
configuracin que le d el usuario o la versin del programa), con
la siguiente pantalla:
Pero an no tenemos un rea de trabajo, que en este caso

llamamos "lienzo" o canvas, as que hacemos clic en Archivo de
Fireworks o vamos al men Archivo > Nuevo, y nos aparece esta
ventana, que sirve para configurar el rea de trabajo:
17
En ella se nos dan las opciones para determinar el ancho (width),

el alto (heigh) del lienzo, la resolucin (que en el caso de diseo
Web, se suele determinar en 72 pxeles) y el sistema de medidas
que queremos utilizar (pxeles, pulgadas o centmetros). Nosotros
utilizaremos pxeles, por ser el sistema ms utilizado en medidas
para diseo Web.
En la misma ventana podemos ver, adems, las opciones para

determinar el color que llevar el "lienzo" o rea de trabajo. Pero
es de notar que, aunque definamos un color determinado, an
nos da la opcin de utilizarlo de color blanco o transparente. Una
vez definidas las propiedades del lienzo, ya estamos listos para
trabajar.
9.1. Entorno de trabajo de Fireworks
En el entorno de trabajo de Fireworks se incluye el panel

Herramientas, el Inspector de propiedades, los mens y
los dems paneles. El panel Herramientas, situado a la
izquierda de la pantalla, contiene varias secciones de
herramientas de distintos grupos, como mapa de bits,
vector y Web. De forma predeterminada, el Inspector de
propiedades aparece en la parte inferior del documento y
al principio muestra las propiedades del mismo. Despus
cambia para mostrar las propiedades de la herramienta o
el objeto seleccionados mientras se trabaja con el
documento. Los paneles estn inicialmente acoplados en
grupos a lo largo de la parte derecha de la pantalla. La
ventana de documento aparece en el centro de la
aplicacin.
Barra de
mens
Ventana del Paneles

Documento
Panel de
herramientas
Inspector de Propiedades
18
Panel de herramientas
El panel Herramientas est organizado en seis categoras:

Seleccionar, Mapa de bits, Vector, Web, Colores y Ver.
En la tabla siguiente podemos observar las herramientas

ms utilizadas.
Herramienta Utilidad
Puntero
Selecciona y mueve trazados en la pantalla.
Seleccionar
detrs Selecciona un objeto situado detrs del objeto
seleccionado.
Selecciona y mueve recuadros en la pantalla,

Subseleccin selecciona un objeto de un grupo o un
smbolo. Muestra los puntos de un trazado y
selecciona puntos.
Herramienta Cambia el tamao de un objeto, ste crece o
19
Escala decrece horizontal o verticalmente o en

ambas direcciones.
Recuadro o
recuadro elptico Activa el modo de edicin de imgenes y
selecciona un rea de pxeles rectangular o
elptica.
Herramienta Con la funcin de recorte pueden eliminarse

recortar porciones innecesarias de un documento. El
lienzo cambia de tamao para ajustarse al
rea que se defina.
Herramienta
exportar rea Exportar rea para exportar una parte de un
documento de Fireworks.
Lazo o lazo
poligonal Activa el modo de edicin de imgenes y
selecciona un rea de pxeles de estilo libre.
Varita mgica Activa el modo de edicin de imgenes y

selecciona un rea formada por pxeles de color
similar.
Lnea
y formas bsicas
Dibuja objetos como trazados que se pueden

editar.
Pluma
Dibuja objetos como trazados que se pueden
editar.
Texto
Crea y edita bloques de texto y abre el editor de
texto.
Lpiz
Dibuja trazos de lpiz de un pxel como trazados de
estilo libre.
Pincel
Dibuja pinceladas como trazados.
Estilo libre
Estira o contrae un trazado seleccionado para
cambiar la forma del mismo.
Remodelar rea Remodela las partes de un trazado seleccionado

que estn incluidas en el cursor "remodelar rea".
Depurador de Modifica las caractersticas de presin y velocidad
20
trazados de un trazado sin modificar su forma.
Cuchillo/borrador En el modo de objetos, esta herramienta se

convierte en Cuchillo. Corta un trazado
seleccionado para crear varios trazados.
Sello
Activa el modo de edicin de imgenes y duplica
partes de un objeto de imagen.
Inspector de propiedades
El Inspector de propiedades es un panel que vara segn el

contexto y que muestra las propiedades de la seleccin
actual, las opciones de la herramienta seleccionada o las
propiedades del documento. De forma predeterminada, el
Inspector de propiedades est acoplado en la parte inferior
del rea de trabajo.
Utilizacin de los paneles
Los paneles son controles flotantes que ayudan a

modificar aspectos de elementos u objetos seleccionados
en el documento. Con los paneles se puede trabajar en
fotogramas, capas, smbolos, muestras de color y otros.
Los paneles pueden arrastrarse por separado, por lo que
es posible agruparlos en funcin de las necesidades
propias.
Algunos paneles pueden aparecer agrupados de forma

predeterminada y otros no. Los siguientes paneles pueden
contener otros paneles:
Activos
Colores
Fotogramas e Historial
Los paneles Optimizar, Edicin de imagen, Capas,

Formas, Propiedades de forma automtica, Informacin,
Comportamientos, Buscar y Alinear no estn agrupados
con otros de manera predeterminada, aunque puede
agruparlos si lo desea. Al agrupar los paneles, todos los
nombres de grupos de los paneles aparecen en la barra de
21
ttulo del grupo de paneles. Sin embargo, tambin puede

asignar cualquier nombre que desee a los grupos de
paneles.
El panel Optimizar permite gestionar los parmetros

que controlan el tamao y el tipo de archivo y trabajar
con la paleta de colores del archivo o la divisin que
vaya a exportarse.
El panel Edicin de imagen incluye las opciones y
herramientas de edicin de imgenes ms utilizadas.
El panel Capas organiza la estructura de un
documento y contiene opciones para crear, eliminar y
manipular capas.
El panel Fotogramas incluye opciones para crear
animaciones.
Para acceder a los El panel Historial incluye una lista de los nuevos
paneles haremos clic comandos que puede deshacer y rehacer de forma
en el men Ventana y rpida. Adems, es posible seleccionar varias acciones
clic en el nombre del y despus guardarlas y volver a usarlas como
panel. Si se mantiene comandos.
la configuracin El panel Formas contiene formas automticas que no
predeterminada el aparecen en el panel Herramientas.
panel se mostrar al El panel Propiedades de forma automtica permite
lado derecho de la realizar cambios en las propiedades de una forma
pantalla. automtica que inserte en un documento.
Si hemos cambiado la El panel Estilos permite almacenar y volver a utilizar
configuracin el panel combinaciones de caractersticas de objetos o elegir un
se mostrar como una estilo entre los almacenados.
pequea ventana. El panel Caracteres especiales permite insertar
caracteres especiales en bloques de texto directamente
en Fireworks con un slo clic.
El panel Biblioteca contiene smbolos grficos, de
botn y de animacin. Es fcil arrastrar instancias de
estos smbolos desde el panel Biblioteca al documento.
Tambin es posible realizar cambios globales en ellas
modificando solamente el smbolo.
El panel URL permite crear bibliotecas que contengan
valores URL utilizados con frecuencia.
El panel Mezclador de colores permite crear colores
nuevos y aadirlos a la paleta de colores del
documento actual o aplicar los objetos seleccionados.
El panel Muestras gestiona la paleta de color del
documento actual.
El panel Informacin proporciona datos sobre las
dimensiones de los objetos seleccionados y las
coordenadas del cursor conforme se mueve por el
lienzo.
22
El panel Comportamientos permite controlar los

comportamientos, que determinan la reaccin que se
produce en las zonas interactivas o las divisiones al
mover el ratn.
El panel Buscar permite buscar y reemplazar
elementos como texto, URL, fuentes y colores en uno o
varios documentos.
El panel Alinear contiene controles para alinear y
distribuir objetos en el lienzo.
9.2. Dibujo de formas
Para dibujar rectngulos redondeados, estrellas, donas,

flechas, conectores u otras formas usaremos el panel de
herramientas y escogeremos la forma deseada, una vez
dibujada podr cambiarle sus propiedades con el Panel
Propiedades de Forma Automtica.
Actividad:
Dibuje un rectngulo redondeado con la herramienta
correspondiente. Luego haga clic a la lengeta
Propiedades de la forma automtica y aparecern estas
opciones.
En esta ventana usted tiene opciones para darle un

determinado ngulo de "redondeado" a las puntas del
rectngulo y para poner el trazo hacia adentro, centrado,
o hacia afuera con respecto al objeto, comprubelo.
Las propiedades de la forma cambiarn para cada tipo de

forma. Por ejemplo al dibujar una estrella tendramos las
siguientes opciones:
23
En este panel podramos cambiar la cantidad de puntas

que tendr la estrella el ratio y la redondez.
9.3. Otras herramientas de trazado
Lpiz: es para Pincel: La Pluma: Sirve

dibujar a mano herramienta Pincel para realizar
alzada. El trazo permite pintar trazados
abierto se finaliza pinceladas de estilo segmento por
normalmente en libre, mientras que segmento. Los
cualquier lugar. El la herramienta nodos
trazo cerrado, se Lpiz dibuja trazos resultantes en
finaliza en el mismo de lpiz de un este trazado,
lugar donde se pxel. poseen subnodos
empez. A la figura que ayudan a la
resultante se le modificacin en
puede dar relleno. la curva de
alguno de esos
segmentos.
Para cambiar los atributos de trazo de los objetos

dibujados, haga clic en el cuadro de color de trazo del
panel Herramientas y luego clic en Opciones del
trazo.
Con esta ventana

podr modificar el
color, estilo, efecto,
puntas y textura.
24
Si desea modificar las opciones de relleno de alguna forma
haga clic en el botn Color de relleno del panel de

herramientas y luego clic a Opciones de rellenos, donde
aparecer lo siguiente
Donde usted
podr escoger el
tipo de relleno a
utilizar, color,
borde y textura.
9.4. Edicin y remodelado de trazados editando los puntos
Un mtodo de dibujar y editar objetos vectoriales en

Fireworks es el de trazar puntos como si se estuviera
dibujando un dibujo de une-los-puntos. Al hacer clic en
cada punto con la herramienta Pluma, Fireworks dibuja
automticamente el trazado del objeto vectorial desde el
ltimo punto colocado con el ratn.
Adems de conectar los puntos con segmentos rectos, la Los puntos nos
herramienta Pluma permite dibujar lo que se conoce como permiten modificar la
curvas Bezier, que son segmentos curvos calculados forma de un objeto.
matemticamente. Cada tipo de punto, ya sea punto de Con los tiradores de
esquina o de curva, determina si las curvas adyacentes son puntos, se puede
lneas rectas o curvas. acentuar o disminuir la
curva de dicho punto.
El tipo de punto y el aspecto curvo o recto de las lneas
adyacentes estn relacionados directamente, los podemos
trazar utilizando la herramienta pluma
Un punto curvo indica que los segmentos

adyacentes son curvos y se mantienen
transiciones suaves y regulares entre
segmentos.
Para trazarlo deberemos de utilizar la
herramienta pluma y arrastrar (clic sostenido)
Un punto de esquina indica que al menos

uno de los segmentos adyacentes es una
lnea recta.
Para trazarlo simplemente haremos clic
donde queramos ubicarlo.
25
Para modificar, mover o seleccionar los puntos

utilizaremos la herramienta Subseleccin
9.5. Edicin y remodelado de imgenes
Las imgenes aparecen seleccionadas por defecto con una

delgada lnea azul. Si queremos cambiar el tamao
conservando las proporciones de la forma, debemos
utilizar la herramienta Escalar.
Al utilizarla, la imagen
aparece seleccionada como
muestra la figura. La imagen
azul es la original, mientras
que el borde punteado que
sobresale muestra el aumento
de tamao que se est
ejecutando, pero note que este
aumento es de modo
proporcional, tanto vertical como horizontalmente,
siempre y cuando los cambios se hagan pinchando en los
En el nico caso en nodos de las esquinas.
que se puede cambiar
tanto el tamao como Otra de las opciones que da
la forma original de las la herramienta de escalar, es
imgenes, es en el de la de girar el objeto. Esto se
las dibujadas mediante consigue cuando se coloca el
las herramientas de Mouse entre dos nodos de la
dibujo, y con la figura, y el cursor adopta la
herramienta forma de una curva de giro.
Subseleccin.
9.6. Importar imgenes
Es posible importar, arrastrar o copiar y pegar en

documentos de Fireworks objetos vectoriales, imgenes de
mapa de bits o texto creados en otras aplicaciones.
Tambin pueden importarse imgenes de cmaras
digitales o escneres.
Para importar una imagen haremos lo siguiente:

Clic en el men Archivo > Importar.
Seleccionar la imagen que se va a importar.
Clic en Aceptar o OK.
Las imgenes se insertan con su tamao y peso original.

En caso que el tamao del lienzo difiera con el de la
26
imagen, podemos arreglar esta diferencia mediante el

men Modificar > Lienzo > Recortar el Lienzo.
En caso que las imgenes deban ser insertadas desde un

Scanner, es aconsejable determinar la resolucin en 200
dpi, y no en 72, como es comn para resolucin Web, ya
que de esta manera se obtiene inicialmente una imagen de
buena calidad, la que despus puede ser optimizada para
Web.
9.7. Filtros o efectos
Los filtros automticos (anteriormente conocidos como

efectos automticos) son mejoras que se pueden aplicar a
objetos vectoriales, imgenes de mapa de bits y texto.
Entre los filtros automticos, se incluyen biseles y relieves,
sombras slidas, sombras difuminadas e iluminados,
ajustar color, desenfocar y perfilar.
Mediante el Inspector de propiedades es posible aplicar

uno o ms filtros automticos a los objetos seleccionados.
Cada vez que se aade un filtro nuevo al objeto, se incluye
en la lista del men emergente Aadir efectos en el Inspector
de propiedades.
Para aadir un filtro haremos clic en el botn

o en el Inspector
de Propiedades.
Cada filtro de la lista
se puede activar o
desactivar utilizando
el visto bueno 9 o X
roja que aparece en la
lista emergente.
Podemos eliminar los
filtros
seleccionndolos y
Donde escogeremos uno o ms tipos de filtro, cada uno de haciendo clic en el
ellos tiene una ventana emergente o un cuadro de dialogo signo menos ( - )
para configurar en detalle cada efecto o filtro.
Ventana emergente del

filtro Bisel Interior
27
Estilos
Otra de las opciones para aplicar
efectos es la de utilizar la "Librera
de estilos" que se activa mediante
el men Ventana > Estilos o desde
el Panel Activos lengeta Estilos.
Fireworks tambin le da la
posibilidad de crear sus propios
estilos e incorporarlos a la lista de
los que ya existen. Para eso debe
partir de una imagen existente a la
que Ud. le haya aplicado los
distintos efectos y estilos que
quiera incorporar.
Actividad:
En un lienzo nuevo dibuje un rectngulo
Aplquele un efecto de su agrado
Seleccionar la imagen. (Observe el punto 1)
Haga clic en el botn Nuevo Estilo de la ventana de
estilos (Observe el punto 2)
Aparecer la ventana de Estilo nuevo, en la que Ud.

podr elegir las propiedades que el nuevo estilo
tomar de su imagen, y el nombre que tendr este
nuevo estilo.
28
9.8. Optimizacin y exportacin de grficos simples
Para la primera parte de este trabajo nos manejamos

bsicamente con dos elementos que nos da Fireworks: las
opciones de Vista previa y las opciones de optimizacin.
Tenemos hasta cuatro opciones de vista previa. De ellas,
elegimos la que nos parezca ms apta como producto
final.
En las opciones de optimizacin tenemos a mano los

formatos en los cuales podemos optimizar la imagen, y
algunas otras que hacen referencia a la calidad que tendr
como resultado final. La combinacin que le demos a estas
opciones es la que definir, en mayor o menor medida,
una imagen de mxima calidad con el menor peso posible.
29
Una vez optimizada la imagen, slo falta exportarla a la

carpeta que tengamos designada para tal efecto. Para eso
vamos a ir al men Archivo > Exportar, o directamente al
botn Exportar de la barra de herramientas Principal, esta
barra quizs se encuentre oculta. Luego seleccionamos la
carpeta donde queremos guardar el archivo, le ponemos
un nombre, y finalmente aceptar.
9.9. Enmascaramiento de imgenes
Las mscaras se crean agrupando dos objetos en un grupo

de mscara. El objeto superior (la mscara) se utiliza para
crear un efecto de recorte sobre el objeto inferior. Puede
utilizar tanto una imagen como un objeto con trazados
como objeto superior de la mscara.
En este caso tenemos los

dos objetos a utilizar:
una elipse, que actuar
de mscara, y la foto o
imagen que queremos
enmascarar.
Tomemos la precaucin de que la

mscara (en este caso, la elipse) est
por sobre el objeto a enmascarar.
Luego hacemos clic en Modificar >
Mscara > Agrupar como mscara.
En este caso, como la mscara era
negra con un degradado radial, la figura tom toda la
escala de grises del color que tena la elipse.
Note que en la parte

central se puede
observar claramente
la imagen y a los
alrededores se
difumina, esto se
debe al degradado
radial de la elipse.
Para este caso, no importa el color de la imagen que vaya a

actuar de mscara (aqu es la elipse) lo que importa es la
tonalidad, porque se encuentra sobre la imagen a
enmascarar, pero note que es lo que pasa cuando esta
misma elipse se halla por debajo del objeto.
30
De ah podemos
concluir que, cuando la
mscara se halla por
debajo del objeto, este
adoptar la gama de
colores que le defina la
mscara. (En este caso
la elipse tenia el color
rojo oscuro).
9.10. Gif animados
Una animacin GIF est formada por una serie de

imgenes fijas que aparecen de forma consecutiva a gran
velocidad, lo que permite percibirlas como una imagen en
movimiento. Al crear una animacin en Fireworks, cada
imagen se sita en un fotograma distinto. A continuacin,
todas las imgenes de una animacin se exportan en un
archivo GIF animado. En Fireworks es posible abrir y
editar animaciones GIF existentes o crear otras nuevas.
Esto implica que para crear un GIF animado debemos
tener, en primera instancia, esa "serie de imgenes fijas"
que lo conformarn, ya sean diseadas por nosotros o
provistas por otros medios. Por ejemplo, tenemos varias
imgenes individuales que simulan la frecuencia de
movimientos que tendr el Gif animado final.
Estas las pegamos, en un lienzo

nuevo, una sobre otra pero
perfectamente centradas.
31
Tendremos cuidando de tener seleccionadas todas las

imgenes superpuestas, vamos al men Ventana >
Fotogramas. En esta ventana veremos que la imagen est
an compuesta por un solo fotograma.
Entonces vamos, en esa

misma ventana, al botn
Distribuir en Fotogramas y
veremos como
automticamente las
imgenes que tenamos en
un solo fotograma, se
distribuyen cada una en un
fotograma distinto.
(Observe la imagen
contigua).
Ahora configuraremos
los "tiempos" de la
Cmo haramos para
animacin. El primer
que un Gif no se repita
aspecto a configurar es
constantemente?
cuntas veces se repetir
el efecto animado. En la
parte inferior de la
ventana Fotogramas,
tenemos el botn que nos
da las opciones de
hacerlo hasta 20 veces,
continuamente (Siempre),
o sin repeticin alguna
(Sin bucle).
Podemos tambin configurar la duracin del tiempo de los

fotogramas, individual o generalmente, haciendo dos
32
veces clic en el nmero que aparece a la derecha de cada

nmero de fotograma. All aparecer un men en donde
podemos configurar el tiempo que durar cada fotograma.
Si queremos configurar la duracin de todos los
fotogramas, simplemente habr que seleccionarlos todos
antes de hacerlo.
Otras opciones de configuracin:

1- Para agregar un fotograma.
2- Para eliminar el/los fotogramas seleccionados.
Al final, para probar el producto final, hacemos clic en el

botn Play, abajo a la derecha, en la ventana del
documento. Y all veremos la animacin en curso.
Con respecto a los efectos que podemos aplicar a los GIF's

animados, slo resta sealar dos cosas:
Los efectos referidos a sombras y texturas, son los

mismos aplicables a cualquier imagen.
Los que estn referidos al movimiento de las imgenes
habr que determinarlos por medio de una
conveniente distribucin en los distintos fotogramas.
33
Con respecto a la optimizacin y exportacin de un GIF

animado:
La exportacin es exactamente igual que en un GIF no
animado, slo que en el mismo proceso de optimizacin
hay que especificar que la exportacin ser como GIF
animado.
9.11. Creacin y organizacin de capas
Las capas dividen los documentos de Fireworks en planos

discretos, como los elementos de una ilustracin que se
dibujan en distintas hojas superpuestas transparentes.
Puede crear todas las capas antes de comenzar a dibujar o

ir aadindolas cuando sea necesario. Tambin puede
reorganizar el orden de apilamiento de las capas o de los
objetos de una sola capa.
Para trabajar con las capas utilizaremos el Panel Capas

podemos visualizarlo desde el men Ventana > Capas.
Por defecto, el lienzo nos aparece

con dos capas: la capa Web, en
donde ubicaremos los objetos de
El hecho de trabajar en zona interactiva; y la capa 1.
capas le dar la
posibilidad de trabajar Los objetos que Ud. vaya
con diversos efectos. dibujando, aparecern por
defecto en la capa 1, pero Ud.
tiene la posibilidad de agregar
ms capas mediante el botn
Agregar capas.
34
Actividad:
En un lienzo nuevo, inserte una foto. Esta aparecer en
una capa independiente de la capa 1. Cree una nueva
capa con el botn Agregar Capas posicinese en la capa
2 haciendo clic sobre ella y dibuje una figura geomtrica
cualquiera y luego colquela sobre la figura.
En el men desplegable que se muestra en la imagen, se

pueden encontrar los efectos disponibles para trabajar
en capas, pero no olvidemos que esto depender del
color de la figura que usemos en la capa que actuar de
mscara.
Si hacemos clic en el ojo correspondiente a cada imagen,

veremos que esta se oculta o se muestra, segn se oculte
o aparezca el ojo. Y la presencia del lpiz junto a alguna
imagen, nos indicar que se est trabajando o que se
tiene seleccionada esa imagen.
35
10. Glosario
BMP El formato BMP (Bit Map) es el formato de las

imgenes en bitmap de Windows. Normalmente, se
caracterizan por ser muy poco eficientes en su uso de
espacio en disco, pero pueden mostrar un buen nivel
de calidad.
GIF Graphics Interchange Format) es un formato grfico

utilizado ampliamente en la World Wide Web, tanto
para imgenes como para animaciones. GIF es un
formato sin prdida de calidad, siempre que partamos
de imgenes de 256 colores o menos. Una imagen de
alta calidad, como una imagen de color verdadero
(profundidad de color de 24 bits o superior) debera
reducir literalmente el nmero de colores mostrados
para adaptarla a este formato, y por lo tanto existira
una prdida de calidad.
JPEG, JPG Joint Photographic Experts Group es un algoritmo

diseado para comprimir imgenes con 24 bits de
profundidad o en escala de grises. JPEG es tambin el
formato de fichero que utiliza este algoritmo para
comprimir imgenes. JPEG slo trata imgenes fijas.
JPEG es un algoritmo de compresin con prdida. Esto
significa que al descomprimir la imagen no obtenemos
exactamente la misma imagen que tenamos antes de la
compresin. Esta prdida de calidad se acumula. Esto
significa que si comprime una imagen y la
descomprime obtendr una calidad de imagen, pero si
vuelve a comprimirla y descomprimirla otra vez
obtendr una perdida mayor. Cada vez que comprima
y descomprima la imagen esta perder algo de calidad.
PCX PiCture eXchange es un formato de imagen digital que

usa la forma simple de la codificacin run-length (un
tipo de compresin sin prdidas). PCX fue desarrollado
por Zsoft Corporation. Fue el formato nativo para el
programa Paintbrush de PC, el cual fue uno de los
primeros programas de grficos populares que
funcionaban bajo DOS en los primeros PCs.
La mayora de los archivos PCX usan una paleta de
color indexada, pero el formato fue ampliado para
permitir imgenes de 24 bits. PCX fue bastante popular
en sistemas bajo DOS o Windows, pero actualmente es
poco comn, siendo en buena parte reemplazado por
formatos con mejor compresin y prestaciones, tal
como el PNG o el JPEG
36
PICT El formato PICT es ampliamente utilizado en los

grficos de Macintosh. Se utiliza como un formato de
archivo para las transferencias de archivos entre
aplicaciones. PICT es especialmente efectivo para
comprimir imgenes que contienen grandes reas de
color slido. La compresin que realiza el formato PICT
no es buena para los canales alpha, que normalmente
contienen grandes superficies de blanco y negro.
PNG Portable Network Graphics es un formato grfico

basado en un algoritmo de compresin sin prdida
para bitmaps no sujeto a patentes. Este formato fue
desarrollado en buena parte para solventar las
deficiencias del formato GIF y permite almacenar
imgenes con una mayor profundidad de color y otros
importantes datos.
PSD PhotoShop Document a que es el Adobe PhotoShop el

sofware que genera dichos archivos. Admite capas,
texto y almacena el estado de edicin o manipulacin
en que puede haber quedado una imagen. Permite
almacenar las imgenes con la calidad ms alta, aunque
a costa del uso de un gran espacio en disco.
TIFF Tagged Image File Format" (formato de archivo de

imgenes con etiquetas) se debe a que los ficheros TIFF
contienen, adems de los datos de la imagen
propiamente dicha, "etiquetas" en las que se archiva
informacin sobre las caractersticas de la imagen, que
sirve para su tratamiento posterior.
11. Referencias Bibliogrficas
Formatos de imgenes
http://www.webestilo.com/guia/graf4.php3
Fireworks
http://www.macromedia.com/go/fw_documentation_es
Glosario
http://ict.udlap.mx/people/raulms/avances/formatos.html
http://es.wikipedia.org/
FIN DE LA UNIDAD
37

Texto 3

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Texto 3

Încărcat de

Drepturi de autor:

Formate disponibile

Tecsup

Al crear pginas Web necesitaremos muchas veces crear o

Dominar los conceptos fundamentales del diseo grfico.

Se refiere a la nitidez y calidad de una imagen. El trmino

Un pxel es el elemento ms pequeo que se puede

Este ejemplo es un icono de

3.3. Profundidad del color

Es el nmero de colores que "coexisten" en la imagen. No

Hay dos formas equivalentes de referirse al nmero de

No se puede elegir un Nmero de colores Bits por pixel Comentario

A partir de los 16 millones de colores se le llama "color

Las imgenes con 256 colores o menos tienen lo que se

Los filtros nos permiten "retocar" las imgenes para

Otros tipos de filtros consiguen efectos "raros", como por

3.5. El estndar RGB

El RGB es una forma de "denominar" un color, los colores

En "color verdadero" (el de 24 bits) se usa un byte para

El conocer este estndar nos puede ser til en algunos

4.1. Imgenes de tipo Bitmap

En el caso del grfico de mapa de bits se tiene una matriz

Las imgenes bitmap son dependientes de su resolucin.

Cuando usted reduce el tamao de la imagen, su software

Programas para edicin de Bitmap

Todas las imgenes escaneadas son bitmaps.

4.2. Imgenes de tipo vectorial

Las imgenes vectoriales estn realizadas de muchos

El cambio de atributos de un objeto vectorial no afecta al

El funcionamiento del grfico vectorial se basa en definir

Si comparamos el espacio de cada imagen, la vectorial

Debido a que los vectores son escalables, las imgenes

Otra ventaja de las imgenes

El vector circular y el bitmap circular parecen ser

La principal desventaja de las imgenes vectoriales, es que

Formatos vectoriales comunes

Programas de edicin de dibujo vectorial

J-PEG, las iniciales no dicen mucho, indican el grupo de

BMP es que ocupa menos espacio. Se pierde calidad, pero

Mapa de bits, es el formato que conserva la imagen

PNG es el acrnimo de Portable Network Graphics. Fue

Color indexado hasta 256 colores y True Color hasta 48

La especificacin de este formato es de libre distribucin,

Como hemos visto, la eleccin que nosotros hacemos

La mejor eleccin es la que mantiene el correcto balance de

5.5. Imgenes fotogrficas

Imgenes obtenidas a travs de fotografas de personas o

5.6. Imgenes renderizadas

Este tipo de imgenes son las obtenidas por un programa

Para este tipo de imgenes es recomendable usar el

Las imgenes renderizadas van cargando poco a poco en

5.7. Imgenes sencillas

6.1. Limite el tamao total de todas las imgenes

El tiempo que tarda la pgina en cargarse completamente

6.2. Opcin de carga progresiva

Esto permite que se pueda visualizar una imagen

Secuencia de carga progresiva, formato GIF

6.3. Use la misma imagen tantas veces como le sea posible

De esta manera aprovecha la caracterstica que disponen

6.4. Realice pruebas

Las recomendaciones dadas anteriormente no son

Es una imagen usada en Internet para hacer publicidad

Medida de las veces que un banner es mostrado. Cada vez

Ctr (click-through ratio)

Mtodo para medir las veces que un banner es pinchado