Зробити ненасичене зображення прозорим, зберігаючи лише тіні та світлі кольори

Я намагаюся зробити це вже кілька днів і не отримав потрібних результатів. Я не впевнений, що я використовую правильну термінологію в заголовку, якщо ні, будь ласка, не соромтесь виправити мене, і я оновлю її.

Я хочу піти з цього:

до цього (я відібрав вибірку області прозорості, щоб показати значення k у випадку, що це допомагає). Помітьте, що тіні / світлі моменти є, але нічого іншого:

Це дозволяє мені розмістити шар, наповнений суцільним кольором, під прозорим зображенням. У підсумку виходить сорочка іншого кольору, і видно тіні / блиски:

шар, заповнений синім, розміщений під прозорим сорочковим шаром

шар, заповнений чорним кольором, розміщений нижче прозорого шару сорочки

Хтось має ідеї, як я міг би це досягти? Мені вдалося наблизитися до результату, але моєї прозорості або недостатньо, або занадто багато. Я втрачаю велику частину тіні / виділення деталей. Початкове зображення має файл JPG-файлу.

ОНОВЛЕННЯ:

Мені потрібен кінцевий результат, щоб стати таким PNG:

Цей PNG схожий на біле тло, але взявши його у Photoshop або GIMP, ви побачите, що сорочка прозора. Мені потрібно переконатись, як це було зроблено, щоб це можна було зробити з іншими предметами одягу.

Цікаво, що стосується вищенаведеного PNG - це тіні, світлі тони та півтони у прозорій частині зображення, які можна вибрати окремо. Photoshop: Виберіть-> Діапазон кольорів-> Тіні, світлі або середні тони. Зображення нижче, щоб показати, що я маю на увазі:

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

Щоб альфа-канал міг зберігати виділені білі області та чорні тіні, краще вибрати сірий колір для призначення альфа.

• Для більш чіткого ефекту я спершу зробив ваше оригінальне зображення темнішим і збільшив контраст. Вам потрібно буде обидва, відрегулювати контраст джерела та вибрати рівень сірого, який найкраще відповідає вашим потребам для кращих результатів.

• Тоді я призначив альфа-каналу "сірий" колір (а не білий):

  

Тепер, коли ми накладаємо цю картину, наприклад, зеленим фоном, ми бачимо, що зберігаються і світлі, і тіні.

Ми бачимо, що при використанні темних кольорів білі ділянки вихідного зображення все ще можуть бути занадто яскравими для бажаного ефекту. Це можна подолати, коли для створення шаблону альфа-каналів ми виберемо сіре, а не біле джерело.

Внизу (зверху ліворуч) я використовував сіру наповнення відра з непрозорістю 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);
}