Rendi trasparente un'immagine desaturata mantenendo solo ombre e luci

Sto provando a farlo da alcuni giorni e non ho ottenuto i risultati di cui ho bisogno. Non sono sicuro di usare la terminologia corretta nel titolo, in caso contrario, non esitare a correggermi e lo aggiornerò.

Voglio andare da questo:

a questo (ho campionato un'area della trasparenza per mostrare il valore k nel caso in cui ciò aiuti). Nota che ci sono ombre / luci, ma nient'altro:

Questo mi permette di posizionare un livello riempito con un colore solido sotto l'immagine trasparente. Il risultato è una camicia di colore diverso e si vedono ombre / luci:

strato riempito di blu posto sotto lo strato di camicia trasparente

strato riempito di nero posto sotto lo strato di camicia trasparente

Qualcuno ha qualche idea su come potrei essere in grado di raggiungere questo obiettivo? Sono stato in grado di avvicinarmi al risultato, ma la mia trasparenza non è sufficiente o troppo. Perdo gran parte dei dettagli di ombre / luci. L'immagine di partenza è del tipo di file JPG.

AGGIORNARE:

Ho bisogno che il risultato finale sia un PNG come questo:

Questo PNG sembra avere uno sfondo bianco ma portandolo in Photoshop o GIMP vedrai che la maglietta è trasparente. Ho bisogno di decodificare come è stato fatto in modo che possa essere fatto ad altri capi di abbigliamento.

Ciò che è interessante del PNG sopra è che Ombre, Luci e Mezzitoni nella parte trasparente dell'immagine possono essere tutti selezionati individualmente. Photoshop: Seleziona-> Gamma colori-> Ombre, Luci o Mezzitoni. Immagine sotto per mostrare cosa intendo:

Quando assegniamo il bianco come canale alfa per la trasparenza non saremo in grado di avere alte luci opache, poiché queste per definizione saranno bianche, quindi completamente trasparenti.

Per fare in modo che un canale alfa risparmi sia le aree bianche evidenziate sia le ombre nere, è meglio scegliere un colore grigio per l'assegnazione dell'alfa.

• Per mostrare l'effetto in modo più chiaro, ho prima reso più scura la tua immagine originale e aumentato il contrasto. Sarà necessario entrambi, regolare il contrasto della sorgente e scegliere un livello di grigio adatto alle proprie esigenze per ottenere risultati migliori.

• Quindi ho assegnato un canale alfa a un colore 'grigio' (piuttosto che bianco):

  

Ora, quando sovrapponiamo questa immagine ad esempio a uno sfondo verde, possiamo vedere che sia le luci che le ombre vengono mantenute.

Possiamo vedere che, se utilizzate su colori scuri, le aree bianche dell'immagine originale potrebbero essere ancora troppo luminose per l'effetto desiderato. Questo può essere superato quando scegliamo una fonte grigia anziché bianca per creare il nostro modello di canale alfa.

Sotto (in alto a sinistra) ho usato un riempimento a secchiello grigio con un'opacità del 20% sull'originale bianco. Dopo aver assegnato un canale alfa trasparenza al grigio (in alto a destra) possiamo sovrapporre uno sfondo colorato (nero sinistro, rosso scuro medio, bianco avorio destro) per ottenere gli effetti della linea di fondo.

Per questo, è meglio creare canali separati per le ombre e le luci .

Le ombre possono essere prese direttamente dalla maglietta bianca e utilizzate come moltiplicatore (0-100%) per il colore della maglietta (modalità di livello: moltiplica)

Per quanto riguarda i punti salienti , questo dipende davvero dal materiale. Il tessuto non riflette molta luce sulla superficie, quindi la maggior parte del suo colore proviene da luce diffusa (il colore della camicia). Per estrarre la luce speculare, userei un filtro passa-alto (adattamento dell'istogramma: solo i colori vivaci e nessuno dei colori scuri) sull'immagine della camicia bianca e lo userei per illuminare la camicia, ma solo con forse il 20% (bassa riflessione).

strati:

Immagini risultanti:

C'è un modo più semplice: selezionare lo sfondo bianco, invertirlo, definire la preimpostazione del pennello, creare un nuovo file basato su trasparente, scala di grigi - e questo è. Seleziona il pennello, che è l'ultimo nell'elenco e fai clic una volta con il campione a quadretti nero. Ecco! Di quanto puoi salvare come web - png.

Utilizza i filtri CSS anziché le immagini multiple

È necessario utilizzare i filtri CSS per colorare l'immagine di un sito Web.

I vantaggi sono i seguenti.

1. È richiesta solo un'immagine.
2. Dimensione del file di immagine più piccola.
3. Maggiore controllo sui colori senza dover utilizzare un editor di immagini.
4. Mobile friendly.
5. Tempi di caricamento più rapidi.
6. SEO migliore.

Per Hue usa questo filtro CSS:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Per luminosità usare:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Per saturazione usare:

img {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}

Per l' uso in scala di grigi :

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}