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.
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:
Nachdem Sie sich für einen Filter entschieden haben, klicken Sie im Bereich SVG-Filter anwenden auf OK.
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.
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:
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.
Sie können das Snapshot-Tool in Adobe Acrobat CS5 verwenden, um sowohl Text als auch Bilder auszuwählen und ein Bild eines bestimmten Bereichs innerhalb einer PDF-Datei zu erstellen. Das Ergebnis wird allgemein als Screenshot eines Abschnitts in einer PDF-Datei bezeichnet. Das Ergebnis ist ein Bild, und Ihr Text ist kein […]
Die Messfunktionen von Photoshop CC wurden für Forscher und Wissenschaftler entwickelt und sind ziemlich leistungsstark. Sie können so ziemlich alles messen und die Anzahl der Dinge in einem technischen Bild zählen, vielleicht von einem Mikroskop oder Teleskop. Wenn Sie die genaue Größe eines Elements in einem Bild kennen, können Sie so ziemlich alles entdecken, […]
Wenn Sie die Verflüssigungswerkzeuge in Adobe Creative Suite 5 (Adobe CS5) Illustrator verwenden, können Sie Objekte biegen – also wellig, klebrig oder spitz machen – indem Sie einfache bis komplexe Verzerrungen erzeugen. Die Verflüssigungswerkzeuge können alle möglichen kreativen oder verrückten (je nachdem, wie Sie es betrachten) Verzerrungen an Ihren Objekten bewirken. Du […]
Wenn Ihr Adobe XD-Projekt Text enthält, können Sie die Texteigenschaften ändern. Zu diesen Eigenschaften gehören Schriftfamilie, Schriftgröße, Schriftstärke, Ausrichtung, Zeichenabstand (Kerning und Nachführung), Zeilenabstand (voreilend), Füllung, Rahmen (Strich), Schatten (Schatten) und Hintergrundunschärfe. Sehen wir uns also an, wie diese Eigenschaften angewendet werden. Über Lesbarkeit und Schriftart […]
Sie können InDesign verwenden, um QR-Code-Grafiken zu erstellen und zu ändern. QR-Codes sind eine Form von Barcodes, die Informationen wie Wörter, Zahlen, URLs oder andere Datenformen speichern können. Die Benutzerin scannt den QR-Code mit ihrer Kamera und Software auf einem Gerät wie einem Smartphone, und die Software verwendet […]
Genau wie in Adobe Illustrator bieten Photoshop-Zeichenflächen die Möglichkeit, separate Seiten oder Bildschirme innerhalb eines Dokuments zu erstellen. Dies kann besonders hilfreich sein, wenn Sie Bildschirme für eine mobile Anwendung oder eine kleine Broschüre erstellen. Sie können sich eine Zeichenfläche als eine spezielle Art von Ebenengruppe vorstellen, die mit dem Ebenenbedienfeld erstellt wurde. Es ist […]
Das Einwickeln von Text in Adobe Illustrator CC ist nicht dasselbe wie das Einwickeln eines Geschenks – es ist einfacher! Ein Textumbruch erzwingt einen Textumbruch um eine Grafik, wie in dieser Abbildung gezeigt. Diese Funktion kann jedem Stück ein wenig Kreativität verleihen. Die Grafik zwingt den Text, um ihn zu umbrechen. Erstellen Sie zunächst […]
Beim Entwerfen in Adobe Illustrator CC müssen Sie häufig eine Form mit einer genauen Größe haben (z. B. 2 x 3 Zoll). Nachdem Sie eine Form erstellt haben, können Sie die Größe am besten auf genaue Maße ändern, indem Sie das in dieser Abbildung gezeigte Bedienfeld „Transformieren“ verwenden. Lassen Sie das Objekt ausgewählt und wählen Sie dann Window→Transform to […]
Erfahren Sie, wie Sie in Illustrator Transparenz auf SVG-Grafiken anwenden. Erfahren Sie, wie Sie SVGs mit transparentem Hintergrund ausgeben und Transparenzeffekte anwenden.
Nachdem Sie Ihre Bilder in Adobe XD importiert haben, haben Sie nicht viel Kontrolle über die Bearbeitung, aber Sie können Bilder wie jede andere Form in der Größe ändern und drehen. Sie können die Ecken eines importierten Bilds auch ganz einfach mit den Ecken-Widgets abrunden. Maskieren Ihrer Bilder Durch das Definieren einer geschlossenen Form […]
