Escuela en Ing. de Sistemas Diseño Web y Multimedia I

Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 1

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í

Escuela en Ing. de Sistemas Diseño Web y Multimedia I

Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 2

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.

Escuela en Ing. de Sistemas Diseño Web y Multimedia I

Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 3

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.

Escuela en Ing. de Sistemas Diseño Web y Multimedia I

Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 4

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.

Escuela en Ing. de Sistemas Diseño Web y Multimedia I

Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 5

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

Escuela en Ing. de Sistemas Diseño Web y Multimedia I

Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara. 6

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/