Grado de Multimedia
multimedia.uoc.edu
Guía de aprendizaje
de Fireworks CS5
Autor: Guillermo de la Iglesia
Coordinación: Roser Beneito
Fecha de publicación: 25/03/2011
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Orientación Universidad
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Busca documentos
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Busca tu universidad
Encuentra los documentos específicos para los exámenes de tu universidad
Video Cursos
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Quiz
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pregúntale a la comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
¡Nuestros e-books salva-estudiantes!
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
Guía práctica para usar herramientas de diseño web con Fireworks CS5, Apuntes de Informática
Explora este documento para aprender a utilizar Fireworks CS5 para crear ilustraciones, optimizar documentos, combinar vectores y píxeles, crear gráficos animados y realizar procesos automáticos. Encontrarás pasos a paso para crear un logotipo, trabajar con ilustraciones y gráficos importados, realizar fotomontajes y más.
Tipo: Apuntes
2022/2023
1 / 199
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
Documentos relacionados
Vista previa parcial del texto
¡Descarga Guía práctica para usar herramientas de diseño web con Fireworks CS5 y más Apuntes en PDF de Informática solo en Docsity!
de Guía de aprendizaje
Fireworks CS
Autor:
(^) Guillermo de la Iglesia
Coordinación:
(^) Roser Beneito
Fecha de publicación: 25/03/
Índice de tutoriales
1. Creación de un logotipo
2. Creación de una ilustración
3. Trabajar con ilustraciones y gráficos importados
4. Realización de un fotomontaje
5. Realización del diseño de la interface de una web
6. Creación y remaquetación de un banner
7. Creación de un gráfico interactivo y un minisite
8. Creación de un portfolio
9. Creación de prototipos para aplicaciones multimedia
0. Introducción
Guía de Aprendizaje
Fireworks CS5: guía de maquetación TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Objetivos
Introducir el conocimiento del entorno de trabajo de Fireworks.
Conocer las herramientas de creación de formas básicas y manipulación de los elementos.
Aprendizaje de las herramientas vectoriales y en el trabajo de mapas de bits
Trabajar conjuntamente con Fireworks y otros programas vectoriales.
Aprender el uso de las herramientas de retoque
Practicar la optimización de documentos y la exportación del archivo optimizado
Compaginar el uso conjunto de Vectores y Píxeles
Practicar el uso de símbolos y la creación de gráficos animados
Practicar la realización de procesos automáticos
Practicar la interactividad en Fireworks
Exportar archivos de imágen y HTML
Práctica del uso de Fireworks como herramenta de prototipado
INTRODUCCIÓN OBJETIVOS
Guía de Aprendizaje
Fireworks CS5: guía de maquetación TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 1 de 18
Este primer tutorial consiste en la realización de un logotipo. La realización de esta práctica nos permitirá conocer los fundamentos básicos del programa.
En la imagen de la derecha observamos el entorno de trabajo de Fireworks CS5 tal como aparece por defecto cuando abrimos por primera vez el programa. Como podemos observar, está organizado y homogeneizado con las interface de Adobe. Los usuarios de otras aplicaciones de Adobe podrán reconocer claramente estos elementos comunes.
Al igual que la mayoría de programas de tratamiento de imagen, consta de una barra de menús, una paleta de herramientas, una serie de paneles e inspectores, y la ventana del documento.
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
1
2
3
5
4
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 3 de 18
Para crear un documento nuevo en Fireworks podemos utilizar varias opciones: desde la barra de menús, la caja de herramientas o los comandos abreviados.
Se sigue una de estas tres opciones:
- Seleccionar en la barra de menús Archivo > Nuevo
- Seleccionar en la Caja de Herramientas Principal el icono de Hoja en blanco
- Pulsar Ctrl + N
Después de haber seguido uno de los tres pasos anteriores se abrirá el cuadro de diálogo Documento nuevo. En él se deben introducir los valores deseados para este nuevo documento.
En los campos Anchura y Altura debemos introducir los valores correspondientes que queramos para la nueva imagen. Estos valores los podemos introducir en unidades de Píxeles, Pulgadas o Centímetros. Basta con seleccionarlo en el menú desplegable que acompaña el campo de texto.
Aparte de la anchura y la altura, también tendremos que introducir la resolución de la imagen.
Otro valor que hay que añadir a la imagen es el color del lienzo (el color del fondo).
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
En este caso introduciremos los siguientes valores:
- Anchura 300 px
- Altura 100 px
- Resolución 72 ppp
- Color del lienzo Blanco
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 4 de 18
El resultado de todos estos pasos es un nuevo documento vacío.
Una vez abierto un documento en Fireworks podemos ver y modificar en cualquier momento su formato desde el Inspector de propiedades.
En el caso de no tenerla ya visible, colocaremos la barra de herramientas Principal desde el panel ventana.
Cambiar color de fondo
Cambiar tamaño del lienzo del documento
Cambiar tamaño del documento
Cambiar tamaño del lienzo al tamaño del objeto seleccionado
Guía de Aprendizaje Fireworks CS5: guía de maquetación
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 6 de 18
Como hemos dicho anteriormente, la información del Inspector de Propiedades cambia según vamos trabajando, y sólo nos muestra las opciones necesarias en cada momento.
De esta manera al tener seleccionado el rectángulo, el Inspector de Propiedades muestra todas las opciones de gráficos vectoriales como el trazo y el relleno.
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
Alto y ancho del rectángulo Situación del rectángulo dentro del lienzo Características del relleno
Características del trazo Transparencias y efectos Combinar trazados Estilos
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 7 de 18
Si queremos cambiar el color del rectágulo que hemos dibujado tendremos que presionar en el icono de color de relleno, situado en el inspector de propiedad, de este modo desplegaremos la tabla de colores.
En nuestro caso seleccionaremos un color azul oscuro.
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
Color actual Previsualización del color seleccionado Seleccionar otro color Si quisiésemos un rectángulo sin color de relleno, seleccionaríamos esta casilla
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 9 de 18
La siguiente herramienta que utilizaremos para la creación del logotipo será la herramienta polígono.
Con la herramienta polígono podemos dibujar cualquier clase de figura regular.
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
El número de lados lo indicaremos en el inspector de propiedades.
Ejemplo 5 lados Ejemplo 10 lados
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 10 de 18
Con la herramienta Polígonos también es posible dibujar estrellas. Tendremos que seleccionarla como forma de polígono en el Inspector de Propiedades.
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
Ejemplo polígono Ejemplo estrella Ejemplo Automático (38º) Ejemplo 70º
Al seleccionar la forma Estrella también se activa la opción Ángulo. Con esta opción controlamos el ángulo de las puntas de la estrella. Si seleccionamos Automático, se pondrá automáticamente el más apropiado para el numero de lados que hayamos seleccionado anteriormente.
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 12 de 18
Al seleccionar con esta herramienta el objeto queda enmarcado con lo que se denominan “asas de transformación”.
Estas asas son las que nos servirán para transformar la figura. Si estiramos de uno de sus puntos modificaremos el tamaño. Así, por ejemplo, desplazando hacia dentro el objeto deviene más pequeño.
Guía de Aprendizaje Fireworks CS5: guía de maquetación
Nota: Como hemos podido observar al estirar del punto del asa, las proporciones del objeto se han mantenido iguales durante el escalado. Esto es así siempre que los puntos desde los que se arrastra sean los de las esquinas del objeto. Si estirásemos desde un punto del borde, sólo se escalaría un eje.
Nota: La herramienta escalar tambien es la herramienta que nos permite girar el objeto. Seleccionando una esquina del objeto y estirando en diagonal lo hacemos rotar.
Resultado
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 13 de 18
Ahora que tenemos el objeto al tamaño deseado nos dispondremos a colocarlo en su lugar correcto.
Para ello seleccionaremos la herramienta puntero, en la barra de herramientas.
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
Para mover el objeto basta con seleccionarlo con el Puntero clicando sobre él y arrastrarlo hasta la zona deseada. Es conveniente arrastrar el objeto desde su centro para evitar deformarlo.
Nota: La diferencia entre la herramienta Puntero (flecha negra) y la herramienta Subselección (flecha blanca), es que con el Puntero seleccionamos el objeto entero, mientras que con la herramienta Subselección seleccionamos puntos concretos del objeto.
Cuando seleccionais con esta herramienta los puntos del objeto quedan marcados en blanco.
De esta manera podemos seleccionar un punto concreto del objeto para moverlo.
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 15 de 18
Una de las novedades que introdujo Fireworks 8 fue la creación de formas automáticas.
Las formas automáticas son objetos primarios que pueden variar la posición de sus puntos y responder de forma inteligente a medida que se los transforma.
Para ver su funcionamiento introducciremos una forma automática en la composición de nuestro logotipo.
Seleccionaremos la herramienta Flecha.
Guía de Aprendizaje
Fireworks CS5: guía de maquetación
Dibujaremos la forma Flecha de la misma manera que dibujamos anteriormente las formas simples.
Podemos observar como característica de las formas automáticas, que contienen unos puntos amarillos a parte de los puntos de selección azules ya vistos en las formas simples.
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Tutorial 1. Creación de un logotipo
Desarrollo del tutorial: paso 16 de 18
Mediante estos puntos de control se pueden ajustar los parámetros automáticos de la forma, que en el caso de la forma Flecha son la agudez de la punta, la longitud y anchura de la cola y la longitud de la punta.
Guía de Aprendizaje Fireworks CS5: guía de maquetación
Resultado
TUTORIALES 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9