Effekte, wie der allgegenwärtige Schlagschatten, sind ein wesentliches Element im Werkzeugkasten jedes Designers. Sie haben vielleicht bemerkt, dass das Effektmenü von Adobe Illustrator CC ein umfangreiches Untermenü für SVG-Filter enthält. Der verfügbare Filtersatz wird mit der Weiterentwicklung von Illustrator erweitert, um mehr Unterstützung für SVG zu bieten.
Übrigens, wenn Sie Illustrator seit Jahren verwenden, erinnern Sie sich vielleicht daran, dass das Effektmenü früher Effekte und Filter auflistete. Filter waren wie Effekte, nur dass sie nach der Anwendung nicht einfach bearbeitet werden konnten. SVG-Filter sind jedoch keine Wiederbelebung dieser Filtertypen; SVG-Filter werden als Filter bezeichnet, weil sie beim Codieren von Webseiten über das SVG-Filterelement arbeiten.
Hier ist noch eine coole Sache über SVG-Filter: Wie Sie gleich entdecken, können Sie Ihre eigenen SVG-Filter importieren und sogar erstellen.
Wenn Sie einen SVG-Filter anwenden, kann er einem Nicht-SVG-Effekt ähneln. Diese Abbildung zeigt beispielsweise zwei identische Quadrate, wobei jedoch auf das linke ein Raster-Schlagschatten- Effekt angewendet wurde und auf das rechte ein Vektor-(SVG)-Schlagschatten- Filter angewendet wurde.
Ein Schlagschatteneffekt (links) und ein SVG-Filter (rechts).
Wenn ich das Rechteck mit dem SVG-Filter auswähle, wird dieser Filter wie abgebildet im Erscheinungsbild-Bedienfeld angezeigt.
Illustrator-Drop-Shadow-Filter
Die verschiedenen Möglichkeiten, wie Effekte und SVG-Filter den Pfad eines Objekts ändern, haben subtile, aber reale Auswirkungen. Einige dieser Auswirkungen sind nur für Web- und App-Entwickler relevant, aber am Ende des Workflows ist es wichtig zu bedenken, dass Sie vermeiden, SVG-Filter und Rastereffekte in Projekten zu mischen , da sie sich auf Objekte unterschiedlich auswirken.
Übrigens kann ich nicht umhin zu teilen, dass das Quadrat mit dem Rasterschlagschatten in diesen Abbildungen fast siebenmal größer ist als das mit dem SVG-Filter. Nur eine kurze öffentliche Bekanntmachung der SVG-Branche, wie Sie mit SVGs (Datei-)Gewicht verlieren können.
Und wie Sie vielleicht schon vermutet haben, sind Rastereffekte nicht programmierbar. Wenn Sie sie einem Animator oder HTML-Programmierer übergeben, hat Ihr Entwickler-Teamkollege nicht die gleiche Freiheit, die Funktionsweise von Rastereffekten in einer Animation oder einem Übergang zu steuern.
Wenn Sie schließlich SVG-Filter anstelle von Rastereffekten auf SVG-Grafiken anwenden, müssen Sie sich keine Sorgen machen, dass sich diese Filter verschlechtern, wenn die Grafik in einem Browser neu skaliert wird.
Ich habe mich dafür eingesetzt, SVG-Filter wann immer möglich in SVG-Grafiken anzuwenden. Lassen Sie uns durchgehen, wie das passiert:
Wählen Sie die Objekte aus, auf die Sie den Filter anwenden.
Wählen Sie Effekt→SVG-Filter und wählen Sie einen Filter aus.
Das Untermenü SVG-Filter enthält eine Liste von Filtern, deren Namen bestenfalls halb intuitiv sind (wie AI_Shadow_1, was ein Schlagschatten ist) und häufiger nur kryptisch (wie AI_Dilate_6). Sie müssen experimentieren, bis Sie ein Gefühl dafür bekommen, wie diese Filter funktionieren.
Zeigen Sie bei ausgewähltem Objekt, auf das Sie den Filter angewendet haben, das Erscheinungsbild-Bedienfeld an (wählen Sie Fenster→ Erscheinungsbild).
Bewegen Sie den Mauszeiger über den angewendeten Filter und klicken Sie darauf, um das hier gezeigte Feld „SVG-Filter anwenden“ anzuzeigen.
Bearbeiten von SVG-Filtern.
Hier können Sie den angewendeten Filter ändern und das Kontrollkästchen Vorschau verwenden, um zu sehen, wie der Filter aussehen wird. Sie können einen SVG-Filter auch im Aussehen-Bedienfeld auswählen und löschen, wie in der Abbildung gezeigt.
Löschen eines SVG-Filters.
Der Filtersatz von Illustrator ist nützlich, überschreitet aber kaum die Grenzen dessen, was Sie mit SVG-Filtern tun können. Wenn Sie in HTML codieren, finden Sie bei w3schools ein barrierefreies Tutorial zum Erstellen eigener SVG-Filter .
Sie können auch zusätzliche Filtersätze online kaufen und sogar einige nette Sätze von SVG- freien SVG-Filtern finden . Gehen Sie folgendermaßen vor, um diesen Filtersatz oder andere Filter zu installieren:
Wählen Sie Effekt→SVG-Filter→SVG-Filter importieren.
Navigieren Sie im sich öffnenden Dialogfeld zu der heruntergeladenen SVG-Filterdatei und doppelklicken Sie darauf.
Die Datei wird wahrscheinlich eine SVG-Datei sein.
Wählen Sie Effekt–>SVG-Filter, um neue Filter auf ausgewählte Objekte anzuwenden.
Nachdem Sie neue Filter importiert haben, werden sie im Untermenü SVG-Filter angezeigt.
Wenn Ihr Adobe XD-Projekt Text enthält, können Sie die Texteigenschaften ändern. Dazu gehören Schriftfamilie, -größe, -stärke und mehr. Optimieren Sie die Lesbarkeit mit unseren Tipps zur Schriftauswahl.
Entdecken Sie die leistungsstarken Messfunktionen von Photoshop CC, die für Forscher und Wissenschaftler entwickelt wurden. Erfahren Sie, wie Sie Pixel messen, Objekte zählen und präzise Analysen durchführen können.
Erfahren Sie, wie Sie in Illustrator Transparenz auf SVG-Grafiken anwenden. Finden Sie heraus, wie Sie SVGs mit transparentem Hintergrund ausgeben und Transparenzeffekte anwenden.
Erfahren Sie, wie Sie mit Beschneidungspfaden in InDesign CC den Hintergrund von Bildern effektiv entfernen und anpassen können.
Entdecken Sie die neuen Verbesserungen der Hilfslinien in Illustrator CC, die Ihnen helfen, präzise Grafiken zu erstellen.
Erfahren Sie, wie Sie in InDesign Formen und Polygone erstellen können. Entdecken Sie Techniken und Werkzeuge, um beeindruckende Designs zu erstellen.
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 […]
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 […]
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 […]
