Zrób przezroczysty obraz desaturacji, zachowując tylko cienie i światła

Próbowałem to zrobić od kilku dni i nie uzyskałem potrzebnych rezultatów. Nie jestem pewien, czy używam prawidłowej terminologii w tytule, jeśli nie, popraw mnie i zaktualizuję ją.

Chcę od tego zacząć:

do tego (próbkowałem obszar przezroczystości, aby pokazać wartość k na wypadek, gdyby to pomogło). Zauważ, że są tam cienie / światła, ale nic więcej:

To pozwala mi umieścić warstwę wypełnioną jednolitym kolorem poniżej przezroczystego obrazu. Rezultatem jest koszula w innym kolorze, a cienie / pasemka są widoczne:

warstwa wypełniona kolorem niebieskim umieszczona poniżej przezroczystej warstwy koszuli

warstwa wypełniona czernią umieszczona poniżej przezroczystej warstwy koszuli

Czy ktoś ma jakieś pomysły, jak mogę to osiągnąć? Byłem w stanie zbliżyć się do wyniku, ale moja przejrzystość to albo za mało, albo za dużo. Tracę wiele szczegółów cieni / świateł. Obraz początkowy jest typu pliku JPG.

AKTUALIZACJA:

Potrzebuję ostatecznego wyniku, aby uzyskać PNG taki jak ten:

Ten obraz PNG wygląda jakby miał białe tło, ale biorąc go do Photoshopa lub GIMP zobaczysz, że koszula jest przezroczysta. Muszę dokonać inżynierii wstecznej, jak to zrobiono, aby można było to zrobić z innymi częściami ubrania.

Co ciekawe w powyższym PNG, cienie, światła i półcienie w przezroczystej części obrazu można wybierać indywidualnie. Photoshop: Wybierz-> Zakres kolorów-> Cienie, Podświetlenia lub Półcienie. Zdjęcie poniżej pokazuje, co mam na myśli:

Przypisując biel jako kanał alfa dla przezroczystości, nie będziemy mogli mieć nieprzezroczystych podświetleń, ponieważ z definicji będą białe, a zatem w pełni przezroczyste.

Aby kanał alfa oszczędzał zarówno podświetlone białe obszary, jak i czarne cienie, lepiej wybrać szary kolor do przypisania alfa.

• Aby wyraźniej pokazać efekt, najpierw przyciemniłem twój oryginalny obraz i zwiększyłem kontrast. Musisz dokonać obu, dostosować kontrast źródła i wybrać poziom szarości, który najlepiej odpowiada Twoim potrzebom, aby uzyskać lepsze wyniki.

• Następnie przypisałem kanał alfa do koloru „szarego” (zamiast białego):

  

Teraz, kiedy nałożymy to zdjęcie na np. Zielone tło, możemy zobaczyć, że zarówno światła, jak i cienie są zachowane.

Widzimy, że w przypadku użycia w ciemnych kolorach białe obszary oryginalnego obrazu mogą być nadal zbyt jasne, aby uzyskać pożądany efekt. Można temu zaradzić, wybierając do tworzenia naszego szablonu kanału alfa szare, a nie białe źródło.

Poniżej (u góry po lewej) użyłem szarego wiadra z 20% kryciem na białym oryginale. Po przypisaniu szarego kanału alfa przezroczystości (na górze po prawej) możemy nałożyć kolorowe tło (lewy czarny, środkowy ciemnoczerwony, prawy biały kolor kości słoniowej), aby uzyskać efekty dolnej linii.

W tym celu najlepiej utworzyć osobne kanały dla cieni i świateł .

W cień może być dokonywane bezpośrednio z białej koszulki, i stosować jako mnożnik (0-100%) dla koszuli koloru (tryb warstwy: mnożenie)

Co do najważniejszych , to naprawdę zależy od materiału. Tkanina nie odbija dużo światła na powierzchni, więc większość jej kolorów pochodzi z rozproszonego światła (koloru koszuli). Aby wyodrębnić światło zwierciadlane, zastosowałbym filtr górnoprzepustowy (dostosowanie histogramu: tylko jasne kolory i żaden z ciemnych kolorów) na obrazie białej koszuli i użyłem go do rozjaśnienia koszuli, ale tylko z może 20% (niskie odbicie).

Warstwy:

Powstałe obrazy:

Jest łatwiejszy sposób - wybierz białe tło, odwróć je, zdefiniuj ustawienie pędzla, utwórz nowy przezroczysty plik w skali szarości - i to jest. Wybierz pędzel, który jest ostatnim na liście, i kliknij raz czarną czteropłaszczyznową próbką. Voila! Następnie możesz zapisać jako web - png.

Użyj filtrów CSS zamiast wielu obrazów

Powinieneś użyć filtrów CSS do pokolorowania obrazu witryny.

Korzyści są następujące.

1. Wymagany jest tylko jeden obraz.
2. Mniejszy rozmiar pliku obrazu.
3. Większa kontrola nad kolorami bez konieczności korzystania z edytora obrazów.
4. Przyjazny dla urządzeń mobilnych.
5. Szybsze czasy ładowania.
6. Lepsze SEO.

Dla Hue użyj tego filtru CSS:

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

Dla jasności użyj:

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

Do nasycenia użyj:

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

Do użytku w skali szarości :

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