Para mas informacion visitanos al sitio http://www.josuefortis.info ahi encontraras temas de diseño web y multimedia.

1. Escuela en Ing. de Sistemas Diseño Web y Multimedia I
Entorno a Fireworks
En primer lugar vamos a recordar tener una carpeta para poder tener nuestras imágenes a guardar o a editar
desde fireworks.
1. Cuando abrimos fireworks, en la pantalla de bienvenida hacemos clic en Crear un nuevo documento de
fireworks
2. Nos aparecerá un cuadro de información donde nos pide poner información de nuestro lienzo de
trabajo. Pondremos la información siguiente:
Y nos saldrá un lienzo, de ancho 550 y alto 400 y de resolución 72. Con fondo blanco.
Optimización de imágenes
En este primer ejercicio haremos el tratamiento de imágenes en pocas palabras el cambio de un formato
pesado para la web a otro formato más liviano para internet.
3. Hacemos clic en archivo. Luego importar y nos traeremos una imagen extensión *.bmp Nos saldrá el
cuadro de búsqueda para encontrar un archivo de imagen. (En mi caso yo seleccione una imagen bmp
que pesa 3.75 MB que se llama startux) La imagen la pueden descargar de aquí:
http://art4linux.org/system/files/Tux+war_black_sxga.jpg y le pueden cambiar nombre a startux
4. Nos aparecerá un ángulo abierto el cual pondremos en el lienzo (el cuadro blanco donde
dibujamos) y mediante arrastre decidimos el tamaño de la imagen.
5. Si por casualidad no nos queda la imagen en el tamaño deseado podemos acomodarlo con la opción de
herramienta de escala y nuestra imagen tendrá unos nodos de re direccionamiento así
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 1

2. Escuela en Ing. de Sistemas Diseño Web y Multimedia I
6. Seleccionamos de nuevo la herramienta de selección . Hacemos clic en el panel de Optimización y
alineación y ahí podremos ponerle las características que queremos. (En caso
de no salir este panel nos vamos al menú ventana y clic en optimizar). Le pondremos las siguientes
características.
JPEG – Mejor Calidad y la Calidad 80.
7. Nos vamos a Archivo > Exportar. Nos parece el cuadro de información que nos pregunta donde
guardaremos la imagen. Buscamos nuestra carpeta de imágenes y le ponemos un nombre en mi caso
yo le puse tux comprimido, no le cambiamos nada más y le damos guardar.
Cuando voy a buscar la imagen que acabamos de guardar y veo sus características me aparecen así
Después de pesar 3.75 MB, Ahora nada mas pesa 40.4 KB. Un cambio de 3.70 MB menos que ha tenido. Quizás
dirás que este lienzo era más pequeño que el original que media 1280 * 1024 y este nuevo solo mide 550 * 400
Tal vez tengas un poco de razón pero prueba con un nuevo lienzo (Archivo > Nuevo antes de hacer esto
asegúrate de haber cerrado la imagen anterior para evitar cualquier tipo de problema) con el tamaño del lienzo
de 1280 * 1024 y repite los pasos y al final te darás cuenta que siempre comprime la imagen a 150 KB y este es
un gran cambio recordando que la imagen pesa 3.75 MB.
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 2

3. Escuela en Ing. de Sistemas Diseño Web y Multimedia I
Realiza este otro ejercicio
Consigue de internet imágenes .bmp o imágenes pesadas o con la misma imagen del ejercicio anterior prueba
la optimación de imágenes con formatos .gif, .png 8, tiff 8, bmp 8 y JPEG pero bájale la calidad a menos de 80 y
compara los pesos de las imágenes.
Trazos Básicos
1. Cree un nuevo lienzo 500 x 500 píxeles. En la zona Vector de la barra de herramientas, seleccione la
herramienta rectángulo . Utilice un trazo: 1 píxel blando, con tamaño de punta 4, color azul
.
2. Dibuje un rectángulo. Utilice la herramienta puntero . Seleccione el rectángulo. Haga clic en Ver >
Ajustar selección (Esto hará que el elemento se ajuste al tamaño de la pagina).
3. Aplique un relleno sólido de color amarillo .
4. Cambie la textura del relleno y pruebe los tipos Ónice, Metal y Rayado 4. Cambie la cantidad de textura
y pruebe con 20 y con 80.
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 3

4. Escuela en Ing. de Sistemas Diseño Web y Multimedia I
Busque en texturas los que se pide y pruebe con otros más.
5. Haga clic en Ver > Ajustar todo. Vuelva a Ajustar la selección.
6. Cambie el grueso del trazo y ponga 8. Aplique un tipo de trazo redondeado suave. Pruebe el tipo
acuarela grueso. Baje la suavidad del borde a 20. Cambie el trazo a aceite, cerdas. Pruebe Aceite,
hebras.
7. haga clic en Ver > Ajustar todo.
Sigue con estos ejercicios
Haz las siguientes figuras y prueba diferentes texturas y rellenos al pincel y al relleno.
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 4

5. Escuela en Ing. de Sistemas Diseño Web y Multimedia I
Trazos Vectoriales
La herramienta de pluma es de las más importantes a ocupar para los dibujos vectoriales. Haremos un
ejercicio para aprender a ocupar esta opción. Sería bueno que en un lienzo vacio probaras unos cuantos trazos
con la pluma antes de empezar el ejercicio.
1. Primero importaremos una imagen al lienzo. El lienzo puede tener el tamaño que tú quieras. (En mi
caso importare una imagen con la que empecé a crear mis primeros dibujos vectoriales).
Imagen descargada de http://www.csv.go.cr/educacion/PG000023_files/image004.jpg
2. En el panel de las capas veremos que aparece la capa donde está la imagen. Disminuimos la opacidad
de la imagen de 100 a unos 30 con el objetivo de ver opaca la imagen.
3. Seleccionamos la herramienta de pluma . Y empezamos a dibujar sobre la imagen.
Automáticamente al dibujar el trazo me aparece una nueva capa donde se está dibujando el trazo.
Teniendo el trazo puedes ampliar la imagen con la herramienta escala y veras que no se distorsiona, también
puedes poner algún relleno. Hoy vectoriza una imagen más complicada para que domines mejor esta
herramienta, y trata de hacerle todos los detalles y no solo el borde, como la siguiente:
Imagen descargada de http://izaak.jellinek.com/tuxes/images/matux.jpg
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 5

6. Escuela en Ing. de Sistemas Diseño Web y Multimedia I
Texto
Para iniciar este ejercicio, abriremos un nuevo lienzo con las siguientes características
Ancho: 400 – Alto: 400 – Resolución: 72 y color de lienzo personalizado
y selecciona un color a tu gusto.
1. Vamos a dibujar un rectángulo en el lienzo con un color de relleno y adentro del
rectángulo inserto un texto con la herramienta de texto. Recuerda que puedes ajustar el texto con
la herramienta escala o en las propiedades del texto.
2. Selecciona solo el texto y hacemos clic en Texto > Convertir texto en trazo (Text > Convert to
Paths). Cada letra hoy es un trazo.
3. Luego hacemos clic en Modificar > Desagrupar (Modify > Ungroup) con esto conseguimos un trazo
simple a cada letra.
4. De nuevo hacemos clic en Modificar > Combinar trazados > Unir (Modify > Combine Paths > Unión)
para tener un trazado compuesto.
5. Utilizamos un arrastre con la herramienta puntero para seleccionar todo, incluyendo el
rectángulo. Debe tener todo seleccionado.
6. Haga clic en Modificar > Combinar trazados > Perforar (Modify >Combine Paths > Punch) El objeto
perforado es un trazado compuesto al que manipular sus puntos de forma individual.
Con la ayuda de tu docente realiza los siguientes ejercicios
1. Que un texto tenga una imagen de fondo
2. Ajustar un texto al trazo de una figura.
Bibliografía
Algunos ejercicios tomados de http://www.reypastor.org/departamentos/dinf/enalam/
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 6