Post on 05-Jul-2018
8/15/2019 Diseño y Creación de Componentes Gráficos I
1/42
Fundamentación
Adobe Fireworks CS 5 es el aplicativo dedicada al tratamiento de los
dibujos e imágenes mediante herramientas profesionales de diseño y efectos
artísticos especiales.
Esta Unidad proporciona información sobre el tratamiento de dibujos e
imágenes mediante herramientas de pincel, borrador, selección y otras de mapa
de bits. Además se incide sobre la gestión de las operaciones básicas de
movimiento, copia y ajuste de los dibujos como objetos típicos. Finalmente
permite combinar y mostrar lo aprendido en un portal web simple.
Capacidad
El participante al final de esta unidad estará en capacidad de diseñar dibujos y
gestionar imágenes con características profesionales generando diversos banner
para las páginas web.
Contenidos
1.
Entorno Adobe Fireworks.
2. Paneles y Propiedades.
3. Herramientas de mapa de bits.
4. Formato de estilo.
5. Filtros.
UNIDAD
2 GUIA DIDÁCTICA
8/15/2019 Diseño y Creación de Componentes Gráficos I
2/42
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 página 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 fondoo Dimensiones 200x200o Utilizar un fondo oscuro con formas estrella
Aviso1o
Dimensiones 600x200o Utilizar formas e imágenes necesarias para generar un aviso sobre un
producto de SALUD.
Aviso2o Dimensiones 600x200o Utilizar forma e imágenes necesarias para generar un aviso sobre un
producto de DEPORTE.
Aviso3o Dimensiones 600x200o Utilizar forma e imágenes necesarias para generar un aviso sobre un
producto de EDUCACIÓN.
Mostrar todas sus imágenes en formato JPG en una página 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 calificación.
Estrategias Metodológicas
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 teóricos. Si se presenta alguna Duda se puede realizar lecturas
sobre puntos específicos en la sección de Material Complementario.
2.
Actividades a Desarrollar en la Unidad, se encuentran en el apartado de
8/15/2019 Diseño y Creación de Componentes Gráficos I
3/42
P á g i n a | 3
Actividades, donde constan: las consignas o indicaciones.
cuerde que el Aula Virtual de la UCV, se empleará como medio de comunicación
entre el docente y los estudiantes, para efectos de mensajería interna, foros,
evaluaciones virtuales, acciones de tutoría académica y comunicación de
resultados de evaluación de los aprendizajes.
Evaluación
En esta Unidad Ud., será evaluado en:
1.
Crear lienzos con fondos de color u objetos de cubierta.
2.
Diseño de dibujos y edición de imágenes.
3. Aplicación de efectos, filtros y formatos especiales en los objetos.
4. Integración de los componentes creados en una página web.
importante que Ud., este en constante comunicación con su docente Tutor, ya
sea para informar de dificultades, avances de las tareas, etc. Recuerde que será
calificado de acuerdo a las rúbricas de evaluación 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/
mailto:cisvirtual@ucv.edu.pemailto:cisvirtual@ucv.edu.pemailto:cisvirtual@ucv.edu.pe
8/15/2019 Diseño y Creación de Componentes Gráficos I
4/42
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
UNIDAD
2 DISEÑO Y CREACIÓN DE COMPONENTES
GRÁFICOS I
mailto:cisvirtual@ucv.edu.pemailto:cisvirtual@ucv.edu.pemailto:cisvirtual@ucv.edu.pe
8/15/2019 Diseño y Creación de Componentes Gráficos I
5/42
P á g i n a | 5
Introducción
Estimado participante:
En esta oportunidad le damos la bienvenida a esta nueva unidad de
aprendizaje, donde aprenderá los fundamentos necesarios para el tratamiento de
imágenes de mapas de bits en generación de logos y banners que le servirá en
diferentes circunstancias de su vida profesional.
Fireworks es una aplicación de la suite Adobe que se encarga del
tratamiento de las imágenes 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 descripción del entorno, el uso básico de las
herramientas de mapa de bits, formatos y estilos de objeto que permitirán
mejorar la presentación de una página con un fondo, logo y banners fijos -
animados. Los trabajos serán usados en la unidad siguiente.
Te deseamos éxitos en el desarrollo de esta Unidad.
Importante:
Si deseas investigar más sobre los beneficios que ofrece Fireworks, podrás encontrarmaterial adicional en los enlaces web de las referencias.
!
8/15/2019 Diseño y Creación de Componentes Gráficos I
6/42
P á g i n a | 6
MEJORANDO LA CALIDAD DE FOTOGRAFÍAS E IMÁGENES
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 aplicación 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 fijándose que la unidad sea píxeles; clic en Aceptar
8/15/2019 Diseño y Creación de Componentes Gráficos I
7/42
P á g i n a | 7
03. Verificar que el lienzo tiene las dimensiones asignadas y se ve en tamaño real
(100%): clic en lienzo y ver la línea de información.
2. PANELES Y PROPIDADES.
Los paneles son ventanas de control que facilitan la edición de los objetos y se muestran
u ocultan según tenga o no marcado su nombre en las opciones del menú Ventana. Sus
funciones son variadas, pero todas tienen la misión de apoyar la gestión del dibujo.
8/15/2019 Diseño y Creación de Componentes Gráficos I
8/42
P á g i n a | 8
Ej.
01.
Verificar los paneles que se encuentran activos: clic en menú Ventana y verificar los
que tienen un check.
02. Dejar activo sólo el panel de formas automáticas y arrastrar algunas formas para
generar un dibujo: clic en menú Ventana, clic en los paneles Optimizar, Páginas y
Estilos para dejar de verlos; clic en Formas automáticas.
8/15/2019 Diseño y Creación de Componentes Gráficos I
9/42
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 dimensión (azul), de
estilo (amarillos) y de ejes (distorsión 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.
8/15/2019 Diseño y Creación de Componentes Gráficos I
10/42
P á g i n a | 10
05. Cambiar el color de las agujas y marcas del reloj: clic en menú Ventana, Estilos; clic
en pestaña Paleta de Colores; clic en reloj; clic en categoría RGB y ajustar o escribir
los valores de los colores básicos (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.
8/15/2019 Diseño y Creación de Componentes Gráficos I
11/42
P á g i n a | 11
8/15/2019 Diseño y Creación de Componentes Gráficos I
12/42
P á g i n a | 12
3. HERRAMIENTAS Y PROPIEDADES
Fireworks dispone de herramientas de controles que pueden diseñar o editar dibujos y
fotos de forma directa o mediante el ajuste de sus propiedades. Los controles tienen
distintos propósitos según se trabaje con mapas de bits o vectores. Las herramientas y
propiedades son dos paneles que cargan por defecto, pero su visualización puedecontrolarse desde el menú Ventana.
Ej.
01. Buscar en internet una foto mediana sobre un fondo de nubes: cargar
www.google.com; clic en categoría Imágenes; clic en Mediano; escribir el tema
nubes y clic en buscar; elegir la foto deseada en el reporte para ampliar; botón
derecho en la imagen y clic en Copiar.
http://www.google.com/http://www.google.com/http://www.google.com/
8/15/2019 Diseño y Creación de Componentes Gráficos I
13/42
P á g i n a | 13
02. Crear un nuevo lienzo y verificar que el lienzo tiene el mismo tamaño que la imagen
contenida en la memoria (Ej. 640x427): volver a Fireworks; clic en Archivo, Nuevo;
verificar que tiene la dimensión de la imagen; clic en Aceptar.
8/15/2019 Diseño y Creación de Componentes Gráficos I
14/42
P á g i n a | 14
03. Pegar la foto y recortar en una medida de 600x250: botón derecho en el lienzo, clic
en Pegar; elegir la herramienta recorte y arrastrar sobre la foto para generar un
rectángulo; buscar en las propiedades el ancho (An) y alto (Al) y dejar a la dimensión
solicitada; con el control selección arrastrar y ubicar el rectángulo en la zona
deseada y pulsar ENTER para finalizar el recorte.
8/15/2019 Diseño y Creación de Componentes Gráficos I
15/42
P á g i n a | 15
04.
Ubicar en internet la foto de un personaje famoso y aplicarle recursos de mapa de
bits: cargar www.google.com; clic en categoría Imágenes; clic en Cualquier tamaño;
escribir el nombre de un famoso (ej. Shakira) y clic en Buscar; elegir la foto deseada
en el reporte; botón derecho en la foto y clic en copiar.
http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/
8/15/2019 Diseño y Creación de Componentes Gráficos I
16/42
8/15/2019 Diseño y Creación de Componentes Gráficos I
17/42
P á g i n a | 17
06. Ajustar el tamaño y ubicar apropiadamente: clic en herramienta Puntero y arrastrar
nodos azules (mantener pulsada tecla SHIFT para guardar proporción); 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 diámetro y arrastrar para borrar
8/15/2019 Diseño y Creación de Componentes Gráficos I
18/42
P á g i n a | 18
08.
Agregar un lunar: clic en herramienta pincel; ajustar el tamaño a 3; elegir el color
negro y aplicar borde de 15; luego clic en posición deseada para el lunar.
8/15/2019 Diseño y Creación de Componentes Gráficos I
19/42
P á g i n a | 19
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.
8/15/2019 Diseño y Creación de Componentes Gráficos I
20/42
P á g i n a | 20
10.
Aplicar un efecto iluminado al personaje: activar la foto; ubicar el signo “+” de lapropiedad Filtro; elegir Sombrear e iluminar y clic en Iluminando; elegir un color
blanco y ajustar la dispersión a 10.
4. FORMATO DE ESTILO
Cada objeto insertado en el lienzo tiene propiedades y efectos que mejorarían 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
8/15/2019 Diseño y Creación de Componentes Gráficos I
21/42
P á g i n a | 21
botón Nuevo Estilo; asignar el nombre MiPersonaje; verificar que puede incluirse
otros atributos; clic en Aceptar.
8/15/2019 Diseño y Creación de Componentes Gráficos I
22/42
P á g i n a | 22
02. Verificar que se agrega al Documento actual
03. Agregar otro personaje siguiendo los pasos anteriores: buscar la foto de Chayanne
en Imágenes 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.
8/15/2019 Diseño y Creación de Componentes Gráficos I
23/42
P á g i n a | 23
05.
Verificar que se pudo aplicar cualquier otro estilo de las librerías 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.
8/15/2019 Diseño y Creación de Componentes Gráficos I
24/42
P á g i n a | 24
5. FILTROS
Los filtros son recursos para efectos gráficos sobre los objetos empleados en Fireworks.
Pueden agregarse más de uno y su edición 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 dimensión; pegar la foto sobre el lienzo
http://www.google.com/http://www.google.com/http://www.google.com/
8/15/2019 Diseño y Creación de Componentes Gráficos I
25/42
P á g i n a | 25
8/15/2019 Diseño y Creación de Componentes Gráficos I
26/42
8/15/2019 Diseño y Creación de Componentes Gráficos I
27/42
P á g i n a | 27
Glosario de Términos
Lienzo: El documento de trabajo en un entorno de diseño gráfico y web.
Zoom: Herramienta que permite acercarse y alejarse de un punto.
Panel: Ventana que contiene herramientas con un propósito particular para ayudar en la
gestión de los componentes del dibujo.
RGB: Categoría 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:
Imágen Mapa de Bits - Adobe Fireworks CS4 - YouTubehttp://www.youtube.com/watch?v=tQt7Fx55ZDM 20 Ago. 2011 - 1.28 min. -
Subido por FenixAzulOficial
8/15/2019 Diseño y Creación de Componentes Gráficos I
28/42
8/15/2019 Diseño y Creación de Componentes Gráficos I
29/42
P á g i n a | 29
PRÁCTICA GUIADA
TEMA: DISEÑO Y CREACIÓN DE COMPONENTES GRÁFICOS I
ENUNCIADO:
En la Práctica que se muestra a continuación, usted podrá aplicar los contenidos
desarrollados en la Unidad 02, para ello deberá crear una carpeta raíz (PRACTICA02) en
donde guardará todos los archivos de Fireworks que se elaborarán. En la carpeta raíz
también se grabará la página 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.
PRÁCTICA:
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 píxeles y Altura= 300. Aceptar
8/15/2019 Diseño y Creación de Componentes Gráficos I
30/42
P á g i n a | 30
03. Utilizando la forma automática Engranaje, crear un mosaico de objetos: menú Ventana,
clic en Formas automáticas, arrastrar la forma Engranaje y soltar sobre el lienzo.
8/15/2019 Diseño y Creación de Componentes Gráficos I
31/42
P á g i n a | 31
04. Ajustar su borde a 1, el número de engranajes a 20 y copiar/pegar con distintostamaños: herramienta Puntero y arrastrar el nodo Engranajes hasta llegar a 20; CTRL+Cpara copiar, CTRL+V para pegar; herramienta Escala y arrastrar sus nodos para reducir
tamaño. Repetir hasta completar.
8/15/2019 Diseño y Creación de Componentes Gráficos I
32/42
P á g i n a | 32
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 comonombre FONDO. Menú Ventana, Optimizar y elegir JPEG Calidad Superior. MenúArchivo, Exportar; asignar el nombre TAPIZ y clic en Guardar.
8/15/2019 Diseño y Creación de Componentes Gráficos I
33/42
8/15/2019 Diseño y Creación de Componentes Gráficos I
34/42
P á g i n a | 34
06. Cerrar el trabajo actual y crear un nuevo lienzo de 500x150: menú Archivo, Cerrar; menúArchivo, Nuevo; definir la anchura= 500 píxeles y altura=150 píxeles. Clic en Aceptar.
8/15/2019 Diseño y Creación de Componentes Gráficos I
35/42
P á g i n a | 35
07. Cubrir el lienzo con un rectángulo de fondo degradado: herramienta Rectángulo,arrastrar para dibujar, ubicar en las propiedades el tipo Degradado, Satén; herramientaPuntero, abrir la ventana de color y ajustar los colores a partir de sus crayolas, clic enrectángulo para ver sus ejes de ajuste, arrastrar y dejar como se indica.
8/15/2019 Diseño y Creación de Componentes Gráficos I
36/42
P á g i n a | 36
08.
Buscar en internet la foto de un robot y pegar sobre el lienzo sin impurezas: cargarwww.google.com; escribir pez robot, clic para ver original, botón derecho Copiar; volvera Fireworks y pegar. Clic en herramienta borrador y arrastrar sobre los contornos.
http://www.google.com/http://www.google.com/http://www.google.com/
8/15/2019 Diseño y Creación de Componentes Gráficos I
37/42
P á g i n a | 37
09.
Realizar copiar y agregar un texto alusivo: clic en la herramienta Puntero, arrastrar susnodos para reducir el tamaño, clic en la imagen, copiar pulsando fijo la tecla ALT yarrastrar sucesivamente (simular un cardumen), clic en herramienta Texto, ubicarpropiedades y cambiar tipo de letra a Brush Script, Tamaño 40 y color rojo, clic en lienzoy 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ú VentanaOptimizar; elegir la opción JPEG Calidad Superior; menú Archivo, Exportar; asignar elnombre AVISO. Clic en Aceptar.
8/15/2019 Diseño y Creación de Componentes Gráficos I
38/42
P á g i n a | 38
8/15/2019 Diseño y Creación de Componentes Gráficos I
39/42
8/15/2019 Diseño y Creación de Componentes Gráficos I
40/42
P á g i n a | 40
12.
Aplicar el archivo TAPIZ como fondo y el archivo AVISO como imagen: menú Modificar yclic en Propiedades de la Página; ubicar y clic en botón Examinar; seleccionar TAPIZ yAceptar (x2). Pulsar ENTER dos veces, centrar el cursor. Menú Insertar, Imagen y
seleccionar el archivo AVISO. Aceptar(x2).
8/15/2019 Diseño y Creación de Componentes Gráficos I
41/42
P á g i n a | 41
8/15/2019 Diseño y Creación de Componentes Gráficos I
42/42