guía de apoyo - infoactividades.files.wordpress.com · tools: corresponde a la paleta de...
TRANSCRIPT
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.