Séptimo

Docente CRISTIAN HERNÁNDEZ

1

Colegio Agustiniano Ciudad Salitre

Área de Tecnología e Informática – Guía de Apoyo 2018

Bimestre: Primero Grado: Séptimo Docente: Cristian Hernandez

Aprendizaje: Reconoce el entorno general de un editor gráfico, sus herramientas

básicas y los procedimientos para crear y editar diferentes tipos de imágenes.

Desempeños:

Reconoce las características y diferencias de una imagen según la

extensión del archivo.

Determina la funcionalidad de las herramientas del entorno de editores

como Fireworks.

Diseña y crea archivos gráficos, utilizando herramientas básicas y recursos

del editor gráfico.

Construye imágenes y GIF animados utilizando efectos y recursos de un

editor gráfico.

Aprovecha y cuida los recursos ofrecidos para el desarrollo de la clase.

Se esfuerza por superar las dificultades, buscando alternativas de solución,

optimizando los trabajos propuestos para la clase.

Contenidos

GENERALIDADES DE FIREWORKS

Definición y Entorno de Fireworks

Utilidad de las herramientas principales

Edición de imágenes vectoriales

Edición de imágenes bitmap

El Manejo del Texto

Creación y Edición de Gifs Animados

Exportar imágenes

2

GENERALIDADES DE FIREWORKS

Fireworks es un programa de CS5, que contiene herramientas para la

edición y modificación de imágenes, especialmente aquellas que van a

ser cargadas en sitios Web. Aunque también se utiliza para optimizar

imágenes que van a ser utilizadas en una presentación de Power Point, Movie

Maker, o cualquier documento que requiera imágenes livianas, con transparencias

o GIF animados de buena calidad.

LA VENTANA DE FIREWORKS CS5 se ve así

MENU: Contiene las opciones y herramientas del programa. Recuerda que todas

las ventanas, se activan utilizando la opción Window del menú.

TOOLS: Corresponde a la Paleta de herramientas, permiten crear, editar y optimizar

las imágenes. Está dividida y se usa de acuerdo con el tipo de imagen que se esté

creando o editando.

CANVAS: Corresponde al área de trabajo (“Lienzo”). Su tamaño determina el

tamaño final de la imagen.

Panels Tools

Menu

Canvas

Properties

Zoom

Modify

3

PROPERTIES: Barra de Propiedades. Cambia constantemente, según el elemento

que tengamos seleccionado. Presenta la utilidad de la herramienta seleccionada,

o las características del objeto seleccionado.

MODIFY: Sirve para agrupar, desagrupar; ordenar adelante o atrás; alinear o girar

varias imágenes.

PANELS: Grupo de ventanas que se activan y desactivan desde el Menú Window.

Presentan diversas utilidades de edición, por ejemplo estilos definidos, visualiza las

capas de un GIF o muestra la paleta de colores.

Herramienta de contorno

Herramienta de Relleno

Selecciona una

imagen o grupo

Crea

vectores

Crea

figuras

Distorsionar o

modificar

tamaño de

elementos

Selecciona

área a cortar o

exportar

Seleccionar área

a mano alzada o

poligonal

Herramienta de

relleno

Seleccionar

área

Herramientas

de retoque

4

Crear un nuevo documento

Pulsar Ctrl + N

Definir la cantidad de pixeles en el ancho y alto en

el nuevo documento y la resolución.

Seleccionar color del área de trabajo (Canvas).

Edición de imágenes vectoriales

Imágenes vectoriales

Las imágenes vectoriales, también llamadas imágenes

orientadas al objeto o imágenes de dibujo, se definen

matemáticamente como una serie de puntos unidos

por líneas. Los elementos gráficos presentes en un

archivo vectorial se denominan objetos. Cada objeto es

una entidad completa con propiedades tales como

color, forma, contorno, tamaño y posición en la

pantalla, que están incluidas en su definición.

Actividad 1

1. Utilizando las herramientas de vector, así como las de relleno y

contorno:

Abrir un nuevo archivo con medidas 720 x 720.

Crear la composición gráfica de un paisaje urbano o rural

utilizando diferentes formas.

Usar texturas en el relleno y contorno de la formas.

5

Edición de imágenes bitmap

Las imágenes de mapa de bits, también conocidas como

imágenes ráster, están compuestas por puntos individuales

denominados píxeles, dispuestos y coloreados de formas

diversas para formar un patrón. Si aumenta el tamaño del mapa

de bits, también aumentará el número de píxeles individuales,

haciendo que las líneas y las formas tengan un aspecto dentado.

El mapa de bits forman conjuntos de píxeles ordenados, sus

distintos elementos no se pueden manipular (por ejemplo mover)

en forma individual.

Actividad 2

1. Crear un nuevo archivo con medidas 1024 x 768.

2. Importar 4 imágenes en formato .jpg y .png con un tema común

3. Utilizar las herramientas de Bitmap para aplicar desenfoque (Blur), ajustes

de color, luces, sombras y quitar fondos.

4. Realizar una composición con las imágenes modificadas.

El Manejo del Texto

Con esta herramienta es posible insertar texto sobre el Canvas de

Fireworks. Para utilizarla se hace clic sobre el botón de la herramienta de

texto que se encuentra en el panel de herramientas

Ahora nos remitimos a la barra de propiedades y vemos la utilidad de esta herramienta, con las que seleccionamos:

6

Si escribimos cualquier texto y después volvemos a seleccionarlo con la herramienta

de puntero podemos apreciar que aparecen otras opciones en el panel de

propiedades, que permitirá darle apariencias.

Es posible seleccionar un color de contorno, con la opción Stroke

Options y realizar diferentes efectos.

Para efectos de relleno, con la opción Fill Options y texturas.

De igual manera, es posible hacer efectos de perspectiva y

sombras.

1- El tipo de fuente. 2- El tamaño de la fuente. 3- El color del texto. 4- La unidad de medida del

interlineado (píxeles o porcentaje).

5- El nivel del interlineado del texto.

6- El grado de separación entre las letras del texto.

7- El tamaño de la sangría del texto.

8- El tamaño de la escala horizontal del texto (la anchura de la fuente). 9- Aplicar negrita, cursiva y/o subrayado al texto. 10- Aplicar alineación del texto. 11- La orientación del texto. 12- El nivel del suavizado del texto. 13- El nivel de espacio delante del párrafo. 14- El nivel de espacio detrás del párrafo.

7

Isotipo, Logotipo, Imagotipo, Isologo

Son signos gráficos que identifican a una empresa, un producto comercial, un proyecto, o

en general, a cualquier entidad pública o privada.

Actividad 3

Utilizando las herramientas de texto avanzadas, así como los efectos de

relleno y contorno:

1. Hacer un logotipo teniendo en cuenta los pasos expuestos en la infografía

para crear su marca personal. 2. Crear el isotipo que de recordación a la marca y tenga congruencia con

el logotipo.

Creación y Edición de GIFs Animados

Un GIF animado es una secuencia de imágenes con distintas propiedades de

tamaño, color, forma y posición que dan la sensación de movimiento.

OJO: Existe una gran diferencia entre un GIF animado y una animación.

Los GIFs suelen ser útiles para pequeños íconos o banners gráficos, pues están

limitadas a sólo 256 colores y carecen de una buena fluidez.

Al crear un GIF ANIMADO se recomienda utilizar imágenes con transparencia.

Una forma de crear Gis animados en Fireworks es la siguiente:

8

Se debe habilitar el panel “STATES”, desde el

menú Window.

Cada vez que se agrega un fotograma “State” o capa,

el área de trabajo cambia como si tuviéramos un nuevo

Canvas. Es ahí donde vamos cambiando la imagen de

apariencia.

Para visualizar el GIF

utilizamos la herramienta

Luego se sigue el

procedimiento para guardar:

Se ajusta la imagen al Canvas por medio del menú

Modify/Canvas/Fit Canvas/ Esto para que la imagen

no quede con áreas vacías.

Por el Menú File/Image Preview

Se elige la opción ANIMATED GIF y se exporta.

Actividad 4

Los sprites son mapas de bits en 2D que se dibujan

directamente en un destino de representación sin usar la

canalización de transformaciones, iluminación o efectos. Se

suelen usar para mostrar información como las barras de

estado, el número de vidas o texto como las puntuaciones.

Algunos juegos, sobre todo los más antiguos, están

compuestos en su totalidad de sprites.

Teniendo en cuenta las herramientas descritas anteriormente:

1. Crear un GIF animado utilizando algunos “Sprites” que al reproducir

dé la apariencia de movimiento.

2. El GIF debe evidenciar mínimo 8 movimientos diferentes.

9

Exportar imágenes

Tipos de archivos

En Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG,

pensados especialmente para optimizar el tamaño que ocupan en disco, ya que los

archivos pequeños se transmiten más rápidamente por la Red.

El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras

que el formato JPG se usa para las fotografías.

Los procedimientos para cambiar la extensión de las imágenes están descritos a

continuación:

1. Se ajusta la imagen al Canvas por medio del menú Modify/Canvas/Fit Canvas/

Esto para que la imagen no quede con áreas vacías.

2. Por el Menú File/Image Preview y aparece la siguiente ventana

3. En esta ventana se define

el tipo de archivo, es decir la

extensión GIF o JPG.

4. Se elige la opción Export.

5. Se ubica en la carpeta y se

nombra el archivo para ser

guardado.

10

Los procedimientos para exportar una imagen con transparencia

1. En primer lugar se debe eliminar todos los colores y pixeles

de la imagen que se quiere, esto se hace utilizando varios

métodos:

Seleccioonar color de fondo y los que se quieren

eliminar, con la herramienta “magic tool” y pulsando la

tecla Supr.

Utilizando la herramienta Eraser Tool para borrar lo

que no queremos de la imagen.

Utilizando las herramientas de Marquee.

2. Por el Menú File/Image Preview Se debe elegir siempre el

formato GIF, por lo cual se habilita las opciones de

transparencia:

3. Se elige Index Transparency o Alpha Transparency ó utilizar los goteros, que

tienen la misma función.

4. Se elige la opción Export.

5. Se elige la carpeta donde se va a guardar y el nombre que se le quiere asignar.

Actividad 5

1. Importar una imagen de mapa de bits.

2. Exportar de esta tres imágenes con

transparencia.

3. Hacer un montaje fotográfico como el

siguiente ejemplo con las tres imágenes.

11

Glosario

Hacer clic sobre la imagen para realizar la actividad del glosario.

Criterios de Evaluación

Reconocer las características y diferencias de una imagen según el archivo.

Crear archivos gráficos, utilizando herramientas básicas y recursos básicos.

Construir imágenes y GIF animados utilizando efectos del editor gráfico.

Asumir y promover comportamientos legales y de respeto relacionados con el uso

de los recursos tecnológicos.

Webgrafía

http://aprendeenlinea.udea.edu.co/lms/ova/course/view.php?id=19

http://mosaic.uoc.edu/wp-content/uploads/2011/05/Gu%C3%ADa-de-

aprendizaje-de-Fireworks-CS5.pdf

https://help.adobe.com/es_ES/fireworks/cs/using/WS696B25DB-4ECC-

4b50-B015-C20C0FFE1F3D.html

Recordar que la guía es un elemento virtual de apoyo, por favor no imprimirla.