Как реплицировать PS многослойный режим

Знает ли кто-нибудь хороший способ репликации режима многослойного Photoshop, используя изображение или CSS?

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

Лучшее, что я придумал, это либо использование rgba, либо прозрачного png, но даже тогда оно выглядит не так.

47
02 июня '10 в 17:48
источник поделиться
8 ответов

Появляются новые свойства CSS для выполнения этой вещи: blend-mode и background-blend-mode.

В настоящее время вы не сможете использовать их в какой-либо производственной среде, так как они очень новы и в настоящее время поддерживаются только Chrome Canary (экспериментальный веб-браузер) и Webkit Nightly.

Эти свойства настроены так, чтобы работать практически так же, как и режимы смешивания фотошоп, и позволяют устанавливать различные режимы в качестве значений этих свойств, таких как overlay, screen, lighten, color-dodge, и, конечно, multiply.. среди прочих.

blend-mode позволит изображения (и, возможно, контент? Я ничего не слышал, чтобы предположить, что на данный момент.), слоистые друг над другом, чтобы применить этот эффект смешивания.

background-blend-mode будет очень похожим, но будет предназначен для фоновых изображений (с использованием background или background-image), а не фактических элементов изображения.


EDIT: Следующий раздел становится немного неуместным по мере роста поддержки браузера. Проверьте этот график, чтобы посмотреть, какие браузеры поддерживают это: http://caniuse.com/#feat=css-backgroundblendmode


Если у вас установлена ​​последняя версия Chrome на вашем компьютере, вы можете увидеть эти стили в использовании, включив некоторые флаги в своем браузере (просто введите их в адресную строку:)

chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders

* note that the flags required for this might change at any time

Включите этих плохих парней, а затем просмотрите эту скрипку: http://jsfiddle.net/cqzJ5/ (Если стили правильно включены в вашем браузере, два изображения должны быть смешаны, чтобы сцена выглядела так, будто она находится под водой)

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

Некоторые дополнительные ресурсы чтения в режимах смешивания и свойства css:

23
09 янв. '14 в 7:16
источник

Простой с немного SVG:

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

и некоторые CSS:

#kitten:hover {
    filter:url(#multiply);
}

Скрипка: http://jsfiddle.net/7uCQQ/381/

17
06 янв. '14 в 9:53
источник

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

https://github.com/Phrogz/context-blender

17
13 июля '11 в 1:15
источник

Это возможно с 24.png - если вы знаете трюк.

В иллюстраторе вы можете экспортировать графику в формате 24.png, но это никогда не работает как умножение.

Я нашел.

  • получить свой множительный рисунок самостоятельно
  • поместите твердый черный 100% -ный блок за ним и выберите обе графики
  • в окне прозрачности выберите "Сделать маску", а затем "Инвертировать маску"
  • экспорт в файл 24.png

работает так же, как умножение, когда z-index (ed) поверх изображения.

11
29 нояб. '12 в 6:37
источник

Нет таких возможностей. Единственные параметры компоновки, которые вы получаете, даже близки:

  • lighter режим компоновки на HTML5 <canvas> (который является a + b не a * b и имеет противоположный эффект для умножения)

  • min или subtract Compositor только в IE.

Ничего не реально.

В общем, вы не должны пытаться экспортировать Photoshop comps в виде слоев, но визуализировать их до одного непрозрачного изображения. Для опрокидывания вы можете сделать два изображения (одно для нормального состояния, одно для зависания) и обменять их между собой с помощью стиля CSS :hover, чтобы выбрать другое фоновое изображение, или, что лучше, поскольку он не требует предварительной загрузки и уменьшает HTTP-запросы - объединить оба изображения в одно и используйте background-image/background-position, чтобы отобразить правую часть этого изображения в каждом состоянии в качестве фонового изображения. ( "CSS ​​спрайты" )

9
02 июня '10 в 18:55
источник

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

  • Создайте новый документ с теми же размерами вашего умножения слой.
  • Заполните документ черным цветом.
  • Добавьте векторную маску (значок слева от слоя "fx" в нижней части окна слоев).
  • Alt/Option + click на самой маске.
  • Теперь скопируйте и вставьте свой многослойный слой в маску.
  • Cmd/Ctrl + i, чтобы инвертировать только что вставленный слой.
  • Создайте новый слой под этим слоем и добавьте изображение за многократным наложением.
  • Все должно выглядеть довольно близко к вашему желаемому результату. При необходимости вы можете отредактировать opacity маскируемого слоя, который мы создали.
  • Когда он выглядит хорошо, просто переключите видимость нижнего слоя и сохраните маскированный слой как PNG et voila!

Все кредиты принадлежат Sojeong от https://superuser.com/questions/381704/multiply-blending-mode-to-png

5
10 дек. '12 в 18:13
источник

Проверьте это: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

Используя эти инструкции, я с большим успехом сделал водяной знак черно-белым изображением (чернилами в моем случае с черными и серыми на сплошном белом фоне) на темном фоне (дерево в моем случае). Существует практически никакой разницы с реальным фильтром Multiply Adobe.

Я использовал инструкции Photoshop, чтобы удалить белые из моего изображения, оставив только черные и серые на прозрачном фоне. Сохранение этого в PNG и размещение его на дереве в CSS/HTML по-прежнему выглядели намного хуже, чем многократно, но сильно уменьшая яркость PNG, разрешившего его (светлые серые выделялись раньше, делая его уродливым).

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

3
28 июля '12 в 19:37
источник

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

0
02 июня '10 в 18:00
источник

Посмотрите другие вопросы по меткам или Задайте вопрос