그림자와 하이라이트 만 유지하면서 불포화 이미지를 투명하게 만듭니다.

나는 며칠 동안이 작업을 시도했지만 필요한 결과를 얻지 못했습니다. 제목에 올바른 용어를 사용하고 있는지 잘 모르겠습니다. 그렇지 않은 경우 언제든지 수정 해 주시면 업데이트하겠습니다.

나는 이것에서 가고 싶다 :

이것으로 (투명 영역을 샘플링하여 도움이되는 경우 k 값을 표시했습니다). 그림자 / 하이라이트가 있지만 다른 것은 없습니다.

이를 통해 투명한 이미지 아래에 단색으로 채워진 레이어를 배치 할 수 있습니다. 결과는 다른 컬러 셔츠이며 그림자 / 하이라이트가 표시됩니다.

투명 셔츠 레이어 아래에 파란색으로 채워진 레이어

투명 셔츠 레이어 아래에 검은 색으로 채워진 레이어

누구든지 내가 이것을 달성 할 수있는 방법에 대한 아이디어가 있습니까? 결과에 가까워졌지만 투명도가 충분하지 않거나 너무 많지 않습니다. 그림자 / 하이라이트 디테일을 많이 잃습니다. 시작 이미지는 파일 유형 JPG입니다.

최신 정보:

최종 결과는 다음과 같은 PNG가되어야합니다.

이 PNG는 흰색 배경 인 것처럼 보이지만 Photoshop 또는 김프로 가져 가면 셔츠가 투명 함을 알 수 있습니다. 이 작업을 수행 한 방식을 리버스 엔지니어링해야 다른 의류에 적용 할 수 있습니다.

위의 PNG에서 흥미로운 점은 이미지의 투명한 부분에있는 그림자, 하이라이트 및 중간 톤을 모두 개별적으로 선택할 수 있다는 것입니다. Photoshop : 선택-> 색상 범위-> 그림자, 하이라이트 또는 중간 톤. 무슨 뜻인지 아래 이미지 :

투명도를 위해 흰색을 알파 채널로 할당 할 때 불투명 한 하이라이트는 정의에 따라 흰색이므로 완전히 투명하므로 불투명 한 하이라이트를 가질 수 없습니다.

강조 표시된 흰색 영역과 검은 색 그림자를 모두 제외시키는 알파 채널을 가지려면 알파를 할당하기 위해 회색을 선택하는 것이 좋습니다.

• 효과를보다 명확하게 보여주기 위해 먼저 원본 이미지를 더 어둡게하고 대비를 높였습니다. 더 나은 결과를 얻으려면 소스 대비를 조정하고 필요에 가장 적합한 그레이 레벨을 선택해야합니다.

• 그런 다음 알파 채널을 흰색이 아닌 '회색'색으로 지정했습니다.

  

예를 들어 녹색 배경으로이 그림을 오버레이하면 하이라이트와 그림자가 모두 유지됩니다.

우리는 어두운 색상에서 사용될 때 원고 이미지의 흰색 영역이 여전히 원하는 효과를 위해 너무 밝을 수 있음을 알 수 있습니다. 알파 채널 템플릿을 만들기 위해 흰색 소스 대신 회색 소스를 선택할 때이 문제를 해결할 수 있습니다.

아래 (왼쪽 위)는 흰색 원본에서 불투명도가 20 % 인 회색 버킷 채우기를 사용했습니다. 투명 알파 채널을 회색 (오른쪽 상단)에 할당 한 후, 컬러 배경 (왼쪽 검은 색, 중간 진한 빨간색, 오른쪽 상아색 흰색)을 오버레이하여 결론 효과를 얻을 수 있습니다.

이를 위해 그림자 및 하이라이트에 대한 별도의 채널을 만드는 것이 가장 좋습니다 .

그림자가 직접 흰색 T 셔츠에서 수행 될 수 있으며,로 사용할 수 multiplicator 셔츠의 색상 (0 ~ 100 %) (레이어 모드 : 곱하기)

하이라이트에 관해서는 , 이것은 실제로 재료에 달려 있습니다. 천은 표면에 많은 빛을 반사하지 않으므로 대부분의 색상은 산란 된 빛 (셔츠의 색상)에서 비롯됩니다. 반사광을 추출하려면 흰 셔츠 이미지에 고역 통과 필터 (히스토그램 적응 : 밝은 색만, 어두운 색은 없음)를 사용하여 셔츠를 밝게하는 데 사용하지만 20 % 정도만 사용해야합니다. (저 반사).

층 :

결과 이미지 :

더 쉬운 방법이 있습니다-흰색 배경을 선택하고, 반전하고, 브러시 사전 설정을 정의하고, 투명한 회색조를 기반으로 새 파일을 만듭니다. 목록의 마지막 브러시를 선택하고 검은 색 포 그라운드 견본으로 한 번 클릭하십시오. 짜잔! 웹-png로 저장할 수있는 것보다.

여러 이미지 대신 CSS 필터 사용

웹 사이트의 이미지를 색칠 하려면 CSS 필터 를 사용해야합니다 .

이점은 다음과 같습니다.

1. 하나의 이미지 만 필요합니다.
2. 더 작은 이미지 파일 크기.
3. 이미지 편집기를 사용하지 않고도 색상을보다 세밀하게 제어 할 수 있습니다.
4. 모바일 친화적.
5. 더 빠른 로딩 시간.
6. 더 나은 SEO.

들어 색조 이 CSS 필터를 사용 :

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

대한 밝기 사용 :

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

대한 채도의 사용 :

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

의 경우 그레이 스케일 사용 :

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