Adobe Photoshop – Подготовьте Изображение Как Наложение

Поскольку я новичок, я не могу разместить более двух ссылок. Этот вопрос был задан на форуме Adobe. https://forums.adobe.com/thread/2278171, но не решена.

Я пытаюсь дублировать эффект изображения на своем сайте. Образец изображения представляет собой изображение, которое при применении заливки под наложением окрашивается.

Первое изображение — это изображение, которое было преобразовано в нечто похожее на монохромный png… Следующее — это эффект задней подсветки наложения. Когда вы просматриваете изображение здесь, кажется, что непрозрачность равна 100, но это не так. Белый фон этой веб-страницы представляет собой светящееся изображение, похожее на эффект многократного наложения.

Вопросы:

1. Как мне взять изображение и преобразовать его в это наложенное изображение, например это?
2. Должно ли исходное изображение быть одноцветным для создания наложения и/или оно может быть многоцветным?
3. Обратил внимание на участки на цветных изображениях, где черно-белые участки остаются независимо от манипуляций. Я хотел бы сделать то же самое.
4. Можно ли выполнить это преобразование в Illustrator или только в Photoshop?

Я попытался преобразовать цвет изображения в альфа. Я тоже пробовал использовать изображение в оттенках серого… У меня ничего не получается, и я не профессионал в области графики.

Я раскрою свою ситуацию дальше…

Это изображение с веб-сайта, который позволяет любому применять цвет к различным частям объекта. Серое изображение, которое я предоставил в начале этого поста, — это изображение, используемое на сайте.

Заливка применяется к этому изображению путем применения заливки к объекту svg (рисунку определенной части), который находится на слое (z-индекс) под наложенным изображением в оттенках серого, как показано в Illustrator на следующем изображении.

В CSS к веб-элементу для SVG не применяется режим наложения. (Я вернусь к этому).

В настоящее время мой инструмент для дизайна веб-сайтов выглядит следующим образом. базовый SVG с заливкой.

Взял перчатку однотонного цвета.

Нарисовал контуры и вырезал/скопировал выделение из контуров в независимые слои.

Я продублировал слой для каждой секции для того количества цветов кожи, которое предложил.

Использовал опцию раскрашивания и изменил оттенок/светлость/светлость слоя кожи на тот цвет, который мне нужен… Таким образом, у шнурков было по одному слою каждого цвета. 11 прозрачных изображений PNG.

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

Это было плохо, потому что, если учесть, что 10 цветных png x 10 частей — это 100 файлов, которые нужно загрузить и загрузить в память. Таким образом, изменена реализация рисования SVG.

Наша команда хочет сделать изображение более живым, чтобы помочь клиентам визуализировать то, что они получат, и совершить покупку (психология). Таким образом, я пытаюсь объединить изображение svg+overlay без 99 файлов.

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

Что вам нужно сделать, так это создать вторую версию вашего изображения, состоящую из светлых участков, и наложить ее поверх цвета, чтобы осветлить светлые области до белого цвета. Цветной слой (настроенный на умножение или затемнение) затем помещается между слоем подсветки (сверху, настроенным на экранирование или осветление) и слоем тени (внизу). Есть несколько способов создать изображение только для светлых участков, но кривые или уровни в Photoshop будут моим лучшим решением.

Следующая иллюстрация (очень приблизительная) должна помочь проиллюстрировать разницу, которую дает добавление бликов...

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