Wie wendet man einen transparenten Farbverlauf entlang jedes Segments einer Kurve an?

Angenommen, ich habe eine weiße Kurve auf schwarzem Hintergrund:

Geben Sie hier die Bildbeschreibung ein

Die Kurve hat einige Punkte, die sie in separate Segmente schneiden. Von Punkt A in der Linie, deren Deckkraft 100 % beträgt, nimmt die Transparenz allmählich zu und dann wieder ab, so dass beim Erreichen von Punkt B die Deckkraft wieder 100 % beträgt. Der Mittelpunkt des Segments wird daher am schwächsten sein. Je länger das Segment ist, desto Fader ist der Mittelpunkt. Dies wird für andere Segmente wiederholt.

Die Idee ist, dass, wenn ein Pendel im Dunkeln schwingt, es in den Extremen visuell am klarsten ist und sein Gleichgewichtspunkt am blasssten ist und die Flugbahn graduell von klar zu blass verläuft. Ich verwende Inkscape, aber Antworten für andere Tools sind willkommen, da ich denke, dass die Terminologie dieselbe ist.

Ein Beispiel wird von @Joonas bereitgestellt, außer dass der Schieberegler auf die 100% Deckkraftpunkte zeigt, nicht auf 0. Und ich weiß nicht, wie ich weitere Verlaufspunkte wie diese hinzufügen kann.

Wie kann ich diesen Effekt in einer Kurve machen?


Frag auch auf Reddit .

Ich bin mir nicht sicher, ob ich es verstehe. Möchten Sie einen Verlauf, der dem Pfad folgt? Das denke ich, nachdem ich den ersten Absatz nach dem Bild gelesen habe. Wenn ich den zweiten Absatz lese, verwirrt mich das nur. Möchten Sie einen Langzeitbelichtungsfotoeffekt in Inkscape vortäuschen?
Ja, ich möchte einen Farbverlauf, der dem Pfad folgt, aber die Punkte, die ich markiere, sollten immer am weißesten sein. Die Langzeitbelichtung erzeugt diesen Effekt, ist das richtig?
Sie meinen, sie sollten immer zu dem passen, was hinter ihnen steckt, oder so? Wenn Sie die Punkte weiß machen, kann nichts im Hintergrund weißer sein als das ...
ja sie sollten zu dem passen was dahinter steckt
Ich glaube nicht, dass das möglich ist, auch nicht mit Skripten. Ich könnte mich aber irren ... Ich habe Inkscape nie wirklich benutzt. — Ich verstehe aber nicht ganz warum... Möchten Sie den Streifen gerne verschieben und sehen, welche Position am besten aussieht, oder den Streifen auf vielen anderen Bildern oder Hintergründen verwenden? Oder können Sie Animationen in Inkscape erstellen? — Außerdem ist es wahrscheinlich nicht die beste Idee, den Langzeitbelichtungseffekt in einer Vektoranwendung zu machen. Gimp wäre besser für die Fotomanipulation (oder Photoshop). — Im Allgemeinen erzielen Sie mit einem Langzeitbelichtungsfoto den besten Effekt.
Keine solche Funktion in SVG, Sie könnten die Kurve aus mehreren Segmenten wie etwa 200 oder mehr erstellen und trotzdem den gleichen Effekt erzielen.
@Joonas Vielleicht den Streak verschieben, um zu sehen, was am besten ist? Ich möchte nur ein statisches Bild haben, und Inkscape kann keine Animationen erstellen. Der zweite Absatz soll nur meinen Standpunkt veranschaulichen; Wenn es so verwirrend ist, werde ich es entfernen.
@joojaa SVG kann das nicht? Aber warum nicht? Wie auch immer, wie macht man die Kurve aus mehreren Segmenten? Und ich kann trotzdem zu Gimp wechseln
Die Kombination aus ... dem Strich, den Sie dort haben, dem Wunsch, dass die Punkte des Verlaufs mit dem Hintergrund übereinstimmen, den Links zu Posts, in denen es um Langzeitbelichtungseffekte und die Verwendung von Inkscape geht, wirft mich ab. Es ist schwer, die Verbindung zwischen diesen Dingen zu finden. Vielleicht würde es helfen, wenn Sie ein Beispielbild zeigen könnten, was Sie tun möchten, und wir die Anwendung und alles andere vergessen ...
weil der Standard keine Anweisungen dazu enthält. Wie Sie Segmente erstellen, zeichnen Sie sie einzeln ein (oder schneiden Sie den ursprünglichen Pfad), entweder von Hand oder per Skript.
@joojaa Ich verstehe. Aber wie kann ich den Gradienten-Fading-Effekt in jedem Segment erzeugen?
@Joonas nein nein. Lass es uns erneut versuchen. Die Linie hat eine Verlaufstransparenz. Von Punkt A, dessen Lichtundurchlässigkeit 100 % beträgt, nimmt die Transparenz allmählich zu und dann wieder ab, so dass beim Erreichen von Punkt B die Lichtundurchlässigkeit wieder 100 % beträgt. Dies wird für andere Segmente wiederholt.
Oh, ich verstehe ... Sie möchten also einen Farbverlauf erstellen, der einem Pfad folgt. Also sowas in der Art , oder? — Ich habe sehr schnell gegoogelt und es scheint, als wäre das in Inkscape nicht möglich, aber wer weiß. Ich habe das in Illustrator gemacht. Es hat einen einfachen Schalter in den Verlaufseinstellungen: Apply gradient along stroke.
Nun ja und nein. Sie können jedes Segment zu einem linearen Farbverlauf machen. Oder machen Sie überhaupt keine Farbverläufe, wenn Sie 200 Segmente haben, verliert es an Bedeutung.
Ich weiß nicht, ob das einen Wert für Sie hat, aber ich habe meinem vorherigen Bild etwas hinzugefügt. Ich habe Linien gezeichnet, die vom Farbverlaufsregler von jedem 0-Deckkraftpunkt zu der Stelle gehen, an der sie auf dem Pfad landen. Ein weiteres Bild
@Joonas ja! Genau wie das. Ich möchte nur, dass der Schieberegler auf 100 Deckkraftpunkte zeigt, nicht auf 0. Aber ja, das ist es. Danke schön. Fehlt Inkscape im Allgemeinen Funktionen als Illustrator?
Nun, im Allgemeinen hat Inkscape mehr Funktionen. Es ist nur dadurch eingeschränkt, dass es ein SVG-Editor und seine Benutzeroberfläche ist. Am Ende ist Illustrator also in seinem Funktionsumfang relevanter. Auf jeden Fall haben beide Programme etwas willkürliche Funktionen.

Antworten (3)

Das SVG-Format bietet keine Unterstützung für einen Farbverlauf entlang eines Pfads, und Inkscape auch nicht, aber Sie können etwas Ähnliches mit einem Mesh-Verlauf* erhalten, indem Sie das Werkzeug „Create and Edit Meshes“ verwenden.

Hier ist zum Beispiel ein gestrichener Pfad, der mit Path > Stroke to Path in Konturen konvertiert wurde , dann wurde ein Mesh-Verlauf mit 5 Zeilen und Spalten angewendet und dann das Mesh bearbeitet.

Geben Sie hier die Bildbeschreibung ein

*Hinweis: Die Mesh-Verläufe von Inkscape werden derzeit nicht in Browsern unterstützt, daher wird dies nicht in einem SVG angezeigt, das in einem Browser angezeigt wird. Das kann sich jedoch mit der Zeit ändern. Es wäre jedoch immer noch möglich, die fertige Arbeit als Rasterbild zu exportieren, z. B. als PNG. Außerdem werden Mesh-Verläufe in PDFs unterstützt.

Bearbeiten:

Nachdem Sie gesehen haben, was Sie in Illustrator getan haben, gibt es eine andere Möglichkeit, dies in Inkscape zu erreichen, damit es in einem SVG in einem Webbrowser richtig gerendert wird.

Der Effekt ist einfach. Platzieren Sie einige mit radialen Farbverläufen gefüllte Kreise entlang eines Pfads und gruppieren Sie sie. Gruppieren Sie den schwarzen Hintergrund und den weißen Strich, um eine Maske zu erstellen. Bringen Sie die Maske an die Spitze des Stapels und wenden Sie die Maske auf die gruppierten Verlaufsobjekte an. Platzieren Sie es über einem anderen schwarzen Hintergrund.

Geben Sie hier die Bildbeschreibung ein

Warum kann SVG keinen Farbverlauf unterstützen? Ich dachte, dass das Format für irgendetwas berechenbar ist?
@Ooker SVG unterstützt Farbverläufe, aber nur Farbverläufe als Füllung, nicht als Farbverlauf entlang eines Pfads/Strichs. Es wurde nie umgesetzt. Und die Mesh-Gradient-Funktion hat es noch nicht in Webbrowser geschafft, aber das könnte sich in Zukunft ändern.
aber warum kann Illustrator das?
@Ooker, weil Illustrator auf PDF abzielt und PDF dies tun kann. Sobald SVG Verlaufsgitter gut unterstützt, können Sie diese Funktion in Inkscape anfordern. Wie ich schon sagte, wenn Sie an irgendein Feature denken, ist alles aus Ihrer Sicht rein zufällig, es sei denn, Sie verstehen, auf welches zugrunde liegende Rendering-Ziel die Anwendungen abzielen.
@joojaa Ich verstehe. Aber was ist der spezifische Grund, warum SVG Pfadgradienten nicht unterstützen kann?
@Ooker - Sie müssen diejenigen fragen, die an der Entwicklung des SVG-Formats beteiligt sind, warum sie in den SVG-Standards nie einen Farbverlauf entlang eines Pfads implementiert haben. Das können wir nicht wirklich beantworten. Ich vermute, es gibt wirklich keinen Grund, es wurde einfach nicht getan.
Kennen Sie eine Ressource für einen Anfänger wie mich, um schnell einen Überblick über die Formate, Standards, Ziele usw. zu erhalten?
@Ooker - Illustrator kann übrigens Farbverläufe entlang eines Pfads erstellen, es funktioniert jedoch nicht, wenn Sie es als SVG von Illustrator ausgeben. Es wird einfach der Farbverlauf gerastert, was nicht wirklich eine Lösung für das Problem ist.
@Ooker SVG-Standards fallen in den Zuständigkeitsbereich des W3C
@Ooker - nachdem Sie Ihren Versuch in Illustrator gesehen haben, gibt es eine andere Möglichkeit, dies in Inkscape zu tun und es tatsächlich in einem SVG funktionieren zu lassen. Siehe meine Bearbeitung meiner Antwort.
@Ooker die Menge der Dinge, die schön wären, ist unendlich groß. Sogar der Illustrator hat vor der CC-Version keine Farbverläufe auf Strichen unterstützt. Was Standards-Designer im Sinn haben, ist eine große Menge von Allzwecklösungen, in die schwierigere Probleme zerlegt werden können. Das Problem von SVG ist, dass es keinen Sinn macht, Funktionen hinzuzufügen, wenn niemand sie implementiert. Es wurde vorgeschlagen, dass das Verlaufsgitter jetzt auf genügend Browseranbieter wartet, um es zu implementieren. Bis dahin gibt es nicht viel Verwendung dafür. In diesem Sinne möchten Sie auf PDF abzielen, da Ihre Veröffentlichungen und SVG nicht so gut für den Druck geeignet sind
@BillyKerr, können Sie, wenn möglich, ein detailliertes Tutorial zum Anwenden des Netzes bereitstellen? Ich habe es entsperrt , aber ich kann immer noch nicht den ersten Schritt in Ihrem Beitrag machen
@Ooker Es gibt Online-Tutorials zur Verwendung des Mesh-Verlaufs. Einfach suchen. Wenn Sie dann immer noch Probleme haben, können Sie hier auf GDSE eine weitere Frage stellen

Endlich schaffe ich es:

  1. Aussehen der Kurve: Füllung: keine, Deckkraft: 100 %. Wählen Sie die Strichfarbe und klicken Sie auf Verlauf.

  2. Klicken Sie auf die Unterseite des Verlaufsreglers, um weitere Farbstopps hinzuzufügen. Gerade Stopps haben 100 % Deckkraft, ungerade Stopps 0 %. Schieben Sie alle Mittelpunkte so nah wie möglich an die 100 %-Anschläge.

  3. Damit die Deckkraft schneller abnimmt, fügen Sie zwischen zwei 100-Punkten zwei 0-Punkte hinzu und schieben Sie dann jeden 0-Punkt so nah wie möglich an ein Ende.

Das Ergebnis:


Weitere Informationen: Farbverläufe in Illustrator

Ich glaube, Sie müssen 48 Stunden warten und können dann Ihre eigene Antwort als richtig markieren. Möglicherweise möchten Sie illustratordie Tags jedoch ergänzen, da Sie zu Illustrator gewechselt sind.
Danke. Was mich wundert, ist, dass ich nur 3 volle Deckkraftstopps habe, aber insgesamt 5. Weißt du, warum?
Wie auch immer, Ihr Betrug, es ist eine gute Antwort, aber Sie haben den Umfang geändert. Ich wäre viel glücklicher, wenn Sie Ihren ursprünglichen Fragenbereich zurücknehmen und diese Frage mit Nein beginnen würden, aber der Illustrator kann dies tun. Weil Sie jetzt die Bemühungen von Billy Kerr ungültig machen. In beiden Fällen möchten Sie uns vielleicht stattdessen das gesamte Problem präsentieren, das Sie zu lösen versuchen. So konnten wir Ihnen ganz einfach erklären, wie Sie Ihr Problem angehen sollten.
Ooker, Sie können zwei Kurven übereinander haben.
@joojaa aber ich hab am anfang gesagt das ich keine software akzeptiere? Wie auch immer, es ist nicht so, dass ich das Problem nicht vollständig darstellen wollte, es ist so, dass ich praktisch keinen Begriff kannte, um es richtig zu nennen
@Ooker, um ehrlich zu sein, möchten Sie wirklich etwas wie Mathematik, psTricks oder so verwenden ...
@joojaa, aber ihnen fehlt der Fokus auf Ästhetik
@Ooker no mathetica hat sehr gut aussehende Standarddiagramme, die viel besser sind als das, was die meisten Grafikdesigner tun, weil sie so viel manuelle Arbeit leisten müssten
@joojaa, aber kann es die Maussteuerung in den Diagrammen zulassen?
@Ooker Ja, obwohl es ziemlich davon abhängt, was Sie steuern möchten. Es ist im Allgemeinen in den meisten Dingen flexibler, aber in anderen weniger nützlich.
@joojaa Ich habe bei Mathematica nachgefragt. Es wäre toll, wenn Sie es sich ansehen könnten: Wie macht man einen Farbverlauf transparent entlang einer Kurve?

  • Platzieren Sie das Bild
  • Fügen Sie hinter dem Bild ein schwarzes Rechteck als Hintergrund hinzu
  • Auswählen des Bildes > Aus dem Transparenzbedienfeld > Maske erstellen
  • Transparenzbereich > Klicken Sie auf das Maskenfeld, um es zu aktivieren
  • Machen Sie einen Kreis> füllen Sie ihn mit einem radialen Farbverlauf von Weiß nach Schwarz
  • Wählen Sie den Kreis aus und drücken Sie Altzum Duplizieren, verschieben Sie ihn
  • Wenn Sie fertig sind > Transparenzbereich > klicken Sie auf den Bearbeitungsbereich (das linke Quadrat)

KI-MASKE


Schamlos kopiert von Danielillos Antwort von How to make multiple sneak peak hole?

Wie wendet man einen transparenten Farbverlauf entlang jedes Segments einer Kurve an?
AntwortenHierDatenschutz-Bestimmungen1y, 0v