diseño y creación de componentes gráficos i

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


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


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.

[email protected]

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

mailto:[email protected]:[email protected]:[email protected]


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/

[email protected]

UNIDAD

2 DISEÑO Y CREACIÓN DE COMPONENTES

GRÁFICOS I

mailto:[email protected]:[email protected]:[email protected]


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.

!


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


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


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.


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.


11/42

P á g i n a | 11


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/


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.


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.


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/


16/42


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


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.


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.


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


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.


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.


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.


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



25/42

P á g i n a | 25


26/42


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


28/42


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


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.


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.


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.


33/42


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.


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.


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.



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.


38/42

P á g i n a | 38


39/42


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


41/42

P á g i n a | 41


42/42

diseño y creación de componentes gráficos i

Documents