Taller de Internet I

Definicin De Fireworks
Es un programa que nos permite editar imgenes y grficos vectoriales, disear elementos grficos exclusivos para pginas Web. En Fireworks podemos crear y editar imgenes vectoriales y de mapa de bits en un solo archivo, crear botones interactivos, animacin cuadro por cuadro, banners personalizados, rollovers y banners con gifs animado. Con las funciones de optimizacin nos permiten comprimir el tamao de los archivos de grficos web (con determinados formatos jpeg, tiff, bmp y gif) sin afectar la calidad de la imagen o el diseo realizado. Este tema de comprimir el tamao del archivo sin afectar la calidad es exclusivo de Fireworks, comparndolo con otros programas de diseo que existen en el mercado informtico. Fireworks es la primera herramienta de produccin profesional diseada especficamente para crear, previsualizar, editar y exportar imgenes y GIFs animados optimizados para la Web. Con su opcin ExportPreview, usted podr optimizar los grficos ms compactos al tiempo que previsualiza con una gran calidad de imagen, es decir podemos balancear el tamao con la fidelidad de la imagen para crear los grficos para la web. Fireworks le ofrece el control de texto con la precisin de una herramienta para ilustracin, capas para grficos compuestos, objetos trazados con curvas de bezier, formas y trazos que pueden incluir rellenos y brochazos (strokes) de tipo mapa de bits, as como efectos personalizables aplicados de manera interactiva a botones o texto, como biseles, sombras descendentes y brillos. Con la opcin ExportPreview Optimice sus grficos para la web y logre el tamao ms compacto al tiempo que previsualiza el trabajo para asegurar su calidad. Importe sus archivos de Photoshop y retenga sus capas. Configure fcilmente sus cuadros (frames) para lograr GIFs animados. Aplique efectos interactivamente (sombras descendentes, biseles, brillos y relieves) que se actualizan automticamente.

Descripcin del Entorno

El panel de herramientas El inspector de propiedades Panel optimizar Panel capas Panel fotogramas

Creacin de un nuevo documento

Cuando se crea un documento nuevo en Fireworks, se crea un documento PNG (Portable Network Graphic) PNG es el formato de archivo propio de Fireworks. Despus de crear una imagen en Fireworks, sta puede exportase como si tuviera otros formatos grficos para web conocidos, por ejemplo JPEG, GIF y Gif animado.

Modificar hoja de trabajo

En la opcin tamao de la imagen (podemos modificar bien el ancho o alto, si modificamos el ancho el alto se genera automticamente y viceversa si se modifica el alto, el ancho se genera por defecto) Men Modificar ------- Lienzo ------- tamao del lienzo Modificar en ------- dimensiones en pixeles (digitar el ancho o alto en pixeles) / aceptar

Rellenos Planos
1. Dibujar un objeto (rectngulo, elipse, etc.) 2. Desde la barra de propiedades modificar el objeto dibujado (rectngulo) segn su criterio Nota: Estas propiedades lo podemos aplicar sobre cualquier polgono, siempre que este seleccionado previamente (color de relleno y borde, texturas) Para dibujar objetos (cuadrados, crculos, etc.) que sean simtricos (lados iguales) pulsar la tecla SHIFT + arrastre con el mouse. Tambin podemos modificar el tamao de un objeto digitando un valor en el ancho y alto, o haciendo arrastres con el mouse (el objeto deber estar seleccionado previamente).
o Dibujar un rectngulo de ancho 169 y alto 117. o Color de relleno 009900 o Sin borde

o o o o o o

Dibujar un rectngulo de ancho 161 y alto 73 Color de relleno 0066FF Color de borde FF0000 Tamao de punta 3

o o o o o o o

Color de borde 0000CC Tamao de punto 8 Dibujar un rectngulo de ancho 185 y alto 58 Color de relleno 999999 Color de borde 000000 Tamao de borde 7 Categora del trazo carbn/cremoso

Dibujar una circunferencia de ancho 165 y alto 165 Color de relleno FF6600

Guardar informacin Abrir Archivos Herramienta Texto

Seleccionar en la herramienta texto Seleccionar la hoja de trabajo (se activa el inspector de propiedades de texto, este editor nos permite escoger tipo de letra, tamao, color, estilos, etc.)
Texto 1 Diseo Web Tipo de letra: arial Tamao: 35 Color: 000099 Estilo: Negrita y cursiva Texto 2 Diseo Grafico Tipo de letra: Book Antiqua Tamao: 38 Color: 006600 Estilo: Subrayado Texto 3 MACROMEDIA FIREWORKS MX Tipo de letra: Arial Rounded MT Bold Tamao: 35 Color: 9900cc Alineacin: Centro Texto 4 Publicidad Tipo de letra: Forte Tamao: 82 Color: 0000CC Alineacin: Negrita Texto 5 GRAFICOS Tipo de letra: Gabriola Tamao: 67 Color: 009966 Color de borde: 0000FF Texto 6 Informtica Tipo de letra: Lucida Handwriting Tamao: 55 Color: FFFFFF Color de borde: 000000 Opciones del trazo: Tamao de punta: 9

Optimizar el entorno de Fireworks

Activar reglas Guas
Men Ver ---- Reglas o CTRL + ALT + R Men Ver ---- Guas -----Mostrar guas Ejercicio: 1. Crear una hoja de trabajo 300 px. De ancho por 150 px. De alto 2. Dibujar una circunferencia

3. Activar las reglas y lneas guas sobre el dibujo Nota: utilizaremos lneas guas por ejemplo para definir con exactitud determinadas reas sobre la hoja de trabajo, como por ejemplo digitar textos que estn en paralelo con el dibujo o dibujar otros objetos que estn en paralelo con la circunferencia.

Activar Cuadricula
Men Ver ---- Cuadricula -----Mostrar cuadricula

Duplicar objetos
Para copiar o duplicar objetos realizar los siguientes pasos: 1. Dibujar un objeto (rectngulo) o digitar un texto (computacin) 2. pulsar las teclas CTRL + ALT + seleccin mouse (arrastre hacia un destino)

Utilizar en el men edicin ---- duplicar o CTRL + ALT + D

Creacin de Polgonos
1. 2. 3. 4. Crear una hoja de 400 pixeles de ancho / 350 pix de alto (Un triangulo) Seleccionar la herramienta polgono Del panel de propiedades digitar el numero de lado Definir el tamao del nuevo polgono (triangulo, pentgono, etc.) haciendo arrastres con el mouse sobre la hoja de trabajo.

Tamao de Objetos
Para administrar el tamao de un objeto utilizar la herramienta escala del panel de herramientas tambin utilizar el comando CTRL + T o en el men modificar ----- Transformar ---- Transformacin Libre.

Herramienta Escala 1. Dibujar un triangulo, duplicar este objeto varias veces. 2. Activar la herramienta escala o el comando CTRL + T (definir tamao haciendo arrastres con el mouse desde una esquina), despus pulsar la tecla ENTER (para confirmar el tamao).

Rotacin de Objetos (Girar)

Para rotar o girar un objeto utilizar la herramienta Escala del Panel de Herramientas tambin utilizar el comando CTRL + T o en el men modificar ----- Transformar. 1. Crear una hoja de 300 de ancho por 250 de alto 2. Dibujar un objeto por ejemplo una elipse / duplicar el objeto varias veces y seleccionar el objeto a rotar.

Agrupar Objetos
Para agrupar objeto se realizan los siguientes pasos: 1. Crear una hoja de 500 de ancho por 350 de alto 2. Dibujar un objeto. Ejemplo: un rectngulo de 210 de ancho por 60 de alto, color blanco, borde negro, tamao de la punta 3. 3. Digitar el texto Bienvenidos, con las siguientes caractersticas: tipo de letra Baskertville Old Face / tamao 30 / color rojo /estilo cursiva. 4. Ubicar el texto al interior del rectngulo (centro) 5. Seleccionar ambos objeto 6. Seleccin en el men modificar / grupo o pulsar CTRL + G.

Recortar Objetos
Para recortar objetos utilizaremos la herramienta Recortar de la paleta de herramientas. 1. Abrir la practica 1 2. Pulsar la herramienta recortar, definir el rea a recortar (arrastres con el mouse) / pulsar la tecla ENTER para confirmar el rea a recortar.

Exportar Objetos
1. Despus de seleccionar (textos, polgonos, diseos) 2. Seleccionar la ventana optimizar y seleccionar la opcin formato del archivo de exportacin Escoger los formatos de archivo cada uno tiene diversa calidadpara escoger 3. 4. 5. 6. Archivo --- exportar Seleccionar un destino Seleccionar tipo--- solo imgenes /HTML e imgenes / Macromedia Flash SWF Digitar un nombre

7. Guardar Nota: digite un nombre en minsculas y hasta 8 caracteres como mximo, no asignar tildes a determinadas vocales. Es importante al momento de publicar una pgina web.

Importar imgenes
Para editar imgenes es necesario importar imgenes (abrir fotos). 1. 2. 3. 4. 5. Crear una hoja de 500 de ancho por 350 de alto con resolucin de 96 pixeles Archivo / importar (CTRL + R) Escoger una unidad de origen ---- escritorio, carpeta del disco duro Seleccionar un archivo ---- importar Definir tamao y ubicacin de las imgenes

Transformar Objetos
La opcin transformar nos permite definir el tamao, rotar, sesgar, distorsionar, voltear horizontalmente o verticalmente determinados objetos (polgonos, fotos, textos) 1. Digitar un texto, dibujar un polgono o importar una imagen. 2. Modificar / transformar / escoger opciones (escala, sesgar, distorsin, etc.) 3. Seleccionar los nodos (esquinas) y transformar segn su criterio.

Rellenos Personalizados
Los rellenos que se asignan a un rea de trabajo pueden ser personalizados al escoger un color plano y una textura de acuerdo a su criterio. Pasos para asignar un relleno y personalizar 1. Crear una hoja de trabajo 2. Dibujar un objeto (rectngulo) sobre la hoja creada que ocupe el tamao de la hoja creada --- definir tamao (arrastre de mouse) 3. Seleccionar el botn relleno y en la categora de relleno -> solido (escoger un color) 4. Seleccionar el botn textura (escoger una textura)

Ejercicio 1: 1. 2. 3. 4. 5. Crear una hoja de 5 cms. De ancho y 3 cms. De alto Dibujar un rectngulo sobre la hoja creada Asignar el color azul (0000CC) Escoger la textura Lnea-Vert 1 Cantidad de textura 50%.

Ejercicio 2: 1. Crear una hoja de 5 cms. De ancho y 3 cms. De alto 2. Dibujar una elipse, asignar el color verde (009966)

3. 4. 5. 6. 7.

Escoger la textura Marea Negra Cantidad de textura 50%. Color de borde negro (000000) Tamao de la punta 3 (ancho) Categora del trazo Lpiz 1 pixel Blando

Ejercicio 3: 1. 2. 3. 4. 5. 6. 7. Crear una hoja de 5 cms. De ancho y 3 cms. De alto Dibujar una elipse, asignar el color verde (009966) Escoger la textura Marea Negra Cantidad de textura 90%. Color de borde negro (000000) Tamao de la punta 3 (ancho) Categora del trazo lpiz 1 pixel blando

Ejercicio 4: 1. 2. 3. 4. 5. 6. 7. Crear una hoja de 5 cms. De ancho y 3 cms. De alto Dibujar un rectngulo redondeado sobre la hoja creada. Asignar un color naranja (FF9900) Escoger la textura Fibra / cantidad de textura 75% Color de borde celeste (0066FF) Tamao de la punta 5 (ancho) Categora del trazo lpiz 1 pixel blando

Degradado
Es la transicin gradual entre dos o ms colores, esta combinacin de colores es posible ejecutarla en la hoja de trabajo o un rea determinada.

Relleno Degradados
Los rellenos degradados nos permiten compartir colores. 1. Crear una hoja de trabajo (cms.) (pixeles). Ejemplo: 15 cm. de ancho y 2.5 cm. de alto. 2. Dibujar un objeto sobre la hoja creada (rectngulo, elipse, etc.) Para la creacin de un degradado dibujar un rectngulo que ocupe el tamao de la hoja creada 3.- Seleccionar el botn relleno degradado (paleta de herramientas)

4.- Desde el inspector de propiedades (panel)

Contiene una librera (modelos) de relleno.

Seleccionar la opcin categora de rellenos.

Nota: La creacin de rellenos degradados nos permitir la creacin de banners, es decir podremos insertar textos e imgenes al relleno degradados que se cree con distintas combinaciones de colores categora y texturas.

Efectos a Textos
Fireworks nos proporciona efectos que se aplican a textos e imgenes (fotos). Ejercicio 1

1. Crear una hoja de 800 pixeles de ancho / 100 pixeles de alto / resolucin de 96 pixeles /cms. 2. Dibujar un rectngulo sobre la hoja de trabajo asignar color verde (006633) 3. Digitar el texto MADRE DE DIOS tipo de letra Futura MD BT / tamao 60 / color blanco (FFFFFF) / Escala horizontal 120%. 4. Aplicar efectos al texto digitado aadir efectos o elegir un preestablecido. Opcin sombrear e iluminar / iluminado Ancho: 7 / color: azul (0000CC) / Opacidad: 80% / Suavidad: 10 / Desplaz. Del halo: 1 5. Digitar el texto Te espera Todo el Ao! Tipo de letra Arial / tamao 28 / color blanco (FFFFFF) / estilo negrita.

Ejercicio 2 1. Crear una hoja de 800 pixeles de ancho / 100 pixeles de alto / resolucin de 96 pixeles /cms. 2. Dibujar un rectngulo sobre la hoja de trabajo asignar color verde (009999) 3. Digitar el texto Cmara Regional de Turismo tipo de letra Arial / tamao 50 / color azul (000066) / estilo negrita. 4. Aplicar efectos al texto digitado aadir efectos o elegir un preestablecido. Opcin sombrear e iluminar / sombra Distancia: 11 / color: amarillo (FFFF00) / Opacidad: 100% / Suavidad: 3 / ngulo: 147

Ejercicio 3 1. Crear una hoja de 800 pixeles de ancho / 100 pixeles de alto / resolucin de 96 pixeles /cms. 2. Dibujar un rectngulo sobre la hoja de trabajo asignar relleno azul (0033FF) Categoria de relleno -Lineal. 3. Seleccionar relleno degradado escoger preestablecido blanco, negro cambiar colores de blando a rojo (FF0000) de negro a azul (000066) 4. Categora de relleno del degradado rectngulo 5. Escoger textura Pergamino Cantidad de textura 35% 6. Digitar el texto ACI tipo de letra Futura MD BT / tamao 45 / color blanco (FFFFFF) opcin bisel y relieve / bisel exterior

Ancho: 8 / color: negro (000000) / contraste 75% / suavidad : 5 / angulo:135 / estado preestablecido: plano 7. Digitar el texto: DIGITALIZACION Tipo de letra arial / tamao 38 / color blanco / estilo: negrita 8. Digitar el texto: Servicios integrales Tipo de letra arial / tamao 30 / color blanco / estilo negrita / estilo cursiva.

Collage
Un collage es un producto, realizado a partir de diversos componentes que le permitan cumplir una funcin, donde se conjugan diversos elementos. El diseo de un collage es la unin de imgenes, esta unin consiste en eliminar los bordes o resaltar los bordes.

Editar Imgenes
Las imgenes pueden ser editadas con el fin de corregir en algunos colores, asignar brillos y opacidad a determinadas imgenes. Ejemplo de ajustes de color (correccin de color): 1. 2. 3. 4. 5. 6. Crear una hoja de trabajo de 550 de ancho por 90 de alto (pixeles) Importar una imagen Aplicar efectos/ajustar color (modificar la imagen) En una matiz (252), saturacin (5) y luminosidad En otra curvas En otra niveles

Ejemplo de bisel y relieve 1. Una con bisel exterior

Creacin de Botones
Los botones cumplen la funcin de enlazar pginas generando los hipervnculos entre diversas pginas cuyo contenido puede ser texto e imgenes. Es importante que el botn que se construya tenga un diseo y los colores apropiados a la caratula que ud. Haya diseado o disee posteriormente.

1. En una hoja de 500 pixeles de ancho y 300 alto con resolucin de 80 pixeles/cms. 2. Men ventana/biblioteca comn/botones. Escoger un diseo de botn e importar 3. Se activa la siguiente ventana, conteniendo el diseo de botn predeterminado. Si deseamos construir ms botones con el diseo seleccionado, tendremos que duplicar el diseo de botn y pulsar las teclas CTRL + ALT / seleccin con el mouse sobre el botn y arrastres hacia un determinado lugar de la hoja de trabajo (destino). 4. Doble seleccin en cualquiera de los botones para acceder al editor de textos y relleno. 5. Digitar un determinado texto y si desea puede cambiar el color de relleno del botn. Texto Inicio --- Tipo Arial /Tamao 23 /Color Blanco /Estilo Negrita Relleno Del Botn Celeste/Color Azul 6. Despus digitar un texto y asignar color al texto y relleno de botn. Aplicar un contextual en el botn seleccin en insertar zona interactiva o insertar divisin / mensaje confirmar opcin --- uno 7. Contextual en el botn/ seleccin en exportar divisin seleccionada 8. En la ventana que se activa escoger un destino digitar un nombre ejemplo --- botn 1 (debe estar en minsculas, sin tilde y no debe exceder de 8 caracteres) en la opcin tipo de archivo debe seleccionar--- HTML e imgenes o solo imgenes