Сделайте ненасыщенное изображение прозрачным, сохраняя только тени и блики

Я пытался сделать это в течение нескольких дней и не получил результаты, которые мне нужны. Я не уверен, что использую правильную терминологию в названии, если нет, пожалуйста, не стесняйтесь поправлять меня, и я обновлю ее.

Я хочу перейти от этого:

к этому (я выбрал область прозрачности, чтобы показать значение k в случае, если это помогает). Обратите внимание, что тени / блики есть, но больше ничего:

Это позволяет мне разместить слой, заполненный сплошным цветом, под прозрачным изображением. В результате получается рубашка другого цвета, и видны тени / блики:

слой, заполненный синим цветом, расположен под прозрачным слоем рубашки

слой, заполненный черным, расположен под прозрачным слоем рубашки

У кого-нибудь есть какие-нибудь идеи о том, как я мог бы добиться этого? Я смог приблизиться к результату, но моей прозрачности либо недостаточно, либо слишком много. Я теряю большую часть деталей теней / бликов. Исходное изображение имеет тип файла JPG.

ОБНОВИТЬ:

Мне нужен конечный результат для PNG, как этот:

Этот PNG выглядит так, как будто он имеет белый фон, но, взяв его в Photoshop или GIMP, вы увидите, что рубашка прозрачная. Мне нужно перепроектировать, как это было сделано, чтобы это можно было сделать с другими предметами одежды.

Что интересно в вышеупомянутом PNG, так это то, что тени, блики и полутона в прозрачной части изображения могут быть выбраны индивидуально. Фотошоп: Выберите-> Цветовой диапазон-> Тени, Подсветка или Полутона. Изображение ниже, чтобы показать, что я имею в виду:

При назначении белого в качестве альфа-канала для прозрачности мы не сможем иметь непрозрачные блики, поскольку по определению они будут белыми, а значит, полностью прозрачными.

Чтобы альфа-канал щадил как выделенные белые области, так и черные тени, лучше выбрать серый цвет для назначения альфа-канала.

• Чтобы показать эффект более четко, я сначала сделал ваше оригинальное изображение темнее и увеличил контраст. Вам нужно будет и то и другое, отрегулировать контрастность источника и выбрать уровень серого, который наилучшим образом соответствует вашим потребностям для достижения лучших результатов.

• Затем я назначил альфа-канал «серому» цвету (а не белому):

  

Теперь, когда мы накладываем эту картинку, например, на зеленый фон, мы видим, что и блики, и тени сохраняются.

Мы видим, что при использовании на темных цветах белые области исходного изображения могут быть слишком яркими для достижения желаемого эффекта. Этого можно избежать, если мы выберем серый, а не белый источник для создания нашего шаблона альфа-канала.

Внизу (вверху слева) я использовал серый заливочный ковш с непрозрачностью 20% на белом оригинале. После назначения прозрачного альфа-канала серому цвету (вверху справа) мы можем наложить цветной фон (левый черный, средний темно-красный, правый слоновая кость) для достижения эффекта нижней линии.

Для этого вам лучше всего создать отдельные каналы для теней и бликов .

Эта тень может быть непосредственно взята из белой футболки, и использоваться в качестве мультипликатора (0-100%) за цвет рубашки (режим слоя: умножить)

Что касается основных моментов , это действительно зависит от материала. Ткань не отражает много света на поверхности, поэтому большая часть ее цвета исходит от рассеянного света (цвет рубашки). Чтобы извлечь зеркальный свет, я бы использовал фильтр верхних частот (адаптация гистограммы: только яркие цвета, а не темные цвета) на изображении белой рубашки и использовал его, чтобы осветлить рубашку, но только с, возможно, 20% (низкое отражение).

Слои:

Результирующие изображения:

Есть более простой способ - выбрать белый фон, инвертировать его, определить стиль кисти, создать новый файл на основе прозрачного, в оттенках серого - и это так. Выберите кисть, которая является последней в списке, и щелкните один раз черным четырехугольным образцом. Вуаля! Чем вы можете сохранить как веб - PNG.

Используйте CSS фильтры, а не несколько изображений

Вы должны использовать CSS-фильтры, чтобы раскрасить изображение для сайта.

Преимущества заключаются в следующем.

1. Требуется только одно изображение.
2. Меньший размер файла изображения.
3. Больше контроля над вашими цветами без использования графического редактора.
4. Мобильный дружественный.
5. Более быстрое время загрузки.
6. Лучшее SEO.

Для Hue используйте этот 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);
}