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 y Propiedades.
4. Formatos de estilos.



UNIDAD

3
GUIA DIDCTICA

P g i n a | 2

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.

P g i n a | 3

2. Actividades a Desarrollar en la Unidad, se encuentran en el apartado de
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 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
A continuacin se te presentan algunos enlaces donde encontrars informacin
complementaria para ampliar y profundizar tus conocimientos.
Manual de Firewoks CS5.pdf
Video:
principos_basicos_fireworks



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












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






http://www.ucv.edu.pe/cis/
cis@ucv.edu.pe
UNIDAD
3
Edicin de Imgenes con Fireworks







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

P g i n a | 6


DISEO Y CREACIN DE COMPONENTES PARA LA WEB I:
FIREWORKS HERRAMIENTAS DE MAPA DE BITS

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

P g i n a | 7


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.



Consulta el siguiente material para incrementar tus
conocimientos:
Manual de Firewoks Cs5
!

P g i n a | 8



.- PANELES Y PROPIEDADES.
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.
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.

P g i n a | 9



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.


P g i n a | 10


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.

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)

P g i n a | 11



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





P g i n a | 13


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


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

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



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


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



P g i n a | 18

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



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


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


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.


.- FORMATOS DE ESTILOS
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

P g i n a | 22

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




P g i n a | 23

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





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







Afianza tus conocimientos con el siguiente Video:
principos_basicos_fireworks





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.

P g i n a | 26

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


Prctica Desarrollada

01. Crear una carpeta de trabajo en la unidad deseada con el nombre
PRACTICA03.
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 | 28



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.



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



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





P g i n a | 31





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



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





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







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.

P g i n a | 35





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





P g i n a | 37



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



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









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







P g i n a | 41


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







Prctica de Reforzamiento
Con la presente prctica, el alumno podr reforzar sus conocimientos en la
creacin y edicin de blogs.

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


UNIDAD
3

P g i n a | 43

CONSIGNA:
1) Cargar Adobe Fireworks.
2) Definir las dimensiones solicitadas.
3) Utilizar formas, fotos y texto apropiadamente.
4) Aplicar efectos de filtros adecuados.
5) Guardar el trabajo y exportar en el formato JPG solicitado.
6) Repetir desde el paso 1 hasta el 5 para cada uno de los productos
restantes.
7) Cargar Adobe Dreamweaver.
8) Guardar la pgina con el nombre de index
9) Utilizar el men Modificar para la imagen de fondo y el men Insertar
para los componentes de imagen.

RBRICA DE EVALUACIN
CRITERIO
S
Deficiente
(1)
Regular
(2)
Bueno
(3)
Excelente
(4)
Respeta las
dimensione
s del
producto.
No respeta
las medidas.
Respeta
parcialmente
las medidas.
Respeta
generalmente
las medidas.
Respeta todas
las medidas.
Utiliza
formas y
formatos.
No utiliza
formas ni
formatos.
Utiliza
formas y
formatos
muy simples.
Utiliza formas
y formatos
aceptables.
Utiliza formas
y formatos
con estilos
profesionales.
Integra los
component
es en una
pgina
web.
No integra
componentes
.
Insertar solo
la imagen de
fondo.
Inserta los
componentes
solicitados sin
orden.
Inserta los
componentes
solicitados con
orden y estilo.




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