Enrera
Mòdul 1
Dibuix i recreació d'imatges amb el Fireworks MX 2004
  Pràctica
1
2
3
4
   
Exercici
Exercicis
 
 

El Fireworks és un programa per a la producció d'elements gràfics que s'utilitzaran en la web. Resumint, direm que permet fer dibuixos, manipular fotografies i generar gràfics animats per a Internet així com optimitzar aquestes imatges i incorporar-hi interactivitat avançada.

  Tot aquest material gràfic necessari per a la creació de pàgines web pot ser de dos tipus: imatges vectorials o de mapa de bits.
  Per tal d'entendre el funcionament del Fireworks MX 2004 cal comprendre abans la diferència entre els dos tipus de format:
   
 
Imatges vectorials
  Les imatges vectorials es defineixen mitjançant la utilització de processos matemàtics que definiran la informació de la forma, la posició i el color. Les imatges vectorials, generant-se a partir d´aquests processos matemàtics, no perden la seva qualitat d'aspecte quan les ampliem. En estar definides per vectors no pesen tant, en comparació, com les de mapa de bits. Veieu-ne la diferència a la imatge inferior.
   
 
   
 
Imatges de mapa de bits
  Una imatge de mapa de bits esta formada per una quadrícula de punts anomenats píxels. Una imatge d'aquest tipus esta definida pel color de cada un dels píxels que la configuren. En dependre del nombre de píxels o resolució, aquestes imatges poden perdre qualitat en ser ampliades i, en comparació, pesen més que les imatges vectorials.
  Al Fireworks MX, una exclusiva combinació d'aquests dos tipus de format de gràfics permet als usuaris treballar amb els dos indistintament i transferir-los a un format adequat per a la web.
  En aquesta pràctica coneixereu l'entorn de treball del Fireworks MX 2004 i entendreu com treballa amb els dos tipus de format.
   
Desenvolupament de la pràctica
   
Pràctica
Per tal d'iniciar el programa, feu doble clic a la icona del Fireworks MX 2004 del vostre escriptori o executeu-lo des de Inicio | Programas | Macromedia| Macromedia Fireworks MX 2004. Si és la primera vegada que l'obriu, us apareixerà una pantalla Bienvenidos que presenta tres opcions:
 
   
  Diseño gràfico és un tutorial per descobrir les funcions i els conceptes bàsics del programa.
   
 
Novedades, en què es poden veure les noves funcions del Fireworks MX 2004.
   
 
Diseño Web, en què es descriuen les operacions bàsiques de disseny de gràfics web i d'interactivitat que té el programa.

Podeu tancar aquesta finestra fent clic a la icona de tancar de la part superior dreta. Si més endavant la voleu visitar novament, ho podreu fer a través del menú Ayuda | Bienvenidos.

   
  Un cop obert el programa, aneu al menú Archivo | Nuevo. S'obre un quadre de diàleg on heu d'escriure 300 píxels d´amplada per 300 de llargada. Fixeu-vos que el color blanc del Lienzo estigui activat.
   
 
   
  S'obre un arxiu de les mides demanades que presenta una barra de títol que indica Sin título_1.png i el factor d'ampliació que tenim en pantalla. PNG és el format d'arxiu propi del Fireworks MX 2004 amb què realitzareu originals que posteriorment podeu exportar a altres formats per utilitzar-los en la web.
   
  Deseu el document on desitgeu amb l'ajut del menú Archivo | Guardar como i assigneu-li el nom castellers.png.
   
  Abans de començar a dibuixar examineu l'entorn de treball del Fireworks MX 2004.
   
 
   
  A la part superior de la pantalla hi ha la barra de menús. Moltes de les operacions que es poden realitzar amb el Fireworks MX 2004 es fan des d'aquesta barra.
   
 
   
 
A l'esquerra hi ha a barra d'eines. Aquesta barra, com totes, és flotant, és a dir que es pot desplaçar arrossegant-la amb el punter per la franja superior. Si no estigués visible es pot activar des del menú Ventana | Herramientas. La barra d'eines està dividida en sis seccions: Seleccionar, Mapa de bits, Vector, Web, Colores i Ver. Moltes de les eines tenen funcions addicionals que es poden utilitzar mitjançant el menú desplegable representat per un petit triangle situat a la dreta de la icona de l'eina.
   
  A la part baixa hi ha l'Inspector de Propiedades. Aquesta finestra presenta les propietats de l'eina o de l'objecte seleccionats i si no hi ha cap objecte o eina seleccionats presenta les propietats del Lienzo. Si no estigués visible el podeu visualitzar anant al menú Ventana | Propiedades.
   
 
   
  A la part dreta hi ha tot de finestres flotants que es poden presentar o no des del menú Ventana i que es poden minimitzar o desplegar fent clic al triangle que hi ha a la part superior esquerra just al costat del nom de la finestra. Aquestes finestres són controls des dels quals es pot treballar amb fotogrames, capes, símbols, colors i d´altres.
   
 
   
 
Per últim, al centre hi ha la finestra del document actiu amb l'espai editable del propi arxiu. Comencem a dibuixar-hi a sobre.
 
 
Agafeu l'eina Rectángulo del sector Vector de la barra d'eines.
   
 
A l'Inspector de propiedades cliqueu sobre el Cuadro de color de relleno i s'obre una finestra amb un quadre de diàleg. Introduïu-hi el valor #FFCC33.
   
  A l'àrea de treball arrossegueu el cursor i dibuixeu un rectangle qualsevol.
   
 

Amb el rectangle seleccionat (és a dir, envoltat per una línia emmarcada per petits quadrats) aneu a la part inferior esquerra de l'Inspector de propiedades i introduïu-hi els valors 300 píxels d'amplada per 200 d'alçada. Premeu Retorn per tal de confirmar aquestes dades.
 
 
Amb l'objecte seleccionat trieu l'eina Puntero, que és la primera per dalt de tot, i arrossegueu el rectangle a la part baixa de l'àrea de disseny tal com mostra l'exercici acabat de la imatge lateral.
   
  Observeu que en canviar d´eina l'Inspector de propiedades situat a la part inferior de la pantalla varia mostrant les propietats de l'eina o de l'objecte seleccionats.
  Amb el Puntero cliqueu sobre l'àrea gris que envolta la zona editable de l'arxiu. D'aquesta manera us assegurareu que no teniu res seleccionat. Si us hi fixeu, veureu com ara l'Inspector de propiedades mostra informació sobre les característiques pròpies de l'arxiu. En el color del Lienzo indiqueu, clicant sobre el quadre de color com heu fet anteriorment, el color #FFFFCC.
 
  Des del menú Archivo | Importar, importeu la imatge castell.jpg.
   
 
 

 

  Quan ho feu, veureu que el cursor s'ha convertit en un angle. Cliqueu amb aquest sobre el marge esquerre superior de la zona de dibuix i arrossegueu-lo fins a completar tota la superfície, permetent que la imatge importada es mostri sencera. Situeu-la a la part esquerra tal com figura a la imatge castells i castellers.
   
  Observeu ara la finestra flotant del costat dret anomenada Capas. Si no està visible la podeu activar des del menú Ventana | Capas.
   
 
   
 
Si està minimitzada la podeu desplegar des de la fletxa que hi ha a la part superior esquerra de la finestra.
Heu de veure, a més a més de la Capa de Web, dos nivells que Fireworks ha generat per a cada un del elements. Per un costat, doncs, hi podeu veure el nivell Rectángulo, que és vectorial perquè l'hem dibuixat amb una eina vectorial, i per l'altre la fotografia que s'identifica com el que és: un Mapa de bits.
   
  Acabeu ara la vostra pràctica. Agafeu una altra de les eines vectorials, l'eina Texto, i introduïu-hi el següent text: castells i castellers.
   
 
   
  A l´Inspector de propiedades ara hi consta informació sobre el text. Amb el quadre de text seleccionat, demaneu 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.
   
 
   
  Deseu com a castellers.png.
   
  Enhorabona! ja heu fet un primer disseny.
   

Resumint, el Fireworks MX 2004 treballa amb vectors i amb mapes de bits. El seu entorn de treball interacciona amb diferents elements, com per exemple la barra d'eines, els menús i les finestres flotants, també anomenades persianes. D'aquestes finestres flotants o persianes, hem de destacar-ne, tant per la seva importància com per les possibilitats de control que ofereix a l'usuari, l'Inspector de propiedades. Acostumar-nos a aquesta interfície serà un gran pas per tal de poder treballar de forma més efectiva.

   
 
Amunt