Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Creare una galleria di loghi monocromatici per il web

Impariamo a creare una galleria di loghi ben bilanciati, monocromatici e armoniosi, per arricchire il vostro portfolio sul Web
Impariamo a creare una galleria di loghi ben bilanciati, monocromatici e armoniosi, per arricchire il vostro portfolio sul Web
Link copiato negli appunti

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

Figura 1. Esempio di gallery ordinata
(clic per ingrandire)


Esempio di gallery ordinata

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

Figura 2. Gallery disordinata e incoerente
(clic per ingrandire)


Gallery disordinata e incoerente

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
Figura 3. Calcolare il peso di un logo
(clic per ingrandire)


Calcolare il peso di un logo

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.

Figura 4. Creare una selezione rettangolare
(clic per ingrandire)


Creare una selezione rettangolare

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

Figura 5. Creazione della griglia
(clic per ingrandire)


Creazione della griglia

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%.

Figura 6. Risultato della griglia con opacità
(clic per ingrandire)


Risultato della griglia

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.

Figura 7. Regolazioni dei loghi
(clic per ingrandire)


Regolazioni dei loghi

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.

Figura 8. Conversione in oggetto avanzato
(clic per ingrandire)


Conversione in oggetto avanzato

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.

Figura 9. Duplicazione livello
(clic per ingrandire)


Duplicazione oggetto avanzato

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.

Figura 10. Scoloriamo il logo
(clic per ingrandire)


Scoloriamo il logo

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.

Figura 11. Ridimensionamento del livello
(clic per ingrandire)


Ridimensionamento del livello

Ora centriamo il logo ridimensionato in uno dei riquadri

Figura 12. Centrate il logo nel riquadro giusto
(clic per ingrandire)


Centrate il logo nel riquadro giusto

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.

Figura 13. Caso di logo invertito che perde di significato
(clic per ingrandire)


Caso di logo invertito che perde di significato

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.

Figura 14. Selezioniamo il livello inverti
(clic per ingrandire)


Selezioniamo il livello inverti

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.

Figura 15. Aggiungiamo una maschera vettoriale Ellisse
(clic per ingrandire)


Aggiungiamo una maschera vettoriale Ellisse

Selezioniamo lo strumento selezione tracciato, come in figura 16.

Figura 16. Usiamo lo strumento di selezione tracciato
(clic per ingrandire)


Usiamo lo strumento di selezione tracciato

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.

Figura 17. Utilizziamo lo strumento "sottrai da area forma"
(clic per ingrandire)


Utilizziamo lo strumento

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.

Figura 18. Il risultato di questa operazione di inversione mantenendo luci e ombre
(clic per ingrandire)


Il risultato di questa operazione di inversione mantenendo luci e ombre

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.

Figura 19. Il risultato del tutorial 1/3
(clic per ingrandire)


Il risultato del tutorial 1/3
Figura 20. Il risultato del tutorial 2/3
(clic per ingrandire)


Il risultato del tutorial 2/3
Figura 21. Il risultato del tutorial 3/3
(clic per ingrandire)


Il risultato del tutorial 3/3


Ti consigliamo anche