Hosting & Domini

Esercitazione > Importazione e modifica delle immagini bitmap

Importazione e modifica delle immagini bitmap

Fireworks, oltre a lavorare in formato vettoriale, offre anche funzionalità specifiche per creare, importare e modificare le immagini bitmap. Si possono aggiungere effetti dal vivo alle immagini bitmap proprio come si farebbe con le forme vettoriali. Inoltre, è si puņ correggere ed eliminare i colori all'interno dell'immagine bitmap.

In questa esercitazione, si procederà a importare delle immagini bitmap, quindi le si variazionirà e utilizzerà per creare dei rollover disgiunti, in cui un'immagine cambia in un'area del documento in risposta al puntatore quando esso attraversa un'altra area.
 
Come aggiungere un livello

I livelli costituiscono un ottimo sistema per organizzare i gruppi di oggetti all'interno del documento su piani analoghi alle sovrapposizioni trasparenti.

Nota: Gli utenti che conoscono Adobe Photoshop, dovranno tenere a mente che il termine livello ha un significato diverso in Fireworks. In Fireworks, si definisce oggetto qualsiasi elemento creato o importato, come una forma vettoriale o un'immagine bitmap; gli oggetti vengono collocati sui livelli.

Grazie ai livelli, è si puņ modificare rapidamente gli oggetti presenti su un livello senza incidere sugli oggetti contenuti in un altro livello. I livelli offrono anche un sistema per organizzare gli elementi di tipo diverso, ad esempio per raggruppare tutti i pulsanti su un livello (some effettuato in precedenza nell'esercitazione) e tutte le immagini bitmap su un altro.

Ora si procederà ad aggiungere un nuovo livello, ad assegnargli un nome e quindi a reimportare due bitmap sul livello in preparazione alla creazione di un rollover disgiunto.

1	Se il pannello Livelli non fosse visibile, scegliere Finestra > Livelli, oppure cliccare sull'icona Mostra livelli nel Mini-Launcher sul lato inferiore destro della finestra dell'applicazione.
	Si noti che l'esercitazione è composta da cinque livelli, compreso il Livello Web predefinito per gli oggetti Web. È si puņ utilizzare i pulsanti di espansione e contrazione per visualizzare o nascondere l'elenco degli oggetti su un livello. Per nascondere un livello sull'area di lavoro, cliccare sull'icona Mostra/Nascondi.
2	Scegliere Inserisci > Livello, oppure cliccare sull'icona Livello nuovo/duplicato in fondo al pannello.
3	Per rinominare il nuovo livello, cliccare due volte sul nome preesistente nel pannello Livelli.
4	Nel campo Nome livello del menu a comparsa visualizzato, digitare Immagini rollover disgiunto. Accertarsi che l'opzione Condividi tra fotogrammi non sia selezionata, poi cliccare in un punto qualsiasi dell'applicazione per chiudere il menu a comparsa.
5	Nel pannello Livelli, verificare che l'icona del livello per il Livello Web non sia visibile e che le sovrapposizioni delle porzioni verdi non compaiano sull'area di lavoro. Se necessario, cliccare sull'icona Mostra/Nascondi per nascondere il Livello Web.

Nota: Una volta configurati tutti gli oggetti sul livello, si può bloccare il livello facendo clic sull'icona Blocca/Sblocca del livello per impedire eventuali variazioni accidentali.

 
Aggiunta di fotogrammi

In un browser Web, il rollover permette di scambiare rapidamente un'immagine con un'altra. Per creare un rollover, Fireworks si avvale di fotogrammi, come quelli utilizzati nell'animazione, per ospitare i contenuti del rollover.

Quando i rollover disgiunti scambiano immagini che occupano tutte la stessa zona dell'area di lavoro e si sostituiscono a vicenda, occorre creare un fotogramma separato per ogni immagine inclusa nell'operazione di scambio. Più avanti nell'esercitazione, si utilizzeranno i comportamenti "trascina e rilascia" per specificare che i fotogrammi aggiunti appaiono durante il rollover disgiunto.

Per creare un rollover disgiunto, si aggiungono due nuovi fotogrammi, poi si procede a importare un'immagine bitmap su ciascuno dei fotogrammi.

1	Con il livello Immagini rollover disgiunto ancora selezionato, aprire il pannello Fotogrammi (se necessario, scegliere Finestra > Fotogrammi).
	Nota: Ci si chiederà perché il pannello Fotogrammi indichi che il documento dispone di un solo fotogramma, anche se il rollover semplice per i pulsanti richiede due fotogrammi: uno per lo stato Su e uno per lo stato Sopra. I fotogrammi per i pulsanti appaiono nel Pannello Fotogrammi solo quando è attivo l'Editor di pulsanti.
2	Scegliere Inserisci > Fotogramma, oppure cliccare sull'icona Fotogramma nuovo/duplicato nel pannello Fotogrammi.
3	Nel pannello Fotogrammi, cliccare due volte sul Fotogramma 2, il nuovo fotogramma aggiunto e assegnargli il nome Controlla condizioni.
4	Scegliere Inserisci > Fotogramma e assegnarli il nome Registro viaggi.

 
Importazione della prima immagine bitmap

Fireworks offre diversi modi per aggiungere un'immagine preesistente al documento, tra cui le tecniche di taglia e incolla e trascina e rilascia nonché l'uso del comando Importa, ovvero il metodo che si utilizzerà in questo esempio.

1	Con il livello Immagini rollover disgiunto selezionato nel pannello Livelli e il fotogramma Controlla condizioni selezionato nel pannello Fotogrammi, scegliere File > Importa.
	Nota: Sull'area di lavoro compariranno solo gli oggetti presenti in Controlla condizioni, il secondo fotogramma.
2	Nella finestra di dialogo Importa, portarsi in Tutorial\Start\Assets nella cartella dell'applicazione di Fireworks, poi cliccare due volte su Check_Cond.png.
3	Portare il puntatore di importazione nell'angolo in cui la terza riga orizzontale a partire dall'alto incrocia il bordo sinistro dell'area di lavoro, come illustrato nella figura seguente, poi cliccare per importare la nuova immagine.

 
Importazione della seconda immagine bitmap

Ora si procederà a importare sul terzo fotogramma l'immagine bitmap associata al pulsante Registro viaggi.

1	Con il livello Immagini rollover disgiunto selezionato nel pannello Livelli e il fotogramma Registro viaggi selezionato nel pannello fotogrammi, scegliere File > Importa.
2	Nella finestra di dialogo Importa, portarsi in Tutorial\Start\Assets nella cartella dell'applicazione di Fireworks, poi cliccare due volte su Trav_Log.png.
3	Portare il puntatore di importazione nello stesso angolo in cui si era importata la bitmap precedente, poi cliccare per importare la nuova immagine.

 
Eliminazione dei pixel di colore simile e correzione dei colori

All'importazione dell'immagine bitmap associata al pulsante Controlla condizioni, si sarà forse notato che i colori appaiono più luminosi rispetto agli altri colori del documento. Poiché un'immagine in tonalità seppiate si accosta meglio alle illustrazioni preesistenti, si procederà ad eliminare lo spazio vuoto sulla bitmap, poi si utilizzerà la correzione colore per conferire all'immagine una tonalità seppia. Lo strumento Bacchetta magica permette di eliminare un'area di pixel di colore simile.

1	Nel pannello Fotogrammi, scegliere il fotogramma Controlla condizioni.
	Il livello Immagini rollover disgiunto dovrebbe essere ancora selezionato nel pannello Livelli.
2	Fare doppio clic sullo strumento Bacchetta magica per aprire il pannello Opzioni strumenti.
3	Avvalersi del dispositivo di scorrimento Tolleranza per scegliere 15, poi scegliere Antialiasing dal menu a comparsa Bordo.
	I valori bassi permettono di scegliere con lo strumento Bacchetta magica i colori adiacenti che più corrispondono al colore dei pixel selezionati. L'antialiasing attenua i bordi irregolari.
4	Con lo strumento Bacchetta magica, cliccare in un punto qualsiasi dello spazio vuoto sulla destra della bitmap all'interno dell'area di lavoro.
	Attorno all'area di lavoro comparirà un bordo striato per indicare che ci si trova in modalità bitmap. L'area di pixel vuoti della bitmap verrà selezionata.
5	Premere BACKSPACE (Windows) o CANC (Macintosh), o scegliere Modifica > Taglia per eliminare i pixel vuoti.
6	Scegliere Elabora > Esci da Modifica immagine.
7	Se necessario, cliccare con lo strumento Puntatore per scegliere l'immagine bitmap.
	Non cliccare due volte, altrimenti si tornerà alla modalità bitmap.
8	Dal pannello Effetti, scegliere Regola colore > Riempimento colore dal menu a comparsa Effetto.
9	Nella casella del colore del pannello Effetto, scegliere una tonalità di marrone medio (il file Final.png utilizza un marrone con valore esadecimale pari a #CC6600).
10	Portare il dispositivo di scorrimento Livello tinta su 35% e premere Invio.
	Si noti che l'immagine bitmap è ora di una tonalità seppia soft.

 
Aggiunta di un'ombra

1	Nel pannello Effetto, con la bitmap ancora selezionata, scegliere Ombra e luce > Ombra dal menu a comparsa Effetto.
2	Portare il dispositivo di scorrimento su 10 e cliccare all'esterno del pannello.
	Questo dispositivo permette di indicare la larghezza e la posizione dell'ombra.

 
Automazione delle operazioni con il pannello Cronologia

All'immagine bitmap importata per il pulsante Registro viaggi, è necessario anche aggiungere la correzione dei colori e un'ombra. Piuttosto di ripetere i passaggi per aggiungere questi effetti, è preferibile utilizzare il pannello Cronologia, che permette di automatizzare le operazioni ripetitive.

1	Nel pannello Fotogrammi, scegliere il fotogramma Registro viaggi.
2	Con lo strumento Puntatore, scegliere l'immagine Viaggio (l'immagine della penna e della mappa importata) sull'area di lavoro.
3	Scegliere Finestra > Cronologia.
4	Nell'elenco dei comandi del pannello Cronologia, cliccare sull'ultima ricorrenza del comando Imposta effetti, poi cliccare tenendo premuto il tasto MAIUSC sulla penultima ricorrenza del comando Imposta effetti.
5	Fare clic su Riproduci di nuovo nel pannello Cronologia e si noti come Fireworks esegue i comandi per modificare l'immagine bitmap sull'area di lavoro.

Si ricorda di salvare il lavoro di frequente.