Come creare un'immagine a due tonalità in Photoshop

Pubblicato: 2021-10-07

Mentre stai lavorando alla progettazione del tuo prossimo sito, c'è un tipo comune di sfondo che potresti prendere in considerazione: la fotografia. Sebbene questa tendenza non sia necessariamente unica, è sicuramente efficace nell'impostare una scena e nell'immergere un utente nell'ambiente di un sito. “Se stai cercando un modo per usare la fotografia ma con un po' più di vivacità, puoi sempre provare un'immagine a due tonalità: sono entrambe interessanti da guardare e facili da creare! "

Prima di imparare come creare un'immagine a due tonalità in Photoshop, immergiamoci un po' più a fondo in questa tendenza di design.

Che cos'è un'immagine a due tonalità?

Al suo interno, una bicromia è semplicemente un'immagine composta da due colori. Probabilmente li hai già visti in campagne come 2015 Year in Review di Spotify.

Questo sta diventando sempre più popolare, soprattutto tra le agenzie e i marchi più piccoli. Gli effetti a due tonalità sono un ottimo modo per incorporare e rafforzare il tuo marchio e i suoi colori nel tuo lavoro e nel tuo sito web. Per darti una piccola ispirazione, LPK mostra un meraviglioso esempio di come usarlo.

Se sei interessato a provare questa tecnica, ti consigliamo di essere strategico nella foto che scegli di manipolare. Mentre tecnicamente puoi applicare l'effetto bicromia a qualsiasi foto, avrà un aspetto migliore su un'immagine con molto contrasto. Consiglierei anche di utilizzare un'immagine con uno sfondo solido, preferibilmente bianco, che rende più facile stabilire il colore di base che stai cercando!

Se hai accesso a uno studio e sei interessato a scattare foto personalizzate, tieni a mente questi suggerimenti mentre imposti la scena. Se stai lavorando con contenuti esistenti, puoi sempre manipolare prima la foto per aumentare il contrasto o cambiare il colore di sfondo.

Nota: questo tutorial fa parte del nostro corso Web Design Trends 2019! Quando ti iscrivi, otterrai l'accesso esclusivo a un'azione personalizzata di Photoshop (il Duotoner!) e un tutorial per aiutarti a usarla.
  • Se sei interessato a partecipare al corso e scaricare le risorse gratuite di Photoshop, passa a questa sezione!
  • Se ti sei già iscritto al corso, clicca qui per passare direttamente al tutorial del template!

Per il resto del tutorial, tratterò due metodi che puoi utilizzare per creare manualmente un'immagine a due tonalità in Photoshop. La prima è l'opzione incorporata di Photoshop (funziona bene, ma non la mia preferita) e la seconda usa una mappa gradiente (il mio metodo preferito, a meno che tu non stia usando la nostra azione gratuita ovviamente!).

Una volta che sei pronto, carica la tua immagine in Photoshop e crea un livello duplicato della foto. Modificando il duplicato (invece del livello inferiore originale), avrai sempre una versione non modificata della foto su cui ripiegare.

Pronto a creare un'immagine a due tonalità in Photoshop? Iniziamo.

Come utilizzare l'opzione bicromia predefinita di Photoshop

1. Convertire l'immagine in scala di grigi a 8 bit

Per utilizzare l'opzione bicromia incorporata in Photoshop, devi prima convertire l'immagine in una scala di grigi a 8 bit. Seleziona la copia della tua foto e vai su Immagine> Modalità> Scala di grigi. Verificare inoltre che l'opzione 8 bit/Canale sia selezionata nello stesso menu Modalità.

layout per due tonalità del volano come scalare i grigi

Quando selezioni questa opzione, verranno visualizzate un paio di notifiche. Il primo chiede se vuoi appiattire l'immagine o unire i livelli prima di cambiare la modalità colore. Se hai molti livelli, il cambio di colore potrebbe influenzare il modo in cui le cose vengono visualizzate (nel qual caso l'appiattimento potrebbe essere utile per preservare il tuo lavoro), ma in questo caso non preoccuparti di appiattire l'immagine. Se vuoi la copia originale, non unire i tuoi livelli.

layout per due tonalità del volano come unire l'avviso

La notifica successiva chiede se si desidera eliminare le informazioni sul colore. Dovrai farlo per utilizzare l'opzione di bicromia predefinita, quindi vai avanti e fai clic su "Elimina".

layout by flywheel duotone come avviso in bianco e nero

2. Convertire l'immagine in una due tonalità

Una volta che la modalità immagine è in scala di grigi a 8 bit, puoi utilizzare l'opzione bicromia predefinita in Photoshop. Seleziona il livello, quindi vai su Immagine> Modalità> Duotone.

layout per volano bicromia come selezionare la bicromia

3. Seleziona i tuoi colori

Una volta che l'immagine è in modalità bicromia, puoi iniziare a selezionare i colori. La parte bella è che non appena selezioni un nuovo colore, l'immagine si aggiornerà in modo da poter vedere come appaiono le cose (purché la casella di controllo Anteprima sia selezionata). Oltre a ciò, il processo inizia a diventare un po' goffo. Tecnicamente puoi regolare le curve per ogni colore, ma l'immagine non si aggiorna in tempo reale, rendendo un po' difficile vedere cosa sta succedendo e provocando molti avanti e indietro. Gioca con i colori e le impostazioni fino a trovare l'effetto desiderato.

layout per due tonalità del volano come selezionare il colore blu viola

Suggerirei di giocare con queste impostazioni per un minuto, solo per avere un'idea di loro, ma una volta che sei pronto, passiamo al secondo metodo per creare due tonalità in Photoshop.

Come utilizzare una mappa sfumatura per creare una bicromia

1. Applicare una mappa gradiente

Per questo metodo, non dovrai preoccuparti di alterare l'immagine o di scegliere una modalità colore specifica. Ovviamente, se vuoi modificare qualcosa, vai avanti, ma la foto funzionerà bene così com'è. Quando sei pronto, seleziona la copia della tua immagine e vai su Immagine> Regolazioni> Mappa sfumatura.

layout by flywheel duotone come sfumare la selezione della mappa

A seconda dell'impostazione predefinita, questa impostazione sovrapporrà l'immagine con un gradiente per una mappatura in scala di grigi. Se l'impostazione predefinita non è bianco e nero, fare clic sul menu a discesa e selezionare l'opzione. Se hai seguito il primo metodo, vedrai che siamo già a metà strada per creare la nostra bicromia.

layout by flywheel duotone come sfumare in bianco e nero

Suggerimento da professionista: vedi la casella di controllo accanto a Inverti? Cliccandoci sopra, invertirai i colori nella foto. Per questo tutorial, lo lasceremo deselezionato, ma se vogliamo che lo sfondo sia più scuro del soggetto, quell'opzione può aiutarti a cambiare le cose.

2. Scegli i tuoi colori

Facendo clic sulla barra del gradiente, aprirai l'editor del gradiente in una nuova finestra. Qui puoi selezionare i tuoi colori e regolare il modo in cui vengono visualizzati sull'immagine.

layout per due tonalità del volano come modificare il gradiente selezionare il colore

Come puoi vedere, le immagini finali sembrano un po' diverse l'una dall'altra, ma entrambe si traducono in meravigliose bicromie. Preferisco usare una Gradient Map semplicemente perché è un po' più facile controllare l'intensità dei colori e dove vanno i toni scuri e chiari, ma entrambi i metodi sono facili da usare.

Suggerimento: una volta che hai finito di creare la tua bicromia, segui queste best practice per l'ottimizzazione delle immagini per ottenere i migliori risultati (e le prestazioni del sito!).

Partecipa al nostro corso Web Design Trends 2019 per un'azione Photoshop a due tonalità gratuita!

Se stai cercando una risorsa facile e veloce per provare questa tendenza, puoi ottenere i file in questo tutorial, inclusa un'azione con opzioni di mappa sfumatura predefinite! Iscriviti con il modulo sottostante per scaricare il file, oppure clicca qui per maggiori dettagli sul corso.

[optin-monster-shortcode id=”dktout15rz4zcbcifnsl”]

Grazie per aver aderito al nostro corso sulle tendenze del design!

Innanzitutto, scarica l'azione di Photoshop qui.

Come usare il Duotone

Installa l'azione

Dopo aver scaricato l'azione, fare doppio clic sul file per installarlo. Apri l'immagine che desideri utilizzare in Photoshop, quindi apri la finestra Azioni.

Per passare alla finestra Azioni , seleziona Finestra > Azioni o tieni premuto Maiusc + F9 .

finestra d'azione a due tonalità di Photoshop

Dopo aver aperto la finestra Azioni, seleziona il livello dell'immagine a cui desideri applicare l'effetto bicromia.

Seleziona e gioca l'azione

Fai clic sul menu a discesa nella cartella "Volano - Glitch-a-tron". Ora seleziona "Glitch-a-tron - Seleziona e premi play" e premi il pulsante di riproduzione triangolo nella parte inferiore della finestra.

gioco d'azione di photoshop a due tonalità

Una volta che premi play, vedrai un sacco di livelli, ognuno con una diversa combinazione di colori a due tonalità! Per cambiare, tutto ciò che devi fare è rendere visibile il livello che desideri.

opzioni di azione a due tonalità di Photoshop

Nota: se hai più di un livello di due tonalità visibile, i colori si fonderanno insieme e potresti iniziare a perdere alcuni dettagli della tua foto. Per mantenere le cose nitide, assicurati di avere un solo livello visibile alla volta (o sentiti libero di sperimentare sovrapponendo i due toni per un effetto completamente diverso!).

Bonus: ripristina la tua immagine in un attimo

Nel caso in cui desideri tornare indietro, l'azione crea automaticamente uno screenshot che ti consente di tornare all'immagine prima dell'applicazione dell'azione.

Passare alla finestra Cronologia selezionando Finestra > Cronologia . Scorri verso l'alto e fai clic su "Istantanea". Questo ripristina tutto, quindi sei a posto!

istantanea di azione a due tonalità di Photoshop

Cosa ne pensi delle bicromie? Pensi che siano una forte tendenza di design o preferisci le immagini a colori? Condividi i tuoi pensieri qui sotto!


Scarica questi file Photoshop gratuiti

Scarica gratuitamente i modelli qui sotto!


Non sai cosa leggere dopo? Dai un'occhiata a questo elenco:

  • 13 tendenze di web design per il 2020
  • Come ottimizzare le immagini per il Web: una guida passo passo per migliorare le prestazioni del sito
  • Come utilizzare le tecniche di ritaglio e mascheramento CSS e SVG
  • Come aggiungere un pulsante di ritorno in alto appiccicoso al tuo sito web