El programa que utilitzarem per a la producció d’elements gràfics  serà el Fireworks MX 2004.

Per iniciar el programa anem al menú Inicio–> Programas –> Macromedia –> Fireworks MX 2004.

Un cop obert el programa seleccionar el menú archivo –> Nuevo. S’obre un quadre de diàleg on heu d’escriure 300 d’amplada i 300 d’allargada.

Guardeu el document on a la vostra carpeta que heu creat seleccionant Archivo–> Guardar Como i poseu-li el nom Castellers.

Agafeu l’eina Rectangulo del sector Vector de la barra d’eines.

A l’inspector de propiedades cliqueu sobre la icona que representa un pot de pintura que es vessa i s’obre una finestra amb molts colors. Seleccioneu el color #FF0000.

Aneu sobre el quadre blanc de la pantalla (zona on s’ha de fer el dibuix) i arrossegueu el ratoli amb el botó esquerra apretat per tenir un quadrat. Us ha de quedar un quadre vermell.

Seleccioneu l’eina Puntero que és la primera per dalt de tot.

Seleccioneu la icona del llapis al menú de propiedades i quan s’obrin la finestra amb els colors introduiu #FFFF00.

Des del menú Archivo –> Importar importeu la imatge:

Quan ho feu veureu que el cursor s’ha convertit en un angle. Cliqueu amb aquest sobre el marge esquerra superior de la zona de dibuix i arrossegueu-lo fins a completar tota la superficie, permeten que la imatge importada es mostri sencera.

Us ha de quedar:

Observeu ara la finestra flotant del costat dret anomenada Capas. Si no està visible la podeu activar des del menú Ventana –> Capas.

Heu de veure a més a més de la Capa de Web dos nivells que Fireworks ha generat per cada un dels elements. Per un costat doncs hi podeu veure el nivell Rectangulo i per l’altre la fotografia que s’identifica com a mapa de bits.

Per acabar la pràctica seleccioneu l’eina Texto ( el seu simbol es una A majuscula), amb el ratolí apreteu el botó de l’esquerra i feu un quadrat a sobre del dibuix que esteu creant i introduïu-hi el següent text: castell i castellers.

A propiedades amb el quadre de text seleccionat, trieu una lletra arial de mida 43 i color #FF6633 i justifiqueu-lo per la dreta.

Posicioneu aquest text a la part superior dreta del document.

Ha de quedar semblant a:

Enhorabona!! ja heu fet un primer disseny.

Comencem la pràctica 2.

Comenceu creant un nou arxiu a través de l’opció de menú Archivo | Nuevo. Teclegeu 600 píxels d’ample per 500 d’alt amb una resolució 72. El color de l’àrea de treball ha de ser blanc.

Aneu al menú Ver | Cuadrícula | Editar cuadrícula… Teclegeu 50 x 50 píxels i activeu els requadres de Mostrar Cuadrícula i Ajustar a Cuadrícula. Activant aquest requadre la quadrícula actuarà com un imant a l’hora de posicionar els objectes.

Al sector de Vector de barra d’eines agafeu l’eina Rectángulo. Per a dibuixar un quadrat arrossegueu aquesta eina per l’àrea de disseny mentre premeu Majúscules fins a obtenir un quadrat de 100 X 100 píxels.

Amb el rectangle seleccionat aneu a la barra d’eines Colores i cliqueu sobre el requadre que hi ha al costat del Bote de pintura. Aleshores s’obre una finestra emergent, en el quadre de text heu d’escriure-hi la referència #FF9900. Així el quadrat pren aquest color.

Cloneu aquest objecte. Per fer-ho, aneu al menú Edición | Clonar o prémer Control+Majúscules+D.

A sobre de l’anterior, s’hi ha creat un objecte idèntic. Situant l’eina Puntero a l’interior de l’objecte, el moureu 100 píxels de manera que quedi alineat horitzontalment amb l’anterior. Feu el mateix amb el segon quadrat, de manera que en tingueu tres.

Amb l’eina Rectángulo en dibuixeu ara un de 500 píxels d’ample per 50 d’alt. Mantenint el rectangle seleccionat cliqueu sobre la mostra de color que hi ha al costat del Bote de pintura de l’Inspector de propiedades. Aleshores s’obre una finestra emergent. En el quadre de text introduïu-hi la referència de color #6699FF.

Observeu que el Tipo de Relleno estigui en Sólido. Mitjançant el Puntero posicioneu el nou rectangle damunt els tres quadrats dibuixats anteriorment .

Recordeu que si manteniu el botó del ratolí pressionat sobre una eina que contingui un petit triangle a la part inferior obteniu diferents modalitats d’eina. Feu això sobre l’eina Rectángulo i trieu l’eina Polígono. A l’Inspector de propiedades hi heu de trobar una opció que es diu Forma. Escolliu la modalitat De estrella i introduïu el valor 5 en el quadre de text de la casella Lados.

Arrossegueu el cursor sobre l’àrea de treball i dibuixeu una estrella de 5 puntes de la mida que vulgueu.

Amb l’estrella seleccionada aneu al menú Modificar | Transformar| Transformación Numérica Control+Majúscules+T.

En el requadre de text activeu l’opció Cambiar tamaño i teclegeu el valor 100 píxels d’ample. Activeu també l’opció Restringir las proporciones, cosa que farà que aquestes es conservin.

Ara teniu una estrella de l’ample desitjat. Potser quan l’heu dibuixada no heu pensat a fer-la paral·lela als rectangles. Si és el cas, l’heu de girar i per fer-ho us cal anar al menú Modificar | Transformar | Transformación Libre o prémer les tecles de drecera Control+T.

Fixeu-vos que ara l’estrella ha quedat com emmarcada dins d’una forma més o menys quadrada. Si us poseu sobre els punts que marquen els vèrtexs dels quatre costats de la imatge, s’activa un símbol de rotació. Movent-lo a esquerra o dreta podeu fer girar l’objecte segons les vostres necessitats i fer que en canviï l’orientació. Reposicioneu-lo de forma paral·lela al costat superior del rectangle.

Aneu ara a l’Inspector de propiedades i a l’opció de color assigneu el valor #FFFF00. Dupliqueu l´estrella mitjançant el menú Edición | Duplicar, o prement Control+Alt+D.

Desplaceu les dues estrelles amb el cursor i posicioneu-les damunt el rectangle blau i al mig dels quadrats vermells, tal i com podeu veure a la figura inferior. Aquest ha de ser el resultat que obtingueu en acabar aquesta pràctica.

Si mai no havíeu treballat amb un programa com aquest ja veieu que no és pas tan difícil.

Ara dibuixeu un rectangle amb els vèrtexs arrodonits. Per fer-ho, agafeu l’eina Rectángulo redondeado, que és una de les opcions del desplegable de l’eina Rectángulo i el dibuixeu com vulgueu.

A l’Inspector de propiedades introduïu els valors 400 píxels dl’amplada per 50 d’alçada.

Amb el Puntero intenteu posicionar de forma centrada aquest rectangle arrodonit damunt les puntes de les estrelles i ompliu-lo amb el color #FFCC00

Ja sou a punt d’acabar el treball. Només us falta un simple cercle que heu de construir amb l´eina Elipse.

Aquesta eina dibuixa el·lipses, però si manteniu premuda la tecla Majúscules mentre arrossegueu el cursor, com en aquell cas de l’eina rectangle que feia quadrats, dibuixareu una circumferència perfecta.

Dibuixeu-la de la mida que més us agradi i a l’Inspector de propiedades introduïu-hi un valor de 100 píxels tant d’amplada com d’alçada. És evident que si no l’haguéssiu traçat amb la tecla Majúscules premuda, també l’hauríeu fet perfectament rodona en introduir aquests paràmetres des de l’Inspector de propiedades.

Canvieu ara el color a #00FF00 i situeu el cercle en el centre de la imatge, damunt el rectangle taronja.

És probable que el conjunt de la imatge estigui desplaçada respecte a l’àrea de disseny.

Aneu al menú Seleccionar | Seleccionar Todo (Control+A). Ara de tots els objectes en fem un únic grup a través del menú Modificar | Grupo o prement Control.+G.

Amb els cursors de teclat reposicioneu còmodament el dibuix en el centre de l’àrea i desactiveu la quadrícula a través del menú Ver | Cuadrícula | Mostrar Cuadrícula.

Com veieu, construir polígons amb el Fireworks MX 2004 s’assembla una mica a jugar amb peces d’aquelles que teníem quan érem infants.

Deseu la composició amb el nom joguina.png

I ja tenim aqui la pràctica 3.

Obriu un document nou de 540 píxels d´amplada per 300 d’alçada que anomenarem trenet.

Per tal de treballar còmodament demaneu al programa que mostri una quadrícula que heu d’editar prèviament . Aneu al menú Ver | Cuadrícula | Editar cuadrícula… i teclegeu dos valors submúltiples de les mides del document: 20 píxels d’amplada i 20 d’alçada.

Després feu que es mostri i s’activi la quadrícula mitjançant el menú Ver | Cuadrícula | Mostrar cuadrícula i del menú Ver | Cuadrícula | Ajustar a cuadrícula. D’aquesta manera tindreu una retícula adaptada a l’àrea de treball que us permetrà dibuixar millor.

Ara començareu a definir el tren. Amb l’eina Rectángulo en dibuixeu un qualsevol i en el sector de mides de l’objecte a l’Inspector de propiedades hi introduïu els valors 120 píxels d’amplada per 120 d’alçada. El vostre rectangle ha de convertir-se en un quadrat d’aquestes mides.

Trieu el color #E9956C al selector de color de l’Inspector de propiedades i pinteu-lo.

Construïu un altre rectangle de 80 píxels d’ample per 60 d’alt. Com que anteriorment heu activat la quadrícula, us és molt fàcil dibuixar-lo directament ja que ambdues mides es corresponen amb quatre quadrats d’ample per tres d’alt.

Al tenir activada l’opció de menú Ajustar a cuadrícula, aquesta actua com un imant a l’hora de dibuixar.

Pinteu-lo de color blanc i arrossegueu-lo mitjançant el Puntero damunt l’altre quadrat com si fos la finestra d’un vagó de tren.

Seleccioneu els dos objectes i aneu al menú Seleccionar | Seleccionar Todo o arrossegant el Puntero mentre premeu el botó primari del ratolí per tal de crear una àrea que els englobi tots dos.

Tot seguit perforeu aquests dos objectes mitjançant l’opció de menú Modificar | Combinar trazados | Perforar. Els dos objectes es converteixen en un. Ja teniu un vagó del futur tren.

Aneu ara al menú Edición | Duplicar o Control+Alt+D. Dupliqueu el vagó dues vegades.

Ja teniu els tres vagons que necessiteu per fer el tren. Ara, ajudant-vos de la quadrícula, els alineeu deixant 40 píxels d’espai entre vagó i vagó.

Fet això empreneu la xemeneia de la locomotora.

Per fer-la dibuixeu un quadrat de 40 per 40 píxels.

Feu-ho mitjançant l’eina Rectángulo, però mentre arrossegueu el cursor mantingueu premuda la tecla Majúscules, que, com ja hem dit a la pràctica anterior, és la manera de convertir rectangles en quadrats i el·lipses en circumferències.

Pinteu-lo del mateix color que els vagons.

Podeu recuperar aquell color mitjançant el Cuentagotas que hi ha al mateix selector de color de l´Inspector de propiedades. Tanmateix, aquest és un procediment que només és fiable quan treballeu amb tintes planes ja que en treballar amb fotografies les alteracions de color oscil·len ràpidament d’un píxel a l’altre i la mostra que el Cuentagotas en treu no sempre és l’adient.

Tot seguit adjunteu aquest quadrat a la part superior davantera del primer vagó. Fet això cliqueu sobre els dos mentre premeu Majúscules i seleccioneu el vagó i el quadrat que acabeu de fer.

Ara aneu al menú Modificar | Combinar trazados | Unir i uniu-los per tal de convertir-los en un únic objecte.

Ara empreneu les rodes.

Dibuixeu un cercle de 40 píxels de diàmetre mitjançant l’eina Elipse mentre manteniu la tecla Majúscules premuda.

Pinteu-lo amb el color #940404 i arrossegueu-lo mitjançant el Puntero a la part davantera de la locomotora.

Ara aneu al menú Edición| Clonar o premeu Control+Majúscules+D per tal de clonar aquest objecte.

Mitjançant les tecles de fletxa de cursor, desplaceu aquest segon cercle a la part posterior del primer vagó.

Seleccioneu ambdós cercles clicant amb el Puntero mentre teniu premuda Majúscules i dels dos feu-ne un únic grup.

Per poder-ho fer us cal o bé anar al menú Modificar | Agrupar o bé prémer Control+G.

Dupliqueu aquest grup tal i com heu fet abans el grup de rodes. Aneu al menú Edición| Duplicar i traslladeu aquest grup al segon vagó. Repetiu l’operació per fer el tercer.

Seleccioneu ara el primer vagó i les seves corresponents rodes i agrupeu-ne el contingut. En acabat feu el mateix amb el segon i tercer vagons.

Per tal de donar moviment als vagons, els aplicarem una rotació de dos o tres graus. Per fer això seleccioneu el primer vagó i aneu al menú Modificar | Transformar | Transformación libre. Si voleu, també podeu fer-ho amb les tecles de drecera Control+T.

Aleshores, al voltant de l’objecte, es crea una mena de quadrat com el que ja heu fet servir en la rotació de l’estrella de la pràctica anterior. Situeu el cursor a prop d’un vèrtex i espereu que us aparegui el símbol de rotació.

Manipuleu aquest símbol a dreta i esquerra fins que el vagó quedi com desitgeu. Quan ja el tingueu en la posició adequada premeu Retorn per tal de confirmar la transformació. Feu el mateix amb el segon i el tercer vagó.

Per veure la perforació, col·locarem una fotografia d’un paisatge darrera el tren. D’aquesta manera donarem a la nostra creació un aspecte més agradable.

Aneu al menú Archivo | Importar la imatge:

El Fireworks MX 2004 us mostra aleshores un angle. Cliqueu amb el botó primari de ratolí a la part superior esquerra de la il·lustració i mantenit-lo clicat arrossegueu-lo fins a l’extrem inferior dret per tal que la imatge importada es pugui mostrar.

Amb la fotografia seleccionada, aneu ara al menú Modificar | Organizar | Enviar al fondo.

No us sembla que això ja comença a tenir cara i ulls?

Per acabar dibuixeu el sòl.

Construïu un rectangle de 540 píxels d’ample per 67 d’alt i col·loqueu-lo a la part baixa de la il·lustració.

Pinteu-lo amb el color #99CC00 i afegiu-hi la textura Arañazo. Doneu-hi una intensitat de 100 a l´Inspector de propiedades.

Per tal d’enviar aquest rectangle enrere, seleccioneu-lo i aneu al menú Modificar | Organizar | Enviar hacia atrás tantes vegades com us convingui fins que quedi per darrere de les rodes i per damunt de la imatge del cel.

A continuació us mostrem l’exemple d’un possible resultat.

Deseu aquest arxiu com a trenet.png i reserveu-lo ja que continuarem treballant-hi en pràctiques posteriors.

L’objectiu d’aquesta pràctica és aprendre a dibuixar amb les diferents opcions de l’eina Pluma.

Desenvolupament de la pràctica

Primer calcareu uns dibuixos a partir d’unes plantilles i els pintareu per tal d’afegir-los al tren que vau dibuixar a la pràctica 3.  A la imatge següent podeu veure el que aproximadament haurà de ser el vostre dibuix acabat.

Obriu un document nou i importeu-hi:( mireu que la imatge no sigui mes gran que l’arxiu que heu creat).

Agafeu l’eina Pluma de la barra d’eines.

Amb el calcat d’aquesta figura aprendreu a fer segments de recta i unir-los a corbes. A l’Inspector de propiedades escolliu com a ompliment Ninguno (es troba al desplegable al costat del pot de pintura) i un traç de llapis tou Làpiz | 1 píxel blando de color negre i de dos píxels de mida.

Abans de continuar heu de saber tres coses molt importants:

1. Si només es fa clic i es deixa anar el botó del ratolí es crea un punt de vèrtex; per tant, si només feu clics creareu segments de rectes.

2. Si feu clic i arrossegueu, creeu punts de corba; per tant si voleu dibuixar corbes heu de clicar en un punt, després en un altre i arrossegar sense deixar de prémer el botó del ratolí, manipulant el tirador.

3.Per enllaçar una corba amb una recta o dos corbes a partir d’un punt de vèrtex, cal tornar a clicar en el punt després d’haver modelat la corba.

No us espanteu si ho trobeu complicat i seguiu les instruccions de traçat tal com apareixen als exercicis.

Com s’ha de fer el dibuix:

Si us hi fixeu ara teniu la plantilla, però vosaltres heu de dibuixar les linees que uneixen els punts.

Fem la corba que va del punt a al b:

Poseu el ratoli sobre el punt a i cliqueu amb el botó esquerra, deixeu anar el botó esquerra del dibuix i aneu sobre el punt b cliqueu amb el botó esquerra sobre el punt b i SENSE DEIXAR ANAR EL BOTÓ DEL RATOLÍ, moveu la linea que se ua crearà fins que tingui la mateixa forma que el de la plantilla.

Fem er mateix amb les altres linees fins tenir dibuixades totes les linees de la plantilla. 

Aquests tiradors són els que permeten governar les corbes que dibuixeu. A la corba se l’anomena corba Bezier i al tirador que l’origina, tirador Bezier.

En acabar el traçat ja no necessiteu la plantilla. Així doncs, cliqueu-hi amb el Puntero a sobre per tal de seleccionar-la i premeu Suprimir.

Seleccioneu ara el primer traçat que heu dibuixat i a l’Inspector de propiedades demaneu-li el color #FFCC99.

Al mateix Inspector de propiedades trieu l’opció d’Efectos i cliqueu sobre del signe +, del desplegable que tot seguit us apareix trieu-ne l’opció Sombrear e iluminar | Sombra.

Demanareu al Fireworks MX 2004 que apliqui aquest efecte amb els paràmetres de la imatge inferior:

Des de l’Inspector de propiedades elimineu el traç negre del voltant, escollint l’opció Ninguno del desplegable.

Seleccioneu ara la segona figura que heu dibuixat i indiqueu a l’Inspector de propiedades un color #FF9933 i escolliu al desplegable Textura: ADN. Poseu 50 a la casella del costat, o selecioneu-lo des del lliscador. Assegureu-vos que apliqueu la textura al fons i no a la línia del contorn.

Apliqueu el mateix efecte Sombrear e iluminar | Sombra d’abans i, també com en aquell cas, elimineu-ne el traçat.

Deseu el vostre document com a tracat1.png. Més endavant el tornareu a necessitar.

Obriu un arxiu nou i obriu la imatge:

Dibuixeu la primera figura del document amb els mateixos paràmetres de traç que vau fer servir per dibuixar en la pràctica anterior i seguiu-ne les instruccions de dibuix.

En acabar dibuixeu la segona figura i, tal com ja vau fer en la pràctica anterior, elimineu-ne el traçat.

Fet això, aneu a l’Inspector de propiedades i a la primera figura poseu-hi el color #FFCC00 amb una textura Arañazo al 96%. Elimineu el traç negre del dibuix i apliqueu el mateix efecte ombra de l’anterior pràctica.

Per a la segona figura, introduïu a l’Inspector de propiedades el color #FF6600. Fixeu-vos que sigui un color sòlid i sense textura (textura amb valor 0). Apliqueu-hi el mateix efecte ombra que en els casos anteriors.

Deseu els canvis d’aquest document perquè després el necessitareu. Deseu-lo com a tracat2.png

Obriu un document nou de 1260 píxels d’amplada per 500 d’alçada. Importeu-hi l’arxiu resultant de la pràctica anterior i l’arxiu que acabeu de desar. Per fer-ho, us caldrà anar al menú Archivo | Importar o bé prémer Control+R.

A partir d’ara munteu els personatges. Primer personalitzeu les cares tal com figuren a la imatge inferior:

Feu clic a l’eina Texto i fent clic a la zona de dibuix, escriviu un asterisc amb lletra Arial de color negre de mida 77 punts i tot seguit dupliqueu-lo. Per fer-ho haureu d’anar al menú Edición | Duplicar. Feu servir aquests asteriscs com si fossin els ulls.

Introduïu ara una O majúscula amb lletra Arial de 40 de mida, en estil negreta i de color vermell. Utilitzeu-la per fer la boca.

Seleccioneu ara la cara, els ulls i la boca i agrupeu-ho tot. Tot seguit seleccioneu aquest rostre i dupliqueu-lo dues vegades.

Situeu cada una de les cares sobre les perruques tal com figura a la imatge.

Si els rostres us queden pel darrera de les perruques recordeu que les heu de posar al davant fent servir l’opció de menú Modificar | Organizar | Traer al frente

Un cop tingueu els personatges creats, agrupeu tots els elements de cada un d’ells.

I ja per acabar, la floreta final. Introduïu un asterisc de 150 de mida en Arial de color groc i poseu-la a la noia dels cabells taronges. Agrupeu la floreta amb la resta del personatges i deseu l’arxiu amb el nom personat.png.

La practica consisteix a obtenir un dibuix igual que:

Obriu un document nou de 500 píxels d’amplada per 400 d’alçada.

Dibuixeu amb l´eina Pluma una imatge similar a la inferior i apliqueu un pintat amb un to vermellós. Elimineu el traç.

Dibuixeu un rectangle estret de color taronja que farem servir de tija.

Dibuixeu un cercle d’uns 70 píxels d’amplada i dupliqueu-lo.

Desplaceu-ne un respecte a l’altre però mirant que se solapin una mica, com a la figura lateral.

Seleccioneu-los tots dos i aneu al menú Modificar | Combinar trazados | Intersectar.

Pinteu-lo amb alguna textura i de color verd. Dupliqueu aquest objecte i disposeu les duplicacions tal i com estan a la imatge inicial.

Seleccioneu tots els elements (flor, tija i fulles) i agrupeu-los.

Poseu-hi un efecte d’ombra.

Importeu la imatge bata.jpg i envieu-la al fons de la imatge. A l’Inspector de propiedades, doneu-hi un grau de transparència del 35% aproximadament.

Dibuixeu ara un rectangle de 500 píxels d’amplada per 50 d’alçada i pinteu-lo d’un color sense textura.

Posicioneu-lo a la part baixa del document tal com apareix a la imatge inicial.

Introduïu el text 1-3web amb una mida de 40 i posicioneu-lo damunt el rectangle.

Amb el text seleccionat, aneu al menú Texto | Convertir en trazados.

Desagrupeu el conjunt. Ara heu convertit totes les lletres en traçats.

Seleccioneu-ne una i prement Majúscules seleccioneu també el rectangle.

Fareu servir aquests traçats per perforar el rectangle de la mateixa forma com ho vau fer a la pràctica 3. Repetiu el mateix procés amb la resta dels traçats originaris de les lletres.

Introduïu els textos següents: flor vermella, tija taronja i fulles verdes. Tot seguit reposicioneu-los.

Guardeu el treball emb el nom imatge1.

Primer de tot crearem un arxiu nou de mides 700 d’amplada per 600 d’alçada.

Ens caldrà importar la imatge del tren que tenim a continuació:

Ja sabeu com funciona, primer s’ha de guardar a la vostra carpeta i despres importar aquest arxiu des del programa.

Treballarem amb les capes que es el menu que tenim a la part dreta de la pantalla.

Que són les capes? 

Les capes divideixen els documents del Fireworks MX 2004 en plans, com si dibuixéssim en diferents fulls que se superposen. Un document pot estar format per moltes capes i cada capa pot contenir diferents objectes o grups d’objectes a dins, que s’ordenen per nivells. Tal com succeeix amb les capes, cadascun dels nivells és independent d’un altre.

Continuem amb la pràctica: 

Les capes, els grups i els objectes es controlen o s’ordenen des de la finestra de capes, que s’activa o es desactiva mitjançant el menú Ventana | Capas.

Si aquesta finestra no és visible podeu obrir-la des del menú Ventana | Capas.

Ara fixeu-vos en la Capa 1 que és en la que hem importat del dibuix. En aquesta capa hi ha tres grups d’objectes (els vagons) cadascun dels quals està format, com indica la capa, per dos objectes o subgrups (el vagó i les rodes), un objecte anomenat rectangle (el terra) i un mapa de bits (la fotografia del cel).

El primer que fareu és ordenar tot aquest material.

Per començar agrupeu els tres vagons. Primer cal seleccionar la capa de mes amunt ( en aquest cas la del vago de mes a la dreta) i seleccionar el menu Modificar –> Agrupar, seguidament i mentre premeu Majúscules cliqueu sobre cada un dels grups dels tres vagons. Quan els tingueu tots tres seleccionats, els agrupareu amb l’ajut del menú Modificar | Grupo o directament amb les tecles de drecera Control+G.

Ara el Fireworks us informa que és un grup de tres objectes. Canvieu-li el nom. Cliqueu-hi dues vegades a sobre i en el quadre de diàleg escriviu-hi vagons.

Canvieu de la mateixa manera el nom de l’objecte Rectángulo que a partir d’ara es dirà terra.

Tot seguit feu el mateix amb el mapa de bits i anomeneu-lo cel.

De la mateixa forma que heu canviat el nom als nivells de capa, també les capes poden tornar-se a anomenar, això és el que fareu ara. Feu doble clic sobre Capa 1 i en el seu lloc escriviu fons.

Creeu una nova capa tot clicant sobre el botó Capa Nueva | Duplicada.

Ara hem d’agafar la capa que hem creat on hem agrupat els vagons i arrosegar-la amb l’eina puntero cap a la nova capa que hem creat. Feu doble clic sobre el nom d’aquesta capa i anomeneu-la trenet.

Obrim un nou arxiu amb les mides 700 d’amplada i 600 d’alçada i importem l’imatge de les tres cares que trobareu més avall. Heu de fer el mateix que heu fet amb el tren. 

De moment la vostra Persiana de capas ha de tenir un aspecte similar a aquest:

Importeu ara l’arxiu:

 m2_p1_2.png

Si observeu la Persiana de capas d´aquest document, veureu que hi teniu els tres grups d’objectes corresponents als tres personatges. Cada grup està format per tots els objectes que el configuren i així consta a aquesta finestra.

Feu que siguin visibles en pantalla l’arxiu corresponent al trenet i l’arxiu dels personatges. Ho aconseguireu ajustant les mides de cada finestra amb el ratolí.

Seleccioneu el primer dels personatges amb l’eina Puntero i arrossegueu-lo des del document personat.png a trenet.png.

Si algú no ha fet mai aquesta operació, que no pateixi perquè tot i que ho pugui semblar el personatge no ha desaparegut del document original, sinó que tan sols n’hem fet una còpia en l’arxiu de destí.

Amb l’objecte seleccionat preneu l’eina Escala i reduïu-lo des d’una de les cantonades fins que s’adapti a la primera finestra.

Feu el mateix procés amb el segon i el tercer personatges.

Aneu ara a la Persiana de capas i seleccioneu els tres personatges. Agrupeu-los amb l’ajut del menú Modificar | Grupo o bé prement Control+G.

Assegureu-vos que el grup de personatges es trobi disposat dins la capa trenet d’aquesta manera:

Ara blocareu les capes per tal que durant les properes intervencions que feu a l’arxiu no es puguin produir canvis.

Cliqueu sobre el llapis dibuixat a la part superior esquerra de cada capa de manera que es converteixi en un candau

Creeu una nova capa i anomeneu-la text.

Amb l’eina Texto escriviu Lina, Fina i Tina van amb tren amb una lletra Arial 32 de color #006699.

Bloqueu la capa i deseu l’arxiu com a conte.png ja que el necessitareu a la propera pràctica.

El resultat final d´aquesta pràctica ha de ser similar a aquest:

En aquesta pràctica veureu, entre altres coses, com es relaciona la Persiana de capas amb la de Fotogramas en una animació.

Per tal de treballar això, obriu el document conte.png, que heu fet a l’exercici anterior .

Primerament, desbloqueu la capa trenet clicant sobre el cadenat per tal que aparegui el llapis, cosa que indica que la capa està oberta i que s’hi pot treballar.

Amb l’eina Trazado de vectores, que es troba dins del menú emergent de l’eina Pluma, dibuixeu lliurement un traç de manera que sembli fum que surt de la xemeneia del tren. No cal que tanqueu el traçat.

Des de l’Inspector de propiedades, apliqueu-hi un pintat negre amb Textura Humeante al 100% i un Borde de Relleno fundido amb una quantitat 25. Feu també activa l’opció Transparente. Fixeu-vos que l’opció de traç indiqui que no n’hi haurà.

A partir d’aquí, comenceu a preparar l’animació. Les animacions es fan amb fotogrames que, en passar ràpidament, creen la il·lusió del moviment.

La Persiana de capas ha de tenir aquesta aparença:

En una animació hi ha objectes que es mouen i altres que no. En la vostra ha de moure’s el tren, amb els personatges i el fum, és a dir, tot allò que heu col·locat dins la capa trenet.

Seleccioneu els tres elements clicant amb el Puntero a la Persiana de Capas. Feu clic sobre cada una de les capes mentre manteniu premuda la tecla Shift. D’aquesta manera es seleccionen totes. Tot seguit els agrupeu des del menú Modificar | Grupo. També podeu fer-ho directament prement la combinació de tecles Control+G.

Canvieu el nom del grup clicant dues vegades sobre el seu nom. Anomeneu-lo tren.

Amb el tren seleccionat, aneu al menú Modificar | Animación | Animar Selección.

En el quadre de diàleg emergent observeu que hi constin aquests valors:

Accepteu i veieu que us surt un quadre en què el Fireworks MX us pregunta si realment voleu afegir els cinc fotogrames que heu demanat per tal de fer l’animació. Confirmeu-ho i obtindreu aleshores aquesta vista:

Prement la tecla Alt amb l’eina Zoom tantes vegades com calgui obteniu una vista molt general de l’àrea de treball.

Arrossegueu els tiradors de principi i final d’animació i disposeu-los com els de la imatge inferior.

Fixeu-vos que ara a la finestra Fotogramas podeu veure-hi els cinc fotogrames. Si aquesta finestra no és visible podeu mostrar-la mitjançant el menú Ventana | Fotogramas.

Proveu la vostra animació prement el botó Reproducir que es troba a la part inferior esquerra de l’àrea de treball.

Podeu observar que l’animació es veu però que el fons i el text només apareixen en el primer fotograma.

Situeu-vos sobre d’aquest fotograma i a la Persiana de capas desbloqueu la Capa Fondo. Amb aquesta capa seleccionada aneu a Opciones de Capa i activeu Compartir esta capa.

Fireworks us llença aleshores un quadre de diàleg on us comunica que el contingut d’aquesta capa es copiarà a la resta de fotogrames. Accepteu-ho.

El que heu fet amb aquesta operació és aconseguir que els gràfics d’aquesta capa siguin ara presents a tots els fotogrames.

Repetiu aquest procés amb la capa del text.

Proveu l’animació i deseu la pràctica amb el nom conteanimat.png

Obriu un arxiu nou de 440 píxels d’amplada per 260 d’alçada i amb l’ajut del menú Archivo | Importar, importeu-hi l´arxiu:

Com veieu, el cursor s’ha convertit ara en un angle. Cliqueu amb aquest angle sobre el marge esquerre superior del vostre document i arrossegueu-lo fins a completar tota la seva superfície, cosa que permet que la imatge importada es desenvolupi al llarg de la superfície del document.

Fixeu-vos que es tracta d’una imatge en blanc i negre que denota pertànyer a una època que el color no era encara present a les imatges. Volem potenciar aquest fet.

Així doncs i per tal de donar un toc d’època a aquesta imatge, seleccioneu la fotografia i aneu al menú Comandos | Creativo | Convertir a tonos sepia.

Seguint el mateix procés d’importació que heu feu anteriorment, importeu ara una segona fotografia:

Un cop visible, posicioneu-la a la part dreta de la composició i seguiu el mateix procés d’abans per tal de convertir-la també a tons sèpia.

Dibuixeu una el·lipse amb l´eina Elipse al damunt de la fotografia d’en Puig i Cadafalch.

Amb l’el·lipse i la fotografia d’en Puig i Cadafalch seleccionades, creeu ara una màscara. Per fer-ho us cal anar al menú Modificar | Máscara | Agrupar como máscara.

Tot seguit dibuixeu el perfil de la fitxa. Amb l’eina Rectángulo redondeado que és al menú emergent de l’eina Rectángulo, en dibuixeu un de 257 píxels d’amplada per 51 d’alçada.

A l’Inspector de propiedades teclegeu una Redondez del rectángulo de 60 i el posicioneu a la part superior esquerra del document. Pinteu-lo de color blanc observant que l’opció Borde estigui en Suavizado.

Sense deixar aquesta eina, elimineu de l’Inspector de propiedades la Redondez del rectángulo i dibuixeu-ne un de 440 píxels d’amplada per 230 d’alçada. Pinteu-lo de color blanc i reposicioneu-lo com el de la figura.

Seleccioneu els dos rectangles i agrupeu-los mitjançant el menú Modificar | Grupo. Ja teniu la que serà la màscara de la fitxa a punt per ser utilitzada.

Abans de fer-la servir, però, cal que aneu a la Persiana de capas i seleccioneu i agrupeu les fotografies de la Casa de les Punxes i del seu arquitecte, en Puig i Cadafalch, ja que ambdues formaran part de la fitxa que estem confeccionant i per tant necessitem aplicar aquesta màscara a totes dues imatges al mateix temps

Feta ja l’agrupació de les dues imatges, apliqueu la màscara. Per fer-ho us cal seleccionar tot el contingut de l’arxiu. Aquesta operació la podeu fer directament amb les tecles de drecera Control+A o bé des del menú Seleccionar | Seleccionar todo i anar aleshores al menú Modificar | Máscara | Agrupar como máscara.

Per acabar, teclegeu el text Puig i Cadafalch en Arial de 30 i color #CC6600. Tot seguit deseu l’arxiu amb el nom fitxa.

A continuació us mostrem un exemple del resultat aproximat que haureu obtingut.

Per començar, obriu un nou arxiu de 600 píxels d’ample per 300 d’alçada i importeu-hi mitjançant Archivo | Importar les imatges :

Un cop importades, les seleccioneu totes. Recordeu que podeu fer-ho amb el comandament Control+A. Alineeu-les. Per fer-ho us cal anar al menú Ventana | Alinear. S’obre aleshores una finestra plena d’opcions. Activeu-ne les següents: Con el Lienzo, Alinear Borde Inferior i Distribuir Centro Horizontal

Aquesta finestra permet fer el mateix que la que es troba al menú Modificar | Alineación però de manera un xic més completa.

Amb l’eina Rectángulo dibuixeu-ne un que amagui totalment les quatre imatges.

Seleccioneu-lo i des de l’Inspector de propiedades pinteu-lo escollint l’opció Barras del desplegable (altrament dit Categoría de relleno). Fent ara clic al quadrat al costat del pot de pintura, seleccioneu Preestablecido: Blanco, negro.

El rectangle quedarà tal i com es mostra a la imatge inferior.

Seleccioneu tot el contingut i creeu una màscara. Recordeu que per fer això us cal anar al menú Modificar | Máscara | Agrupar como Máscara.

Com podeu veure, on hi havia el blanc es conserva la presència de la imatge i, a mesura que apareix el negre, va esborrant-se.

Les màscares un cop ja estan fetes poden editar-se. Per editar una màscara cal clicar sobre la miniatura de màscara que es troba en el seu respectiu grup de la Persiana de capas. Aquesta miniatura queda aleshores ressaltada en color groc.

Amb l’eina Puntero podeu moure tant el tirador com l’ancoratge i modificar d’aquesta manera l’aspecte de la màscara.

Importeu ara la imatge :

i amb l’angle de posició cliqueu sobre l’angle superior esquerre del document. 

Dibuixeu un rectangle del mateix format que la fotografia de la Pedrera que acabeu d’importar, és a dir, 600 píxels d’amplada per 200 d’alçada. Superposeu-lo damunt la fotografia.

Pinteu-lo amb una Categoria de Relleno: Pliegues amb un degradat que vagi del gris #666666 al #FFFFFF, color blanc.

Per aconseguir el degradat entre dos colors, cal fer clic sobre el quadrat al costat del pot de pintura. Es desplegarà una finestra des de la qual es podran escollir els dos colors. Caldrà fer clic sobre els selectors de color i selecionar el desitjat.

Amb el Puntero manipuleu el tirador fins que quedi un pintat semblant al de la mostra inferior.

Mitjançant l’eina Puntero i des de la Persiana de capas, seleccioneu la fotografia de la Pedrera i el pintat de Pliegues. Recordeu que per poder seleccionar ambdós objectes us cal tenir premuda Majúscules (o Shift).

Aneu tot seguit al menú Modificar | Máscara | Agrupar como máscara.

Amb la imatge encara seleccionada, desplaceu-vos ara a l’Inspector de propiedades i apliqueu-hi l’opció Efectos | Ajustar Color | Invertir.

Tot seguit i des del mateix Inspector de propiedades, trieu l’opció Efectos | Ajustar Color | Brillo | Contraste. Poseu els valors -45 per a Brillo i 55 per a Contraste.

Finalment, escriviu el text modernisme amb Arial 35 i color #FF9900 .

Posicioneu aquest text com el de la imatge inferior.

Deseu el fitxer amb el nom modernisme.