Herramientas de Mapa de Bits SESIÓN 2 CAPACIDADES EN ESTA SESIÓN El participante al final de esta sesión estará en capacidad de: Explicar las diferentes herramientas de mapas de bits para poder elaborar creativos e interesantes retoques, montajes, banners y etc. Desarrollar y editar imágenes de mapa de bits son: Recuadro, Lazo, Varita Mágica, Pincel, Lápiz, Desenfocar, Sello y otros. TEMAS A DESARROLLAR EN ESTA SESIÓN Entorno de Trabajo. Panel de Herramientas. Fundamentos. Formatos de estilos Exportación de Archivos. http://www.ucv.edu.pe/cis/ cisvirtual@ucv.edu.pe
INTRODUCCIÓN Estimado participante, te doy la bienvenida a esta sesión 02 a nombre del CIS de nuestra universidad César Vallejo. El propósito de la sesión es aprender a utilizar el entorno de Adobe Fireworks CS3 para diseñar y editar imágenes de Mapa de bits. Necesitamos de tu compromiso para que juntos podamos generar el conocimiento suficiente en esta nueva aventura. Debes seguir las instrucciones planteadas a modo de ejemplo y tus dudas o sugerencias anotarlas para alcanzármelas por correo o sesión de chat. Disfruta de este tópico titulado: ADOBE FIREWORKS CS3 Adobe Fireworks CS3, una exclusiva herramienta de edición de imágenes vectoriales y de mapa de bits, proporciona el entorno más eficaz para el diseño de sitios Web e interfaces de usuario, y la creación y optimización de imágenes para la Web. SESIÓN Ingresar a Adobe Fireworks CS3: Método 1: Inicio / Programas/Adobe Fireworks CS3 Método 2: Inicio / Ejecutar/ Escribir FIREWORKS y pulsar Enter Método 3: Doble clic al Icono de Fireworks CS3 que se encuentra en el escritorio. Ventana inicial de Adobe Fireworks CS3: P á g i n a - 2 -
1. DESCRIBIENDO ENTORNO DE TRABAJO 1 Barra de herramientas ventana de fotogramas Lienzo o Área de trabajo Ventana de estilos Inspector de propiedades ventana de colores Creando un nuevo documento: 1. Crear nuevo Documento de Fireworks(PNG) 2. Se muestra el siguiente cuadro de diálogo: a. Escribir el ancho, alto, resolución y el color del lienzo b. Haga clic a Aceptar P á g i n a - 3 -
2. 2 PANEL DE HERRAMIENTAS Grupo: Seleccionar Puntero(V), Subselección(A), Escala(Q) y Recortar(C) Grupo: Mapa de Bits Recuadro (M), Lazo (L), Varita Mágica (W), Pincel (B), Lápiz (B), Desenfocar(R), Sello(S). Grupo: Vector Línea(N), Pluma(P), Rectángulo(U), Texto(T), Estilo libre(o), Cuchilla (Y) Grupo: Web Zona interactiva rectangular(j), División(K), Ocultar divisiones y zonas interactivas(2), Mostrar divisiones y zonas interactivas(2) Grupo: Colores Cuenta gotas (I), Cubo de pintura (G), Color de contorno, Color de Relleno. Grupo: Ver Modo pantalla estándar (F), Modo pantalla completa con menús (F), Modo pantalla completa (F), Herramienta Mano (H), Herramienta Zoom (Z). Nota: Cuando selecciona una herramienta, en el inspector de propiedades se muestra las características o propiedades que se le puede cambiar a la herramienta seleccionada. Por ejemplo: Al seleccionar la herramienta Pincel. P á g i n a - 4 -
3. 3 FUNDAMENTOS Mapa de bits: Está compuesta por píxeles. Un pixel es una unidad de información de valores de color y luminosidad propios. El conjunto de diferentes píxeles componen la imagen total. Una desventaja de las gráficas de mapas de bits es que pierden definición ( efecto cierra o dentadas ) cuando aumentan su tamaño. Imagen vectorial: Compuesta por vectores. Un vector es una ecuación matemática que define una forma: un vértice, un contorno, un relleno, etc. Varios vectores componen las diferentes formas poligonales y colores de una imagen vectorial. Estas imágenes las podremos escalar a diferentes tamaños sin perder definición. Pixel (Picture Element Elemento de Imagen): Es la unidad más pequeña que encontraremos en las imágenes por mapa de bits. Un pixel tiene tres características distinguibles: Forma cuadrada. Posición relativa al resto de píxeles de un mapa de bits. Profundidad de color (capacidad para almacenar color), que se expresa en bits. P á g i n a - 5 -
Resolución: La resolución es la relación entre el pixel de una imagen y una medida real (física), que generalmente es la pulgada. De esta forma la resolución de una imagen digital se mide en píxeles por pulgada (ppp) es decir, el número de pixeles que hay por pulgada de imagen. A mayor cantidad de pixeles en una pulgada se reduce el tamaño del pixel y aumenta el nivel de detalle de la imagen y por ende la calidad de la misma. Importar imágenes: Los formatos de imágenes más comunes como JPG, BMP, PNG o Gif pueden ser importados al documento de fireworks que estamos creando. 1. Haga clic a Archivo, luego a Importar o pulsar las teclas Control + R. 2. Se muestra el siguiente cuadro de diálogo: 3. Buscar y seleccionar el archivo de imagen, luego clic en Abrir. 4. Ubíquese dentro del lienzo y haga clic para que se muestre la imagen. P á g i n a - 6 -
5. CAMBIANDO EL TAMAÑO DE LOS MAPAS DE BITS 4 Se utiliza las siguientes herramientas para poder cambiar el tamaño a una imagen de mapa de bits. Clic izquierdo y arrastrar Clic izquierdo y arrastrar Clic izquierdo y arrastrar Clic izquierdo y arrastrar Clic izquierdo y arrastrar Nota.- Para dar mejor precisión y exactitud, cambiar el tamaño desde el inspector de propiedades P á g i n a - 7 -
6. 5 GRUPO MAPA DE BITS Herramienta recuadro Selecciona un área rectangular de pixeles de la imagen. Clic izquierdo y arrastrar Herramienta recuadro oval Selecciona un área elíptica de pixeles de la imagen. Para deseleccionar pulsar la tecla escape. Clic izquierdo y arrastrar Herramienta Lazo Seleccionaun área de pixeles de estilo libre de la imagen haciendo clic izquierdo y arrastrando. Se debe tener en cuenta en cerrar el trayecto. Cerrar el trayecto Suprimiendo el área seleccionada Copiando y pegando el área seleccionada P á g i n a - 8 -
Suprimiendo el área seleccionada con fundido de 50 Herramienta poligonal Selecciona un área de pixeles de estilo libre y bordes rectos de la imagen haciendo clic izquierdo en cada ángulo o esquina.se debe tener en cuenta en cerrar el trayecto. Clic izquierdo en cada vértice y mover el puntero del mouse hasta que cierre el trayecto Herramienta varita mágica Selecciona un área de pixeles de color similar en la imagen, haciendo clic izquierdo y manteniendo la tecla Shift pulsada, hasta quedar el área seleccionada. Puede ajustar la tolerancia para obtener mejor selección. P á g i n a - 9 -
Usando borrador clic izquierdo y arrastrar Pulsar la tecla suprimir, para borrar la zona seleccionada. Para deseleccionar pulse la tecla escape. Si en caso quedan porciones no deseadas, usar la herramienta borrador Herramienta pincel La herramienta pincel puede emplearse para trazar pinceladas, haciendo clic izquierdo y arrastrando el puntero en las zonas deseaadas, hata que quede pintada dicha zona con el color del cuadro de color de trazo que eligió. Para consegir trazados rectos pulsar la tecla shift. P á g i n a - 10 -
En el inspector de propiedades ajustar la categoría del trazo y nombre de la textura: Manteniendo la tecla Shift pulsada hacer clic izquierdo en cada extremo. Herramienta sello Permite copiar o clonar un área de una imagen en otra. Esta herramienta es muy útil cuando deseamos eliminar elementos de una imagen copiando áreas de la misma para cubrirlo. Aquí tenemos una fotografía de persona con acné y deseamos borrar el acné que está en la frente. P á g i n a - 11 -
Puntero 1.- Lo primero que haremos será seleccionar la herramienta de sello del panel de herramientas. Vemos que el puntero cambia a esta forma. 2.- Ahora vamos a borrar el acne clonando sobre ella parte delafrente y para ello hacemos clic en la frente de la imagen. 3.- Vemos que aparece una cruz en el área donde hicimos clic. Esa cruz simboliza que esa área es la que se clonara donde hagamos clic o dibujemos con el puntero de la herramienta. Nota: Para tomar diferentes muestras pulsar la tecla Alt y hacer clic izquierdo y arrastrar. Cuando terminemos de clonar partes dela frente al final quedara de esta manera. 7. 6 GUARDAR DOCUMENTO DE FIREWORKS: (FUENTE O EDITABLE) Los trabajados realizado en Fireworks cuando se graban, a los archivos se les asigna la extensión PNG. 1. Haga clic en Archivo, luego Guardar (Control + S) 2. Se muestra el cuadro de diálogo Guardar P á g i n a - 12 -
3. Seleccionar la carpeta y escribir el nombre del archivo 4. Luego haga clic en Guardar. 8. 7 EXPORTAR ARCHIVOS DESDE FIREWORKS Los trabajos realizados pueden generar archivos de distinto formato, por ejemplo: JPG y GIF. 1. En la ventana Optimizar (Ventana / Optimizar o F6), seleccione el tipo de formato del archivo (JPG o GIF, gif animado). 2. Haga clic en Archivo, luego Exportar(Control + Shift + R) 3. Se muestra el siguiente cuadro de diálogo: 4. Seleccionar la carpeta y escriba el nombre del archivo 5. Haga clic en Guardar. Glosario de Términos Lienzo:Es el área de trabajo del documento de Adobe Fireworks. Inspector de propiedades: Pestaña en donde se muestran las características o propiedades de la herramienta seleccionada. Mapa de Bits:Es un conjunto de diferentes píxeles que componen una imagen. Pixel:Es la unidad más pequeña de información de valores de color y luminosidad propios de una imagen. Vector: Es una ecuación matemática que define una forma: un vértice, un contorno, un relleno, etc. Varios vectores componen las diferentes formas poligonales y colores de una imagen vectorial. Resolución:Es la relación entre el pixel de una imagen y una medida real (física), que generalmente es la pulgada.de esta forma la resolución de una imagen digital se mide en píxeles por pulgada (ppp). P á g i n a - 13 -