Tạo một hình ảnh không bão hòa trong suốt chỉ giữ bóng & nổi bật

Tôi đã cố gắng làm điều này trong vài ngày nay và không nhận được kết quả tôi cần. Tôi không chắc chắn tôi đang sử dụng thuật ngữ chính xác trong tiêu đề, nếu không, xin vui lòng sửa cho tôi và tôi sẽ cập nhật nó.

Tôi muốn đi từ đây:

về điều này (tôi đã lấy mẫu một khu vực trong suốt để hiển thị giá trị k trong trường hợp có ích). Lưu ý các bóng / điểm nổi bật ở đó, nhưng không có gì khác:

Điều này cho phép tôi đặt một lớp chứa đầy màu sắc bên dưới hình ảnh trong suốt. Kết quả là một chiếc áo màu khác nhau, và bóng / nổi bật được nhìn thấy:

lớp đầy màu xanh được đặt bên dưới lớp áo trong suốt

lớp đầy màu đen được đặt bên dưới lớp áo trong suốt

Có ai có bất kỳ ý tưởng về làm thế nào tôi có thể thực hiện được điều này? Tôi đã có thể tiến gần đến kết quả, nhưng tính minh bạch của tôi là không đủ hoặc quá nhiều. Tôi mất nhiều chi tiết bóng / nổi bật. Hình ảnh bắt đầu là của JPG kiểu.

CẬP NHẬT:

Tôi cần kết quả cuối cùng để trở thành một PNG như thế này:

PNG này trông giống như nó có nền trắng nhưng khi đưa nó vào Photoshop hoặc GIMP, bạn sẽ thấy chiếc áo trong suốt. Tôi cần phải đảo ngược kỹ sư làm thế nào điều này đã được thực hiện để nó có thể được thực hiện cho các mảnh quần áo khác.

Điều thú vị về PNG ở trên là Bóng, Nổi bật và Midtones trong phần trong suốt của hình ảnh đều có thể được chọn riêng lẻ. Photoshop: Chọn-> Phạm vi màu-> Bóng, Nổi bật hoặc Midtones. Hình ảnh dưới đây để hiển thị những gì tôi có nghĩa là:

Khi gán màu trắng làm kênh alpha cho độ trong suốt, chúng ta sẽ không thể có các điểm nổi bật mờ, vì các định nghĩa này sẽ có màu trắng, do đó hoàn toàn trong suốt.

Để có kênh alpha bỏ qua cả vùng trắng được tô sáng và bóng đen, tốt nhất chúng ta nên chọn màu xám để gán alpha.

• Để hiển thị hiệu ứng rõ ràng hơn, trước tiên tôi làm cho hình ảnh gốc của bạn tối hơn và tăng độ tương phản. Bạn sẽ cần cả hai, điều chỉnh độ tương phản nguồn và chọn mức xám phù hợp với nhu cầu của bạn nhất để có kết quả tốt hơn.

• Sau đó, tôi đã chỉ định kênh alpha cho màu 'xám' (chứ không phải màu trắng):

  

Bây giờ khi chúng ta phủ lên hình ảnh này, ví dụ như một nền màu xanh lá cây, chúng ta có thể thấy, cả hai điểm nổi bật và bóng tối đều được duy trì.

Chúng ta có thể thấy, khi được sử dụng trên các màu tối, các vùng màu trắng của ảnh gốc có thể vẫn quá sáng cho hiệu ứng mong muốn. Điều này có thể được khắc phục khi chúng ta chọn màu xám thay vì nguồn trắng để tạo mẫu kênh alpha.

Dưới đây (trên cùng bên trái) Tôi đã sử dụng một xô màu xám với độ mờ 20% trên bản gốc màu trắng. Sau khi chỉ định kênh alpha trong suốt cho màu xám (trên cùng bên phải), chúng ta có thể phủ một nền màu (đen bên trái, đỏ đậm, trắng ngà phải) để đạt được các hiệu ứng dòng dưới cùng.

Đối với điều này, tốt nhất bạn tạo các kênh riêng biệt cho bóng tối và nổi bật .

Các bóng có thể được lấy trực tiếp từ áo phông trắng và được sử dụng làm công cụ nhân (0-100%) cho màu của áo (chế độ lớp: nhân)

Đối với những điểm nổi bật , điều này thực sự phụ thuộc vào vật liệu. Vải không phản chiếu nhiều ánh sáng trên bề mặt, vì vậy hầu hết màu sắc của nó đến từ ánh sáng khuếch tán (màu của áo). Để trích xuất ánh sáng đặc biệt, tôi sử dụng bộ lọc thông cao (thích ứng biểu đồ: chỉ có màu sáng và không có màu tối) trên hình ảnh của áo sơ mi trắng và sử dụng bộ lọc đó để làm sáng áo, nhưng chỉ với 20% (phản xạ thấp).

Lớp:

Hình ảnh kết quả:

Có cách dễ dàng hơn - chọn nền trắng, đảo ngược nó, xác định cài đặt trước của bàn chải, tạo tệp mới dựa trên trong suốt, thang độ xám - và đây là. Chọn bàn chải, cái cuối cùng trong danh sách và nhấp một lần với mẫu màu bốn mặt màu đen. Voila! Hơn bạn có thể lưu dưới dạng web - png.

Sử dụng bộ lọc CSS thay vì sau đó nhiều hình ảnh

Bạn nên sử dụng các bộ lọc CSS để tô màu hình ảnh cho một trang web.

Những lợi ích như sau.

1. Chỉ cần một hình ảnh.
2. Kích thước tập tin hình ảnh nhỏ hơn.
3. Kiểm soát nhiều hơn màu sắc của bạn mà không phải sử dụng trình chỉnh sửa hình ảnh.
4. Di động thân thiện.
5. Thời gian tải nhanh hơn.
6. SEO tốt hơn.

Đối với Huế, hãy sử dụng bộ lọc CSS này:

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

Để sử dụng Độ sáng :

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

Để sử dụng Saturation :

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

Để sử dụng Greyscale :

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