InformatIca e GrafIca per Il web

Informatica e Grafica per il web
Psicologia e comunicazione
A.A. 2013/2014
Università degli studi Milano-Bicocca
docente: Diana Quarti
Informatica e Grafica per il web | A.A. 2013/2014 | docente: Diana Quarti
01
Organizzare i file di un progetto web
Usare un unico file psd per l’intero sito.
Questo permette di mantenere coerenza
tra le diverse pagine web e velocizzare i
cambiamenti decisi in corso.
Quando si presentano più proposte
nominare i file in modo progressivo e
neutro, preferibilmente indicando il nome
del sito o del cliente (es. Acme-progetto01.
psd, Acme-progetto02.psd, ... ecc.; Clienteprog-A.psd, Cliente-prog-B.psd, ecc.).
Evitare nomi che influenzino il giudizio
soprattutto in fase di presentazione al
cliente (es. bozza-stagista, cliente-progbello, cliente-progetto-lara).
Normalmente il progetto non viene
presentato su photoshop, bisogna quindi
mantenere coerenza tra il nome del file psd
e il nome del progetto presentati al cliente.
Potrebbe essere utile per esempio presentare
una simulazione inserendo dei jpeg all’interno
di una pagina caricata in un browser.
Informatica e Grafica per il web | A.A. 2013/2014 | docente: Diana Quarti
02
Organizzare i file di un progetto web
Una volta che il progetto viene scelto è possibile che vengano chiesti degli aggiustamenti
al progetto presentato (variazioni colore, font, nuovi layout di pagina).
Chiamare i file delle versioni successive del progetto con un nome progressivo.
Per esempio: Cliente-progetto01-v2.psd, Cliente-progetto01-v3.psd; e non Clienteprogetto01-def.psd, Cliente-progetto01-def-def.psd, Cliente-progetto01-ultimo.psd
Tenere tutti i file relativi al progetto (immagini, testi, icone, ecc.) in unica cartella e non
sparsi nel computer e/o su hard-disk diversi.
Se si lavora in un team di lavoro, è utile tenere tutti i file del progetto su una cartella
condivisa (per es Dropbox) in modo che ogni progettista ha accesso a tutti i materiali e
all’ultima versione del progetto.
Informatica e Grafica per il web | A.A. 2013/2014 | docente: Diana Quarti
03
Photoshop: i Livelli (layers)
L’aggiunta del pannello dei livelli è stato
sicuramente un cambiamento chiave che
ha permesso a Photoshop di diventare
un programma così versatile. I livelli
permettono l’elaborazione di una parte
dell’immagine senza modificarne il resto.
Questo permette innanzi tutto di evitare di
agire sull’immagine in modo distruttivo.
Potremmo paragonare i livelli a dei fogli
di acetato trasparenti su cui ci sono gli
elementi grafici dell’immagine sovrapposti
uno sull’altro: l’immagine globale è data
dall’insieme di questi fogli.
È possibile visualizzare il pannello dei livelli
tramite il menù Finestra > Livelli
Informatica e Grafica per il web | A.A. 2013/2014 | docente: Diana Quarti
04
Lavorare con i Livelli
Per lavorare in modo efficiente con i livelli è OK
bene tenere a mente alcune semplici regole:
NO
»» Nominare tutti i livelli in modo
appropriato e coerente alla funzione e al
contenuto
»» Raggruppare i livelli in cartelle e
spostare i livelli nell’appropriata cartella: la
ricerca e la modifica dei livelli è più veloce
OK
è puntuale
NO
»» Eliminare i livelli che non devono essere
usati (soprattutto in una fase più
definitiva del progetto): incrementano
inutilmente la dimensione del file e il
consumo di memoria
Informatica e Grafica per il web | A.A. 2013/2014 | docente: Diana Quarti
05
Lavorare con i Livelli
»» “Globalizzare” gli elementi e le maschere: OK
evitare di ripetere lo stesso elemento (logo,
fondo, icone ecc.) se non necessario: se
necessita modifiche non bisognerà ripeterle
per ogni istanza e il file .psd peserà meno.
»» Agire sull’immagine in modo non distruttivo:
maschere, smart objects e adjustment
OK
layers evitano di perdere definitivamente i
pixel dell’immagine. Se bisogna ingrandire
un’immagine o tornare da un’immagine
in bianco e nero a quella a colori, è molto
più facile se non è stata rasterizzata o
trasformata in un unico livello.
NO
NO
»» Usare Composizioni livelli per mostrare le
variazioni di layout (ad es. overlay e menù
a tendina, differenti layout di pagina ecc.)
Informatica e Grafica per il web | A.A. 2013/2014 | docente: Diana Quarti
06
Domande?
Informatica e Grafica per il web | A.A. 2013/2014 | docente: Diana Quarti
07