Fireworks: come gestire l’esportazione?

Oggi vedremo quali sono gli ottimi strumenti che Fireworks ci mette a disposizione per gestire l’esportazione e l’ottimizzazione.

Continuiamo a lavorare sul layout che abbiamo disegnato nello scorso tutorial.
Per prima cosa spegniamo tutti i livelli che contengono elementi testuali, e lasciamo visibili soltanto gli elementi grafici che non possiamo riprodurre con il codice.

A questo punto possiamo scegliere tra diverse opzioni, tutte molto interessanti.
Analizziamole una per una.

Esporta porzioni lungo le guide

Sezioniamo il layout posizionando le guide attorno alle aree che vogliamo esportare, esattamente come facciamo con Photoshop.

In questo caso però possiamo evitare il fardello dello strumento Sezione.

A chi non è capitato, almeno una volta, di maledire lo strumento Sezione di Photoshop perchè, dopo aver sezionato diligentemente tutte le porzioni del tuo layout, ti accorgi che un’immagine sfalla di un paio di pixel e quindi sei costretto a cancellare tutto e ricominciare daccapo?

Fireworks ci rende decisamente la vita più facile.
Dopo aver posizionato le guide andiamo su File – Esporta:

Alla voce Porzioni selezioniamo dal menù a tendina Porzioni lungo le guide.
In questo modo Fireworks ritaglierà automaticamente le porzioni del layout e le salverà all’interno di una cartella.

Nel campo Nome file scriviamo il nome che vogliamo dare alla cartella.
Alla voce Esporta dobbiamo selezionare Solo immagini: Fireworks infatti ha molte funzionalità, alcune delle quali strettamente collegate a Dreamweaver, che permettono di esportare direttamente porzioni di codice, ma noi preferiamo fare le cose per bene quindi scriveremo il nostro codice a mano.

Di default le porzioni vengono salvate in formato png Fireworks, ma possiamo modificare questa impostazione dal pannello Ottimizza, che si attiva cliccando su Finestra – Ottimizza.

Qui, oltre a scegliere il formato in cui vogliamo salvare le porzioni, possiamo impostare vari parametri di ottimizzazione.
Ad esempio per le jpeg possiamo alzare o abbassare la qualità, modificare il livello di attenuazione e le opzioni di qualità selettiva, per le png e le gif possiamo impostare il numero massimo di colori, la trasparenza, il dithering.

Esportare le porzioni lungo le guide è la soluzione ottimale nel caso in cui il layout su cui stiamo lavorando è abbastanza semplice e lineare, per layout un po’ più complessi potremmo avere la necessità di strumenti più avanzati.

Esporta porzioni

Nella barra degli strumenti, all’interno del gruppo web, troviamo lo strumento Porzione, attivabile anche con la scorciatoia da tastiera K.

Funziona più o meno come lo strumento Sezione di Photoshop: selezioniamo le singole aree che vogliamo esportare, queste vengono evidenziate in verde e vengono automaticamente create delle guide rosse che ci aiutano ad orientarci e ad essere precisi al pixel.

Se vogliamo modificare un’area di selezione, premiamo il tasto Q e la ridimensioniamo come se stessimo lavorando con una forma.

Cliccando su ogni singola porzione possiamo impostarne i parametri di ottimizzazione dal pannello Ottimizza.
Questo significa che possiamo decidere di salvare una porzione in formato jpeg ad alta qualità, una in jpeg a bassa qualità, una in png24 ed una in gif.

Dopo aver ottimizzato le porzioni clicchiamo su File – Esporta e dal menù a tendina Porzioni selezioniamo Esporta porzioni.

Ricordiamo di deselezionare le caselle Solo porzioni selezionate e Includi aree senza porzioni.

Nel caso in cui volessimo salvare soltanto alcune porzioni, clicchiamo sulle aree di selezione che ci interessano tenendo premuto il tasto Shift, e in fase di salvataggio selezioniamo la casella Solo porzioni selezionate.

Esporta area

Se abbiamo bisogno di esportare “al volo” una porzione da un layout al quale stiamo lavorando, i metodo analizzati finora possono risultare scomodi e ridondanti.
Anche in questo caso Fireworks ci viene incontro offrendoci un’alternativa rapida: lo strumento Esporta area.

Lo troviamo sotto lo strumento Taglierina, oppure possiamo attivarlo premendo due volte il tasto C.

Selezioniamo l’area che vogliamo esportare

Dopo di che facciamo doppio click all’interno dell’area selezionata, e si aprirà la finestra Anteprima immagine.

Nella scheda File possiamo modificare le dimensioni e ridefinire la posizione dell’area di esportazione andando agire sull’asse delle x e delle y.

Nella scheda Opzioni invece possiamo scegliere il formato ed impostare i parametri di ottimizzazione.

Possiamo visualizzare fino a quattro finestre di anteprima in cui confrontare il rendering con i vari formati.
Ogni formato è estremamente personalizzabile e possiamo testarne le modifiche in tempo reale.

Autocomposizione esporta

L’ultimo strumento di esportazione che vorrei mostrarti non serve per sezionare un layout ma per esportare immagini intere.

All’interno del pannello Ottimizza clicchiamo sulla freccina del menù a comparsa e selezioniamo Autocomposizione Esporta.

Fireworks ci farà alcune domande riguardo la destinazione finale della nostra immagine e le dimensioni massime che deve avere il file.

Dopo di che ci suggerirà il formato più adatto alle nostre nescessità, e infine ci reindizzerà alla finestra di Anteprima immagine in cui possiamo fare eventuali prove ed ottimizzare ulteriormente l’immagine.

E tu come gestisci l’esportazione e l’ottimizzazione? Utilizzavi già Fireworks o preferisci altri strumenti?