Viele der dramatischsten Änderungen bei der Verwendung von Illustrator finden im Bereich der Übersetzung von Vektorbildern in das Web statt, und das unterschätzte SVG-Format ist das Schlüsselglied in diesem Prozess. SVG-Dateien behalten die geschätzten Skalierbarkeitsfunktionen von Vektorgrafiken bei und werden fast universell in Websites und Webentwicklungsumgebungen unterstützt. Wenn Sie Vektorgrafiken für das Web vorbereiten, ist es wichtig, die Standardeffekte von Illustrator zu vermeiden und stattdessen SVG-Filter zu verwenden.
Illustrator wird mit einem anständigen, aber minimalistischen Satz von SVG-Filtern geliefert, aber hier sind einige Tipps zum Auffinden und Hinzufügen von SVG-Filtern sowie Ressourcen zum Erstellen eigener SVG-Filter. Für diejenigen, die mit Web- und App-Entwicklern zusammenarbeiten, können Sie ihr Leben einfacher und produktiver machen, indem Sie sich den Spickzettel für die Übergabe von SVG-Code ansehen.
So wenden Sie SVG-Filter in Illustrator an
Wenn Sie in Illustrator SVG-Dateien für Bildschirme erstellen und Effekte (wie Schlagschatten) anwenden möchten, sollten Sie diese als SVG-Filter anwenden. Auf diese Weise behalten Ihre SVG-Dateien eine unendliche Skalierbarkeit ohne Verzerrung.
Die folgenden Schritte führen Sie durch das Anwenden eines SVG-Filters auf Grafiken in Illustrator:
Wählen Sie die Objekte aus, auf die Sie den Filter anwenden.
Wählen Sie Effekt→SVG-Filter.
Wählen Sie einen Filter aus der angezeigten Liste aus.
Die meisten Filter haben beschreibende Namen. Zum Beispiel sind die mit Schatten im Namen Schlagschatten, die mit Gauß im Namen sind Gaußsche Unschärfen. Der Workflow ist etwas seltsam und umständlich, aber Sie müssen zuerst einen Filter auswählen, um auf alle verfügbaren Optionen zum Anwenden eines Filters zuzugreifen.
So ändern Sie den ausgewählten Filter:
- Lassen Sie das Objekt, auf das der Filter angewendet wurde, ausgewählt und öffnen Sie das Erscheinungsbild-Bedienfeld, indem Sie Fenster → Erscheinungsbild wählen.
- Klicken Sie im Erscheinungsbildbedienfeld auf den SVG-Filter, der im Bereich „Füllung“ des Bedienfelds angezeigt wird. Das Bedienfeld „SVG-Filter anwenden“ wird geöffnet.
- Ändern Sie im Bedienfeld „SVG-Filter anwenden“ den angewendeten Filter.
- Um zu sehen, wie der Filter aussehen wird, aktivieren Sie das Kontrollkästchen Vorschau, wie in der Abbildung gezeigt.
Nachdem Sie sich für einen Filter entschieden haben, klicken Sie im Bereich SVG-Filter anwenden auf OK.
So fügen Sie SVG-Filter zu Illustrator hinzu
Der SVG-Filtersatz von Illustrator ist minimalistisch, aber Sie können ihn verbessern, indem Sie Ihre eigenen Filter entwerfen oder vorgefertigte SVG-Filtersätze aus Online-Quellen herunterladen. Das Entwerfen von Filtern erfordert Codierung, aber es ist machbar, wenn Sie mit HTML vertraut sind. Ich empfehle das Tutorial bei w3Schools zum Erstellen von SVG-Filtern. Oder Sie können Filtersätze online kaufen und bei Creatingo sogar einige nette Sätze kostenloser SVG-Filter finden .
Nachdem Sie Ihre eigenen SVG-Filter gekauft oder erstellt haben, installieren Sie sie wie folgt in Illustrator:
Wählen Sie Effekt→SVG-Filter→SVG-Filter importieren.
Navigieren Sie im sich öffnenden Dialogfeld zu der SVG-Filterdatei, die Sie erstellt oder kostenlos heruntergeladen haben, und doppelklicken Sie darauf.
Die gesuchte Datei sollte eine SVG-Datei sein (mehrere Filter sind in einer einzigen SVG-Datei gebündelt).
Ihre neuen Filter sind jetzt im Untermenü SVG-Filter verfügbar.
Wählen Sie Effekt→SVG-Filter, um Ihre neuen Filter auf ausgewählte Objekte anzuwenden.
So übergeben Sie SVG-Code von Illustrator an einen Entwickler
Häufig werden die in Illustrator erstellten SVG-Grafiken an Spieledesigner, Animatoren, Infografiken oder andere Ausgaben weitergegeben, wo Entwickler mit dem Code hinter der SVG-Grafik arbeiten. Als Illustrator müssen Sie nicht wissen, wie Sie diesen Code erstellen, aber Sie müssen möglicherweise wissen, wie Sie ihn erhalten und einem Entwickler übergeben. Hier ist wie.
Der Weg zum Exportieren Ihrer SVG-Grafiken als Code läuft über die Speicherfunktionen von Illustrator. Das Menü Speichern enthält Optionen (nicht leicht zu finden), die Ihre Datei als SVG-Code exportieren. Wahrscheinlich möchten Sie beim Generieren dieses Codes in Echtzeit mit Ihrem Bildschirmentwickler kommunizieren, da mehrere Optionen durch die Verwendung dieses Codes bestimmt werden:
Wählen Sie Datei→Speichern (oder Speichern unter, wenn Sie eine Datei erneut speichern).
Wählen Sie im sich öffnenden Dialog SVG aus dem Menü Format.
Ignorieren Sie die SVGZ-Dateioption, die für eine komprimierte Datei gilt, die in Browsern nicht angezeigt wird.
Klicken Sie auf Speichern, um das Dialogfeld SVG-Optionen zu öffnen.
Wählen Sie immer SVG 1.1 in der Dropdown-Liste SVG-Profile aus. Andere Versionen sind veraltet.
Wenn Sie in Ihre SVG-Datei eingebettete oder verknüpfte Bilder haben, wählen Sie aus der Dropdown-Liste Bildspeicherorte die Option Einbetten. Besprechen Sie diese Wahl jedoch zuerst mit Ihrem Webentwickler.
Wählen Sie Illustrator-Bearbeitungsfunktionen beibehalten, um die Datei in Illustrator bearbeitbar zu machen.
Diese Auswahl erhöht die Dateigröße, ermöglicht Ihnen jedoch die Arbeit mit einer einzelnen SVG-Datei, die Sie bearbeiten, aktualisieren und mit Webentwicklern teilen können.
Wenn die Schaltfläche Weitere Optionen angezeigt wird, klicken Sie darauf, um auf erweiterte Optionen zuzugreifen. und treffen Sie Ihre Auswahl.
Im Wesentlichen generieren die verschiedenen Optionen CSS mit Ihrer Datei, die Eigenschaften wie folgt definiert. Besprechen Sie mit Ihrem Webentwickler-Teamkollegen, wie Sie diese CSS-Eigenschaften definieren:
- Präsentationsattribute betten das Styling in SVG-Code ein. Diese Option ist die einfachste und die Standardeinstellung. Verwenden Sie diese Option, wenn Sie nicht mit einem Web- oder App-Entwickler zusammenarbeiten.
- Die beiden Stilattribute Optionen auf CSS vertrauen , wo möglich , zu verwalten Styling.
- Style Elements generiert Klassenstilselektoren für das Styling.
- Die Option Nicht verwendete Stile einschließen generiert Code, der wahrscheinlich die SVG-Dateigröße erhöht, ohne einen funktionalen Wert hinzuzufügen.
Deaktivieren Sie die fünf Kontrollkästchen unten im Dialogfeld SVG-Optionen, es sei denn, Ihr Entwicklerpartner fordert Sie auf, sie auszuwählen.
Diese Optionen sind für hochspezialisierte Anwendungen.
Um SVG-Code basierend auf der Auswahl zu generieren, die Sie im Dialogfeld SVG-Optionen treffen, klicken Sie auf die Schaltfläche SVG-Code .
Der generierte SVG-Code wird im Texteditor Ihres Betriebssystems angezeigt. Sie können diesen Code mit dem Texteditor Ihres Betriebssystems als Textdatei speichern und die Datei an einen Entwickler übergeben.
Nachdem Sie den Code generiert haben, klicken Sie auf OK, um Ihre Datei zu speichern.
Sie können diese Datei in Illustrator erneut öffnen und bearbeiten.