Creare una galleria di loghi monocromatici per il web

Un problema ricorrente nella grafica per il web è la creazione di una gallery di loghi ordinata, dove i colori di ciascun logo non facciano a cazzotti tra di loro e con il resto della grafica e dove ciascun logo abbia la medesima importanza. Una gallery di loghi potrebbe servire, per esempio, all'interno di una pagina "partner" o "clienti" o all'interno di un footer con le aziende promotrici. Quello che dovremo cercare di fare è uniformare le diverse risoluzioni, dimensioni, formati, proporzioni e colori dei loghi stessi per creare un insieme armonico.

Cominciamo subito col chiarire visivamente il concetto.

Questa in figura 1 è una gallery ordinata, coerente ed esteticamente gradevole

In figura 2 vedete una gallery disordinata, confusa ed esteticamente discutibile

Vediamo assieme le regole fondamentali.

I loghi NON devono:

• essere equidistanti
• avere necessariamente la stessa altezza
• avere necessariamente la stessa lunghezza
• avere necessariamente lo stesso volume in pixel

I loghi devono:

• essere centrati all'interno di moduli quadrati di una griglia regolare
• essere trasformati in bianco e nero in modo da evitare possibili conflitti cromatici
• essere ridimensionati in modo che abbiano lo stesso "peso" all'interno della pagina

Il "peso" di un logo va calcolato in base ai seguenti criteri, che visualizziamo in figura 3:

• - il bianco pesa il doppio del grigio medio
• - una forma compatta pesa più di una forma complessa
• - un testo pesa più di una forma
• - un cerchio pesa più di un quadrato
• - un volume complessivo maggiore pesa più di un volume complessivo minore

In sostanza guardando la pagina il vostro occhio non deve cadere su nessun logo in particolare ma deve vagare tra tra tutti i loghi senza che nessuno catturi l'attenzione più degli altri.

Consiglio: cercate di disporre i loghi in modo che loghi simili non si trovino sulla stessa riga o colonna, che ci sia una sorta di equilibrio e apparente casualità.

Creiamo un nuovo file di dimensioni 644 x 402 pixel e risoluzione 72 pixel/inch. Riempite il livello di sfondo con un colore a piacere che non sia bianco. Io ho scelto questo: #3d6f8f (R: 61, G:111, B: 143). Creiamo ora una griglia regolare di quadrati in questo modo. Nella palette degli strumenti scegliete lo strumento selezione rettangolare ed impostate le opzioni nella barra delle opzioni come da figura 4.

A questo punto clicchiamo in un punto qualsiasi del documento per attivare la selezione. Creiamo un nuovo livello vuoto nella palette dei livelli, impostiamo il bianco come colore di primo piano e riempiamo il contenuto della selezione di bianco: alt + backspace è la scorciatoia da tastiera. Deselezioniamo: cmd + D per mac, ctrl + D per pc. Il livello appena creato va duplicato per 14 volte (cmd + J per mac, ctrl + J per pc) e distribuiti sul nostro documento come da figura

Per farlo velocemente potete sfruttare la calamita di Photoshop selezionando dal menu vista > calamita. Nella palette dei livelli selezionate ora tutti i 15 livelli contenenti un quadrato e raggruppateli: cmd + G per mac, ctrl + G per pc. Impostate l'opacità del gruppo appena creato al 10%.

Salviamo il nuovo file con il nome di gallery.psd.

Scaricando ora i 15 loghi vi accorgerete che ne ho scelti di tutti i tipi: orizzontali, verticali, tondi e quadrati, grandi e piccoli, trasparenti, su sfondo bianco e su sfondo nero, con e senza scritte, .jpg, .png, e .ai in modo da riprodurre la situazione più comune in cui il materiale a disposizione è tutt'altro che uniforme.

Dovremo trasformare tutti i loghi in bianco e nero (con i livelli di regolazione) e impostare il metodo di fusione di ciascun logo (ovvero livello) su scolora in modo da rendere invisibile il nero e visibili il bianco e i grigi. A questo scopo dovremo preparare tutti i loghi con lo sfondo o nero o trasparente.

Dovendo ridurre tutti i loghi per inserirli nella griglia conviene trasformarli tutti in singoli oggetti avanzati. In questi lavori non siamo mai certi della dimensione definitiva e potremmo dover ingrandire loghi precedentemente rimpiccioliti, con una conseguente perdita di qualità dell'immagine. Grazie agli oggetti avanzati possiamo giocare con la dimensione senza mai perdere il dettaglio.

Di tutti i loghi apriamo e inseriamo per prima quello che ci sembra abbia il "peso visivo" minore in modo da adattare tutti gli altri a quel peso. Di norma il peso visivo minore è del logo con la maggiore sproporzione tra base e altezza, ossia molto larghi o molto lunghi. Nel nostro caso direi che è il logo Unicef.

Aperto il file, inseriamo un livello di regolazione inverti sopra il livello di sfondo: dal menu livello > nuovo livello di regolazione inverti. In questo modo lo sfondo è diventato nero. Ora dobbiamo trasformarlo in bianco e nero inserendo un nuovo livello di regolazione sopra il precedente: dal menu livello > nuovo livello di regolazione bianco e nero. La scritta è diventata arancione, motivo per cui dobbiamo schiarire il rosso e il giallo come da figura 7, spostando verso destra i cursori del rosso e del giallo.

Selezioniamo i 3 livelli dalla palette dei livelli, tasto destro per aprire il menu contestuale e clicchiamo su converti in oggetto avanzato, come da figura 8.

A questo punto dobbiamo spostare il livello oggetto avanzato nel documento gallery.psd: dal menu livello > duplica livello... si apre una finestra di dialogo che ci chiede dove vogliamo duplicarlo e come vogliamo chiamarlo. Impostiamo le opzioni come da figura 9.

Andiamo su gallery.psd dove ora troviamo il logo Unicef, con dimensioni decisamente troppo grandi. Impostiamo il metodo di fusione del livello su scolora così da far scomparire il nero.

cmd + T per mac, ctrl + T per pc e ridimensioniamo il livello da uno degli angoli, tenendo premuto shift, oppure nella barra delle opzioni impostiamo 6% per L e A.

Ora centriamo il logo ridimensionato in uno dei riquadri

Questa procedura va ripetuta per tutti i loghi, alcuni dei quali presentano però caratteristiche che necessitano di una procedura leggermente diversa. Di seguito tratteremo solo di questi casi.

Loghi con sfondo trasparente o altro colore diverso dal bianco

In questi casi, non avendo nulla da invertire, va saltato il comando del livello di regolazione inverti. Tutto il resto si ripete come sopra.

Per esempio nel caso del logo Coca Cola basterà il livello di regolazione bianco e nero, spostando a sinistra il cursore del rosso, così da scurirlo fino a farlo diventare nero. Anche per il logo Agip basterà il livello di regolazione bianco e nero, avendo l'accortezza di spostare i cursori in modo da rispettare le diverse cromi e: Il giallo deve diventare un grigio chiaro, il rosso della fiamma un grigio più scuro ma non nero per distinguerlo dal nero. Il logo di Wikipedia è già in bianco e nero e ha lo sfondo trasparente; non servirà nessun livello di regolazione.

Loghi che, se invertiti, risultano irreali

È il caso dei loghi in cui luci, ombre e colori hanno un significato fisico/reale: per esempio il logo Sony Ericsson. Se seguissi la procedura precedente otterrei questo risultato.

Come è chiaro fin da subito ombre e luci non sono intercambiabili e la sfera assume un aspetto irreale. Per ovviare a questo problema dovremo aggiungere una maschera vettoriale al livello di regolazione inverti, mascherando solo la sfera in modo che i suoi colori non vengano invertiti (le luci restano chiare e le ombre scure).
Seguendo tutte le operazioni descritte sopra vi ritroverete la seguente palette dei livelli.

Selezioniamo il livello di regolazione inverti e aggiungiamo una maschera vettoriale: dal menu livello > maschera vettoriale > mostra tutto. Selezioniamo lo strumento forma ellittica (vedi figura 15) e tenendo premuto shift, trasciniamo un cerchio in prossimità della sfera da mascherare.

Selezioniamo lo strumento selezione tracciato, come in figura 16.

Clicchiamo sulla circonferenza vettoriale appena creata per selezionarla. Invertiamo la maschera cliccando sull'icona "sottrai da area forma" nella barra delle opzioni, come da figura 17.

Spostiamo (con lo strumento selezione tracciato) e ridimensioniamo (con il comando trasforma) la forma vettoriale per farla coincidere con la sfera del logo. Dovreste ottenere qualcosa di simile alla figura 18.

Inseriti tutti i loghi potete decidere di tenere o togliere la griglia che avete utilizzato, o decidere di inserirne una diversa. Di seguito 3 diverse soluzioni.