UNIDAD

GUIA DIDCTICA

Fundamentacin
Adobe Fireworks CS 5 es el aplicativo dedicada al tratamiento de los
dibujos e imgenes mediante herramientas profesionales de diseo y efectos
artsticos especiales.
Esta Unidad proporciona informacin sobre el tratamiento de dibujos e
imgenes mediante herramientas de pincel, borrador, seleccin y otras de mapa
de bits. Adems se incide sobre la gestin de las operaciones bsicas de
movimiento, copia y ajuste de los dibujos como objetos tpicos. Finalmente
permite combinar y mostrar lo aprendido en un portal web simple.

Capacidad
El participante al final de esta unidad estar en capacidad de disear dibujos y
gestionar imgenes con caractersticas profesionales generando diversos banner
para las pginas web.

Contenidos
1. Entorno Adobe Fireworks.
2. Paneles y Propiedades.
3. Herramientas de mapa de bits.
4. Formato de estilo.
5. Filtros.

Actividades
Las actividades a desarrollar en la Unidad son:

Asumiendo que la empresa ABC en la cual trabajas necesita publicitar una pgina web que
puedan compartir con sus clientes una lista de AVISOS sobre propuestas novedosas y que
este proyecto est a tu mando. Considere los siguientes productos a desarrollar en
Fireworks:

Imagen de fondo
o Dimensiones 200x200
o Utilizar un fondo oscuro con formas estrella
Aviso1
o Dimensiones 600x200
o Utilizar formas e imgenes necesarias para generar un aviso sobre un
producto de SALUD.
Aviso2
o Dimensiones 600x200
o Utilizar forma e imgenes necesarias para generar un aviso sobre un
producto de DEPORTE.
Aviso3
o Dimensiones 600x200
o Utilizar forma e imgenes necesarias para generar un aviso sobre un
producto de EDUCACIN.

Mostrar todas sus imgenes en formato JPG en una pgina web llamada index.
Utilizar los nombre de los archivo a su criterio.
Comprimir su carpeta de trabajo.
Publicar en su aula virtual o remitir al docente para su calificacin.

Estrategias Metodolgicas
Para desarrollar la presente unidad llevaremos a cabo dos tipos de actividades:
1. Lectura Inicial de Contenidos, la realizaremos de manera ordenada, presenta
los aspectos tericos. Si se presenta alguna Duda se puede realizar lecturas
sobre puntos especficos en la seccin de Material Complementario.
2. Actividades a Desarrollar en la Unidad, se encuentran

en el apartado de

Pgina |2

Actividades, donde constan: las consignas o indicaciones.

Recuerde que el Aula Virtual de la UCV, se emplear como medio de comunicacin
entre el docente y los estudiantes, para efectos de mensajera interna, foros,
evaluaciones virtuales, acciones de tutora acadmica y comunicacin de
resultados de evaluacin de los aprendizajes.

Evaluacin
En esta Unidad Ud., ser evaluado en:
1. Crear lienzos con fondos de color u objetos de cubierta.
2. Diseo de dibujos y edicin de imgenes.
3. Aplicacin de efectos, filtros y formatos especiales en los objetos.
4. Integracin de los componentes creados en una pgina web.
Es importante que Ud., este en constante comunicacin con su docente Tutor, ya
sea para informar de dificultades, avances de las tareas, etc. Recuerde que ser
calificado de acuerdo a las rbricas de evaluacin de cada actividad; por
ejemplo: se le evaluar por la entrega oportuna de sus actividades.

Material Complementario
El material complementario se suministra con la finalidad de ampliar la lectura
de algunos textos y profundizar conocimientos.

cisvirtual@ucv.edu.pe
http://www.ucv.edu.pe/cis/

Pgina |3

UNIDAD
DISEO Y CREACIN DE COMPONENTES
GRFICOS I

Estructura de Contenidos:
1. Entorno Adobe Fireworks.
2. Paneles y Propiedades.
3. Herramientas y Propiedades.
4. Formatos de estilos.
5. Filtros.

http://www.ucv.edu.pe/cis/
cisvirtual@ucv.edu.pe

Introduccin

Estimado participante:

En esta oportunidad le damos la bienvenida a esta nueva unidad de

aprendizaje, donde aprender los fundamentos necesarios para el tratamiento de
imgenes de mapas de bits en generacin de logos y banners que le servir en
diferentes circunstancias de su vida profesional.
Fireworks es una aplicacin de la suite Adobe que se encarga del
tratamiento de las imgenes generadas con dibujos, fotos y vectores. Dispone de
herramientas profesionales de tratamiento de imagen que logran productos de
calidad muy aceptable, sin mucho que envidiar a otras aplicaciones.
Iniciaremos con la descripcin del entorno, el uso bsico de las
herramientas de mapa de bits, formatos y estilos de objeto que permitirn
mejorar la presentacin de una pgina con un fondo, logo y banners fijos animados. Los trabajos sern usados en la unidad siguiente.
Te deseamos xitos en el desarrollo de esta Unidad.

Importante:

Si deseas investigar ms sobre los beneficios que ofrece Fireworks, podrs encontrar
material adicional en los enlaces web de las referencias.

Pgina |5

MEJORANDO LA CALIDAD DE FOTOGRAFAS E IMGENES

CON FIREWORKS

1. ENTORNO ADOBE FIREWORKS

Es similar en toda la suite Adobe, pero Fireworks dispone de una barra de herramientas
que le permite construir o editar los objetos que forman el dibujo. Puede utilizar paneles
para un mejor control de los objetos as como su barra de propiedades que le facilitar
ajustar los valores de cada componente.
Ej.
01. Cargar la aplicacin Fireworks: clic en inicio, programas, Adobe Design Premiun CS5,
Adobe Fireworks CS5

02. Definir un nuevo archivo para crear un logo de 250x250: clic en Archivo, Nuevo;
Escribir 250 en Anchura y Altura fijndose que la unidad sea pxeles; clic en Aceptar

Pgina |6

03. Verificar que el lienzo tiene las dimensiones asignadas y se ve en tamao real
(100%): clic en lienzo y ver la lnea de informacin.

2. PANELES Y PROPIDADES.
Los paneles son ventanas de control que facilitan la edicin de los objetos y se muestran
u ocultan segn tenga o no marcado su nombre en las opciones del men Ventana. Sus
funciones son variadas, pero todas tienen la misin de apoyar la gestin del dibujo.

Pgina |7

Ej.
01. Verificar los paneles que se encuentran activos: clic en men Ventana y verificar los
que tienen un check.

02. Dejar activo slo el panel de formas automticas y arrastrar algunas formas para
generar un dibujo: clic en men Ventana, clic en los paneles Optimizar, Pginas y
Estilos para dejar de verlos; clic en Formas automticas.

Pgina |8

03. Arrastrar forma deseada y soltar sobre el lienzo para generar un dibujo: arrastrar
Marco y soltar sobre el centro del lienzo. Arrastrar sus nodos de dimensin (azul), de
estilo (amarillos) y de ejes (distorsin y enfoque) a su gusto.

04. Arrastrar un reloj y arrastrar sus nodos a su gusto: clic en nodo amarillo izquierdo
para cambiar de marcas; arrastrar nodos amarillo en los extremos de las agujas para
mover.

Pgina |9

05. Cambiar el color de las agujas y marcas del reloj: clic en men Ventana, Estilos; clic
en pestaa Paleta de Colores; clic en reloj; clic en categora RGB y ajustar o escribir
los valores de los colores bsicos (Red, Green, Blue)

06. Guardar el trabajo en una carpeta Unidad03 con el nombre logo: clic en men
Archivo, Guardar; elegir la unidad D: y crear una carpeta nueva; asignar nombre
Unidad03; abrir esa carpeta y asignar nombre logo al archivo. Clic en Guardar.

P g i n a | 10

P g i n a | 11

3. HERRAMIENTAS Y PROPIEDADES
Fireworks dispone de herramientas de controles que pueden disear o editar dibujos y
fotos de forma directa o mediante el ajuste de sus propiedades. Los controles tienen
distintos propsitos segn se trabaje con mapas de bits o vectores. Las herramientas y
propiedades son dos paneles que cargan por defecto, pero su visualizacin puede
controlarse desde el men Ventana.
Ej.
01. Buscar en internet una foto mediana sobre un fondo de nubes: cargar
www.google.com; clic en categora Imgenes; clic en Mediano; escribir el tema
nubes y clic en buscar; elegir la foto deseada en el reporte para ampliar; botn
derecho en la imagen y clic en Copiar.

P g i n a | 12

02. Crear un nuevo lienzo y verificar que el lienzo tiene el mismo tamao que la imagen
contenida en la memoria (Ej. 640x427): volver a Fireworks; clic en Archivo, Nuevo;
verificar que tiene la dimensin de la imagen; clic en Aceptar.

P g i n a | 13

03. Pegar la foto y recortar en una medida de 600x250: botn derecho en el lienzo, clic
en Pegar; elegir la herramienta recorte y arrastrar sobre la foto para generar un
rectngulo; buscar en las propiedades el ancho (An) y alto (Al) y dejar a la dimensin
solicitada; con el control seleccin arrastrar y ubicar el rectngulo en la zona
deseada y pulsar ENTER para finalizar el recorte.

P g i n a | 14

04. Ubicar en internet la foto de un personaje famoso y aplicarle recursos de mapa de

bits: cargar www.google.com; clic en categora Imgenes; clic en Cualquier tamao;
escribir el nombre de un famoso (ej. Shakira) y clic en Buscar; elegir la foto deseada
en el reporte; botn derecho en la foto y clic en copiar.

P g i n a | 15

05. Pegar la foto sobre el lienzo: botn derecho fuera del lienzo y clic en Pegar

P g i n a | 16

06. Ajustar el tamao y ubicar apropiadamente: clic en herramienta Puntero y arrastrar

nodos azules (mantener pulsada tecla SHIFT para guardar proporcin); arrastrar
hacia la izquierda tratando de no comprometer sus brazos faltantes.

07. Limpiar las impurezas y dejar solo la imagen del personaje: activar la imagen (nodos
azules) utilizando herramienta puntero; acercarse al 200% con zoom; clic en
herramienta borrador; definir el dimetro y arrastrar para borrar

P g i n a | 17

08. Agregar un lunar: clic en herramienta pincel; ajustar el tamao a 3; elegir el color
negro y aplicar borde de 15; luego clic en posicin deseada para el lunar.

P g i n a | 18

09. Aplicar efectos de brillo y color: activar la imagen (que se vean los nodos azules);
ubicar el signo + en la propiedad Filtro; clic en signo y elegir efecto Ajustar color,
Brillo/Contraste; ajustar las posiciones de Brillo y Contraste a su gusto. Clic en
Aceptar.

P g i n a | 19

10. Aplicar un efecto iluminado al personaje: activar la foto; ubicar el signo + de la

propiedad Filtro; elegir Sombrear e iluminar y clic en Iluminando; elegir un color
blanco y ajustar la dispersin a 10.

4. FORMATO DE ESTILO
Cada objeto insertado en el lienzo tiene propiedades y efectos que mejoraran su
apariencia mediante los paneles o propiedades. Cuando se desea ahorrar el tiempo para
aplicar varios efectos y/o varios formatos es recomendable crear sus estilos para usarlos
con otros objetos. El panel de estilos se controla desde el men Ventana.
Ej.
01. Guardar los efectos aplicados a la imagen con un nombre MiPersonaje: clic en men
Ventana, Estilos; seleccionar la foto ya que es el objeto que tiene los efectos; clic en

P g i n a | 20

botn Nuevo Estilo; asignar el nombre MiPersonaje; verificar que puede incluirse
otros atributos; clic en Aceptar.

P g i n a | 21

02. Verificar que se agrega al Documento actual

03. Agregar otro personaje siguiendo los pasos anteriores: buscar la foto de Chayanne
en Imgenes google; limpiar impurezas.

04. Aplicar el estilo a nuevo objeto: activar la foto (ver nodos azules); visualizar la
ventana de Estilos y clic en estilo MiPersonaje; verificar que se le aplican los mismos
efectos.

P g i n a | 22

05. Verificar que se pudo aplicar cualquier otro estilo de las libreras disponibles: clic en
la lista de estilos y elegir Estilos de Madera; clic en Wood 007.

06. Guardar el trabajo en la Unidad03 con el nombre banner: clic en men Archivo,
Guardar; ubicar y abrir la carpeta Unidad03; asignar el nombre banner y clic en
Guardar.

P g i n a | 23

5. FILTROS
Los filtros son recursos para efectos grficos sobre los objetos empleados en Fireworks.
Pueden agregarse ms de uno y su edicin se puede realizar desde una lista donde se
agregan los efectos empleados.
Ej. Recuperar una foto de internet y aplicarle algunos retoque con efectos especiales.
01. Descargar desde internet una foto y aplicarle efectos de color: cargar
www.google.com y ubicar una foto; copiar la foto; cargar Adobe Fireworks y crear
un nuevo documento para que herede la dimensin; pegar la foto sobre el lienzo

P g i n a | 24

P g i n a | 25

02. Con la herramienta Puntero hacer clic en la foto; ubicar la propiedad Filtro y clic en
signo + para agregar; elegir de la lista el efecto Ajustar color, Curvas; arrastrar la
lnea formando una flexin y verificar el cambio de colores; Aceptar.

P g i n a | 26

Glosario de Trminos

Lienzo: El documento de trabajo en un entorno de diseo grfico y web.

Zoom: Herramienta que permite acercarse y alejarse de un punto.

Panel: Ventana que contiene herramientas con un propsito particular para ayudar en la
gestin de los componentes del dibujo.

RGB: Categora de color que mezcla 3 colores: Rojo-Verde-Azul (Red-Green-Blue: RGB).

Filtro: Es un efecto especial sobre el objeto que puede ser configurado y removido sin
problemas.

Referencias:
Imgen Mapa de Bits - Adobe Fireworks CS4 - YouTube
http://www.youtube.com/watch?v=tQt7Fx55ZDM 20 Ago. 2011 - 1.28 min. Subido por FenixAzulOficial

P g i n a | 27

AUTOEVALUACIN

Leer las instrucciones y marque la opcin correcta

01. Es la extensin por defectos de los archivos en Fireworks

a) png

b)gif

c)jpg

d)bmp

02. Es una propiedad que hace transparentes a los objetos

a) Opacidad

b) color

c) mscara

d)N.A

03. Es una propiedad que cambia la apariencia de un objeto

a) Filtro

b) nodos

c) lazo

d) Todos

04. Es una ventana con comandos afines ubicados por afinidad

a) Estilo

b) Panel

c) Propiedades

d)N.A

05. Es una seleccin que captura por el color de la imagen

a) lazo poligonal

b) varita mgica

c) recortar

d)N.A

P g i n a | 28

PRCTICA GUIADA
TEMA:

DISEO Y CREACIN DE COMPONENTES GRFICOS I

ENUNCIADO:
En la Prctica que se muestra a continuacin, usted podr aplicar los contenidos
desarrollados en la Unidad 02, para ello deber crear una carpeta raz (PRACTICA02) en
donde guardar todos los archivos de Fireworks que se elaborarn. En la carpeta raz
tambin se grabar la pgina web (index) que contendr los productos terminados de
Fireworks. Para ello, deber realizar diferentes operaciones con los programas utilizados en
esta unidad; haciendo un adecuado uso de las herramientas que contienen.
PRCTICA:
01. Crear una carpeta de trabajo en la unidad deseada con el nombre PRACTICA02.
Ej.

02. Cargar Fireworks y crear un lienzo de 300 x 300: buscar Adobe Fireworks, Crear nuevo
Documento de Fireworks, definir Anchura= 300 pxeles y Altura= 300. Aceptar

P g i n a | 29

03. Utilizando la forma automtica Engranaje, crear un mosaico de objetos: men Ventana,
clic en Formas automticas, arrastrar la forma Engranaje y soltar sobre el lienzo.

P g i n a | 30

04. Ajustar su borde a 1, el nmero de engranajes a 20 y copiar/pegar con distintos

tamaos: herramienta Puntero y arrastrar el nodo Engranajes hasta llegar a 20; CTRL+C
para copiar, CTRL+V para pegar; herramienta Escala y arrastrar sus nodos para reducir
tamao. Repetir hasta completar.

P g i n a | 31

05. Rebajar la opacidad al 20% y guardar el trabajo: men Seleccionar, Seleccionar todo;
ubicar la propiedad Opacidad y reducir a 20%. Men Archivo, Guardar; asignar como
nombre FONDO. Men Ventana, Optimizar y elegir JPEG Calidad Superior. Men
Archivo, Exportar; asignar el nombre TAPIZ y clic en Guardar.

P g i n a | 32

P g i n a | 33

06. Cerrar el trabajo actual y crear un nuevo lienzo de 500x150: men Archivo, Cerrar; men
Archivo, Nuevo; definir la anchura= 500 pxeles y altura=150 pxeles. Clic en Aceptar.

P g i n a | 34

07. Cubrir el lienzo con un rectngulo de fondo degradado: herramienta Rectngulo,

arrastrar para dibujar, ubicar en las propiedades el tipo Degradado, Satn; herramienta
Puntero, abrir la ventana de color y ajustar los colores a partir de sus crayolas, clic en
rectngulo para ver sus ejes de ajuste, arrastrar y dejar como se indica.

P g i n a | 35

08. Buscar en internet la foto de un robot y pegar sobre el lienzo sin impurezas: cargar
www.google.com; escribir pez robot, clic para ver original, botn derecho Copiar; volver
a Fireworks y pegar. Clic en herramienta borrador y arrastrar sobre los contornos.

P g i n a | 36

09. Realizar copiar y agregar un texto alusivo: clic en la herramienta Puntero, arrastrar sus
nodos para reducir el tamao, clic en la imagen, copiar pulsando fijo la tecla ALT y
arrastrar sucesivamente (simular un cardumen), clic en herramienta Texto, ubicar
propiedades y cambiar tipo de letra a Brush Script, Tamao 40 y color rojo, clic en lienzo
y escribir UNA NUEVA ERA.

10. Guardar como CABECERA y exportar en formato JPG como AVISO: men Archivo,
Guardar; ubicar su carpeta de trabajo y asignar el nombre CABECERA; men Ventana
Optimizar; elegir la opcin JPEG Calidad Superior; men Archivo, Exportar; asignar el
nombre AVISO. Clic en Aceptar.

P g i n a | 37

P g i n a | 38

11. Crear una pgina web con el nombre index: ubicar y cargar Adobe Dreamweaver, ubicar
Crear Nuevo y clic en HTML, men Archivo, clic en Guardar y asignar el nombre index.

P g i n a | 39

12. Aplicar el archivo TAPIZ como fondo y el archivo AVISO como imagen: men Modificar y
clic en Propiedades de la Pgina; ubicar y clic en botn Examinar; seleccionar TAPIZ y
Aceptar (x2). Pulsar ENTER dos veces, centrar el cursor. Men Insertar, Imagen y
seleccionar el archivo AVISO. Aceptar(x2).

P g i n a | 40

P g i n a | 41

13. Guardar todos los cambios y exponer en su navegador: men Archivo, Guardar todo;
men Archivo, Vista Previa en el Navegador, IExplore.

P g i n a | 42