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

Dillo ad un amico

autore

A 5 anni ho fatto un ritratto a matita di mio padre. Il mio primo Picasso. Da allora ho sempre tenuto una matita in mano, soppiantata adesso, da una penna grafica. Faccio del mio meglio per rendere bello il mondo in cui vivo e ho scelto Evermind per attuare il mio piano diabolico, far sparire il comic sans dalla faccia della terra. Ogni tanto scrivo facts su Chuck Norris e bevo Amaro del Capo

Cosa ne pensi ?

Scrivici per avere informazioni sui nostri servizi
o per entrare a far parte del network di smart worker di Evermind