| |
Aquesta primera pràctica se centra en l'optimització
d'imatges per al web. Cal aclarir, tal com s’ha fet en algun punt
del curs, que el Fireworks treballa amb un format propi que té l’extensió
.png. Aquest format, tot i ser vàlid per ser llegit per qualsevol
navegador —el Netscape, l'Explorer, l'Opera, etc.—, generalment
no és el format més adequat, ja que manté dins seu
tota l’estructura de capes i profunditats de color, excepte en el
cas dels arxius png de 8 bits. Tot plegat fa que els seus arxius
siguin molt pesats per circular de forma generalitzada per a la xarxa. Per
tant, doncs, el més adequat és fer les exportacions de les
imatges en formats menys pesats, com poden ser el jpeg o gif,
sobre els quals trobareu informació en aquest mateix document. |
| |
Tot i que afortunadament cada cop més l'amplada de
banda permet, i permetrà encara més en un futur proper, poder
prescindir de la grandària i del pes de les imatges, avui per avui
encara és de vital importància aconseguir un bon equilibri
entre la qualitat, el pes i la grandària de les imatges |
| |
|
| |
Desenvolupament de la pràctica |
| |
|
| |
Recupereu l'arxiu de l'exercici final del mòdul anterior.
Si per algun motiu no disposeu d'aquest arxiu a la vostra màquina,
podeu recuperar de la carpeta d'imatges del mòdul actual l'arxiu
exeapla.png.
|
| |
A la imatge inferior podeu observar que, tant en un cas
com en l'altre, l'estructura de la Persiana de
capas és molt similar. En el cas de l'exercici que vau fer,
hi ha dues capes amb un element a cadascuna. En el de l'arxiu que es proposa
recuperar, hi ha també dues capes, una amb un possible resultat aplanat
de l'exercici del mòdul anterior i l'altra que està situada
per sota i que conté un rectangle fúcsia que només
s'ha posat per igualar les estructures i poder començar a treballar
a partir d'un mateix punt. |
| |
|
| |
|
| |
|
| |
Desbloquegeu les capes si en teniu alguna de bloquejada i
seleccioneu tot el contingut de la imatge. |
| |
Cliqueu amb el botó secundari del ratolí damunt
la imatge i del menú emergent trieu l'opció Allanar
capas. |
| |
|
| |
|
| |
|
| |
Ara la vostra imatge està continguda en una única
capa amb un únic nivell. |
| |
|
| |
Fins a aquest punt del curs heu estat treballant sempre amb
una vista que a la finestra de treball s'identifica amb la pestanya Original.
Fixeu-vos que, a més d'aquesta, també hi diu Vista
previa, 2-arriba i 4-arriba. |
| |
|
| |
|
| |
|
| |
Aquestes tres pestanyes fan referència al resultat
que s'obté, tant de grandària com de qualitat, després
de fer l'exportació de la imatge al format que hagueu triat. |
| |
Podeu triar entre diferents formats d'exportació que,
més endavant, s'expliquen en aquest mateix document. Per canviar
el format d'exportació i la seva qualitat, cal que feu visible la
finestra Optimizar. |
| |
|
| |
|
| |
|
| |
Des d'aquesta finestra podeu fer diverses operacions: canviar
de format, definir la paleta d'exportació, la quantitat de colors
amb què s'exporta la imatge, la qualitat o pèrdua que experimenta
la imatge en fer l'exportació, etc. |
| |
|
| |
A la finestra de treball, poseu la vista 2-arriba. |
| |
|
| |
|
| |
|
| |
Aquesta vista permet visualitzar o bé l'original
i una còpia optimitzada o bé dues còpies optimitzades
en cas que des del deplegable on diu Original
trieu l'opció Presentación preliminar
de la exportación. |
| |
|
| |
|
| |
|
| |
Si en lloc d'aquesta trieu l'opció 4-arriba,
podeu visualitzar o bé l'original i tres possibles optimitzacions
o bé quatre optimitzacions, que poden ser de diferents formats i
quantitats de compressió. |
| |
|
| |
|
| |
|
| |
Per triar una o altra optimització, només cal
que us desplaceu damunt la vista de la imatge que voleu triar i hi cliqueu
amb el botó primari del ratolí. Aleshores, des de la pestanya
de Vista previa podeu visualitzar el resultat
exacte de l'opció triada. |
| |
|
| |
|
| |
|
| |
Val a dir que, com la majoria ja sabeu, no tots els formats
serveixen per a les mateixes coses, i el fet de triar-ne un o altre depèn
en moltes ocasions de l'objectiu que preciseu cobrir. |
| |
Els diferents formats amb què el Fireworks MX 2004 us permet
fer optimitzacions apareixen relacionats en el quadre dinàmic inferior: |
| |
|
| |
|
| |
|
| |
Fins aquí el que us hem explicat és ideal per
a qui ja domini força els diferents formats de la imatge, però
aquells que no esteu avesats encara a tants formats, com podeu saber quin
és el millor en cada cas? |
| |
El Fireworks MX 2004 presenta una opció de menú
mitjançant la qual us fa saber quin és el format aconsellable
en cada ocasió. |
| |
|
| |
Seleccioneu el menú Archivo
| Asistente de exportación. |
| |
|
| |
|
| |
|
| |
El Fireworks MX 2004 us mostra aleshores un quadre com el de la
imatge superior en activar la casella Tamaño
del archivo de expòrtación objetivo. Si voleu, podeu
introduir la grandària màxima que voleu que tingui l'arxiu
final. Amb aquesta dada, el Fireworks fa un càlcul i dóna
a la imatge les millors característiques possibles per ajustar-se
a la grandària prèviament indicada. |
| |
|
| |
En clicar sobre el botó Continuar,
el Fireworks MX 2004 us obre un altre quadre de diàleg on heu de triar
quin és el destí que doneu a la vostra imatge. Trieu una opció
i torneu a prémer Continuar. |
| |
|
| |
|
| |
|
| |
Aleshores, el Fireworks MX 2004 presenta un altre quadre amb els
resultats de l'optimització que ha fet segons les característiques,
tant de grandària com de destí, que heu posat. |
| |
|
| |
|
| |
|
| |
Tan bon punt hagueu clicat sobre el botó Salir,
el Fireworks MX 2004 presenta el quadre d'exportació que podeu veure al
gràfic inferior. |
| |
|
| |
|
| |
|
| |
Aquest quadre d'exportació permet fer les mateixes
operacions que si treballeu directament des de la finestra Optimizar. |
| |
|
| |
Feu proves de diferents exportacions amb la imatge que teniu
en pantalla i amb altres que tingueu al vostre ordinador. |
| |
|
| |
|
 |
| |
|
| |
|
