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 gracia.jpg, bcd.jpg, mod.jpg i pedrera.jpg.

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 gaudi.jpg 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.

http://www.xtec.cat/formaciotic/dvdformacio/materials/td115/d115m3/d115m3p1.htm

Abans de començar la primera pràctica d’aquest mòdul convé que us familiaritzeu amb l’Inspector de propiedades, aquesta finestra que en les pràctiques anteriors ens donava informació sobre les eines. Us permetrà triar i controlar el tipus i la mesura de la font, el color, la forma de la lletra (negreta, cursiva o subratllada), l’orientació del text i les altres opcions, com poden ser: l’alineació i la selecció del tipus de filet (borde), així com la grandària i la posició del quadre de text.

En primer lloc obriu un arxiu nou, seleccionant Archivo | Nuevo; ajusteu-lo a una mida de 300 píxels d’amplada per 300 píxels d’alçada i trieu el blanc com a color de fons. Tot seguit, amb l’eina Rectángulo, dibuixeu un rectangle de 240×180 píxels, centrat respecte al nou arxiu que heu creat i que heu de desar amb el nom lluna1.png

Per controlar les mides i posició d’aquest rectangle de color #9900FF, podeu utilitzar l’Inspector de propiedades, tal com mostra la figura.

Sobre aquest rectangle escriviu en majúscules el text BCN amb les següents característiques: Arial, 105 de grandària, color #FFCC33, centrat horitzontalment i centrat verticalment respecte del rectangle que prèviament heu dibuixat. Recordeu que per a aquesta operació cal fer servir les ordres Modificar | Alinear | Centrar verticalmente i Modificar | Alinear | Centrar horizontalmente, i també que heu de tenir seleccionats alhora amb el Puntero tant el quadre de text com el rectangle

Continueu l’exercici dibuixant un altre rectangle, però en aquest cas a la dreta de l’anterior i de color #FFCC33. Fixeu-vos que les seves mides siguin 30×180 píxels. Tot seguit escriviu el text Barcelona, amb la font Arial, 18 de grandària, color #9900FF, que heu de col·locar com abans, centrat, en posició vertical respecte de la figura que li fa de fons. Per realitzar aquesta operació cal obrir el menú desplegable d’orientació de text i triar l’opció Vertical de izquierda a derecha.

Realitzada aquesta primera part de l’exercici, seleccioneu amb el Puntero el text Barcelona i el rectangle que li fa de fons. Copieu-los i enganxeu-los a l’esquerra de manera que la forma aparent de la figura sigui simètrica. Observeu que després de realitzar aquesta operació també cal canviar el color del text copiat.

A continuació, emmarcareu la figura. Per fer-ho dibuixeu dos rectangles, col·loqueu-los a la part superior, amb els mateixos colors que heu utilitzat fins ara i que després heu de copiar i enganxar a la part inferior tal com es mostra en l’exemple.

Ara podeu passar a escriure el text la Lluna-fòrum amb la font Century Gothic, 25, color #9900FF, en negreta, cursiva, centrat per sota de la figura. Si no disposeu d’aquesta font feu-ne servir una altra que sigui similar.

A partir d’aquí escriviu el text 2004 amb la font Arial, 50, color #9900FF. Una vegada l’hagueu col·locat adequadament, el modifiqueu i l’encaixeu amb l’opció d’espaiat de paràgrafs.

Fixeu-vos que si teniu el text seleccionat amb aquesta operació podeu canviar per una banda, l’Escala horizontal, que heu de passar a 150%, i, per l’altra, el Reespaciado, que heu de passar a 25.

Finalment deseu l’arxiu amb el nom lluna1.png.

Comenceu com en l’exercici anterior: obriu un arxiu nou de 300×300 píxels amb el fons de color blanc. Dins d’aquest espai, dibuixeu-hi un cercle de 240 píxels de diàmetre, centrat i de color sòlid #FFCC33. Per a realitzar aquesta operació cal seleccionar Herramienta Elipse i mantenir premuda Majúscules. Fixeu-vos que l’Inspector de propiedades indica la grandària del cercle i la posició relativa respecte a les coordenades (x,y).

Tot seguit aneu a Efectos | Sombrear e iluminar | Iluminado i afegiu aquest efecte amb els següents paràmetres: opacitat 75%, suavitzat 15, desplaçament 0, desplaçament d’halo 5 i color #9999FF.

Sobre aquest cercle, escriviu-hi el text BCN , amb la font Arial, 100 de mida i color #0000FF. Trieu l’estil negreta i cursiva.

Per centrar el text amb el cercle, recordeu que prèviament cal seleccionar-los ambdós amb el Puntero i aplicar les operacions Modificar | Alinear | Centrar verticalmente i repetir-la amb Modificar | Alinear | Centrar horizontamente.

Quan tingueu aquesta part de l’exercici acabada passeu a afegir un efecte aplicat al text BCN. En aquest cas utilitzeu Efectos | Bisel y relieve | Relieve elevado amb els següents paràmetres: contrast 94%, suavitzat 8, desplaçament 135, angle 135 i amplada 14.

A continuació escriviu la paraula Activitats. La podeu situar a les coordenades x=115, y=204. Utilitzeu la tipografia Banff o una de similar amb una mida de 40, un color #990000, negreta i cursiva. Tot seguit, amb aquest text seleccionat, apliqueu Efectos | Bisel y relieve | Bisel interior.

En aquest cas feu servir els paràmetres de la imatge inferior: forma del filet del bisell Plano, contrast 75%, suavitzat 3, angle 135 i amplada 10.

Per acabar la pràctica escriviu la paraula la lluna, disposada a la part superior de la figura, coordenades x=52, y=72, amb la font Arial, 30, negreta i cursiva. Cal observar que en aquesta ocasió esteu fent servir un Color de trazo #990000 i un Color de relleno #FFFFFF.

Fixeu-vos que per tal d’ajustar el traç i controlar l’amplada del filet cal obrir el menú desplegable de les Opciones del trazo. En aquest cas cal optar per una amplada de filet igual a 1 píxel.

Finalment, apliqueu un efecte d’ombra al text la lluna, de color #0000FF. Si heu seguit el processos detalladament, el resultat final de la pràctica ha de ser molt semblant al que mostra la figura. Deseu l’arxiu amb el nom lluna2.png

En primer lloc, obriu un arxiu nou de 400×300 píxels amb el fons de color blanc. Dins d’aquesta àrea de treball, col·loqueu-hi la imatge de l’exercici anterior anomenada lluna2.gif  fent ús de l’opció de menú Archivo | Importar.

Tot seguit, escriviu el text 2004 amb la font Arial 100, negreta i color #99CC00. A continuació i amb el text seleccionat, convertiu aquest text a traçat. Per a realitzar aquesta operació recordeu que cal obrir el menú Texto i aplicar Texto | Convertir en trazados.

En aquest moment el text té les propietats d’un traçat. Com que el que volem és que cada número sigui independent, apliqueu l’operació Modificar | Desagrupar.

Fixeu-vos que a partir d’ara podeu canviar les propietats de cada número de manera que podeu practicar amb diferents tipus de composicions.

En aquesta pràctica, s’ha optat per canviar l’escala i el color. Per modificar la mida del número, seleccioneu-lo i apliqueu-hi l’opció de menú Modificar | Transformar | Escala. Fixeu-vos que us apareixen els tiradors de control de l’element seleccionat, amb els quals podeu ampliar-lo, reduir-lo i fins tot girar-lo.

Una vegada heu practicat amb aquestes modificacions relatives a la mida, posició i color, escriviu el text estiu amb la font Arial 50, negreta i el color #99CC00. Col·loqueu-lo com es mostra a l’exemple.

Quan tingueu acabada la composició, deseu-la amb el nom lluna3.png

Comenceu obrint un arxiu nou de 300×300 píxels amb el fons de color blanc. Dins d’aquest espai de treball dibuixeu una circumferència de 200 píxels de diàmetre i centreu-la dins del document. Recordeu que podeu controlar-ne el traçat fent ús de Majúscules (Shift) i també en podeu controlar les mides des de l’Inspector de propiedades.

Tot seguit, amb l’eina Cuchilla talleu la circumferència en dues parts.

Podeu comprovar com el resultat d’aquesta operació permet seleccionar de manera independent l’arc superior i l’arc inferior, fent doble clic

Escriviu el text temporada 2004. Utilitzeu la font Arial 20 negreta amb un color #FFCC00. Disposeu aquest text per sobre de l’arc. Seleccioneu els dos elements (text i arc). Després apliqueu l’operació Texto | Unir al trazado. Observeu com aquest s’ajusta a la forma de l’arc dibuixat prèviament.

Per poder unir un text al traçat de l’arc inferior i que aquest es llegeixi correctament en vertical, cal preveure una transformació prèvia. Per fer aquesta operació, seleccioneu l’arc i apliqueu Modificar | Transformar | Voltear horizontalmente.

El resultat aparent ha de ser com el que mostra la figura.

Amb els dos textos seleccionats podeu aplicar un efecte Efecto | Bisel y Relieve | Relieve elevado amb els següents paràmetres: contrast 75%, suavitzat 2, angle 135 i amplada 5.

Per acabar l’exercici importeu la imatge de la segona pràctica que havíeu desat amb el nom lluna2.png i centreu-la dins de la corona circular. Per realitzar aquesta operació solament heu de repetir alguns dels passos que ja heu practicat en exercicis anteriors. Primer feu Archivo | Importar per importar l’arxiu lluna21.gif i després el reposicioneu aproximadament al centre.

Tot seguit reajusteu la mida d’aquesta imatge utilitzant els tiradors que l’emmarquen i sense deformar el quadrat (recordeu que cal mantenir premuda Majúscules si no voleu que la figura es deformi). Finalment apliqueu Modificar | Alinear | Centrar verticalment i Modificar | Alinear | Centrar horizontalmente.

Una vegada arribats aquí, deseu l’exercici amb el nom lluna4.png.

Comenceu obrint un arxiu nou de 300×300 píxels i fons blanc. A continuació obriu Editar | Insertar | Nuevo símbolo i a Propiedades de símbolo trieu-hi el tipus Gráfico.

Fixeu-vos que després de fer aquesta operació apareix un nou quadre de treball, que és on heu d’escriure el text 2004 amb la font Arial 100, negreta i color #FFCC00.

Tot seguit podeu tancar l’editor de símbols amb el botó situat al marge superior dret. En aquest moments veureu com apareix una còpia del text, situada a la finestra del document, amb un indicador especial en forma de fletxa corbada al marge inferior esquerre.

Aquesta és la manera que té el programa d’indicar que aquest text s’ha convertit en un símbol. Cal aclarir que cada vegada que en un document s’hi col·loca un símbol, rep el nom d’instància de símbol. Si obriu Ventana | Biblioteca, podeu comprovar com el símbol que heu creat ha passat ara a formar-ne part.

Per crear l’animació cal tenir dues instàncies a l’escenari, la d’inici i la final. Definim l’escenari com l’àrea o superfície editable de l’arxiu. Al llarg dels mòduls 7 i 8 es tracten amb més detall el funcionament i les possibilitats de treball dels símbols.

Podria dir-se que la primera instància ja la teniu, és la que hi ha a la finestra del document. Fixeu-vos que fins i tot podeu moure la seva posició. La segona instància es crea si arrossegueu des de la imatge que apareix amb el text 2004 i que hi ha a la Biblioteca. Arrossegueu aquesta imatge sobre la finestra del document. Aquesta segona imatge és el que es correspon amb una altra instància d’aquest símbol.

Quan arrossegueu aquesta instància sobre la finestra del document, apareix un quadrat blau que es transforma tot seguit en una còpia de la primera instància. És a partir d’aquest moment que podeu modificar l’aparença inicial i final del text. En aquesta pràctica no heu de modificar la instància inicial però sí que heu de canviar l’opacitat final, amb l’ajut de l’Inspector de propiedades a fi de deixar-la en un valor igual a 20.

Fixeu-vos en la posició relativa de les instàncies que teniu damunt l’escenari. Seleccioneu-les ambdues i alineeu-les verticalment, tal i com ja heu fet en exercicis anteriors. Tot seguit podeu aplicar-hi l’animació. Per fer-la efectiva cal que seleccioneu les dues instàncies i després aneu a l’opció de menú Modificar | Símbolo | Entre instancias.

Us apareixerà ara el quadre de diàleg propi de l’opció Entre instancias. Indiqueu-hi el número de fotogrames que voleu, en aquest cas poseu 40, i seguidament activeu l’opció Distribuir en fotogramas. Accepteu aquest quadre de diàleg.

A partir d’aquest moment teniu la primera animació de text. Ho podeu comprovar utilitzant el botó de reproducció.

Seguiu animant un altre text repetint les operacions que us acabem d’explicar. Cal inserir el nom símbol al començament de l’animació, al Fotograma 1. Per això, feu visible Ventana | Fotogramas i feu clic a Fotograma 1. Obriu Editar | Insertar | Nuevo símbolo i, a Propiedades de símbolo, trieu l’opció Gráfico. Després escriviu la lluna amb la font Arial 50, color #9900FF i lletra cursiva.

Tanqueu l’editor de símbols i des de la Biblioteca arrossegueu aquest nou símbol fins a la finestra del document. Recordeu que en aquests moments s’ha convertit en una segona instància.

Per tal de fer una animació en sentit horitzontal, disposeu-les de manera que quedin, respectivament, una al costat esquerre i l’altra al costat dret de la finestra del document.

Amb les dues instàncies seleccionades, obriu Modificar | Símbolo | Entre instancias i apliqueu, com abans, l’opció Entre instancias. Indiqueu el número de fotogrames que voleu, poseu també un valor de 40 i seguidament activeu l’opció Distribuir en fotogramas i Aceptar.

Tot i que per a molts de vosaltres pot resultar evident, cal observar que, si poseu un nombre inferior de fotogrames, la imatge animada anirà més ràpida i, si poseu un valor més gran, anirà més a poc a poc.

Comproveu que l’animació es correcta.

Repetiu els passos per produir una animació del text BCN. Feu servir la font Arial 100, cursiva, negreta i color #9900FF. Aquesta vegada intenteu que l’animació del text vagi de baix cap a dalt. Estem segurs que en aquestes alçades ja sabeu com fer-ho, només cal seguir el mateix procés que heu après, però aquesta vegada amb la precaució de situar la instància inicial a la part inferior de la finestra del document i la instància final a la part superior. Assegureu-vos que treballeu al Fotograma 1.

Per acabar de practicar l’animació, i si us sembla bé, podeu incorporar dos nous quadrats que tinguin dos moviments diferents, un en sentit horitzontal i l’altre en sentit vertical.

Com podeu veure, les animacions són essencialment trucs que permeten reclamar l’atenció de l’espectador. Les imatges es col·loquen en quadres separats anomenats fotogrames que després es reprodueixen en una successió ràpida. Crear animacions amb l’ordinador significa dissenyar aquests fotogrames per separat bé sigui treballant-los i disposant-los manualment, bé amb eines que facilitin la seva interpolació de manera que el resultat final suggereixi la il·lusió de moviment.

Quan tingueu acabada la pràctica deseu-la, com a lluna5.png

A mode d’apunt cal saber que les animacions fetes amb el Fireworks MX es poden desar com a GIF animats si obriu Archivo | Presentación preliminar de la exportación i seleccioneu un format GIF Animado

Mitjançant la icona d’Exportación rápida que trobareu al marge superior dret del document, també és possible exportar les vostres animacions a altres formats, entre els quals cal destacar el SWF (ShockWaveFlash).

Per començar, obriu un arxiu nou de 400×300 píxels i fons blanc.

Tot seguit, dibuixeu un rectangle de 300×200 píxels de color #FFCC00. Centreu-lo respecte de la finestra del document. Fixeu-vos que les mides de les coordenades x,y indiquen valors relatius de (50,50)

Amb l’eina Pluma, dibuixeu una línia corbada d’esquerra a dreta, similar a la que mostra la figura.

Ara, amb la línia seleccionada, apliqueu les primeres modificacions. Abans, però, indiqueu els valors de la transformació que voleu des de l’Inspector de Propiedades. Per exemple: Color del trazo: #0000FF, Anchura de trazo: 52; Borde: 40; Textura ADN: 80% i tipus de traç Lápiz | Pintada.

Observeu que l’aparença de la línia queda modificada i passa a ser com la que mostra la figura.

ç

A continuació, escriviu el text E4, que servirà de títol de la revista digital. Trieu la font Franklin Gothic Heavy 100, color blanc, negreta. Si no disposeu d’aquesta font, podeu substituir-la per una de similar.

Disposeu aquest text per sobre de la línia dibuixada i, després, seleccioneu-lo i apliqueu-hi Efectos | Sombrear e Iluminar | Iluminado.

Indiqueu-hi els següents valors: color #0000FF, opacitat 70%, suavitzat 20, desplaçament 0 i desplaçament d’halo 10.

El resultat de totes aquestes operacions implica el canvi que mostra la figura:

Arribats aquí, escriviu un subtítol que digui: revista digital. Feu-ho de manera que quedi alineat amb el títol. Utilitzeu, si la teniu, la font Franklin Gothic Heavy 20 color blanc i negreta.

Finalment i per acabar la pràctica, completeu la presentació amb un bloc de text que faci referència a les diverses seccions: sumari, notícies, novetats i serveis. Utilitzeu la font Arial 14 color # 0000CC i text normal.

Per a realitzar la segona pràctica comenceu obrint un arxiu nou de 400×300 píxels i fons blanc. Tot seguit dibuixeu un rectangle, centrat en relació a la finestra del document, de 280×180 píxels.

Procureu que aquest element gràfic tingui les característiques de la imatge següent a Relleno i Trazo

Color de Pintat: olas
Borde: suavizado
Textura: ADN
Opacitat de la textura: 0

Color de traç: #0000FF
Tipus de traç: Antinatural: Salpicadura de pintura, 12
Borde: 100
Textura: ADN
Opacitat de la textura 0

Fixeu-vos que amb les opcions de Relleno i Trazo podeu controlar la forma i representar-la de maneres diverses, ja sigui amb colors plans o bé amb efectes de degradat. Fixeu-vos que podeu canviar, amb els botons de selecció, els colors de degradat. També podeu canviar els colors i d’altres parámetres si premeu el botó Edición.

En aquest cas opteu com a colors extrems pel blanc (#FFFFFF) i el negre (#000000).

Amb les dades especificades, la imatge que us ha de sortir ha de ser com la que mostra la figura. Si no és així, cal que la controleu. Feu-ho amb el Puntero sobre els tiradors que determinen l’aparença del degradat.

A continuació dibuixeu un cercle amb les següents característiques de Relleno i de Trazo.

Color de Pintat: solido
Borde: suavizado
Textura: ADN
Opacitat de la textura: 0

Color de traç: #FF9900
Tipus de traç: Antinatural: Chapoteo, 30
Borde: 100
Textura: ADN
Opacitat de la textura 0

Molt bé. Esteu a punt d’acabar la pràctica. Només us queda afegir-hi un títol i un subtítol.

Per tal de seguir el mateix estil gràfic, podeu recuperar, sense tancar la pràctica present, l’arxiu de la primera pràctica, anomenat revista1.png. Copieu el fragment de text E4 i enganxeu-lo sobre la finestra del document que esteu treballant.

Feu-ho seleccionant el text E4 del primer document i arrossegant-lo directament sobre la finestra del segon document, que es correspon amb l’exercici que esteu treballant.

Acabeu l’exercici escrivint: apunts de biologia, amb la font Franklin Gothic Heavy d’aproximadament 30 punts, color negre i negreta. Si no disposeu d’aquesta font podeu substituir-la per una altra de similar.

Deseu l’arxiu amb el nom revista2.png.

http://www.xtec.cat/formaciotic/dvdformacio/materials/td115/d115m4/d115m4p3.htm

http://www.xtec.cat/formaciotic/dvdformacio/materials/td115/d115m4/d115m4p4.htm