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

Ответ 1

Появляются новые свойства 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:

• http://blogs.adobe.com/webplatform/2013/06/24/css-background-blend-modes-are-now-available-in-chrome-canary-and-webkit-nightly/
• http://demosthenes.info/blog/707/PhotoShop-In-The-Browser-Understanding-CSS-Blend-Modes
• http://html.adobe.com/webplatform/graphics/blendmodes/

Ответ 2

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

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

Ответ 3

Простой с немного 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/

Ответ 4

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

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

Я нашел.

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

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