COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GRADO NOVENO PLANEACION PERIÓDICA PRIMER BIMESTRE

Transcripción

1 COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GRADO NOVENO PLANEACION PERIÓDICA PRIMER BIMESTRE Logro 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. Indicadores de logro: 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 y Photoshop. Diseña y crea archivos gráficos, utilizando herramientas básicas y recursos de los editores gráficos Construye imágenes y gisf 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: IMÁGENES DIGITALES 1. Definición y Entorno de Fireworks 2. Utilidad de las herramientas principales a) Edición de imágenes vectoriales b) Edición de imágenes bit map c) El Manejo del Texto 3. Creación y Edición de Gifs Animados 4. Definición y Entorno de Photoshop a) Utilidad de las herramientas principales b) Creación de capas c) Creación de máscaras 5. Resolución y Pixeles 6 Exportar Imágenes EVALUACION BIMESTRAL: El día asignado por la coordinación académica en la hora de la clase.

2 IMÁGENES DIGITALES Las imágenes digitales se pueden obtener por medio de dispositivos de conversión analógicadigital como los escáneres y las cámaras digitales. O directamente mediante programas informáticos como Paint, Photoshop, Fireworks, CorelDraw En Internet, también e encuentran algunos programas que sirven solamente para editar y funcionan online 1. Definición y Entorno 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, o Movie Maker, o cualquier documento que requiera imágenes livianas, con transparencias o gifs 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 má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. TAMAÑO Y ZOOM: Permiten visualizar el tamaño del Canvas y acercar o alejar la imagen que se está editando. 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.

3 2. Utilidad de las herramientas principales Es importante saber la función de cada herramienta: Herramienta de selección: incluye también la herramienta de "subselección", que sirve para seleccionar elementos que están "tapados" por otros cuando estás trabajando con muchos elementos. Herramienta para escalar: sirve para modificar proporcionalmente el tamaño de los elementos. Las herramientas de Skew y Distort sirven para distorsionar la forma del elemento seleccionado. El Crop sirve para seleccionar un área que será cortada, y la herramienta que lo acompaña sirve para seleccionar un área determinada y exportarla independientemente del resto de una imagen. Las herramientas de Marquee sirven para seleccionar un área determinada de la imagen, ya sea para copíarla, ya sea para trabajar en ella sin modificar el resto de la imagen. Las herramientas de Lasso y Polygon Lasso son variantes de Marquee, y sirven para seleccionar áreas a mano alzada o poligonales respectivamente. La herramienta Paint Bucket es simplemente la herramienta de relleno, y su variante, la Gradient Tool, es para rellenos degradados. Las opciones de ese degradado se configuran luego desde el panel de propiedades. La herramienta Pen sirve dibujar elementos con sólo hacer clic y trazar sus lados. Esta acompañada por la herramienta Vector Path, que sirve para trazos de distintos tipos (bambú, cinta, aerógrafo, etc); y la Redraw Path Tool, que permite redibujar o agrandar un dibujo, conservando las características de trazo o configuración. Estas herramientas son para dibujar distintas formas. Recuerda que al activar polygon, debes elegir en la opción Shape.

4 Eraser Tool: para borrar. Brush Tool: para dibujar trazos. Line Tool: para dibujar líneas rectas. Pencil Tool: para dibujar líneas a mano alzada Subselection Tool: para trabajar con los nodos de trazos vectoriales. Text Tool: herramienta de texto. Herramienta de bordes. Herramienta de relleno. ACTIVIDADES EN CLASE a) Edición de imágenes vectoriales Qué es una imagen vectorial? Es una imagen digital que se compone de líneas y rellenos, es decir que para crearlas podemos usar polígonos, segmentos o figuras geométricas. En Fireworks están agrupadas en la barra de herramientas: Realiza un paisaje utilizando únicamente herramientas Vector Utiliza las herramientas de color para darle una apariencia Natural Guarda la imagen en tu carpeta b) Edición de imágenes Bitmap Qué es una imagen de mapa de bits o Bitmap? Es una imagen digital que contiene una serie de pequeños cuadros de colores llamados pixeles, que, al observarse todos en conjunto proporcionan la representación total de la imagen. En Fireworks están agrupadas en la barra de herramientas: Importa una fotografía Utiliza las herramientas Bitmap para aplicar transparencias Elige una parte de la imagen y cámbiala de color Recorta una parte de la imagen y realiza un montaje con otra imagen importada. Guarda la composición en tu carpeta

5 c) Herramientas de texto Con esta herramienta podemos insertar texto sobre el Canvas de Fireworks Para utilizarla primero hacemos clic sobre el botón de la herramienta de texto que se encuentra en el panel de herramientas Presionamos el botón izquierdo y lo mantenemos presionado mientras arrastramos el puntero del mouse de manera que dibujemos un rectángulo para crear una caja de texto Ahora nos remitimos a la barra de propiedades y vemos la utilidad de esta herramienta, con las que seleccionamos: 1- El tipo de fuente para nuestro texto 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 Si escribimos cualquier texto y después volvemos a seleccionar el texto con la herramienta de puntero podemos apreciar que aparecen otras opciones en el panel de propiedades, que permitirá darle apariencias al mismo. En ella podemos seleccionar un color de contorno (1), pisando el botón stroke optiosn/ para el texto que actualmente tenemos seleccionado y realizar diferentes efectos de relleno/ fill optiosns y texturas. Así mismo los efectos de perspectiva y sombras. ACTIVIDADES EN CLASE Escribe una frase Utiliza las herramientas de Texto aplicando Tamaño, fuente y color Dale una espectacular apariencia utilizando los efectos de Bordes Relleno - Perspectivas y utiliza los efectos Filters

6 Tipos y propiedades de las imágenes. "Optimizar" una imagen es tratar de lograr la mejor calidad, junto con el menor peso posible en Bytes. 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 dos comprimen las imágenes para guardarlas. La forma de comprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otros propósitos. Al trabajar con Fireworks, los archivos que genera son de extensión PNG, que en muchas ocasiones presentan fallos al ser cargados en la web y resultan ser muy pesados. A continuación verás las características de estos archivos: Exportación de Imágenes 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.

7 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: cel 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. ACTIVIDADES EN CLASE Importa una imagen fotográfica y extrae de ella Tres imágenes con transparencia 3. Creació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: 1. Se debe habilitar el panel STATES, desde el menú Window

8 2. 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. 3. Para visualizar el gif utilizamos la herramienta 4. Luego se sigue el procedimiento para guardar : a) 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. b) Por el Menú File/Image Preview c) Se elige la opción ANIMATED GIF y se exporta. ACTIVIDADES EN CLASE Diseña un Gif animado usando las herramientas vectoriales Importa un Gif animado, edítalo cambiándole el color y asignándole transparencias. Guárdalo en la carpeta de trabajo

9 PHOTOSHOP 4. Definición y Entorno de trabajo Photoshop es un editor de imágenes usado también para el retoque de fotografpias y gráficos. Cuenta con un espacio de trabajo multicapas, herramientas para el retoque de imagen y color, efectos creativos, entre otros. Soporta varios tipos de archivo de imágenes, tales como: JPG, PNG, BMP, GIF y exporta VENTANA DE TRABAJO DE PHOTOSHOP Menu Tool options Document information Cavas Panels Tools The Status bar MENU: Contiene las opciones y herramientas del programa. Están organizadas por grupos, según su función y se activan de acuerdo a la necesidad del usuario. Desde este menú se puede abrir un archivo, y guardarlo y acceder a otras opciones de imagen, paneles de contenido, efectos, etc. TOOLS: Corresponde a la Paleta de herramientas, son íconos que 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. DOCUMENT INFORMATION: Nos brinda información sobre el documento que se está trabajando como: nombre, el modelo de color utilizado (RGB, CMYK) y el tamaño del zoom del área de trabajo en %. CANVAS: ( Lienzo ). Su tamaño determina el tamaño final de la imagen. STATUS BAR: Se encuentra en la parte inferior de la ventana. Permite observar el tamaño o zoom del área de trabajo, el 100% es el tamaño normal de trabajo. También se puede observar el tamaño del archivo. PROPERTIES: Cambia constantemente, según el elemento que tengamos Seleccionado. Presenta la utilidad de la herramienta seleccionada, o las

10 características del objeto seleccionado. PANELS: Grupo de ventanas que se activan y desactivan desde el Menú Windows. Estos paneles presentan diversas utilidades de edición, por ejemplo presenta estilos definidos, visualiza las capas de un gif o muestra la paleta de colores, propiedas, biblioteca, estilos, etc. TOOL OPTIONS: Nos muestra las diferentes alternativas a trabajar con las herramientas. a) Utilidad de las herramientas principales Path selection: Sirve para seleccionar elementos. Move: Sirve para mover los elementos de la imagen Marquee select tools: Sirve para seleccionar objetos, cortar o pegar imágenes. Tiene opción de círculo, fila y columna. Crop o Recortar: sirve para seleccionar un área que será cortada, y la herramienta que lo acompaña sirve para seleccionar un área determinada y exportarla independientemente del resto de una imagen. Lasso y Polygon Lasso son variantes de Marco rectangular, y sirven para seleccionar áreas a mano alzadas o poligonales respectivamente. Paint bucket: Se deriva de la herramienta degradado es simplemente la herramienta de relleno, y su variante, la Gradient Tool, es para rellenos degradados. Las opciones de ese degradado se configuran luego desde el panel de propiedades. Brush, Pencil: sirve dibujar elementos con sólo hacer clic y trazar sus lados. Esta acompañada por la herramienta lápiz, sustitución de color, pincel mezclador que le da un efecto artístico al trabajo. History brush tool: Permite hacer trazos estilizados utilizando los datos de origen de un estado o una instantánea de historia especificados Eraser: Para borrar. Existe también borrador de fondos y de motivo. Color picker tool: Sirve para seleccionar un color directamente de la imagen para dibujar trazos. Herramientas de retoque: Sirven para retoque de imágenes, como suavizados, sustitución de color, copiar motivos

11 Healing brush, patch Clone & pattern stamp Magic wand: Sirve para seleccionar los píxeles de una imagen, para posteriormente copiar o cortarlo. Blur, shapen, Smugde: Son herramientas que permiten enfocar y desenfocar una imagen y hacerla puntualmente o en general. Dodge tool: Permiten aclarar u oscurecer una imagen En este grupo de herramientas se encuentra la ESPONJA, que permite absorber el color de una imagen. Pen : Permiten delinear una imagen y hacer trazos vectoriales. Tex tool: Permite escribir texto vertical, horizontal y máscaras de texto. Shape tool: Permite hacer rectángulos, círculos, elípse, polígono, línea y formas personalizadas. Hand tool: Permite sotener el área de trabaja y moverla Zoom: Permite acercar o alejar el área de trabajo. Background color and Mask tool b. Creación de capas En Photoshop es de gran importancia el uso de las capas para trabajar. Cada aspecto de la foto se trabaj en una capa independiente. Es posible combinarlas o acoplarlas para volverlas una sola y ponerles efectos o estilos. La primera capa es la imagen original y esta se debe duplicar para desde allí comenzar a trabajar Las capas se pueden bloquear, dejar de visualizar, manejar la opacidad y el relleno.

12 Las CAPAS DE AJUSTE permiten darle efecto al contenido de la capa, logrando que se piueda deshacer lo que se hixo sin alterar el contenido original. c. Creación de máscaras Las máscaras se usan con el fin de ocultar ciertas partes de la capa y mostrar las capas inferiores. Permite combinar varias fotografías y aplicarle correciones de color. Selección de máscara Capa con máscara Las máscaras pueden ser blancas o negras. Cuando es blanca (transparente) podemos visualizar la imagen que hay en la capa a la que se le aplica la máscara y al ser negra la capa queda oculta. Para trabajar en la máscara se debe hacer click sobre ella Las MASCARS VECTORIALES Sirven para hacer trazados diferentes a la imagen y recortar el contenido. Se utiliza con la herramienta de forma y pluma. Se crea haciendo doble mascara Las MASCARAS DE TEXTO horizontal y vertical crean una selección con forma de texto. 5. RESOLUCIÓN Y PÍXELES RESOLUCIÓN: Indica cuál es la calidad de la imagen en relación con la cantidad de pixeles que tiene. A partir de 150 ppi o dpi se considera una optima resolución para impresiones digitales. PIXEL: Es la menor unidad o la parte más pequeña de color, que forma parte de una imagen. Se miden en (ppp) pixeles por pulgada y se refiere al número total de pixeles que hay de alto y de ancho.

13 6 EXPORTAR IMÁGENES Para exportar imágenes en photoshop, basta con ir a Archivo + guardar como, en TIPO, se selecciona el formato requerido. Los más utilizados son JPG, PNG. ACTIVIDAD EN CLASE 1. Uso de herramientas capa a capa. Selecciona una imagen y por capas edítala con las herramientas básicas de forma, varita mágica, bote de pintura, texto, pluma y pinceles. Guarda en la primera capa la imagen original para compararla con la foto editada. Importante el manejo de capas. 2. Las Máscaras. En una imagen utiliza los diferentes tipos de máscara, normal, vectorial y de texto. Crea a partir de estas modificaciones, una imagen diferente. 3. Retoque de fotografía Con el retoque fotográfico se puede suavizar la piel, atenuar colores, dar contraste, cambiar el color de los ojos y restaurar imágenes. Para retocar una foto es necesario el uso de las herramientas básicas de forma, de selección de pinceles y plumas, así como las de tampón clonar, pincel corrector, enfocar, desenfocar, filtros y las máscaras (si es necesario). Es importante también, ver las diferentes opciones para trabajar una imagen tales como, brillo, contraste, saturación, equilibrio de color, exposición, etc.

14 Para esta actividad debes elegir una foto antigua y corregirle la mayor parte de defectos. Utiliza todas las herramientas disponibles. Se proyectarán los trabajos en el video beam y se hará retroalimentación con todos los estudiantes. 4. El montaje Combinar imágenes en photoshop es importante a la hora de querer hacer montajes, para esto es necesario utilizar a fondo las herramientas de varita mágica, selección de forma y pluma, cortar y pegar imágenes. También trabajar con la opacidad y transparencias. Para este montaje se hará la emulación es decir, se imitará el montaje de un afiche, escogido por el estudiante, un afiche sencillo en el que se puedan usar todas o la mayoría de las herramientas. Cada imagen debe ir en una capa diferente, para poder modificarla sin alterar el resto de contenido. Se debe usar las herramientas que sean necesarias.

15 Webgrafía e- 7ffd.html