Guia d'Aprenentatge de Fireworks CS4

ndex de programes daprenentatge

1. Creaci dun logotip

2. Creaci duna illustraci

3. Treballar amb illustracions i grfics importats

4. Realitzaci dun fotomuntatge

5. Realitzaci del disseny de la interfcie dun web

6. Creaci i remaquetaci dun bner

7. Creaci dun grfic interactiu i un lloc web

8. Creaci dun dossier

0. Introducci

CRDITS

PROGRAMES DAPRENENTATGE 1 | 2 |

Guia daprenentatge Fireworks CS4: guia de maquetaci

INICI |

3 | 4 | 5 | 6 | 7 | 8

Introducci

Lobjectiu daquesta guia daprenentatge s conixer lentorn de producci del Fireworks i les mltiples alternatives de creaci grfica que ofereix. Consta duna srie de programes daprenentatge que inclouen explicacions teriques, exemples prctics i consells perqu lestudiant apliqui els coneixements adquirits a casos concrets i es familiaritzi amb el procs complet de producci en el Fireworks. En acabar la guia daprenentatge, lestudiant ser capa de crear i desenvolupar els seus propis projectes de creaci grfica. A la vegada, haur adquirit els coneixements necessaris per aprofundir en laprenentatge daquesta eina. Aquesta guia daprenentatge es basa en lAdobe Fireworks CS4, versi Windows, castell.

INTRODUCCI

OBJECTIUS

INICI | CRDITS

PROGRAMES DAPRENENTATGE 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8


INICI | CRDITS

Programa daprenentatge 1. Creaci dun logotip Desenvolupament del programa daprenentatge: pas 1 de 18

Aquest primer programa daprenentatge consisteix a fer un logotip. Aquesta prctica ens permetr conixer els fonaments bsics del programa.

En la imatge de la dreta observem lentorn de treball del Fireworks CS3 tal com apareix per defecte quan obrim el programa per primera vegada. Com podem observar-hi, est organitzat i homogenetzat amb la interfcie de lAdobe. Els usuaris daltres aplicacions de lAdobe hi poden reconixer clarament aquests elements comuns.

Com la majoria de programes de tractament dimatge, consta duna barra de mens, una paleta deines, una srie de panells i inspectors i la finestra del document.

Guia daprenentatge Fireworks CS4: guia de maquetaci PROGRAMES DAPRENENTATGE 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

1

2

3

5

4

INICI | CRDITS


La barra de mens, en la part superior de la pantalla, recull totes les funcions possibles que permet fer el programa. A causa de la gran varietat dopcions, aquestes mateixes opcions estan separades en panells i inspectors segons la funci que tenen.

La paleta deines cont totes les eines necessries per a la creaci i edici grfica. En total hi ha 55 eines, algunes de les quals shi troben agrupades. Els grups deines sidentifiquen amb un triangle negre al costat inferior dret de leina. Per a seleccionar una eina dun grup deines noms cal deixar el ratol premut sobre la icona. Daquesta manera, la resta deines es desplega. A mesura que avancem la guia daprenentatge, en veurem els diferents usos.

Aquest s lespai on se situen els documents oberts.

Els panells i els inspectors reuneixen totes les opcions separades segons la funci que tenen. Aquests panells es poden obrir, tancar i ordenar mitjanant la personalitzaci segons els requeriments de cada usuari. Els panells permeten controlar les caracterstiques de leina seleccionada i els inspectors controlen les caracterstiques dels objectes seleccionats. Per obrir un panell o un inspector, noms cal seleccionar-lo des del men Ventana de la barra de mens. Per defecte, aquests panells i inspectors estan classificats en grups, per els podem separar i ordenar de la manera que ens sigui ms cmoda per treballar. Per fer-ho, noms hem de seleccionar lopci Agrupar con... en el men dopcions del panell i indicar-hi el panell amb el qual volem formar grup.

El Fireworks disposa dun gran nombre de panells i inspectors per treballar. El programa fa servir aquest inspector per a contenir totes les funcions de propietat dels objectes (vectorials, mapa de bits, text, etc.) i les opcions de les eines que hi ha en el men Herramientas. Aix, el nombre de panells i inspectors que necessitem tenir oberts per a fer la feina es redueix. Un dels grans avantatges del Fireworks s que s un panell dinmic que canvia a mesura que treballem i noms ens mostra les opcions que necessitem en cada moment. Per exemple, quan un objecte vectorial est seleccionat, lInspector de propiedades mostra totes les opcions de grfics vectorials, com el tra i el farciment. En escollir una eina del men Herramientas, lInspector de propiedades visualitza les opcions que t leina.


1

2

3

4

5


INICI | CRDITS


Per a crear un document nou en el Fireworks, podem fer servir diverses opcions des de la barra de mens, la caixa deines o les tecles abreujades.

Se segueix una daquestes tres opcions: - Seleccionar en la barra de mens Archivo > Nuevo. - Seleccionar en la caixa deines principal la icona Hoja en blanco. - Prmer Ctrl + N.

Una vegada seguit un dels tres passos anteriors, sobrir el quadre de dileg Documento nuevo. En aquest quadre shan dintroduir els valors que es vulguin aplicar en aquest nou document.

Els valors que vulguem aplicar a la imatge nova, shan dintroduir en els camps Anchura i Altura. Aquests valors els hi podem introduir en unitats de pxels, polzades o centmetres. Noms cal que seleccionem lopci en el men desplegable que acompanya el camp de text.

A ms de lamplada i lalada, tamb hi haurem dintroduir la resoluci de la imatge.

Un altre valor que sha dafegir a la imatge s el color del llen (el color del fons).


En aquest cas, hi introduirem els valors segents: - Amplada 300 px - Alada 100 px - Resoluci 72 ppp - Color del llen blanc


INICI | CRDITS


El resultat de tots aquests passos s un document buit nou.

Una vegada obert un document en el Fireworks, podem veuren i modificar-ne el format des de lInspector de propiedades.

En cas que la barra deines principal no sigui visible, la collocarem en el document des del panell Ventana.

Canviar el color de fons.

Canviar la mida del llen del document.

Canviar la mida del document.

Canviar la mida actual del llen per la mida de lobjecte seleccionat.


1

1

2

3

4

5 2 3 4 5


INICI | CRDITS


El Fireworks permet dibuixar quadrats, rectangles, cercles, ovals, estrelles i qualsevol polgon mitjanant les eines de dibuix de formes. Aquestes eines sn a la paleta dHerramientas, agrupades en el grup deines bsiques.

A continuaci, veurem com es creen aquestes formes bsiques. Primer, crearem un rectangle.

Premerem la icona del grup per poder visualitzar totes les eines que cont.


Resultat

Per dibuixar el rectangle seguirem els passos segents:

1. Prmer ratol

2. Arrossegar ratol amb el bot premut

3. Deixar anar bot


INICI | CRDITS


Tal com hem dit anteriorment, la informaci de lInspector de propiedades canvia a mesura que treballem i noms ens mostra les opcions que necessitem en cada moment.

En aquest cas, com que el rectangle est seleccionat, lInspector de propiedades mostra totes les opcions de grfics vectorials, com el tra i el farciment.


1 2

3 4 5 6

1

2

3

4

5

6

Alada i amplada del rectangle

Situaci del rectangle dins el llen

Caracterstiques del farciment

Caracterstiques del tra

Transparncies i efectes

Estils


INICI | CRDITS


Si volem canviar el color del rectangle que hem dibuixat, hem de prmer la icona de Color de Relleno, que s a lInspector de propiedades. Daquesta manera, desplegarem la taula de colors.

En el nostre cas, seleccionarem un color blau fosc.


1

2

3

4

1

2

3

4

Color actual.

Previsualitzaci del color seleccionat.

Seleccionar un altre color.

Si volgussim un rectangle sense color de farciment, seleccionarem aquesta casella.


INICI | CRDITS


De la mateixa manera que hem canviat el color del farciment, canviarem el color del contorn del rectangle.

Premerem la icona de color de tra i seleccionarem el color negre.


Fent pujar o baixar la barra lliscant incrementarem o disminuirem la grossria del tra.

2

1

Una vegada seleccionat un color per al contorn del rectangle, hi podem donar una grossria determinada. En aquest cas, hi atribuirem una grossria de 2 pxels.

El quadrat blanc amb una lnia vermella entravessada indica que no hi ha cap color de tra seleccionat.

1

2

Resultat


INICI | CRDITS

Programa daprenentatge 1. Creaci dun logotip Desenvolupament del programa d'aprenentatge: pas 9 de 18

Leina segent que utilitzarem per a crear el logotip ser leina Polgono.

Amb aquesta eina podem dibuixar qualsevol classe de figura regular.


El nombre de costats lindicarem a lInspector de propiedades.

Exemple 5 costats Exemple 10 costats


INICI | CRDITS


Amb leina Polgono tamb s possible dibuixar estrelles. Hem de seleccionar-la com a forma de polgon a lInspector de propiedades.


Exemple polgon Exemple estrella Exemple automtic (38) Exemple 70

Quan seleccionem la forma Estrella, tamb sactiva lopci ngulo. Amb aquesta opci controlem langle de les puntes de lestrella. Si seleccionem Automtico, hi aplicar automticament langle ms adequat per al nombre de costats que hgim seleccionat anteriorment.


INICI | CRDITS


Una vegada dibuixat el polgon podem ajustar-ne la mida i la posici dins el llen.

Per fer-ho, seleccionarem les eines de la transformaci. Leina que utilitzarem en aquest cas s leina dEscala.


Una vegada dibuixat el polgon podem ajustar-ne la mida i la posici dins el llen.

Per fer-ho, seleccionarem les eines de transformaci. Leina que utilitzarem en aquest cas s leina dEscala.


INICI | CRDITS


Quan seleccionem lobjecte amb aquesta eina, queda emmarcat amb els anomenats agafadors de transformaci.

Aquests agafadors sn els que ens serviran per transformar la figura. Si estirem qualsevol punt, en modificarem la mida. Daquesta manera, per exemple, si estirem cap a dins, lobjecte es fa ms petit.


Nota: Tal com hem pogut observar quan hem estirat el punt de lagafador, les proporcions de lobjecte no han variat durant lescalat. Aix s aix sempre que els punts que arrosseguem siguin els de les cantonades de lobjecte. Si estirssim un punt de la vora, noms se nescalaria un eix.

Nota: Leina Escalar tamb s leina que ens permet girar lobjecte.

Si seleccionem una cantonada de lobjecte i lestirem en diagonal, el farem girar.

Resultat


INICI | CRDITS


Ara que lobjecte ja fa la mida que volem, el collocarem en el lloc correcte.

Per fer-ho, seleccionarem leina Puntero en la barra deines.


Per moure lobjecte noms cal seleccionar-lo amb el Puntero: hi cliquem al damunt i larrosseguem fins a la zona on vulguem collocar-lo. Cal arrossegar lobjecte des del centre per a evitar deformar-lo.

Nota: La diferncia que hi ha entre el Puntero (fletxa negra) i leina Subseleccin (fletxa blanca) s que amb el Puntero seleccionem lobjecte sencer, mentre que amb leina Subseleccin seleccionem punts concrets de lobjecte.

Quan seleccionem amb aquesta eina, els punts de lobjecte queden marcats amb color blanc.

Daquesta manera, podem seleccionar un punt concret de lobjecte per mourel.


INICI | CRDITS


Nota: Per seleccionar un objecte hi clicarem al damunt. Farem servir leina Puntero.

Tal com podem veure, quan seleccionem un objecte queda remarcat amb els punts que t i amb un tra de color blau.

Estrella seleccionada

Rectangle seleccionat


Canviarem el color de lestrella i repetirem aquest procs per crear ms estrelles de mides i colors diferents.

Resultat


INICI | CRDITS


Una de les novetats que va introduir el Fireworks 8 va ser la creaci de formes automtiques.

Les formes automtiques sn objectes primaris que poden variar la posici dels punts que tenen i respondre de manera intelligent a mesura que sels transforma.

Per veure com funcionen, introduirem una forma automtica en la composici del nostre logotip.

Seleccionarem leina Flecha.


Dibuixarem la forma Flecha de la mateixa manera que abans hem dibuixat les formes simples.

Com a caracterstica de les formes automtiques, podem observar que, a ms dels punts de selecci blaus que ja hem vist en les formes simples, tamb contenen uns punts grocs.


INICI | CRDITS


Mitjanant aquests punts de control, els parmetres automtics de la forma es poden ajustar. En el cas de la forma Flecha, aquests parmetres sn lagudesa de la punta, la longitud i lamplada de la cua i la longitud de la punta.


Resultat

1

4 2

3

5 6

1

1

5

3

2

4

6


INICI | CRDITS

Programa daprenentatge 1. Creaci dun logotip Desenvolupament del programa daprenentatge: pas 17 de 18 El pas segent per a crear el logotip s inserir-hi un text.

Tal com podem comprovar, el Puntero es transforma i lInspector de propiedades mostra les propietats de text, que es poden modificar en qualsevol moment.

Clicarem sobre el llen i hi escriurem el text Fireworks CS4.

Per modificar la font, la mida, lestil i lalineaci del text

noms hem de seleccionar lobjecte en el llen i modificar-ne

els atributs des de lInspector de propiedades. Modificarem

els atributs del text des de lInspector de propiedades i farem

servir les eines de transformaci per obtenir un resultat

similar al de la imatge.


Amb leina Texto seleccionada clicarem sobre la zona de lrea de treball en qu volem inserir el text.

Alada i amplada de la caixa de text, i posici dins el llen

Tipografia utilitzada

Ajustament entre carcters

Sagnat del pargraf

Escala horitzontal

Interlineat

Espai davant del pargraf

Espai desprs del pargraf

Unitats de linterlineat

Desplaament lnia base

1

2 3 4 5

6 7 8

9 12 13 17

15 14 10

11 16 18

Estil de font

Estil de lletra

Orientaci del text

Nivell de suavitzaci

Ajustament entre carcters

Opacitat

Alineaci

Color de lletra

1

2

3

4

5

6

7

8

9

10

16

17

18

13

14

15

11

12


INICI | CRDITS


Ara ja hem creat el logotip.

Per desar el document, seleccionarem lopci:

Archivo > Guardar

El format darxiu propi del Fireworks s el format PNG. Si guardem el document en aquest format, el podrem tornar a obrir i hi podrem fer les modificacions que vulguem.


En el transcurs daquest primer programa daprenentatge hem fet una ullada a les funcions bsiques del Fireworks.

A tall de resum, direm que hem aprs a fer el segent:

- Crear elements senzills a partir deines grfiques. - Transformar els grfics sobre el llen. -Modificar-ne les propietats des de lInspector de propiedades.

Com que noms hem vist una petita mostra de les eines bsiques i les eines automtiques, com a prctica es proposa crear un altre logotip, amb el nom de lestudiant, que permetr experimentar amb la resta de les eines de forma per conixer-ne totes les possibilitats.


INICI | CRDITS

Programa daprenentatge 2. Creaci duna illustraci Desenvolupament del programa daprenentatge: pas 1 de 23

Lobjectiu daquest segon programa daprenentatge ser crear una illustraci com la que es mostra ms avall.

Aquesta prctica ens servir per conixer en profunditat el sistema de treball amb el Fireworks i veure duna manera ms detallada les opcions de traos i farciments de formes vectorials que hem vist en el primer programa daprenentatge.


El primer pas que farem ser crear un document nou. Per fer aquesta prctica utilitzarem un document que tindr les caracterstiques segents:

- Amplada: 250 pxels - Alada: 335 pxels - Resoluci: 72 ppp - Color del llen: blanc

Una vegada obert el document, ens assegurarem que el panell Capas sigui visible.

Les Capas sn un mtode dorganitzaci del document que utilitza la majoria de programes dedici grfica i maquetaci.

Aquest panell visualitza lordre en qu els objectes apareixen dins el document. Tal com anirem veient en el transcurs de la prctica, aquest panell permet crear capes noves, ordenar-les, eliminar-les i ocultar o bloquejar objectes.

En cas que no estigui obert, el podem obrir amb lopci:

Ventana > Capas

INICI | CRDITS


El pas segent ser generar un rectangle que ens servir de fons per a la illustraci. Per a fer-ho, utilitzarem leina corresponent, tal com hem vist en el primer programa daprenentatge.


Una vegada generat el primer rectangle, en crearem dos ms. Hi aplicarem colors diferents per poder-los diferenciar.


INICI | CRDITS


Ara que tenim tres elements en el document, observem el panell Capas.


Tal com hem dit abans, aquest panell visualitza lordre en qu els objectes apareixen dins el document.

Els documents es divideixen en diferents plans. Els objectes se situen en aquests plans com si es tracts dun conjunt de fulls transparents superposats.

Podem observar que cada rectangle que hem creat est situat en un pla.

Nota: Tal com podem veure, lobjecte que tenim remarcat amb color blau s el que hem seleccionat en el llen. Lorganitzaci del panell Capas s molt senzilla. Els plans superiors del panell corresponen als objectes que estan en primer pla en el llen. Per a canviar-ne lordre, noms cal que arrosseguem el pla. Daquesta manera, aconseguirem disposar els objectes com vulguem.

Nota: Una icona de carpeta representa les capes. Cal no confondre les capes amb els plans que les formen. Cada element que creem es colloca en un pla dins la capa. La disposici daquests plans forma, alhora, un sistema de subcapes dins la capa. Si som usuaris del Photoshop, trobarem unes quantes diferncies importants pel que fa a ls del panell Capas. En el Fireworks, les capes equivalen als conjunts de capes del Photoshop, i les capes del Photoshop equivalen als plans del Fireworks.


INICI | CRDITS


Seleccionem el rectangle vermell i narrodonim les cantonades. Per fer-ho, introdum un valor de 15 punts en el camp Redondez del rectangle de lInspector de propiedades.

Desprs seleccionarem el rectangle verd i narrodonirem les cantonades amb un valor de 30 punts. La cantonada del rectangle queda fora del llen, de manera que no observem el canvi.


INICI | CRDITS


Noms seleccionarem el rectangle situat en ltim pla.

Nota: Podem seleccionar diversos objectes a la vegada prement la tecla Mayscula. Quan tenim diversos objectes seleccionats i noms nhi volem tenir un, podem clicar a la resta dobjectes prement la tecla Mayscula per desseleccionar-los. Tamb podem clicar sobre el llen per tenir-los tots fora de la selecci.

Ara hi canviarem el color de farciment i hi aplicarem una textura.

Lopci Textura la trobarem en lInspector de propiedades. Si despleguem el camp Textura podem previsualitzar les textures de qu disposem.

Seleccionarem la textura Tartn suelto.


Quan apliquem una textura a un objecte, podem donar-hi un grau dintensitat determinat per fer que la textura es vegi ms o menys sobre el color de farciment.

Per defecte, shi afegeix un valor del 50%. Podrem canviar aquest nmero mitjanant la barra lliscant.

Si volgussim treure la textura afegida a un objecte, noms haurem de donar-hi un valor dintensitat del 0%.

Lopci Transplante dna transparncia al color blanc que hi ha en la textura. Daquesta manera, permet veure els objectes que queden sota aquest color.


INICI | CRDITS


Ara canviarem el color del farciment.

Hi aplicarem un to blau fosc.

En el programa daprenentatge anterior hem vist que per canviar el color de farciment dun objecte lhavem de seleccionar i desplegar la Paleta de colores des de lInspector de propiedades.


Fixem-nos que aquesta Paleta de colores tamb la podem desplegar des de la barra deines o des dels panells Mezclador de colores i Paletas de colores.

Fer servir un sistema o un altre per a canviar el color de farciment dun objecte noms depn de la comoditat que ens aporti cada procs, ja que la funci que fan s la mateixa.

Per obrir el panell Mezclador de colores o la Paleta de colores farem servir les opcions:

Ventana > Mezclador de colores Ventana > Otros > Paleta de colores


INICI | CRDITS


El pas segent ser collocar els altres dos rectangles a la mida que vulguem.

Per fer-ho, els seleccionarem i utilitzarem les eines de transformaci que vam veure en el primer programa daprenentatge.

Obrirem el panell Alinear.

Ventana > Alinear

Aquest panell ens permet alinear i distribuir verticalment o horitzontalment tots els objectes seleccionats.

Amb els dos rectangles superiors seleccionats, clicarem a la icona Alinear centro vertical del panell Alinear. Daquesta manera, els eixos verticals dels dos rectangles se centraran.


Quan tinguem lopci Con el Lienzo marcada, utilitzarem el rectangle que forma el llen com si fos un altre objecte que shagus dalinear. Daquesta manera, no solament alinearem els rectangles entre ells, sin que tamb els alinearem respecte del document.


INICI | CRDITS


Ara seleccionarem el rectangle que ens far de fons dillustraci.

Per aconseguir un efecte de fons ms bo farem servir un color degradat.

Seleccionarem lopci de farciment de degradat des de lInspector de propiedades.

Tal com podem observar, en el men que es desplega hi ha diversos tipus de degradats: lineals, radials, ellptics, rectangulars, etc. Per crear lefecte de cel nosaltres farem servir el degradat lineal.


INICI | CRDITS


Una vegada aplicat el degradat, el modificarem per aplicar-hi els colors que vulguem. Per fer-ho, cal que seleccionem lopci Edicin, dins les Opciones de relleno.


Quan activem aquesta opci veurem els colors que conformen aquest degradat. Les dues fletxes indiquen els colors que lintegren.

Si cliquem damunt les fletxes, podem seleccionar altres colors.

Nosaltres seleccionarem un degradat que vagi dun blau fosc a un blau clar.


INICI | CRDITS


Nota: Un degradat no ha destar format nicament per dos colors. s possible afegir-hi tants colors com es vulgui. Noms hem de clicar a la zona de sota la barra de color. Tamb podem fer crrer les fletxes per modificar la icona de les transicions entre colors.


Ara el color del cel s adequat, per pot ser que en una altra ocasi ens interessi modificar lorientaci del degradat. Per exemple, que vulguem que el degradat sigui horitzontal en lloc de vertical. Una soluci senzilla seria fer girar el rectangle 90 amb les eines de transformaci, per desprs haurem de tornar a escalar el rectangle per deixar-lo en la mateixa posici. La soluci correcta s fer girar noms el degradat, sense modificar el rectangle.

Fixem-nos que en tenir seleccionat el rectangle amb el degradat, a dins apareix una lnia amb dos punts.

Aquesta lnia indica lorientaci del degradat. Podem seleccionar aquests punts i mourels per canviar laspecte del degradat.


INICI | CRDITS


Si seleccionem el punt rod, arrossegarem tot el degradat. El degradat va des del punt rod fins al punt quadrat. En la imatge veiem que podem deixar una part del degradat fora de lobjecte.


Si seleccionem el punt rod, modificarem la llargada del degradat. Si fem la lnia ms curta, reduirem el tros mitjanant el qual es passa dun color a un altre.

Si fem seleccionar des dun punt intermedi de la lnia, canviarem langle del degradat.


INICI | CRDITS


Per al tercer rectangle, el de terra, farem servir un patr.

Un patr s una petita imatge de mapa de bits que sutilitza per a farcir una figura.

Per defecte, el Fireworks t una srie de motius, que sn en el men desplegable Patrn. Seleccionarem un Patrn en forma de Burbujas.


Una vegada aplicat el patr, en podem modificar lorientaci de la mateixa manera que nhem modificat el degradat, estirant els agafadors que apareixen quan seleccionem lobjecte amb el punter.

Encara que el Fireworks t una srie de patrons per defecte, podem importar i aplicar com a patr qualsevol imatge en format PNG, GIF, JPG, BMP o TIF que tinguem en el disc dur. Per fer-ho, hem de seleccionar lopci Otras de la part inferior de la llista del men desplegable Patrn. Daquesta manera, podrem seleccionar larxiu dimatge corresponent.


INICI | CRDITS


Lltim pas que farem en la creaci del fons de la illustraci ser un efecte de vora difuminada en els dos rectangles que es troben en primer pla.

Lefecte de vora difuminada s una propietat dels traos vectorials que permet fer el Fireworks.

Aquesta propietat s en lInspector de propiedades.

Seleccionarem el rectangle del degradat i hi donarem la propietat de borde fundido amb un valor de 30 pxels per al gruix del fundido.

Aquest procs laplicarem al tercer rectangle.


Resultat


INICI | CRDITS


Ara tenim tots els elements que formen el fons de la illustraci. Tots aquests elements els hem creat dins la mateixa capa, Capa 1, ja que formen el fons de la illustraci. Canviarem el nom de la capa per Fondo. Per fer-ho, clicarem a la icona de carpeta en el panell Capas.


Seguirem el procs de creaci de la illustraci generant una altra capa en qu collocarem els elements segents.

Per a afegir una capa nova en el panell Capas, farem servir la icona de Capa nueva que apareix en la part inferior del panell.

Si ara observem el panell Capas, veurem que cont una capa nova.

Observem que la capa nova sanomena Capa 1, malgrat ser la segona capa que cont el document. Aix s degut al sistema de nomenament automtic del programa.


INICI | CRDITS


Com que continuarem treballant en la capa nova, ens conv bloquejar la capa Fondo per a no modificar, per error, cap element dels que cont.

Bloquejarem la capa clicant a lespai que hi ha en la tercera columna del panell Capas.

Vemos que ahora aparece un icono de candado.


Si cliquem a la icona de Flecha podem contraure o expandir el contingut de la capa. Com que la capa Fondo ja la tenim bloquejada i no hi continuarem treballant, la tancarem.

Una opci molt til que permet fer el Fireworks s la dEditar slo una capa. Aquesta opci la trobem en el men dopcions del panell Capas.

Si tenim aquesta opci activada noms podrem seleccionar en el llen els objectes que cont la capa seleccionada. s til activar aquesta opci quan treballem amb documents que contenen molts objectes en lrea de treball, ja que podem controlar ms b els objectes que seleccionem amb el punter.

Fixem-nos que la capa que tenim seleccionada s la que apareix marcada amb color blau i amb una icona de llapis en la segona columna.


INICI | CRDITS


Crearem el segent element grfic. Per fer-ho, utilitzarem leina Pluma.

Ens fixarem que leina tingui les propietats de farciment segents:

-Categoria de farciment: slido

- Categoria de tra: 1 pxel blando - Mida de ploma: 1 - Textura: 0%


Tal com hem vist en generar elements amb les eines bsiques, els traos es formen a partir de la uni de punts. Amb la Pluma indiquem els punts que volem unir per aconseguir el tra.

Leina Pluma no noms connecta els punts mitjanant lnies rectes, sin que permet dibuixar amb les anomenades corbes de Bzier. Es tracta de segments corbs de derivaci matemtica. Cada punt determina si les corbes adjacents sn lnies rectes o corbes. Programes dedici vectorial com lIllustrator es basen en aquest tipus de sistema de dibuix.


INICI | CRDITS


Amb la Pluma seleccionada clicarem damunt el llen per crear el primer punt del tra.


Ara clicarem al lloc on vulguem situar el segon punt. Per aquesta vegada, sense deixar de prmer el bot, arrossegarem el ratol.

Veiem que tots dos punts queden units per una lnia.

Per controlar la corba hem de moure el ratol mentre mantenim el bot premut. Daquesta manera, es mostren els agafadors que donen forma a la corba.

Tal com podem observar, com ms estirem els agafadors ms corb s el tra que hi ha entre els dos punts.

Hi anirem afegint punts fins a dibuixar una forma similar a la de la imatge.

Per crear el traat, clicarem al primer punt i aix aconseguirem tancar la figura.

Resultat:


INICI | CRDITS


De la mateixa manera que hem creat el primer element, en crearem uns quants ms.

A lhora de crear-los noms hem de tenir en compte que, en el tra, hi pot haver algun tram en qu aquests elements es superposin. Aproximadament, tal com es veu en la imatge.


Com la majoria de programes vectorials, el Fireworks permet combinar grups dobjectes vectorials per crear una forma complexa a partir dun conjunt de formes ms simples.

En el men Modificar > Combinar trazados veiem les possibilitats de combinaci dobjectes vectorials que el Fireworks permet fer.

En el nostre cas, seleccionarem les tres formes vectorials creades amb la Pluma i les unirem en una nica forma mitjanant lopci Unin.


INICI | CRDITS


Ara definirem les opcions del tra.

Si despleguem el men Catergora de trazo en lInspector de propiedades veurem tots els tipus de tra de qu disposa el Fireworks.

Nosaltres seleccionarem el tra Antinatural > Pintura viscosa. Hi donarem una grossria de tra de 20 punts. Una mida de vora de 30 punts. Finalment, hi aplicarem un color lila.


INICI | CRDITS


Ara hem de solucionar el problema que tenim amb el tra que sobresurt del dibuix. Per a solucionar-lo, farem servir una mscara.

Una mscara s un objecte que crea un retall en un altre objecte. Amb les mscares es poden perfilar objectes o imatges. Tamb es poden crear efectes de transparncia i degradats.

Sha de tenir en compte que les mscares noms fan transparent la part de lobjecte que sobra, per no leliminen. s a dir, en qualsevol moment podem eliminar la mscara i recuperar lobjecte original.

Per afegir una mscara al tra el seleccionarem en el panell Capas i clicarem a la icona Aadir mscara, que est situada en la part baixa del panell.


INICI | CRDITS

Programa daprenentatge 2. Creaci duna illustraci Desenvolupament del programa daprenentatge: pas 21 de 23 En la mscara podem dibuixar amb qualsevol eina de dibuix.

En les mscares noms es fa servir una paleta Escala de grises. En les mscares, els colors negres donen transparncia a lobjecte. s a dir, tot el que pintem de color negre en la mscara ser transparent en lrea de treball, mentre que la zona blanca en la mscara far que la imatge sigui visible en lrea de treball. Daquesta manera, els tons grisos atribuiran diferents graus de transparncia a la imatge.

En el nostre cas ens interessa que la zona visible del tra sigui la zona que queda dins el rectangle de fons degradat. Per fer-ho, dibuixarem en la mscara un rectangle negre en la mateixa posici i de la mateixa mida que el que hem dibuixat anteriorment.

Primer seleccionarem el rectangle en el panell Capas.

Nota: Haurem de desbloquejar la capa.


Una vegada seleccionat, el copiarem en la memria de lordinador mitjanant lopci:

Edicin > Copiar

Ara seleccionarem la mscara del tra i enganxarem el cercle que hem copiat mitjanant lopci:

Edicin > Pegar

Ara veiem que la mscara cont el rectangle i fa que noms sigui visible la zona de tra que hi coincideix.


INICI | CRDITS


Lltim element que collocarem en la illustraci ser un objecte de text amb el text CS4.


Lltim pas que farem en la illustraci consistir a donar una mica de transparncia al nmero.

Per variar lopacitat dun objecte indicarem un percentatge determinat en el panell Capas.

Tamb s possible variar la interacci de colors de dos o ms objectes superposats mitjanant els modes de mescla. Els modes de mescla manipulen els valors de color dels objectes superposats i controlen els efectes dopacitat.

Nota: Els valors dopacitat i la interacci de colors tamb sn en lInspector de propiedades.


INICI | CRDITS


Ara la illustraci ja est acabada.


En el transcurs daquesta prctica hem vist els diferents tipus de farciment i de traos de qu disposa el programa. Tamb hem aprs a fer servir el panell Capas i a combinar-lo amb diferents elements per a generar un objecte ms complex.

La prctica que lestudiant ha de fer per acabar el programa daprenentatge consisteix a crear una illustraci dun paisatge que contingui el major nombre possible de passos estudiats (mltiples capes, elements agrupats, formes automtiques, corbes de Bizer, diferents tipus de farciment i tra, opacitats, mscares).


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 1 de 36

En aquest programa daprenentatge veurem el procs de treballar conjuntament amb diversos programes de dibuix.

Tal com hem vist en els programes daprenentatge anteriors, el Fireworks disposa dunes eines de treball vectorial molt bones, per aix no vol dir que sigui lnic programa de dibuix daquest tipus.

s molt provable que en el transcurs dun projecte professional necessitem treballar amb el Fireworks amb documents creats amb altres programes de dibuix.

Imaginem-nos que ens arriba una illustraci que ha estat feta amb lAdobe Illustrator CS4. Per fer-la shan utilitzat les eines vectorials de lIllustrator (traos, farciments slids, farciments degradats, trames, mscares, elements agrupats, capes, etc.). Ara necessitem passar tota aquesta feina al Fireworks per a continuar el projecte.


Illustraci feta amb lAdobe Illustrator CS3

Trames de farciment

Grossria de tra

Tra

Grups

Mscara

Degradats

Efectes dombra

1

2

3

4

5

6

7

1

2

3 4

5

6

7

INICI | CRDITS


El primer pas s crear un document nou.

Hi aplicarem els parmetres segents:

- Alada: 600 pxels - Amplada: 360 pxels - Resoluci: 72 ppp - Color llen: blanc

Per a importar larxiu farem servir lopci:

Archivo > Importar

O clicarem a la icona Importar del men Archivo.


Aquesta acci obrir la finestra de selecci darxiu, en qu escollirem larxiu: -Ilustracin.ai

Quan importem un arxiu vectorial sobre el quadre de dileg Opciones de archivos vectoriales.


INICI | CRDITS


Vegem pas a pas aquest quatre de dileg.

Els valors descala, amplada, alada i resoluci sn els valors del conjunt delements que importarem. Podem comprovar que les mides sn diferents de les del document que hem creat amb el Fireworks. Aix s degut a la zona dimatge oculta de la mscara.


A lhora de treballar amb diversos programes s important que siguem conscients del format final que volem crear. Per aix, en crear la illustraci amb lIllustrator, sha treballat amb un document que tenia les mateixes proporcions que el del Fireworks.

Si no fos aix, podrem ajustar les proporcions del document que hem dimportar al document de treball des daquest quadre de dileg.

Nota: Suavitzaci: Aquesta opci fa que les vores dels objectes vectorials es suavitzin per evitar vores dentades.

Text: Aqu podem escollir diverses opcions de suavitzaci que podem aplicar al text. Segons la mida del text que es faci servir ser ms adequat escollir una opci o una altra.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 4 de 36 Lopci Conversin de archivos ens indica com shan dimportar arxius que contenen diverses pgines en cas que siguin documents antics del Freehand o el Corel. Es pot escollir obrir una pgina indicant-ne el nmero o important les pgines com a estats del Fireworks per, desprs, crear animacions.

En el nostres cas, com que el nostre document Illustrator noms t una pgina, noms tindrem lopci Abrir una pgina amb el nmero 1 marcat.

Pel que fa a les capes dels documents, es pot seleccionar Ignorar capas, que prescindeix de les capes que cont el document i importa tots els objectes en una nica capa. Lopci Recordar capas importa els objectes mantenint lestructura de capes amb qu es va crear el document.

Convertir capas converteix cada capa del document Illustrator en un estat diferent per poder-les animar posteriorment.

Seleccionarem lopci Recordar capas i deixarem desseleccionades les altres dues opcions.


Nota: Incluir capas invisibles: Importa les capes que estiguessin desactivades en el moment de guardar el document vectorial.

Incluir capas de fondo: Importa la capa de fons del document. Si aquesta opci no se selecciona, la capa de fons del document signora.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 5 de 36 Lltima opci s la de Representar como imgenes. Amb aquesta opci podem indicar al Fireworks que converteixi en una nica imatge de mapa de bits els grups que estan formats per molts elements vectorials per estalviar memria i temps de procs. Noms cal especificar-hi el nombre mxim dobjectes que pot tenir un grup abans de convertir-lo en una nica imatge de mapa de bits.

Com que en el nostre cas no ens interessa transformar cap part de la illustraci en mapa de bits, seleccionarem totes tres opcions.

Recordem els valors que hi haurem dhaver introdut:

100 en la casella Escala. Seleccionar lopci Suavizado. Seleccionar Texto suave. Seleccionar Abrir una pgina. Seleccionar Recordar capas. Seleccionar Incluir capa de fondo. Desseleccionar les opcions Representar como imgenes.

Clicarem a Aceptar per importar el document.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 6 de 36 Desprs de prmer el bot Aceptar apareix el cursor dImportar. Veiem que s com el cant dun marc. Ens indica el cant superior dret del document que sha dimportar.

Seleccionarem el cant superior dret del nostre document.

Hem de fer un sol clic a lhora de seleccionar el punt, ja que si hi cliquem i larrosseguem podem canviar lescala del document que importem.


Veiem que ja tenim la illustraci collocada dins el nostre document i que queda collocada a partir de la zona en qu comena el contingut (linterior de la mscara incls).

Haurem de centrar la imatge en el document.

Si ens fixem en el panell Capas veurem que tenim tots els elements que formen la illustraci separats i distributs en capes.


INICI | CRDITS


Ara fixem-nos en la imatge que tenim en el Fireworks i en la imatge que tenem en lIllustrator. Podem observar que hi ha propietats del document de lIllustrator que no shan importat correctament. s el cas dels efectes dombra que hi havem aplicat i del degradat de lombra de fons.


Documento Illustrator Documento Fireworks


INICI | CRDITS


Vegem diferents parts de la illustraci.

Si seleccionem la illustraci de la bugia, podrem comprovar que est formada per un grup delements.

El Fireworks reconeix perfectament els grups delements que t el document Illustrator.


Podem desagrupar aquest grup per comprovar que disposem de tots els elements, com si els hagussim agrupat des del Fireworks.


INICI | CRDITS


Visualment ja ens devem haver adonat que hi ha diferncies en la imatge importada. Concretament, en lefecte dombra que sha afegit en lIllustrator.

Si seleccionem el grfic de color gris amb leina de subselecci, veurem que el grfic no t cap efecte assignat, malgrat haver-hi assignat en lIllustrator el filtre de Resplandor interior.

Comprovem que el sistema defectes per a formes vectorials de lIllustrator no s del tot compatible amb el Fireworks.


Document Illustrator Document Fireworks


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 10 de 36 Si tamb ens fixem en el contingut de la capa Fondo, veurem una altra diferncia que hi ha entre la imatge del Fireworks i la imatge que tenem en lIllustrator.

Primer explicarem els passos que es van seguir per generar aquest fons en lIllustrator:

El primer pas va ser dibuixar el grfic de lombra i aplicar-hi un degradat opac. El segon pas va ser duplicar aquest grfic i aplicar-hi un degradat de negre a blanc.


Amb els dos grfics seleccionats, escollim lopci Mscara de opacidad des del panell de Transparencia.

Finalment, creem un rectangle amb les mateixes dimensions que les del rectangle de fons i generem una mscara de retall perqu el tros de grfic que sobrepassava les dimensions del fons no es vegi.


INICI | CRDITS


Si suavitzem el contingut de la capa Fondo en el Fireworks, veurem que el grfic dombra mant la mscara de retall, per ha eliminat la mscara dopacitat.

Podem comprovar que les mscares dopacitat tampoc sn compatibles amb el Fireworks.


Com podem solucionar aquestes diferncies visuals que provoquen les incompatibilitats que hi ha entre el Fireworks i lIllustrator?

No tenim altre remei que tornar a fer aquests efectes que no shan importat correctament des del mateix Fireworks.

Per solucionar lopacitat de lombra, tornarem a crear la mscara dopacitat des del Fireworks. Comenarem creant un rectangle amb un degradat de negre a blanc.

Seleccionarem el degradat i el grfic dombra i els agruparem com a mscara.

Ja tindrem el mateix efecte de grfic dombra que tenem en lIllustrator.

Nota: Ens assegurarem que tenim lopci de mscara en Escala de grises.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 12 de 36 Ara solucionarem lefecte dombra interior que havem aplicat a la bugia.

Amb leina de subselecci seleccionem els grfics a qu havem aplicat lefecte dombra.


Si desplacem aquests grfics, veurem que sn grfics que el Fireworks ha generat arran de la mala compatibilitat amb els efectes de lIllustrator. Igualment, comprovarem que, en realitat, sn grfics necessaris.

Eliminarem aquests grfics i seleccionarem els grfics correctes.

Una vegada seleccionats, hi aplicarem lefecte dombra interior del Fireworks.


INICI | CRDITS


Si seguim aquest procs, tindrem en el Fireworks un document que grficament ser igual que el de lIllustrator.

Aquesta classe dincompatibilitats entre programes sha de tenir en compte. Si sabem que un efecte no simportar b en el Fireworks, val ms que no el creem en el programa original, sin en el Fireworks, quan ja haguem importat el document. Daquesta manera, evitarem haver de fer dos cops la mateixa feina.

Una vegada finalitzat el procs dimportaci dun document vectorial extern al Fireworks, hem de saber que el Fireworks, a ms dimportar, tamb permet exportar els documents que shi creen a altres programes.

La prctica daquesta primera part del programa daprenentatge consisteix a seguir aquest mateix procs. Aquesta vegada, per, sha dutilitzar una illustraci feta per lestudiant.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 14 de 36 Ara continuarem veient les possibilitats que ofereix el Fireworks com a programa dedici dimatges de mapa de bits. Per fer-ho, durem a termee un retoc fotogrfic.

En la primera part del programa daprenentatge vam veure les imatges vectorials i el Macromedia Freehand. En aquesta segona part , seguirem la mateixa estructura i, abans que res, importarem un document del programa que ms sutilitza per fer aquest tipus de tasques, lAdobe Photoshop. El document que importarem ja sha comenat a fer en aquest programa.

El Fireworks permet obrir directament arxius nadius de lAdobe Photoshop (en format PSD). Obrirem larxiu: - montaje.psd


Aquest arxiu que hem obert s un petit fotomuntatge fet amb el Photoshop. Podem observar que el document conserva lestructura de capes i les mscares que fem servir.

Nota: Fixem-nos que en el Fireworks les capes equivalen als conjunts de capes del Photoshop i que les capes del Photoshop equivalen als objectes individuals del Fireworks.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 15 de 36 Vegem lestructura del document. Shan fet servir dues imatges fotogrfiques per formar una imatge final que cont parts de luna i de laltra.

En el transcurs daquest programa daprenentatge, acabarem el procs de retoc fotogrfic que sha deixat a mig fer en el Photoshop.


Pla 1 - Imatge 1 Pla 3 - Imatge 2 + mscara

Pla 2 - Capa mapa de bits Resultat


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 16 de 36 El primer pas que farem ser retocar la imatge del dibuix. Per fer-ho, seleccionarem el pla del fons de la capa i nocultarem la resta.


El Fireworks t una mplia varietat deines per retocar les imatges de mapa de bits. Aquestes eines permeten desenfocar, perfilar, aclarir, enfosquir o tacar qualsevol rea de la imatge.

Leina que utilitzarem ser leina Oscurecer. Amb aquesta eina enfosquirem els colors de la imatge.

En seleccionar leina, podem escollir en lInspector de propiedades la mida del pinzell que volem utilitzar i la intensitat amb la qual volem aplicar lefecte.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 17 de 36 Utilitzarem aquesta eina sobre la zona de color ms clara per a intentar igualar-la amb la zona ms fosca.

Si hi ha alguna zona que sha enfosquit massa, podem fer servir leina Aclarar.

La millor manera dutilitzar aquestes eines s fer servir un pinzell gruixut que tingui una vora molt suau i una intensitat baixa. A lhora daplicar-les no les hem de fer servir com si fossin eines de pintura, sin que hem de fer clics damunt la imatge. Daquesta manera, evitarem crear zones de color massa irregulars, que embruten la imatge.


Anirem canviant de rang per anar igualant tota la gamma de blaus. Hem danar en compte a lhora denfosquir la gamma de colors clars (rang destacat), perqu si els apliquem sobre els nvols transformarem el blanc en gris i aix far que la imatge sembli bruta.

Mentre utilitzem aquestes eines s importat que el panell Historial estigui obert. Aquest panell registra totes les accions que shan fet en el document. Daquesta manera, lusuari pot modificar les accions i pot tornar al punt que vulgui en qualsevol moment.

Nota: Per retrocedir passos, arrossegarem la fletxa fins que arribem a lltim pas que considerem correcte.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 18 de 36 Quan hgim igualat el color del cel, ajustarem el color de la imatge per fer que els colors contrastin ms. Per a fer-ho, utilitzarem els efectes del Fireworks. Els efectes sn les possibilitats que ofereix el programa per modificar laspecte dels objectes.

Els efectes permeten aplicar-hi filtres com en el Photoshop. A ms, hi podrem afegir vores, relleus, ombres i alterar-ne el color i lenfocament.

Per a aplicar-hi un efecte automtic farem servir el men desplegable Efectos situat en la part inferior dreta de lInspector de propiedades. Cal que lobjecte estigui seleccionat.

Lefecte que utilitzarem ser el segent:

Efecto > Ajuste de Color > Niveles


Podem observar que el sistema dajustaments de colors i filtres del Fireworks s idntic al del Photoshop. Ajustarem els nivells de negres i blancs tal com es mostra en la imatge.

Lefecte Niveles queda aplicat a la imatge.

Nota: Quan apliquem un efecte a un objecte no lalterem realment, sin que noms en modifiquem laspecte. Daquesta manera, sempre podem reajustar-ne les propietats o eliminar lefecte i tornar a lobjecte original.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 19 de 36 Farem visibles els dos altres plans del document.


El pla Mapa de bits 2 lutilitzem per dibuixar les ombres dels llapis, que van quedar amagades a lhora de fer la mscara a la imatge original.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 20 de 36 Si volem retocar aquestes ombres, hem de seleccionar el pla Mapa de bits 2 i ocultar el pla del dibuix.

Farem servir leina Pincel per a pintar de color negre dins el pla.

Aconseguirem un resultat ms bo si seleccionem un pinzell gruixut que tingui molta suavitzaci i fem servir una opacitat baixa.


Podem esborrar un tros dombra si utilitzem leina Borrador i desprs la tornem a dibuixar amb ms precisi.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 21 de 36 Fem que tots els plans siguin visibles.

Comenarem el procs per aconseguir una esttica diferent.

Generarem un pla de mapa de bits nou dins la capa.


Des de la barra deines, seleccionarem un color marr fosc com a color de farciment. Tot seguit, clicarem a aquest pla de mapa de bits nou amb leina Cubo de pintura per farcir-lo de color.

Seleccionarem aquest pla de mapa de bits nou i el collocarem en un nivell superior al del pla del dibuix.

Resultat:


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 22 de 36 Ara canviarem el mode de mescla daquest pla de color. Els modes de mescla manipulen els valors de color dels objectes superposats i controlen els efectes dopacitat.

Per modificar el mode de mescla dun objecte el seleccionarem des del men desplegable Modos de muestra del panell Capas.

En aquest cas, el mode de mostra que ens interessa s el mode Matiz. Aquest mode combina el valor de mats del color de mescla amb la lluminositat i la saturaci del color base per crear el color resultant.

Podem anar canviant el mode de mescla per anar-ne veient els diferents resultats.

Nota: Un mode de mescla consta dels elements segents: color de mescla, opacitat, color base, color resultant. El color de mescla s el color a qu saplica el mode de mescla. Lopacitat s el grau de transparncia amb qu saplica el mode de mescla. El color base s el color dels pxels situats sota el color de mescla. El color resultant s el resultat de lefecte del mode de mescla sobre el color base.


Una vegada aplicat el mode de mescla, en variarem lopacitat en el pla per fer-lo menys visible. Seleccionarem un 50%.

Resultat:


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 23 de 36 Tornarem a seguir el procs de creaci dun altre pla de color. Farem servir el mateix color de farciment, per ara aplicarem a aquest farciment una textura de Confeti del 100%.


Com a mode de mescla farem servir el mode de mescla Multiplicar amb una opacitat del 30%.

Resultat:


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 24 de 36 Noms ens falta fer un ltim toc a la fotografia. Enfosquirem una mica els marges de la imatge.

El Fireworks, a diferncia del Photoshop, no permet crear cap capa dajustament de color que afecti diverses capes a la vegada. Daquesta manera, per poder aplicar aquest afecte dajustament de color a tota la imatge, haurem de tenir un nic pla de mapa de bits.

Seleccionarem tots els plans de la capa i farem servir lopci:

- Modificar > Allanar seleccin


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 25 de 36 Lajustament de color que aplicarem a continuaci no laplicarem a tot el mapa de bits, sin noms a una zona concreta. Amb leina de selecci Lazo seleccionarem la zona del dibuix.

A aquesta selecci, hi aplicarem una fosa per crear una zona de transici entre la zona que rep lajustament i la que no el rep. Daquesta manera evitarem que hi hagi un canvi brusc. Farem servir lopci:

Selecionar > Fundido

Hi aplicarem una fosa de 100 pxels.


Ara invertirem la selecci per seleccionar el contorn de la imatge.

Seleccionar > Invertir Seleccin

Una vegada definida la selecci, hi aplicarem lefecte ajustament de color. A diferncia de situacions anteriors, aquest efecte no el podem aplicar des de lInspector de propiedades, perqu afectaria tot el mapa de bits i, en aquest cas, noms el volem aplicar a una selecci.

Per aplicar lefecte noms a la zona seleccionada ho farem des del men Filtros. Des daquest men podem seleccionar els mateixos filtres que des de lInspector de propiedades, per no els mateixos efectes.

Seleccionarem lajustament de color Niveles i modificarem els valors de blancs i negres.

La diferncia fonamental que hi ha entre aplicar un filtre des de lInspector de propiedades i des del men Filtros s la segent: des de lInspector de propiedades podrem modificar-ne els valors o eliminar-ne el filtre, mentre que des del men Filtros el filtre saplica directament al mapa de bits i no podrem rectificar, si no s que retrocedim passos mitjanant el panell Historial.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 26 de 36 Ara, el retoc ja est acabat. Noms ens falta guardar el document. El desarem amb el mateix nom, per en format Fireworks (PNG).

Archivo > Guardar

- fotografia.png


Tal com hem pogut comprovar, ls del Fireworks amb mapa de bits s molt semblant al de lAdobe Photoshop. Igualment, cal saber que els filtres es poden compartir fins a la versi 5.5 del Photoshop.

Si tenim filtres daquesta versi de lAdobe Photoshop installats en el nostre ordinador, els podem utilitzar com si fossin filtres del Fireworks. Per fer-ho, hem dindicar al Fireworks on s la carpeta que cont els filtres. Indicarem la ruta de la carpeta de filtres del Photoshop des del men Edicin:

Edicin > Preferencias > Filtros de conexin

La prctica que sha de fer consisteix a fer un altre fotomuntatge. Per a crear-lo, utilitzarem aquestes dues mateixes fotografies. Ara, per, agafarem la fotografia que hem utilitzat per al cel i la farem servir per al terra. Igualment, agafarem la fotografia que hem utilitzat per al terra i la farem servir per al cel. Canviarem lefecte de fotografia antiga per un efecte personalitzat.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 27 de 36 Per acabar aquest programa daprenentatge, ensenyarem el procs doptimitzaci dimatges. Per a seguir aquest procs, farem servir la imatge fotogrfica que hem obtingut en la prctica anterior.


Per optimitzar imatges en el Fireworks seguirem tres passos:

Elecci del millor format darxiu. Cada format darxiu t diferents maneres de comprimir la informaci de color. Lelecci del format adequat per a determinats tipus de grfics pot reduir considerablement la mida de larxiu.

Definici de les opcions especfiques del format. Cada format darxiu t les seves prpies opcions de comprensi. Per exemple, per a compensar el nombre menor de colors en la imatge, un arxiu GIF pot fer servir un tramat i un arxiu JPEG pot fer servir un desenfocament lleuger de la imatge.

Ajustament dels colors de la imatge. Podem limitar el nombre de colors que compondran la imatge mitjanant una paleta de colors. La reducci del nombre de colors fa que la mida de larxiu sigui ms petita, per tamb pot reduir la qualitat de la imatge. Haurem de provar diverses paletes de colors per trobar el millor equilibri entre qualitat i mida.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 28 de 36 Una vegada oberta la imatge, podem veure quatre fitxes en la part superior de lrea de treball. Cada fitxa correspon a un tipus de visualitzaci del document.

En la vista Original hi ha la imatge PNG, que s la que fa servir el Fireworks. Aquesta s la vista que hem utilitzat al llarg dels programes daprenentatge que hem fet fins ara.

Una vegada composta la imatge Original, podem obtenir la imatge final exportant-la al format de dest, segons sigui web, multimdia o impressi.

Normalment, les imatges grans triguen molt a carregar-se. Com ms es redueixi aquest temps, sense perdre qualitat dimatge, ms bo ser el resultat final.

Aquest procs sanomena optimitzaci i consisteix en el fet que el Fireworks calculi la imatge optimitzada, s a dir, la que ocupi menys i, a la vegada, mantingui la qualitat dimatge ms bona. Per fer-ho, hi ha daplicar un factor de compressi.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 29 de 36 Bsicament, la compressi duna imatge consisteix a igualar colors molt similars que lull hum s incapa de distingir, de manera que la informaci continguda en el fitxer es redueix. Tamb disminueix, per tant, la mida daquest fitxer. A ms, la informaci intermdia selimina (capes, grups, etc.) i noms shi deixa el mapa de bits. El resultat s una imatge nova de mida ms petita.

El Fireworks calcula automticament el millor factor de compressi i permet variar-lo i ajustar-lo de manera precisa, segons les necessitats de lusuari.

Totes les opcions doptimitzaci de les imatges sn en el panell Optimizar.

Des daquest panell podem seleccionar el format de la imatge que volem exportar i els ajustaments doptimitzaci especfics de cada format.


El Fireworks t una srie dajustaments doptimitzaci preestablerts. Per a definir rpidament un format darxiu, podem escollir un ajustament daquest grup.

Els ajustaments doptimitzaci preestablerts els seleccionarem des del men emergent Configuracin del panell Optimizar.


INICI | CRDITS


GIF Web 216 fa que tots els colors siguin Websafe, una paleta de colors que produeix resultats bastant semblants en diverses plataformes i navegadors. La paleta de colors cont fins a 216 colors.

GIF WebSnap 256 converteix els colors que no sn Websafe al color Websafe ms proper. A tot estirar, la paleta de colors pot arribar a contenir 256.

GIF WebSnap 128 converteix els colors que no sn Websafe al color ms proper. La paleta de colors cont fins a 128 colors.

GIF adaptable 256 s una paleta de colors que noms cont els colors que sutilitzen en el grfic. A tot estirar, la paleta de colors pot arribar a contenir 256 colors.

JPEG - Calidad superior defineix la qualitat en 80% i la suavitzaci en 0%, de manera que crea un grfic de qualitat alta, per de mida ms gran.

JPEG - Archivo ms pequeo defineix la qualitat en 60% i la suavitzaci en 2%, de manera que crea un grfic de menys qualitat, per el fitxer ocupa la meitat del que ocupa el fitxer de Calidad superior.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 31 de 36 Seleccionarem la compressi JPEG - Calidad superior.


Si canviem la vista actual per la Vista previa, previsualitzarem la imatge final amb els valors de compressi que hi acabem dintroduir.

En la part baixa de la finestra del document podem veure la mida de larxiu amb la compressi seleccionada i el temps de descrrega.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 32 de 36 Amb la vista 2 copias, podem veure una comparaci de la imatge original i la imatge optimitzada. Daquesta manera, podem comprovar si el factor de compressi que hi estem aplicant mant prou qualitat respecte de la qualitat de la imatge original.

Tamb podem fer servir la vista 4 copias. En aquesta vista podem veure la imatge comparada amb tres optimitzacions alternatives. Daquesta manera, hi podem aplicar diferents tipus doptimitzaci i escollir-ne el ms adequat. Per canviar el tipus doptimitzaci de cada previsualitzaci noms lhem de seleccionar (fent clic al damunt) i nhem de canviar els valors en el panell Optimizar.


Imatge original sense comprimir Imatge final comprimida


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 33 de 36 Utilitzant la vista 4 copias seleccionem la segona previsualitzaci dimatge optimitzada (fent clic al damunt).

Ara modificarem els valors doptimitzaci. Abaixarem la qualitat de la imatge JPEG a 30%.

Veiem que la mida de larxiu i el temps de descrrega sn menors que en la primera optimitzaci. Tanmateix, tamb observem que la qualitat dimatge que obtenim en cada cas s diferent.

Nota: Quan comprimim una imatge en format JPEG podem indicar-hi el percentatge de compressi. Evidentment, com ms gran sigui el percentatge de compressi, ms petita ser la mida de larxiu. Hem de tenir en compte, per, que la qualitat de visualitzaci tamb ser ms baixa. Si ajustem el valor Calidad, augmentarem o reduirem la qualitat dimatge. Si redum la qualitat dimatge, aconseguirem que els fitxers siguin ms petits. El suavizado difumina les vores dures, que no es comprimeixen b en els arxius JPEG. Un nmero alt produeix un difuminat ms gran en el JPEG exportat, cosa que permet crear arxius ms petits. Un valor de 3 redueix la mida de la imatge i en mant una bona qualitat.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 34 de 36 Ara seleccionem la tercera previsualitzaci.

En el panell Optimizar seleccionem el format darxiu GIF.

GIF (graphics interchange format) s el format de grfics web ms com. Els arxius GIF poden tenir fins a 256 colors. Aquest format ofereix una bona compressi darxiu, per si la imatge original cont ms de 256 colors s possible que la prdua de qualitat sigui notable.

Els arxius GIF no perden qualitat si la imatge cont pocs colors, com en el cas de les illustracions geomtriques de colors plans. Generalment, els arxius GIF sn idonis per a crear grfics animats, logotips o grfics amb rees transparents. Sovint, els objectes vectorials sexporten en aquest format.


El Fireworks permet escollir les paletes segents:

Adaptable s una paleta personalitzada que es crea a partir dels colors del document. Les paletes adaptables permeten produir imatges de qualitat alta. Adaptable WebSnap s una paleta adaptable en qu cada color es converteix en el color Websafe amb el valor que shi assembla ms. Web 216 s una paleta amb els 216 colors Websafe que els sistemes Windows i Macintosh comparteixen. Exacta cont exactament els colors utilitzats en la imatge. Noms poden utilitzar aquesta paleta les imatges que, com a molt, tenen 256 colors. Si seleccionem aquesta paleta per a imatges de ms de 256 colors, la paleta passa a ser Adaptable automticament. Sistema (Windows) i Sistema (Macintosh) contenen els 256 colors especfics de les plataformes Windows o Macintosh respectivament. Escala de grises s una paleta composta per un mxim de 256 tons de gris. En escollir aquesta paleta, lescala de grisos saplica a la imatge exportada. Blanco y negro s una paleta de dos colors que noms consta de blanc i negre. Uniforme s una paleta matemtica basada en valors RGB. Personalizada s una paleta que es modifica o es carrega des duna paleta externa.

Les imatges GIF sexporten amb una profunditat de color de 8 bits que sn de fins a 256 colors. La paleta de colors del document s la llista dels colors que componen la imatge. Noms els colors que formen la paleta apareixen en la imatge.


INICI | CRDITS

Programa daprenentatge 3. Treballar amb illustracions i grfics importats Desenvolupament del programa daprenentatge: pas 35 de 36 Desprs de provar diferents optimitzacions, hem de comparar els resultats i escollir loptimitzaci que ms sadapti a les nostres necessitats.

En tenir visibles quatre finestres del document, s possible que no puguem veure la imatge sencera. Podem seleccionar leina Mano per poder moure la zona visible.

Escollirem la compressi JPEG al 80%, ja que veiem que amb la compressi al 30% la imatge perd massa qualitat i que en format GIF larxiu pesa ms.

Per exportar larxiu optimitzat farem servir lopci:

Archivo > Exportar


INICI | CRDITS


Ja tenim la fotografia exportada en format JPEG i llesta per a publicar-la en un web.

Sha de tenir en compte que quan exportem noms es guarda larxiu optimitzat, de manera que si volem guardar els canvis que hem fet en el document (capes, objectes, propietats, etc.), tamb hem de gravar larxiu en format Fireworks (PNG).

Archivo > Guardar


Una vegada vist el procs doptimitzaci de documents, demanem com a prctica a lestudiant que optimitzi els documents finals que hem realitzat en els programes daprenentatge anteriors. Sha dintentar aconseguir el menor pes darxiu possible sense perdre qualitat dimatge.


INICI | CRDITS

Programa daprenentatge 4. Realitzaci dun fotomuntatge Desenvolupament del programa daprenentatge: pas 1 de 18

En aquest programa daprenentatge farem un fotomuntatge simple que ens permetr conixer el sistema de treball del Fireworks amb grfics de mapa de bits.

El primer que farem ser crear un document nou. Hi donarem les propietats segents:

- Alada: 356 px - Amplada: 238 px - Resoluci: 72 ppp - Fons: blanc

Una vegada creat el document, fixem-nos en la barra deines. Podem observar que, tal com passava amb les eines de dibuix vectorial, tamb hi ha unes eines especfiques per a dibuix de mapa de bits.


Eina de selecci

Eina Varita mgica

Eina Lpiz

Eina Desenfoque

Eina Lazo

Eina Pincel

Eina Goma de borrar

Eina Tampn

INICI | CRDITS


Primer veurem la diferncia que hi ha entre els objectes mapa de bits i els objectes vectorials, que sn els que hem vist fins ara.

Seleccionarem leina Pincel.

En seleccionar leina veiem que podem seleccionar les propietats del tra en lInspector de propiedades.

Hi seleccionarem les propietats segents:

- Color: negre - Grossria: 1 pxel - Tipus de tra: pxel blando - Vora: 0 - Textura: 0%


Farem un tra qualsevol sobre el llen.

Si ens fixem en el panell Capas, hi apareix aquest element nou del document marcat com a Mapa de bits.


INICI | CRDITS


Per veure la diferncia que hi ha entre aquest tra en el mapa de bits i els traos que fiem amb vectors, seleccionem leina Trazado de vectores i fem un tra semblant al que hem fet abans.

Fixem-nos que hem seleccionat les mateixes propietats del tra en lInspector de propiedades .

- Color: negre - Grossria: 1 pxel. - Tipus de tra: pxel blando - Vora: 0 - Textura: 0%


Vegem en el panell Capas que el programa marca aquest element nou com a Trazado.


INICI | CRDITS


Seleccionem els dos traos.

Tal com hem vist en els programes daprenentatge anteriors, els objectes vectorials estan formats per punts i la uni daquests punts forma el traat. Aix ho podem observar quan tenim el traat seleccionat.

Si ens fixem en el tra fet amb el mapa de bits, quan el seleccionem no hi apareixen punts, sin que hi apareix el rectangle que el cont. Aix s degut al fet que els mapes de bits sn imatges que estan formades per pxels, que sn petits punts de color que componen la imatge com si fos un mosaic.

Una diferncia fonamental entre vectors i mapes de bits s que podem variar les propietats dels traos vectorials en qualsevol moment (color de tra, tipus de traat, grossria de tra, etc.), per no podem variar les propietats dels traos de mapa de bits. En els mapes de bits noms podem definir les propietats del tra abans de dibuixar-lo. Una vegada dibuixat el tra, es converteixen en un conjunt de pxels.


INICI | CRDITS


Vegem-ne un altre aspecte important.

Seleccionem el tra vectorial i fixem-nos en el panell Capas.

Si tornssim a seleccionar leina de Trazo vectorial i dibuixssim un altre tra vectorial, aquest tra apareixeria com un altre element dins la capa.


Ara seleccionem el tra de Mapa de bits. Veiem que igual que passava amb el tra vectorial, el tra de mapa de bits queda ressaltat amb color blau.

Tornem a seleccionar leina Pincel.

Si ara dibuixem un altre tra, veurem que no es crea en un pla nou, tal com passava amb els traos vectorials, sin que safegeix al mosaic de pxels de qu parlvem abans.

Si volgussim crear un altre tra de mapa de bits en un pla diferent, primer generarem el pla des del panell Capas i desprs el dibuixarem a dins.


INICI | CRDITS


Una vegada vistes aquestes diferncies bsiques entre pxels i vectors, comenarem el nostre fotomuntatge.

Esborrem tots aquests traos que hem dibuixat i deixem el document en blanc.

El primer pas que farem ser dibuixar el rectangle que ens far de fons del fotomuntatge.

Tal com podem comprovar si mirem la barra deines, no hi ha cap eina per a generar formes geomtriques amb Mapa de bits. Per aix no vol dir que no ho puguem fer. Una possibilitat s seleccionar una zona de pxels i farcir-la de color.


Seleccionem leina de Seleccin de pxeles.

Fem una selecci rectangular dins el llen, tal com mostra la imatge.

Veiem que en fer la selecci es genera automticament un pla Mapa de bits dins la capa que estem fent servir.


INICI | CRDITS


Ara seleccionem leina Cubo de pintura. En tenir aquesta eina seleccionada, veiem que podem introduir les pro

Guia d'Aprenentatge de Fireworks CS4

Documents

Transcript of Guia d'Aprenentatge de Fireworks CS4