Как тиражировать режим PS multiply layer - PullRequest
48 голосов
/ 02 июня 2010

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

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

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

Ответы [ 8 ]

23 голосов
/ 09 января 2014

Для этой цели вводятся новые 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:

18 голосов
/ 06 января 2014

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

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

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

11 голосов
/ 29 ноября 2012

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

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

Я нашел прочь.

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

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

9 голосов
/ 02 июня 2010

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

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

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

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

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

5 голосов
/ 10 декабря 2012

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

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

Весь кредит поступает в Соджон с https://superuser.com/questions/381704/multiply-blending-mode-to-png

3 голосов
/ 28 июля 2012

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

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

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

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

0 голосов
/ 02 июня 2010

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

...