Modifica di immagini in CSS metodi di fusione

Nel tutorial precedente di questa serie abbiamo discusso come utilizzare i filtri CSS per modificare le immagini. Mentre i filtri possono produrre ottimi risultati, sono limitati a un singolo livello.

Diciamo che hai un'immagine e vuoi sovrapporla con il colore rosso. Non puoi farlo con i filtri. Tuttavia, le modalità di fusione sono perfette per questo lavoro. In realtà sono pensati per prendere i valori di colore di primo piano e di sfondo, eseguire alcuni calcoli e quindi restituire un colore finale. L'immagine finale che ottieni è il risultato di tutti questi calcoli su ogni pixel sovrapposto.

Le modalità di fusione consentono di fondere non solo immagini e colori, ma anche testo e immagini. In questo tutorial, mostrerò come utilizzare i metodi di fusione per manipolare le immagini e creare effetti interessanti.

Modalità di miscelazione disponibili

• Normale: In questa modalità, il colore finale sarà il colore superiore. Il valore del colore inferiore non avrà alcun effetto sul risultato finale.
• Moltiplicare: In questa modalità, i colori superiore e inferiore vengono moltiplicati per ottenere il colore finale. Il colore risultante sarà sempre meno scuro di entrambi i costituenti. Ciò implica che con un livello nero il risultato finale sarà sempre nero. L'uso di un livello bianco non avrà alcun effetto sul risultato finale.
• Schermo: In questa modalità, il colore finale si ottiene invertendo i colori superiore e inferiore, moltiplicandoli e quindi invertendo nuovamente il risultato. Il colore finale sarà sempre leggero come il colore superiore o inferiore. Ciò implica che l'uso di un livello bianco renderà tutto bianco e un livello nero non avrà alcun effetto sul risultato finale.
• overlay: In questa modalità, il colore finale si ottiene moltiplicando o schermando i colori originali in base al colore di fondo. Se il colore di fondo è più scuro, i colori originali vengono moltiplicati e, se è più chiaro, vengono schermati. Le luci e le ombre del colore inferiore vengono mantenute in questa modalità.
• Scurire: Questo è piuttosto semplice. Il colore finale in questa modalità è il colore più scuro tra i livelli superiore e inferiore.
• Alleggerire: Questo è l'inverso di scurire, e il colore finale è, quindi, il colore più chiaro tra gli strati superiore e inferiore.
• Color-Dodge: In questa modalità, il colore di fondo viene diviso per l'inverso del colore superiore per ottenere il valore finale. Non vedrai alcuna modifica con uno sfondo nero in questa modalità. Se il colore superiore è l'inverso del colore di fondo, il colore finale sarà una versione completamente illuminata del colore superiore.
• Color-burn: Il colore finale in questa modalità viene prodotto dividendo l'inverso del colore inferiore per il valore del colore superiore e invertendo il valore risultante. Se il colore superiore è bianco, non vedrai alcuna modifica. Un colore superiore che è l'inverso del colore di fondo risulterà in un'immagine completamente nera.
• Luce forte: La modalità luce intensa è l'inverso della modalità sovrapposizione. In questo caso, se il colore superiore è più scuro, i colori originali vengono moltiplicati e, se è più chiaro, vengono schermati. È fondamentalmente la modalità di sovrapposizione con i livelli scambiati.
• Luce soffusa: Questa modalità è simile alla luce intensa, ma produce risultati finali più morbidi.
• Differenza: Questa modalità sottrae il valore del colore più scuro dal colore più chiaro per ottenere il valore finale. Ciò implica che il colore nero non avrà alcun effetto, mentre il bianco invertirà il colore dell'altro livello.
• Esclusione: Questa modalità di fusione è simile alla differenza, ma il risultato finale ha un contrasto più basso.
• Hue: Questa modalità di fusione utilizza la tonalità del colore superiore e la saturazione e la luminosità del colore di fondo per creare il colore finale.
• Saturazione: In questa modalità, il colore finale ha la saturazione del colore superiore e la tonalità e la luminosità del colore inferiore.
• Colore: Questa modalità di fusione produce un colore finale con la tonalità e la saturazione del colore superiore e la luminosità del colore di fondo. Questa modalità mantiene i livelli di grigio del colore di fondo e può essere usata per colorare le immagini colorate.
• Luminosità: Il colore finale in questa modalità ha la luminosità del colore superiore, mentre i valori di tonalità e saturazione provengono dal colore inferiore. È proprio come la modalità colore, ma con i livelli scambiati.

Inoltre, ci sono due modi per utilizzare i metodi di fusione. Puoi usare il mix-mix-mode, che determina come il contenuto di un elemento si fonde con il contenuto dell'elemento sottostante e con lo sfondo dell'elemento. Il background-blend-mode, d'altra parte, determina in che modo le immagini di sfondo di un elemento si fondono l'una con l'altra e con il colore di sfondo dell'elemento.

Puoi giocare con questa demo per vedere come interagiscono diverse immagini e colori in base alle modalità di fusione applicate. Ho anche allegato un'immagine qui sotto che mostra la fusione di un colore giallastro con l'immagine sorgente.

Creazione di bordi irregolari

Mentre le immagini in generale sono per lo più rettangolari, l'uso di immagini con limiti irregolari può renderle visivamente più accattivanti e dare loro un significato completamente diverso. Considera questa immagine di un'aquila calva unita alla mappa degli Stati Uniti. Significa i valori americani rappresentati dall'aquila calva. Potresti anche combinare alcune altre immagini in modo simile.

Qui ho combinato due immagini in modo tale che il risultato finale abbia la forma della prima immagine e i colori della seconda immagine. Quale modalità di fusione pensi che possa ottenere questo effetto? 

Un suggerimento qui è che la mappa è tutto in bianco e nero. Quindi, qualsiasi modalità di fusione decida di utilizzare deve nascondere tutta la parte sulla parte bianca e mostrare tutta la parte sulla parte nera. La modalità di sfumatura alleggerita fa perfettamente questo lavoro. Poiché il colore bianco è più chiaro rispetto ai colori dell'aquila, nasconde l'aquila ogni volta che si estende oltre la mappa degli Stati Uniti. 

Dovresti provare a indovinare l'altra modalità di fusione che può ottenere questo effetto come esercizio. Puoi provare diverse modalità di fusione in questa demo dell'aquila per vedere se hai indovinato la modalità di fusione in modo corretto. 

Mescolando sfumature colorate

Che ci crediate o no, l'immagine colorata qui sotto è il risultato di sfumature e modalità di fusione scelti con cura. Puoi passare con il mouse sull'immagine per vedere la versione originale.

Se vuoi ricreare questo effetto, dovrai iniziare con un'immagine con uno sfondo scuro per i migliori risultati. Quindi, decidi i colori che vuoi fondere e crea un gradiente lineare con tutti quei colori. Puoi facoltativamente aggiungere più gradienti da diverse angolazioni. Alla fine, imposta il primo background-blend-mode a luminosità. Il tuo CSS finale dovrebbe assomigliare a questo:

div background: url ('image-url'), sfumatura lineare (rosso, arancione, giallo, verde, blu, indaco, viola), sfumatura lineare (a destra, rosso, arancione, giallo, verde, blu, indaco , viola); background-blend-mode: luminosità, sovrapposizione; // Altre regole CSS

Dovresti provare diverse modalità di fusione e immagini nella demo originale per scoprire la migliore combinazione di modalità di fusione per diversi tipi di immagini.

Mescolando il testo insieme

Le modalità di fusione non sono limitate alle immagini. È possibile applicare le modalità di fusione anche su una porzione di testo. Nell'immagine qui sotto, ho applicato una modalità di fusione a tutti i personaggi e all'immagine di sfondo.

I personaggi usano il mix-mix-mode proprietà, e il corpo usa background-blend-mode. Ecco il CSS pertinente:

body background: # D63 url ('image-url') no-repeat; background-blend-mode: moltiplica; dimensione di sfondo: copertina;  h1 span mix-blend-mode: hard-light;  

Come per le demo precedenti, ti suggerirei di provare anche diverse modalità di fusione in questa demo.

Pensieri finali

Con un po 'di immaginazione, le possibilità con i metodi di fusione sono infinite. Spero che questo tutorial ti abbia insegnato qualcosa di utile sulle modalità di fusione e sul fotoritocco. Continua a esercitarti e diventerai davvero bravo nell'usare le diverse modalità di fusione.

Se hai creato qualcosa di interessante con le modalità di fusione, condividi il tuo lavoro nei commenti seguenti.