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.
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 […]
