Wie erstelle ich Vektorgrafiken in Photoshop?

^{Hinweis: Diese Antwort wurde ursprünglich im Jahr 2013 geschrieben, als SVG eine „neuere“ Option in Photoshop war und bevor Photoshop die Möglichkeit hatte, „Assets zu exportieren“. Die Unterstützung für SVG hat in den letzten zehn Jahren zugenommen. Obwohl ich immer noch glaube, dass Photoshop nicht das richtige Werkzeug ist, wenn Sie mehr als flache Symbole in Vektorform wollen, ist es möglich, SVG-Dateien zu exportieren, die zu 100% aus Photoshop stammen - siehe Anhang am Ende der Antwort. Ich würde Benutzern empfehlen, zu versuchen, Vektorkonstruktionen unterschiedlicher Komplexität in SVG zu exportieren, um zu sehen, was in den Exporten möglicherweise beibehalten wird oder nicht, wenn das SVG-Format für ihren Workflow überhaupt geeignet ist (was möglicherweise nicht der Fall ist).}

TL;DR: Mit Ausnahme des rudimentären SVG-Exports *(Siehe Anhang unten).... Photoshop kann keine echten, 100% auflösungsunabhängigen Vektordateien in irgendeinem anderen Format erstellen.

Dies ist ein sehr verbreiteter Irrtum.

Stellen Sie es sich wie ein Auto vor. -- Kann man mit einem Toyota Prius 4-Rad fahren? Sicher kannst du ! Wird es all die Dinge tun, die ein Jeep Wrangler tun kann? Mist nein. Es gibt einen Grund , warum Sie ein Fahrzeug mit Allradantrieb verwenden müssen , um mit dem Allrad zu fahren, genauso wie es einen Grund gibt, warum Sie eine Vektoranwendung verwenden müssen , um Vektordateien zu erstellen.

^{*(Ausgenommen SVG – siehe Anhang unten)}

Unabhängig davon, wie Sie eine Datei erstellen und speichern, speichert Photoshop immer sowohl Vektor- als auch Rasterinformationen . Photoshop-Dateien sind immer Rasterdateien, die auch eingebettete Vektordaten enthalten können oder nicht. Sie sind niemals Vektordateien.

Eine echte Vektordatei enthält keine Rasterdaten und ist zu 100 % auflösungsunabhängig. Das bedeutet, dass die Datei nicht an eine PPI/DPI-Einstellung gebunden ist.

Sie können mit Photoshop keine Vektordateien erstellen . Sie können nur Rasterdateien mit einigen eingebetteten Vektordaten erstellen. Dies bedeutet, dass es möglicherweise ein Vektorquadrat gibt und seine Kanten scharf und klar bleiben, wenn dieses Quadrat jedoch eine Farbverlaufsfüllung hat. Diese Verlaufsfüllung ist in Photoshop vollständig gerastert und leidet unter der Skalierung in einem externen Tool / einer externen Software.

Anwendungen wie Illustrator, Inkscape, CorelDraw, Xara, Sketch usw. können tatsächlich Dateien erstellen, die nur zu 100 % auflösungsunabhängige Vektordaten enthalten. Es geht nicht darum, dass "die Leute es vorziehen", eine Vektoranwendung zu verwenden. Es ist erforderlich, wenn Sie am Ende eine echte Vektordatei wünschen.

Das soll nicht heißen, dass die Vektorwerkzeuge in Photoshop insgesamt minderwertig sind, im Allgemeinen sind sie es nicht. Obwohl tatsächliche vektorbasierte Anwendungen absolut robuster sein werden, wenn es um die Erstellung von Vektordaten geht.

Ja, Sie können mit den Vektorwerkzeugen in Photoshop zeichnen und Vektorinhalte erstellen. Aber um den wirklichen Nutzen aus diesem Vektorinhalt in Photoshop zu ziehen, müssen Sie für alle zukünftigen Änderungen immer Photoshop verwenden.

Wenn Sie einen Vektorcontainer in Photoshop vergrößern oder transformieren, interpoliert Photoshop die inneren Rasterdaten entsprechend der Transformation. Diese Interpolation findet außerhalb von Photoshop nicht statt. Wenn man also nach dem Exportieren/Speichern so etwas wie ein Photoshop-EPS in InDesign skaliert, werden die Vektorkanten skaliert und bleiben scharf, weil sie Vektoren sind, aber die Interpolation der inneren Rasterdaten erfolgt nicht außerhalb von Photoshop. Daher sind "gebrochene Pixel" mit einem Photoshop-EPS durchaus möglich, obwohl Sie Vektorwerkzeuge verwendet haben.

Dieses Problem tritt auf, wenn Sie die Datei speichern oder die Photoshop-Datei in allen vektorfähigen Formaten – PDF, EPS, PSD – exportieren. Photoshop erstellt eine Rasterdatei mit eingebetteten Vektordaten . Photoshop erstellt keine Vektordatei . Dies ist völlig anders als bei tatsächlichen vektorbasierten Anwendungen.

Für Produktionszwecke ist dieser Unterschied möglicherweise weitgehend unwichtig, wenn Sie in Photoshop bereits mit hohem ppi arbeiten. Ein Benutzer sollte sich jedoch darüber im Klaren sein, dass die einfache Verwendung der Vektorwerkzeuge von Photoshop und das Speichern als EPS/PDF keine Vektordateien mit einer derzeit verfügbaren Version von Photoshop (CC2022 zum Zeitpunkt dieses Schreibens) erstellt.

Mir ist klar, dass einige Benutzer möchten, dass Photoshop Vektordateien erstellt, da dies bedeutet, dass sie keine neue Anwendung erlernen müssen, um ein neues Dateiformat zu generieren. Es führt jedoch kein Weg daran vorbei. Wenn Sie echte Vektordateien möchten , müssen Sie eine aktuelle Vektoranwendung verwenden. Photoshop ist und war schon immer eine Rasteranwendung .

• Verwandte Themen: Ist eine Photoshop-EPS-Datei ein Vektorformat?

^* Nachtrag bezüglich SVG:

Es gab einige Kommentare zu SVG aus Photoshop. Es ist möglich, eine zu 100 % auflösungsunabhängige Vektor-SVG aus Photoshop zu exportieren, wenn die Dateikonstruktion korrekt ist. Die Gesamtkonstruktion eines solchen SVG muss im Allgemeinen ziemlich rudimentär und ohne Ebenenstile, Filter, Weichzeichner usw. sein. SVG funktioniert nur, wenn die Dateien so "einfach" wie möglich sind, nur flache Füllungen/Striche enthalten und keine komplexen Forminteraktionen enthalten oder maskieren. Außerdem kann es eine andere Frage sein, ob SVG ein geeignetes Format für eine bestimmte Reproduktionsmethode ist oder nicht. Wenn man jedoch etwas wie Flach, eine Farbe, Vektorsymbole, Photoshop erstellen möchtekann geeignet sein, wenn beim Export das SVG-Format verwendet wird. Es gibt jedoch immer noch einige starke Einschränkungen hinsichtlich dessen, was für einen praktikablen Vektorexport erstellt werden kann.

Ich würde jedoch warnen ... wenn das Ziel darin besteht, echte Vektordateien zu generieren, sollte man wirklich eine echte Vektoranwendung verwenden. Obwohl ich Photoshop liebe und es sicherlich viele, viele Dinge schaffen kann. Es ist nicht das A und O für alles. Photoshop kann auch Videos exportieren, aber seine Fähigkeiten verblassen im Vergleich zu dedizierten Videoanwendungen, genauso wie sie im Vergleich zu Vektor-Apps verblassen. Wenn Sie ein robustes, aufwendig bearbeitetes und produziertes Video wünschen, wäre Photoshop kein Tool, das Sie anstelle von Adobe Premiere verwenden könnten. Sie würden Premiere für mehr als nur sehr einfache Videobearbeitungen verwenden, genauso wie Sie Illustrator verwenden sollten, wenn Sie robustere Vektordateien wünschen.

Chippin' in, falls jemand noch Vektorelemente in Photoshop erstellen möchte (zum Beispiel mit Rasterbildern oder für andere Situationen).

Das Werkzeug, mit dem Photoshop mit Vektorgrafiken arbeiten kann, ist das Stiftwerkzeug . Die grundlegende Bedienung des Stiftwerkzeugs besteht darin, auf der Photoshop-Leinwand herumzuklicken, damit Punkte erscheinen. Diese Punkte werden durch Linien verbunden und beginnen, eine Form zu erstellen.

Im Vergleich zu anderen Programmen (wie Illustrator) sind es die Dinge, die Sie MIT den Formen machen können, nachdem Sie sie gezeichnet haben, was irgendwie fehlt. Mit Photoshop können Sie Knoten zeichnen, ändern und damit spielen, sie zu kombinieren, zu schneiden oder zu subtrahieren, aber Sie können keine komplexeren Operationen ausführen.

Die Adobe-Foren bieten eine sehr vollständige Anleitung für die ersten Schritte mit dem Stiftwerkzeug .

Sie KÖNNEN die von Ihnen erstellten Pfade in eine Illustrator-Datei exportieren, aber die grundlegende Ansicht ist, dass Photoshop für Rasterbilder und Illustrator für Vektorbilder erstellt wurde. CorelDraw macht beides in einem Programm, aber der Nachteil ist, dass es nicht so gut ist wie Adobe, imo.

Ich denke, dieser Thread braucht eine Zusammenfassung, sonst könnten die Leser immer noch verwirrt sein. Den meisten Lesern ist es egal, ob es sich bei den Ergebnissen um „echte EPS“- oder „echte Vektordateien“ handelt, sie wollen einfach nur etwas erledigen. Sie sollten sich jedoch der Grenzen und Beschränkungen bestimmter Techniken bewusst sein. Hier sind die Schlüsselkonzepte in den Antworten:

1. Photoshop ist ein pixelbasiertes (rasterbasiertes) Bildverarbeitungstool mit einigen Vektorfunktionen. Es wurde ursprünglich entwickelt, um pixelbasierte Bilder (z. B. Digitalfotos) zu manipulieren und zu speichern, ist aber zu einem viel flexibleren Werkzeug gereift.

2. Illustrator ist ein vektorbasiertes Bildverarbeitungstool mit einigen Rasterfunktionen. Vektorbasierte Bilder speichern keine Pixelinformationen, sie speichern das Bild als Daten, die von einem vektorbasierten Bildzeichenprogramm interpretiert werden.

3. Beide Arten von Bilddateien erfordern ein Computerprogramm, um die Dateidaten für die Anzeige oder den Druck vorzubereiten, aber letztendlich erfordert der Drucker oder Computer, dass das Bild im Pixelformat vorliegt. Folglich erfordern vektorbasierte Dateien mehr Verarbeitung. Der wichtigste Kompromiss zwischen Vektorformat und Pixelformat besteht darin, dass Vektorformate so skaliert werden können, dass sie in einer Vielzahl von Auflösungen gut aussehen. Pixelformate leiden, wenn sie in anderen Auflösungen als der Auflösung angezeigt werden, in der sie erstellt wurden. Pixelformate erfassen kleine Details und subtile Änderungen im Bild viel besser als Vektorformate. Daher eignen sich Pixelformate besser für Fotos oder realistische Gemälde, und Vektorformate eignen sich besser für Logos und einfache web- und mobilbasierte Kunst.

4. Da die beiden Formate komplementäre Stärken haben, ist es sinnvoll, beide zu verwenden. In diesen Fällen können Sie Ihre Bilder sowohl mit Photoshop als auch mit Illustrator (oder CorelDraw – beides) erstellen und bearbeiten, oder Sie können die Vektorwerkzeuge in Photoshop oder die Rasterwerkzeuge in Illustrator verwenden. Der beste Ansatz wird von Fall zu Fall bestimmt. Die offensichtliche Richtlinie besteht darin, das primäre Tool basierend auf dem erforderlichen Ausgabeformat auszuwählen.

5. Wenn Sie Vektorwerkzeuge für ein pixelbasiertes Bild in Photoshop verwenden möchten, können Sie dies mit dem Stiftwerkzeug oder mit Photoshop Generate tun. Sie können dann die Vorteile der Entwicklung mit Vektorgrafiken entweder in Photoshop nutzen oder die Vektorgrafiken in Illustrator exportieren. Nachdem Sie Illustrator verwendet haben, können Sie die Grafik wieder in Photoshop einfügen, wenn Sie beabsichtigen, sie letztendlich in einem pixelbasierten Format zu speichern.

Der Generator von Photoshop kann in einigen begrenzten Fällen SVGs speichern (ja, richtige, reine Vektor-SVGs, die auf in Photoshop erstellten Formebenen basieren). Sie benötigen jedoch Photoshop CC 2014.2 (oder 2014.1), um dies zu tun.

Hilfe von Adobe: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Dieses Photoshop-Dokument:

Dieses SVG erstellt:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="272" height="245" viewBox="0 0 272 245">
  <defs>
    <style>
      .cls-3 {
        fill: #fc6665;
      }
    </style>
  </defs>
  <g id="vectorsvg">
    <circle id="circle-1" class="cls-3" cx="50" cy="50" r="50"/>
    <rect id="rect-1" class="cls-3" x="72" y="145" width="200" height="100"/>
  </g>
</svg>