Grafica  »  Guide  »  Guida Fireworks 

Ottimizzazione e preparazione per l'esportazione (I parte)



Quando si esporta una pagina contenente delle porzioni Fireworks ci dà la possibilità di decidere per ognuna di esse quale sia il miglior formato di esportazione. Questa caratteristica permette al contempo di ottenere risultati esteticamente migliori ma anche di ridurre il più possibile le immagini senza per questo perdere di qualità.

Il layout del nostro sito non richiede particolari ottimizzazioni, tutte le immagini, provenendo da grafica vettoriale, potranno essere esportate in formato gif e dovremo porre attenzione solo al numero di colori in modo da ridurre le dimensioni.

L'unica parte che verrà esportata in formato jpg sarà quella relativa alle immagini del rollover disgiunto (sebbene anche esportandole come gif i risultati non siano apprezzabilmente diversi).

Apriamo quindi il file menu.png e il pannello Ottimizza.
Per ogni porzione presente nel pannello (ad eccezione di quella che copre l'area di scambio del rollover disgiunto) impostare:
Esporta formato file = GIF
Tavolozza indicizzata = Adattata WebSnap
Colori = 32 (per vedere fino a che punto ci si può spingere con la riduzione dei colori senza perdere di qualità occorre far ricorso all'anteprima nel browser).

Per la porzione che ricopre l'area di scambio impostare invece Esporta formato file = JPEG lasciando inalterati tutti gli altri parametri.

Un'altra operazione importante da fare prima di esportare un documento è quella di attribuire un nome significativo alle varie porzioni presenti.

Fireworks assegna automaticamente dei nomi alle porzioni che fanno riferimento al nome del documento e alla posizione occupata nella tabella HTML. Niente vieta di usare questi nomi anche in fase di esportazione salvo che in seguito si rischia di perdere molto tempo nella ricerca di una particolare immagine all'interno della cartella del sito.

Il nome che il programma assegna alle porzioni è visualizzato nella casella Porzione che si trova in altro a sinistra nel pannello Ispezione Proprietà e da lì può essere modificata semplicemente digitando il nuovo nome.
I nomi da dare alle porzioni devono seguire le solite regole che si usano normalmente per attribuire i nomi ai file: tutte lettere minuscole, nessuno spazio, nessun carattere particolare ad eccezione del trattino di sottolineatura.
Per amore di sintesi mi limiterò ad indicare i nomi che ho associato alle porzioni presenti nel file menu.png lasciando a voi la scelta per tutte quelle che si trovano nei vari documenti creati fino ad ora.

Delle quattro porzioni che coprono la parte del logo ho chiamato logo1 e logo2 quelle a cui è associato il link, a quelle relative ai pulsanti ho attribuito gli stessi nomi dei link (africa, america, ecc.), mentre alla porzione che copre l'area di scambio, in un eccesso di fantasia, ho dato il nome di "scambio"!

Salviamo il documento.

Ultimi articoli Grafica

Creare Testo 3D con Photoshop CS5

Creare una scritta sfruttando gli effetti tridimensionali...

Photoshop CS6: le novità più interessanti

Un'interfaccia rinnovata, semplificazione di comandi ripetuti,...

Digital painting con Photoshop

Creare illustrazioni digitali sfruttando la capacità del software di...

Forme e texture con Photoshop, creare una carta da gioco infuocata

Sfruttare forme vettoriali e texturing per ottenere un'illustrazione...

Attenuare rughe d'espressione e imperfezioni della pelle con Photoshop

Le tecniche per attenuare rughe d'espressione e imperfezioni della...

Altri articoli

Guide Grafica

Guida Photoshop CS5

Modifica e ottimizzazione dell'immagine, strumenti di disegno e...

Guida Photoshop CS4

Disegno, fotoritocco, effetti con Photoshop CS4: impariamo a usare...

Guida Paint Shop Pro

Paint Shop Pro è un celebre programma di fotoritocco,...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti