Texturüberlagerung

Stellen Sie sich vor, ich verwende es für das Web und kann die Mischmodi nicht verwenden

Nun, warum würdest du gehen und so etwas Dummes sagen? Es gibt ein paar Optionen, aus denen Sie wählen können. Ein Live-Beispiel finden Sie hier .

1. CSS-Hintergrundfarbe + PNG

Der einfachste Weg ist, dem div einfach eine Hintergrundfarbe zu geben, kombiniert mit einem halbtransparenten PNG. Etwas wiebackground: red url(semi-transparent.png);

2. CSS-Hintergrundstapelung

Da Sie mehr als einen durch Kommas getrennten Hintergrund hinzufügen können, können Sie halbtransparente PNGs problemlos mischen. Zum Beispiel:background: url(image1.png), url(image2.png);

3. Tricks mit CSS-Pseudoelementen

Wenn Sie aus irgendeinem Grund Hintergründe nicht stapeln möchten, zum Beispiel weil Sie die Positionierung der einzelnen PNGs steuern möchten, können Sie die Pseudo-Elemente :beforeund :afterverwenden, um halbtransparente PNGs zu stapeln.

4. CSS-Hintergrund-Mischmodus

Funktioniert so:

background-image: url(image.jpg);
background-color:red;
background-blend-mode: multiply;

Multiplizieren ist nett und nützlich, aber es gibt auch: Screen, Overlay, Darken, Lighten, Color-Dodge, Color-Burn, Hard-Light, Soft-Light, Differenz, Ausschluss, Farbton, Sättigung, Farbe und Helligkeit. Und auch normal, was es zurücksetzen wird.

5. CSS-Mix-Mischmodus

Einfach verschiedene Elemente übereinander positionieren und mix-blend-mode: multiply;zum Beispiel verwenden. Verwendet die gleichen Argumente wie Background-Blend-Mode, soweit ich das beurteilen kann.

6. Leinwand-Mischmodi

So:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';

7. SVG

Sie können einen Filter wie folgt angeben <defs>:

<filter id="f1" x="0" y="0" width="1" height="1">
  <feImage xlink:href="#p1" result="p1"/>
  <feImage xlink:href="#p2" result="p2"/>
  <feBlend mode="multiply" in="p1" in2="p2" />
</filter>

Nummer 5 (Mix-Blend-Mode) sollte auch mit SVG funktionieren, daher ist es möglich, Klassen für die SVG-Elemente zu verwenden und den Blend-Modus mit CSS festzulegen.

8. CSS-Filter

Mit ein wenig Kreativität lassen sich Filter wie „Farbton drehen“ und „Helligkeit“ kombinieren, um einen farbigen Effekt auf einem Element zu erzielen.

Ich gebe offen zu, dass einige davon exotischer sind und noch nicht in allen Browsern vollständig unterstützt werden. Das sollte Sie nicht davon abhalten, sie zu verwenden, solange Sie eine ordnungsgemäße Degradation sicherstellen.

Weiterführende Literatur finden Sie hier:

• CSS-Tricks Grundlagen des Blending
• MDN im Hintergrund-Mischmodus
• MDN im Mix-Blend-Modus

OK. Ich verstehe die Einschränkung "Kein Mischmodus" nicht ganz.

Lassen Sie mich zwei Ansätze untersuchen. Dies alles wird in CorelDraw erstellt, aber die Idee gilt für jedes Programm.

A. Richtig maskieren. Bei diesem 3D-Objekt ist eine realistische Maskierung wichtig.

B. Erstellen Sie mit dieser Maske eine neue Ebene und entsättigen Sie sie.

C. Spielen Sie mit den Ebenen, um mehr Kontrast zu schaffen.

D. Wenden Sie jetzt eine Farbe an. Sie können mit den Kurven spielen oder ein transparentes Objekt darüber hinzufügen. Da dieser Hintergrund jetzt kontrastreicher ist, haben Sie immer noch Schatten und Lichter.

Folgendes habe ich in einem der Clip-Objekte:

Aber mit Mischmodi haben Sie eine glücklichere Farbe. Das machen Mischmodi.

Und dies ist eine einfache Manipulation mit Kurven auf einem Kanal im Graustufenabschnitt.

Frequenztrennung

Die zweite Option ist die Frequenztrennung, bei der Sie mit der Farbe in der Tiefpassebene spielen. https://www.google.com/search?q=frequency+separation+photoshop

Der Hochpass behält die Textur bei.

Und das ist nur, um mit dem Bild herumzuspielen.

Ich bin mir nicht sicher, was Ihre Projektspezifikationen sind, aber ich bin sicher, dass Sie keinen "Mischmodus" in Ihr PNG exportieren können. Da dies nicht in Frage kommt, bleiben Ihnen nur "Hacks", um zu simulieren, was Sie wollen.

Die offensichtlich einfache Antwort ist, einfach die Textüberlagerung mit geeigneten Mischoptionen in Photoshop zu erstellen und dann das PNG zu speichern. Aber wenn Sie möchten, dass der Text eine vom Kürbis getrennte Datei ist, dann würde ich versuchen, es so anzugehen.

Importieren Sie Ihr Kürbisbild, erstellen Sie eine neue Ebene und ändern Sie den Mischmodus, damit Sie diese leuchtenden Farben erzielen, aber die Textur beibehalten.

Erstellen Sie nun eine Ebenenmaske für den Kürbis, sodass nur die Teile sichtbar sind, die der Text verdeckt.

Exportieren Sie jetzt Ihr PNG und geben Sie es Ihrem Webentwickler (ich nehme an, da Sie davon gesprochen haben, dass es für das Web ist).

Ich habe eine einfache HTML-Seite erstellt und sowohl Bilder (Kürbishintergrund) als auch Text platziert, dann habe ich den Text mit CSS-Regeln über dem Kürbis platziert und der Effekt ist in Ordnung.

Die schlechte Seite (oder der Nachteil) dieser Methode, um Ihr Ziel zu erreichen, ist, dass die Overlay-Textur genau an der gleichen Position auf dem Kürbis platziert werden muss, wie Sie sie in Ihrem Photoshop-Projekt hatten, damit sich die Texturen ausrichten und richtig aussehen können.

Hoffe das hilft ein bisschen.