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


17

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ąć: wprowadź opis zdjęcia tutaj

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: wynik obrazu

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 wprowadź opis zdjęcia tutaj

warstwa wypełniona czernią umieszczona poniżej przezroczystej warstwy koszuli wprowadź opis zdjęcia tutaj

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: wprowadź opis zdjęcia tutaj

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: wprowadź opis zdjęcia tutaj


2
Dlaczego nie zrobić mieszania warstw z trybem mnożenia? Wygląda na to, że Twój kształt ma dość dobrze zdefiniowane krawędzie, więc będziesz w stanie dość łatwo go maskować.
ckpepper02

1
Ponieważ OP chce wyeksportować obraz jako przezroczysty PNG. Multiply polega na kolorze, który się za nim kryje.
Hanna


W takim razie droga pomnożona + to maska.
John

Czy mógłbyś to rozwinąć, John?
Hanna

Odpowiedzi:


13

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):

    wprowadź opis zdjęcia tutaj

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.

wprowadź opis zdjęcia tutaj

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.

wprowadź opis zdjęcia tutaj


Jestem w tym nowicjuszem i mam problem z kanałem alfa. Do tej pory moją metodą uzyskania efektu przezroczystości jest przejście do zakładki kanałów i kontrolowanie + klikanie kanału RGB. Następnie używam szybkiej maski i dostosowuję poziomy, ale nie mogę dotrzeć do miejsca, w którym jesteś na pierwszym opublikowanym obrazie. Jak przypisujesz kanał alfa do szarego?
aMMT

@Phonetic: Szybko zrobiłem to z Gimpem (istnieje opcja menu umożliwiająca wybór dowolnego koloru dla przejrzystości). To sprawia, że ​​wierzę, że istnieje (lub powinna) być również taka opcja w PS lub jakiejkolwiek aplikacji, której używasz. O wiele lepsze podejście zapewnia jednak bardzo ładna odpowiedź Petera , tj. Oddzielanie świateł i cieni. Umożliwi to znacznie dokładniejsze korekty.
Takkat

Mam to teraz. Osiągnąłem dokładnie to, czego potrzebuję, postępując zgodnie z tymi instrukcjami. Dziękuję bardzo
aMMT

Czy mogę dostać psd dla tego samouczka, mam troble, aby uzyskać przezroczystość.

@Takkat, czy możesz podać kroki do drugiego punktu - „Następnie przypisałem kanał alfa do„ szarego ”koloru (zamiast białego)?
Vishal,

13

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:

wprowadź opis zdjęcia tutaj

Powstałe obrazy:

wprowadź opis zdjęcia tutaj


To jest świetne. Czy jest jakiś sposób, aby uzyskać ostateczny obraz jako przezroczysty plik PNG? Ostatecznym celem jest użycie 1 pojedynczego obrazu png na stronie internetowej, a poprzez zmianę koloru tła pliku HTML zawierającego obraz, kolor koszuli skutecznie się zmieni.
aMMT

Mam problem z uzyskaniem najważniejszych wydarzeń. Myślę, że brakuje mi kroku, ponieważ po zastosowaniu filtra górnoprzepustowego koszula w warstwie, na którą zastosowałem filtr górnoprzepustowy, wygląda bardzo szaro (nie ma dużego kontrastu, jak widzę w warstwie Wyróżnienia) . Najpierw użyłem promienia 20 pikseli na filtrze górnoprzepustowym, a następnie wypróbowałem kilka różnych wartości promienia, ale nie zbliżam się do tego, co widać w warstwie podświetlenia. Czego mi brakuje?
aMMT

Użyj tej samej metody, wypełnij tło / zewnętrzną część obrazu białym kolorem i pozwól css działać jak dolna warstwa. Koszula byłaby półprzezroczystym oknem.
John

Chciałbym lepiej zrozumieć tę odpowiedź, ponieważ brzmi naprawdę fajnie.
Hanna

Ten efekt wymaga trybów mieszania (mnożenia, rozjaśniania), podczas gdy HTML używa tylko zwykłego mieszania (malowanie przezroczystych obrazów nad sobą). Opcją byłby HTML5 + SVG, ale tryby mieszania SVG wydają się nie być jeszcze obsługiwane przez przeglądarki. Zobacz dev.w3.org/SVG/modules/compositing/master/… . Skutecznym sposobem na osiągnięcie tego efektu w przeglądarce byłby mały program Java (tryby mieszania Java2d) osadzony na stronie.
Peter Walser

1

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.


1

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

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

wprowadź opis zdjęcia tutaj

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);
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.