Nell’ultimo periodo, siamo stati piacevolmete coinvolti nello sviluppo di un progetto editoriale.
Un nuovo portale di informazione curato interamente dal team di GRisk e sviluppato da Evermind con la preziosa collaborazione di un nostro Evermate, Andrea Rufo.
LookOut News, è un portale dove si possono trovare notizie, schede, analisi e un archivio con mappa interattiva per ogni Paese del mondo. Ogni giorno, notizie in esclusiva dagli esteri. Ogni settimana, un report dettagliato su tutte le aree di crisi. Ogni mese, la rivista di approfondimento LookOut Magazine, sfogliabile su tutti i supporti digitali.
La redazione di Grisk ha curato l’aspetto grafico, mentre al nostro team è toccato lo sviluppo dell’intero portale, l’integrazione con la rivista sfogliabile e la realizzazione di quello che è il cuore del sistema LookOut, la mappa interattiva.
Per realizzare la mappa abbiamo utilizzato jquery sprite e tanta, tantissima pazienza. Per il taglio dei diversi paesi del mondo abbiamo utilizzato uno script di Photoshop CS6 utilizzato nel seguente modo.
Il cliente ci ha fornito dei file psd come questo in figura
Fortunatamente ogni paese era su un livello separato, e ogni livello era stato rinominato con il nome del paese, e il tutto era su fondo trasparente.
Quello che abbiamo dovuto fare è stato: rinominare i paesi aggiungendo il suffisso ON per quelli accesi e OFF per quelli spenti, esportarli tutti come singole immagini .png , per poi rimodularli secondo i parametri del nostro jquery sprite su un unico file .png
Ecco come esportare in modo “rapido” tutti i livelli da un file di Photoshop, usando lo script “Export Layer to File”.
Il file per l’esempio in questione è l’Africa, che ha 57 stati.
Per la mappa sono stati creati 57 stati in modalità spenta (per il Mouse Out) e altri 57 in modalità attiva, (per il Mouse Over) In più ci sono le etichetto con il nome degli stati, quindi altri 57 livelli, per un totale di 171 file da esportare.
Lo script si trova sotto File>Scripts, ed esporta tutti i livelli su una directory esterna. Dal pannello di configurazione bisogna impostare la directory, il formato di esportazione (nel nostro caso .png trasparente) e le relative impostazioni, come la trasparenza e il taglio delle immagini (altrimenti il sistema esporterebbe file grandi quanto l’area di lavoro, e non la singola regione).
Una volta dato il via allo script, Photoshop taglierà ed esporterà tutti i file dentro un’unica directory, pronti per il passaggio successivo e il relativo montaggio
Tutti gli step successivi li vedremo nel prossimo tutorial.
Non ci resta che rimandarvi al prossimo tutorial e auguravi buona vigilia di Natale
