Il colore è una parte importante di quasi tutti i design. Che tu sia un appassionato di colori vivaci e audaci o preferisca un bianco e nero più minimalista, il modo in cui utilizzi il colore può avere un grande impatto sul design generale.
Un modo per usare il colore per fare una dichiarazione è con un disegno che incorpora una sovrapposizione di colori. Ciò significa che copri un'immagine o un video con una scatola colorata semitrasparente. L'effetto può aggiungere significato a un'immagine, attirare l'attenzione su un design e aiutarti a fare la maggior parte delle scelte artistiche limitate.
Oggi esamineremo una varietà di sovrapposizioni cromatiche per fungere da ispirazione per la tua.
Prova un gradiente
Le sfumature sono di nuovo belle. Fanno anche una grande (e accattivante) opzione quando vuoi lavorare con una sovrapposizione di colori.
Ciò che è particolarmente interessante in una sfumatura è che puoi lavorare con un paio di colori, pensare al tuo marchio qui o utilizzare un singolo colore per creare il focus. Gli abbinamenti luminosi possono aiutare a disegnare gli utenti nel design e dare scintille ad alcune immagini.
Gran parte di questa tendenza può essere ricondotta a Spotify, che ha iniziato a utilizzare sovrapposizioni di sfumature e due tonalità per evidenziare le playlist. Il colore ha dato nuova vita alle immagini che gli utenti erano abituati a vedere (premere le foto dei musicisti).
Questo è un concetto facile da replicare.
- Scegli una foto.
- Crea un gradiente con i colori del marchio.
- Divertiti!
Colori solidi Imposta un tono
Una sovrapposizione di colori solidi può essere altrettanto sorprendente di un motivo a gradiente, ma spesso ha più di un significato distinto che può essere associato alla scelta del colore. Si consideri una sovrapposizione di seppia, per esempio. Suscita immediatamente sentimenti di vecchi tempi e di storia.
Lo stesso si può dire di selezionare una scelta di colori alla moda. Usando uno dei colori luminosi e saturi associati al design piatto o materiale, puoi evocare sentimenti di modernismo o di alta moda.
Quando si utilizza un singolo colore come sovrapposizione, pensare al grado di saturazione e trasparenza del colore. Questi elementi possono aggiungere anche un significato. Combinazioni di colori più pesanti, meno trasparenti e più saturi, mettono più a fuoco il colore stesso dell'immagine dietro. Combinazioni più leggere e più sottili mettono più a fuoco l'immagine.
Considera Dark o Light
Non è sempre necessario utilizzare un colore di per sé per creare una sovrapposizione. A volte può essere nero, bianco o grigio. L'uso di queste tinte e toni può davvero cambiare l'umore di un progetto.
Come probabilmente ti aspetteresti, gli overlay più scuri creano un ambiente più lunatico. Sovrapposizioni più leggeri sono associati al divertimento. Un altro fattore di contributo quando si tratta di questi sentimenti e il bianco e nero è l'immagine stessa. Come funziona con la tinta o il tono? L'immagine, i colori e i messaggi funzionano insieme?
Call me Ish (sopra) utilizza una sovrapposizione bianca per aiutare a mettere a fuoco le parole sullo schermo sopra una foto in bianco e nero. Ma notate l'espressione sul volto del fotografo: sorride in un ampio sorriso. La combinazione di colori e foto è invitante e ti fa venir voglia di interagire con il fotografo e possibilmente anche assumerlo per un lavoro.
Optare per immagini ad alto contrasto
Quando si pianifica una sovrapposizione di immagini in un progetto di design, la composizione della foto (o del video) è importante. Un'immagine blanda ti lascerà con un risultato di sovrapposizione di colore blando. Otterrai i migliori risultati se inizi con una foto con molto contrasto con gli spazi scuri e chiari dell'immagine.
Se l'immagine non ha abbastanza contrasto, considera l'aggiunta di contrasto nel software di fotoritocco o sceglierne un'altra. In caso contrario, l'effetto dell'immagine potrebbe cadere piatta.
C'è un altro trucco per ottenere questo effetto è iniziare con una foto in bianco e nero. In particolare per i principianti, può essere più facile vedere e migliorare il contrasto in un'immagine in bianco e nero. Just Actions fornisce un ottimo esempio di immagine in bianco e nero accanto alle immagini con sovrapposizione di colore. (Inoltre, è un ottimo effetto accoppiare immagini senza colori e contrasto vivacemente colorato).
Le immagini dovrebbero apparire naturali (o meno)
Quando si tratta di lavorare con sovrapposizioni di colori hai due opzioni:
- Le immagini dovrebbero apparire ancora naturali. Il colore, l'illuminazione e le ombre dovrebbero apparire in una posizione naturale. La sovrapposizione è piuttosto sottile, come il caffè Abednego (sopra).
- Le immagini sembrano completamente alterate. Non c'è alcun dubbio che sia stato usato un overlay a colori (come la maggior parte degli esempi in questo articolo).
Non c'è davvero una via di mezzo qui. Se le immagini non cadono in uno di questi "estremi"? gli utenti potrebbero pensare troppo alle scelte di colore e non concentrarsi sul contenuto del sito. Non vuoi distrarti con una tecnica di sovrapposizione del colore; dovrebbe migliorare il design.
Prova un accento di sovrapposizione
Mentre gli esempi precedenti hanno mostrato come utilizzare una sovrapposizione di colore per immagini di grandi dimensioni, come le opzioni di stile dell'intestazione dell'eroe, non è l'unico modo per sfruttare al meglio questa tecnica. Gli effetti di sovrapposizione del colore possono funzionare anche bene come accenti.
I due esempi sopra mostrano diversi modi per realizzare questo efficacemente.
Knot Clothing (in alto) utilizza una barra di navigazione verde brillante con trasparenza. È ulteriormente evidenziato dal tratto solido sopra di esso. L'effetto aiuta a mantenere la tavolozza dei colori del marchio in tutto il design mentre mostra gli articoli in una varietà di altri colori. L'effetto è semplice, aiuta la pagina a sembrare un po 'più morbida rispetto a quando la navigazione era all'interno di un colore solido e attira lo sguardo verso il basso nella pagina e attraverso il design.
Nuts and Woods prende un altro approccio. Il design utilizza una sovrapposizione colore come effetto hover per dirti di più su elementi specifici sul sito web. Qualsiasi elemento che ottiene una sovrapposizione rossa è anche un elemento cliccabile. Ciò che è degno di nota di questo design è che la sovrapposizione del colore funge da spunto visivo per gli utenti, dicendo loro esattamente ciò che vogliono sapere e fornendo un percorso per i collegamenti in tutto il contenuto.
Conclusione
L'uso di una sovrapposizione di colori è una di quelle tecniche che non funziona sempre. La maggior parte dei progettisti trova che possono farla franca solo per uno o due progetti prima che sembrino esagerati. (È qui che una sovrapposizione di accenti potrebbe essere un'opzione migliore).
Come con qualsiasi tecnica di progettazione, assicurati di applicarlo nel giusto contesto. Non dovresti mai usare una sovrapposizione di colori solo perché sei stato ispirato da un altro progetto; salva l'idea e usala per il design giusto.