Come preparare le immagini con Fireworks e inserirle nel sito web

TUTORIAL
Come preparare le immagini
con Fireworks e inserirle nel
sito web?
Preparare le immagini con Fireworks
e inserirle nel sito web
Obiettivo?
Modificare le dimensioni dell’immagine prescelta da inserire nel sito web senza modificarne le proporzioni e ottimizzarne
il peso affinché non vada a compromettere la velocità di navigazione del sito web.
Cosa serve?
Fireworks: programma della suite Adobe Creative per il web
Immagini di qualsiasi formato .jpeg, .tiff, .pdf purché di dimensioni in larghezza e lunghezza superiori all’immagine che
dovete preparare
Buongusto nella scelta della foto e per la scelta della porzione da mostrare
Premessa
Aprire una pagina del sito web dove c’è un’immagine uguale uguale per dimensioni a quella che volete caricare.
Portatevi sull’immagine e con la funzione del drag&drop trascinatela sul vostro desktop. Se il procedimento è andato a
buon fine vedrete l’anteprima comparire sullo schermo. Se non fosse andata a buon fine portatevi sull’immagine e, tasto
destro del mouse, salvatela con nome sempre sul vostro desktop.
Procedimento
•
Portatevi sull’immagine che avete salvato sul desktop (che ha la forma esatta dell’immagine che dovremo andare a creare e salvare) e apritela. Come? Tasto destro del mouse e Apri con ...Fireworks (da questo momento in poi
indicheremo questa immagine come la vostra “maschera” perché ha la stessa funzione dello stampino da spiaggia
dei bambini sotto l’ombrellone.
•
Assicuratevi di essere con lo strumento puntatore (freccia nera) selezionato.
•
Se andate sulla fotografia noterete che gli estremi della foto sono rossi. Cliccate con il mouse il centro o qualsiasi punto interno della vostra immagine maschera e vedrete che i suoi contorni divengono azzurri (quando i contorni
sono azzurri significa che avete selezionato l’elemento immagine e potete agire su di esso) e poi pigiate canc. L’immagine sparirà e al suo posto resterà il vuoto dello stampo, cioè dei quadratini bianchi e neri.
•
A questo punto inserite (trascinandola con il drag&drop all’interno della vostra maschera) l’immagine che avete
scelto e che volete modificare. Se l’avete scelta correttamente la vostra immagine sarà probabilmente più grande
della vostra maschera. Come ve ne accorgete? Portandovi sull’immagine in centro o in un punto interno di essa e
cliccando con il tasto sinistro del mouse noterete che i suoi contorni azzurri che sbordano.
•
Se avete problemi di visualizzazione (cioè se l’immagine a schermo risulta troppo piccola o troppo grande potete pigiare Cntrl- (Cmd- se avete un Mac) se volete ingrandire la vostra area di lavoro e quindi vedere più porzione
nel complesso; oppure Cntrl+ (Cmd+) se volete lavorare su di un particolare della fotografia.
•
A questo punto dovete procedere con il ridimensionamento vero e proprio. Il come è molto semplice, seguendo
questi piccoli passi tra l’altro, effettuerete il ridimensionamento della vostra fotografia prescelta nel minor numero di
mosse possibile.
•
Fate combaciare il lato sinistro superiore (angolo superiore sinistro) alla maschera. Probabilmente a questo
punto dovrete dare un paio o tre Cntrl- (Cmd-) per poter vedere la vostra area di lavoro completa, cioè tutti e quattro
gli angoli della vostra fotografia azzurri - se sono rossi significa avete selezionato la maschera ma non l’immagine:
www.comunica-re.it
niente paura portatevi al centro o in un qualsiasi punto interno della foto e cliccate, così facendo tornerete sull’immagine da lavorare).
•
Cliccate con il mouse (tasto sinistro) sull’angolo azzurro inferiore destro della vostra immagine e non rilasciandolo spingete la fotografia in modo da farla combaciare il più possibile con le dimensioni della vostra maschera.
•
Se le proporzioni della vostra maschera sono diverse da quelle della fotografia che avete prescelto fate in modo
di rendere visibile ciò che per voi è efficace. Quando siete soddisfatti il gioco è fatto!
Già arrivati a questo punto avrete probabilmente realizzato un’immagine adatta per il web. Prima di salvare la vostra
immagine però, lasciatemi spiegare le cose per bene e dalla A alla Z perché i più volenterosi e perfezionisti di voi
potrebbero fare anche di meglio: ottimizzare il peso virtuale dell’immagine.
Perché è importante ottimizzare il peso di un’immagine?
E’ lo stesso discorso di una goccia in mezzo al mare: se sarete bravi e diligenti aggiornerete spesso, ma che dico
spesso spessissimo il vostro sito web (se lo faceste bene vi garantisco per esperienza che il vostro posizionamento
nel web ne otterrebbe benefici importanti). Ma tanti aggiornamenti significa certamente anche tante immagini presenti sul vostro sito web. Tante immagini possono pesare svariati byte. Allora il blogger che presta buona cura al
proprio lavoro ottimizza anche il peso delle immagini che carica e con Fireworks anche questo aspetto diventa facile
e veloce, una volta che si è imparato il metodo.
Metodo per ottimizzare il peso della vostra fotografia
(quando avete già ridimensionato le dimensioni)
•
Guardate accanto agli strumenti di lavoro di Fireworks. Noterete passandoci sopra con il mouse che voi siete
sulla scheda di lavoro denominata “Originale”, accanto però ci sono altre schede non attive. A noi interessa la scheda
“Anteprima”. Cliccandola la selezionate e ci potete entrare.
•
Guardate sull’estremo fondo della vostra area di lavoro e noterete che questa funzione vi segnala il peso della
fotografia creata. Se la fotografia è inferiore a 1MB va bene così, tornate in originale e salvatela come .peg. Se la
fotografia che avete creato fosse superiore a 1MB allora seguite il passo successivo per ottimizzarla.
•
Alla vostra destra noterete che si aprono gli strumenti di questa area di lavoro specifica. Dovrebbe comparirvi
subito aperto, se non lo fosse cliccate sul primo partendo dall’alto: lo strumento “Ottimizza”.
•
Impostate il formato .jpeg in uscita (di solito lo è già in default se non l’avete modificato manualmente) e modificate la percentuale di compressione (che va ad inficiarne la qualità) fino a che il peso della fotografia non sara
inferiore o uguale a un max di 1MB.
•
Fino al 75-80% (di compressione) un’immagine web viene compressa in un modo che l’occhio umano non nota
differenze sostanziali
•
Et voilà il gioco è fatto, tornate sulla scheda di lavoro “Originale” e salvate il vostro .jpeg
Ora siete pronti di caricare la vostra immagine sul vostro sito web.
www.comunica-re.it
Inserire un’immagine pronta nel sito web
Quando un articolo è pronto, steso con cura, verificate le fonti e controllato gli eventuali errori siete pronti di abbellirlo
ed arricchirlo con contenuti fotografici.
Preparata l’immagine avete due possibilità a seconda delle dimensioni con cui l’avete dimensionata:
A. Caricare l’immagine come in evidenza
In questo caso dovete semplicemente spuntare l’opzione in evidenza nel box in basso a destra e salvare.
B. Caricare un’immagine cosidetta di commento o di gallery
che illustrerà meglio e probabilmente si potrà anche ingrandire.
In questo secondo caso dovete portarvi all’altezza del testo dove volete caricare l’immagine e poi cliccare, sopra gli
strumenti di editing, la voce “Aggiungi media”.
A questo punto potrete:
•
caricare un’immagine già presente nella vostra libreria immagini;
•
caricare un’immagine che si trova sul vostro pc e che avrete adeguatamente preparato.
Vi capiterà quasi sempre di dover utilizzare l’opzione B. Una volta caricata vi si aprirà la scheda identificativa di
quell’immagine che andrete a comporre con titolo, il posizionamento desiderato e poi ne deciderete due cose importanti:
•
•
la dimensione desiderata di default da impostare come media o grande, a discrezione del webmaster
dove si verrà reindirizzati nel momento in cui si cliccherà la fotografia, che potrebbe essere: un ingrandimento della fotografia stessa o anche un link a un contenuto ulteriore sul web.
Quando avete impostate queste indicazioni potete cliccare “Inserisci” e poi salvare il vostro aggiornamento.
www.comunica-re.it