wake-up-neo.com

So replizieren Sie den PS-Multiplikationsmodus

Kennt jemand eine gute Möglichkeit, den Multiplikations-Ebenenmodus von Photoshop entweder mit einem Bild oder mit CSS zu replizieren?

Ich arbeite an einem Projekt, das Miniaturansichten enthält, die eine Farbüberlagerung erhalten, wenn Sie den Mauszeiger darüber bewegen, aber der Designer verwendete einen Layer-Satz, um sich zu multiplizieren, und ich kann nicht herausfinden, wie er im Web produziert werden kann.

Das Beste, was ich mir ausgedacht habe, ist entweder rgba oder ein transparentes png, aber selbst dann sieht es nicht richtig aus.

cssimageoverlayphotoshoprgba
48
Andrew Philpott

Es wurden neue CSS-Eigenschaften eingeführt, die genau dies tun, nämlich blend-mode und background-blend-mode.

Derzeit können Sie sie in keiner Produktionsumgebung verwenden, da sie sehr neu sind und derzeit nur von Chrome Canary (experimenteller Webbrowser) und Webkit Nightly unterstützt werden.

Diese Eigenschaften sind so eingestellt, dass sie fast genau wie die Mischmodi von Photoshop funktionieren. Sie können verschiedene Modi als Werte für diese Eigenschaften festlegen, wie zum Beispiel overlay, screen, lighten, color-dodge und natürlich multiply ...

blend-mode würde zulassen, dass Bilder (und möglicherweise auch Inhalte? Ich habe bisher noch nichts davon gehört.), die übereinander geschichtet sind, um diesen Mischeffekt anwenden zu können.

background-blend-mode wäre ziemlich ähnlich, wäre aber für Hintergrundbilder gedacht (festgelegt mit background oder background-image) und nicht für tatsächliche Bildelemente.

EDIT: Der nächste Abschnitt wird mit zunehmender Browserunterstützung ein wenig irrelevant. Sehen Sie in dieser Tabelle nach, welche Browser dies unterstützen: http://caniuse.com/#feat=css -Mischungsmodus

Wenn Sie die neueste Version von Chrome auf Ihrem Computer installiert haben, können Sie diese Stile tatsächlich sehen, indem Sie einige Flags in Ihrem Browser aktivieren (werfen Sie diese einfach in Ihre Adressleiste :)

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

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

Aktivieren Sie diese bösen Jungs, und überprüfen Sie diese Geige: http://jsfiddle.net/cqzJ5/(Wenn die Stile in Ihrem Browser ordnungsgemäß aktiviert sind, sollten die beiden Bilder gemischt werden, um sie herzustellen die Szene sieht aus wie es unter Wasser ist)

Obwohl dies aufgrund der fast gänzlich nicht vorhandenen Unterstützung für diese Funktion im Moment möglicherweise nicht die legitimeste Antwort ist, können wir hoffen, dass moderne Browser diese Eigenschaften in naher Zukunft übernehmen werden, was uns eine wirklich nette und einfache Lösung für dieses Problem gibt .

Einige zusätzliche Lesequellen für Mischmodi und die CSS-Eigenschaften:

23
Blake Mann

Einfach mit etwas 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>

und ein paar CSS:

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

Die Geige: http://jsfiddle.net/7uCQQ/381/

18
tnt-rox

Nur um das festzuhalten, der Kerl entwickelt dafür eine Bibliothek. Ich bin gerade recherchiert und habe es noch nicht versucht.

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

17
Tolomelli

Mit einem 24.png ist es möglich - wenn Sie den Trick kennen.

In Illustrator können Sie die Grafik als 24.png exportieren, aber dies scheint nie zu multiplizieren.

Ich habe weg gefunden.

  1. holen Sie sich Ihre multiplizierte Grafik von alleine
  2. setzen Sie eine durchgehende schwarze Box mit 100% dahinter und wählen Sie beide Grafiken aus
  3. wählen Sie im Transparenzfenster 'Make Mask' und dann 'Invert Mask'.
  4. export als 24.png-Datei

funktioniert genauso wie ein Multiplikator, wenn z-index (ed) oben auf einem Bild angezeigt wird.

11
user1861969

Eine solche Fähigkeit ist nicht verfügbar. Die einzigen Compositing-Optionen, die Sie erhalten, sind sogar in der Nähe:

  • lighter Compositing-Modus auf einem HTML5-<canvas> (dies ist a + b nicht a * b und hat ungefähr den gegenteiligen Effekt zur Multiplikation)

  • min oder subtractCompositor filtern nur in IE.

Weder ist wirklich praktisch.

Im Allgemeinen sollten Sie nicht versuchen, Photoshop-Kompositionen als Ebenen zu exportieren, sondern sie in ein einzelnes undurchsichtiges Bild rendern. Für Rollovers können Sie zwei Bilder erstellen (eines für den Normalzustand, eines für den Hover-Modus) und zwischen ihnen mit dem CSS-Code :hover wechseln, um ein anderes Hintergrundbild auszuwählen. Oder besser, da kein Vorladen erforderlich ist und HTTP-Anforderungen reduziert werden zu einem und verwenden Sie background-image/background-position, um den rechten Teil dieses Bildes in jedem Status als Hintergrundbild anzuzeigen. ("CSS-Sprites")

9
bobince

Ich hatte vor kurzem die Notwendigkeit, genau das zu tun, was das OP gefragt hat, also habe ich herumgesucht. Ich habe eine großartige Möglichkeit gefunden, den Multiplikatoreffekt durch Erstellen eines transparenten PNG-Bilds in Photoshop zu replizieren.

  1. Erstellen Sie ein neues Dokument mit den gleichen Abmessungen Ihrer multiplizierten Schicht
  2. Füllen Sie das Dokument mit Schwarz.
  3. Fügen Sie eine Vektormaske hinzu (das Symbol links neben der Ebene "fx" am unteren Rand des Ebenenfensters).
  4. Alt/Option + click auf der Maske selbst.
  5. Kopieren Sie nun Ihre Multiplikationsebene in die Maske.
  6. Cmd/Ctrl + i, um die gerade eingefügte Ebene zu invertieren.
  7. Erstellen Sie eine neue Ebene unter dieser Ebene und fügen Sie das Bild hinter der multiplizierten Überlagerung hinzu.
  8. Alles sollte dem gewünschten Ergebnis sehr nahe kommen. Bei Bedarf können Sie die opacity der von uns erstellten maskierten Ebene anpassen.
  9. Wenn es gut aussieht, schalten Sie einfach die Sichtbarkeit der unteren Ebene um und speichern Sie die maskierte Ebene als PNG et voila!

Alle Gutschriften gehen an Sojeong von https://superuser.com/questions/381704/multiply-blending-mode-to-png

5
cfx

Schauen Sie sich das an: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

Mit diesen Anweisungen hatte ich großen Erfolg, ein Schwarzweißbild (Tintezeichnung in meinem Fall, mit Schwarz und Grau auf einem durchgehend weißen Hintergrund) auf einen dunklen Hintergrund (in meinem Fall Holz) zu kennzeichnen. Beim echten Multiply-Filter von Adobe gibt es kaum Unterschiede.

Ich habe die Photoshop-Anweisungen verwendet, um das Weiß aus meinem Bild zu entfernen und nur Schwarz und Grau auf einem transparenten Hintergrund zu hinterlassen. Dies in PNG zu speichern und in CSS/HTML auf das Holz zu setzen, sah immer noch viel schlimmer aus, als wenn man die Helligkeit des PNG stark reduziert hätte (das Lichtgrau fiel auf und war hässlich).

Im Allgemeinen empfehle ich, in Photoshop herumzuspielen und die Websituation zu simulieren: eine halbtransparente Schicht (kein spezielles Material) auf einem festen Hintergrund. In Tutorials wie dem obigen können Sie Multiplikations- oder andere Effekteffekte reproduzieren.

3
Bart Van Hove

Nicht sicher, ob Sie Glück haben werden. Soweit ich weiß, ist es nicht möglich, selbst wenn Sie versucht haben, fortgeschrittenes JavaScript zu integrieren.

0
kilrizzy