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

Question

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

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

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

Answer 1

Для этой цели вводятся новые свойства CSS. blend-mode и background-blend-mode.

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

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

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

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

---

РЕДАКТИРОВАТЬ:Следующий раздел становится немного неактуальным, поскольку поддержка браузеров растет.Проверьте эту таблицу, чтобы узнать, какие браузеры поддерживают это: 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/

Answer 2

Просто с небольшим количеством 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/

Answer 3

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

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

Answer 4

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

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

Я нашел.

1. Получите свой умноженный график самостоятельно
2. Поместите твердую черную 100% -ную коробку позади этого и выберите обе графики
3. В окне прозрачности выберите «Сделай маску», а затем «Инвертируйте маску»
4. Экспорт как файл 24.png

Работает так же, как умножение, когда Z-Index (ED) поверх изображения.

Answer 5

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

• lighter Режим композиции на HTML5 <canvas> (который является A+B, а не A*B, и имеет примерно противоположный эффект для умножения)

• min или же subtract Compositor Фильтры только в IE.

Ни один из них не практично.

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

Answer 6

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

1. Создайте новый документ с теми же размерами, что и ваш слой умножения.
2. Заполните документ черным.
3. Добавьте векторную маску (значок слева от слоя «fx» в нижней части окна слоев).
4. Alt/Option + click на самой маске.
5. Теперь скопируйте и вставьте свой слой мультипта в маску.
6. Cmd/Ctrl + i Чтобы инвертировать слой, который вы только что вкляли.
7. Создайте новый слой под этим слоем и добавьте изображение за наложением умножений.
8. Все должно выглядеть довольно близко к вашему желаемому результату. При необходимости вы можете настроить opacity из слоя в масках, который мы создали.
9. Когда он выглядит хорошо, просто переключите видимость нижнего слоя и сохраните слой в маске как вуаля!

Весь кредит идет в Sojeong от https://superuser.com/questions/381704/multiply-mode-mode-to-png

Answer 7

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

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

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

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

Answer 8

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