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

17

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

Я хочу перейти от этого: введите описание изображения здесь

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

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

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

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

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

ОБНОВИТЬ:

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

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

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

aMMT
источник
2
Почему бы не сделать Layer Blend с режимом Multiply? Похоже, у вашей фигуры довольно четко очерченные края, поэтому вы сможете легко ее замаскировать.
ckpepper02
1
Потому что OP хочет экспортировать изображение в виде прозрачного PNG. Умножение зависит от цвета, чтобы быть за ним.
Ханна
Умножение + маска - это путь.
Джон
Не могли бы вы рассказать об этом, Джон?
Ханна

Ответы:

13

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

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

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

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

    введите описание изображения здесь

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

введите описание изображения здесь

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

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

введите описание изображения здесь

Takkat
источник
Я новичок в этом и у меня проблемы с альфа-каналом. Мой метод получения эффекта прозрачности до сих пор переходил на вкладку каналов и управлял нажатием на канал RGB. Затем я использую быструю маску и настраиваю уровни, но я не могу добраться до того места, где вы находитесь на первом опубликованном вами изображении. Как вы назначаете альфа-канал на серый?
АММТ
@Phonetic: я быстро сделал это с Gimp (там есть пункт меню для выбора любого цвета для прозрачности). Это заставляет меня поверить, что есть (или должно быть) такая возможность в PS или любом другом приложении, которое вы используете. Однако гораздо лучший подход дает очень хороший ответ Питера , то есть разделение бликов и теней. Это позволит сделать более точные настройки.
Таккат
Я понял. Добились именно того, что мне нужно, следуя этим инструкциям. Большое спасибо
aMMT
Могу ли я иметь PSD для этого урока, у меня есть Troble получить прозрачность.
@ Таккат, не могли бы вы упомянуть шаги для второго пункта - «Тогда я назначил альфа-канал« серому »(а не белому) цвету»?
Вишал
13

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

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

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

Слои:

введите описание изображения здесь

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

введите описание изображения здесь

Питер Уолсер
источник
Это круто. Есть ли способ получить окончательное изображение в виде прозрачного PNG? Конечной целью здесь является использование 1-го png-изображения на веб-сайте, и при изменении цвета фона HTML-элемента div, содержащего изображение, цвет рубашки будет эффективно меняться.
АММТ
У меня проблемы с получением основных моментов. Я думаю, что пропускаю шаг, потому что после применения фильтра верхних частот рубашка в слое, к которому я применил фильтр верхних частот, выглядит очень серой (там не так много контраста, как я вижу в вашем слое Highlights) , Сначала я использовал 20-пиксельный радиус на фильтре верхних частот, а затем попробовал несколько разных значений радиуса, но я не приближаюсь к тому, что видно в слое бликов. Чего мне не хватает?
АММТ
Используйте тот же метод, залейте фон / внешнюю часть изображения белым и позвольте вашему CSS действовать как нижний слой. Рубашка была бы полупрозрачным окном.
Джон
Хотелось бы мне лучше понять этот ответ, потому что он звучит очень круто.
Ханна
Для этого эффекта нужны режимы наложения (умножение, осветление), тогда как в HTML используется только обычное наложение (наложение прозрачных изображений друг на друга). HTML5 + SVG был бы вариантом, но режимы наложения SVG, похоже, еще не поддерживаются браузерами. См. Dev.w3.org/SVG/modules/compositing/master/… . Эффективный способ сделать этот эффект в браузере - использовать небольшую Java-программу (режимы наложения Java2d), встроенную в страницу.
Питер Уолзер
1

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

Валентина Йототва
источник
1

Используйте 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);
}
Инвариантное изменение
источник