SVG-Grafiken aus Adobe Illustrator CC werden selten an digitale Designer mit Hintergründen weitergegeben. Normalerweise schweben die Grafiken über dem Hintergrund, der in der Website, App, Animation oder im interaktiven Kontext vorhanden ist.
Bevor Sie besprechen, was es bedeutet, den Hintergrund hinter SVG-Grafiken auszusparen, konzentrieren Sie sich auf die Anwendung von Transparenz auf SVG-Grafiken. Sie müssen die Deckkraft des Bildmaterials mithilfe des Transparenzbedienfelds definieren. Auf die gelbe Form in der Abbildung wurde beispielsweise 50 Prozent Transparenz angewendet, und Sie können die tatsächliche Transparenz sehen. Und ja, dieses Bild ist eine SVG-Datei mit all den leichten, schnell ladenden und unendlich skalierbaren Funktionen, die in SVG integriert sind.
Eine halbdurchsichtige SVG-Form auf einem farbigen Hintergrund.
Designer sind es gewohnt, in Hintergründen zu denken, die entweder transparent gemacht werden oder sichtbar bleiben. Wir denken darüber nach, einen Hintergrund auszuschalten. PNG-Bilder und GIF-Bilder funktionieren so – Sie erstellen entweder mit einem Hintergrund oder wählen einen transparenten Hintergrund in einem Programm wie Illustrator oder Photoshop, um diesen Hintergrund auszusparen.
Bei GIFs und PNGs können Sie eine transparente Farbe verwenden, die es ermöglicht, dass die Hintergrundfarben oder Bilder auf Webseiten durchscheinen. Aber die Logik, den Hintergrund auszusparen, ist bei einer SVG-Datei eine andere als bei PNGs und GIFs. Im Grunde gibt es keine SVG-Grafik, die einen undurchsichtigen Hintergrund hat, weil es keinen Hintergrund gibt. Mit anderen Worten: SVG-Grafiken werden standardmäßig ohne Hintergrund gespeichert und exportiert.
Also, was ist das Problem? Nun, es ist leicht, beim Speichern oder Exportieren von SVG-Dateien versehentlich einen transparenten Hintergrund zu erhalten! Die folgende Abbildung hat möglicherweise einen weißen Hintergrund oder einen transparenten Hintergrund. Sie können es nicht nur durch einen Blick auf den Illustrator-Bildschirm erkennen; Sie müssen Ansicht→Transparenzraster anzeigen wählen.
Diese Grafik kann einen weißen Hintergrund haben oder keinen Hintergrund haben.
Wenn das Transparenzraster aktiviert ist, wie gezeigt, können Sie sehen, dass der Vogel ein weißes Rechteck dahinter hat und dass der weiße Hintergrund zur Grafik „passt“, wenn Sie die Datei als SVG speichern oder als SVG exportieren.
Beim Betrachten des Transparenzrasters wird hinter der Grafik ein weißes Rechteck sichtbar.
Lassen Sie mich dies aus einem anderen Blickwinkel hervorheben und beleuchten. Wenn ich dieses Bild als SVG exportieren möchte, bietet das angezeigte Dialogfeld Export für Bildschirme keine Option zum Auswählen einer Transparenzfarbe.
Sie können in SVG keine Transparenzfarbe auswählen, da keine Hintergrundfarbe vorhanden ist.
Ich begegne oft Designern, die darauf bestehen, ein Hintergrundrechteck hinter ihre SVG-bestimmten Grafiken zu setzen, damit sie sehen können, wie die Grafik aussehen wird, wenn sie von einer Farbe im Zielmedium (wie einer Webseite oder App) hinterlegt wird. Das ist in Ordnung, ich warne sie, solange Sie daran denken, dieses Hintergrundrechteck zu entfernen, wenn Sie das SVG speichern oder exportieren. Und wer braucht sich in der heutigen Welt mit hohem Druck, hoher Produktivität und schnellen Bearbeitungszeiten noch etwas zu merken?
Eine bessere Lösung besteht darin, ein Transparenz-„Raster“ mit einer einzigen Farbe zu definieren, die der Umgebung entspricht, in der die Grafik platziert wird. Warum setze ich Raster in Anführungszeichen? Denn diese Technik schummelt: Damit definieren Sie beide Rasterfarben als dieselbe Farbe und simulieren effektiv eine Webseite oder eine App-Hintergrundfarbe.
Gehen Sie folgendermaßen vor, um diese Technik zum Erstellen eines benutzerdefinierten Hintergrunds während der Entwicklung von SVG-Grafiken zu verwenden:
Wählen Sie Datei→Dokument einrichten.
Suchen Sie auf der Registerkarte Allgemein den Abschnitt Transparenz- und Überdruckoptionen.
In diesem Abschnitt des Dialogs werden die gewünschten Änderungen gesteuert.
Machen Sie sich keine Sorgen um die Definition der Rastergröße, da Sie effektiv auf das Raster verzichten.
Klicken Sie im Abschnitt „Transparenzraster“ des Dialogfelds auf das erste der beiden Rasterfarbfelder und wählen Sie eine Hintergrundfarbe aus, indem Sie eine der verschiedenen Farbpaletten im Popup „Farben“ in der folgenden Abbildung verwenden.
Keine dieser Farbpaletten ist übrigens besonders digitalfreundlich. Es gibt keine Palette für RGBA-, Hexadezimal- oder andere Standard-Webfarbformate, aber die Pipette zur Farbauswahl kann Ihnen helfen, die gewünschte Hintergrundfarbe zu erhalten.
Definieren einer Hintergrundfarbe für die Vorschau mit einem Transparenzraster.
Wählen Sie das zweite der beiden Rasterfarbfelder aus und weisen Sie ihm dieselbe Farbe zu.
Denken Sie daran, dass Sie diese Farbe mit der Farbauswahlpipette aufnehmen können.
Klicken Sie im Dialogfeld Dokumenteinrichtung auf OK.
In den vorherigen Schritten habe ich lediglich festgelegt, wie das Transparenzraster angezeigt wird, wenn es aktiviert ist . Wenn Ihr Transparenzraster nicht aktiviert ist, wählen Sie Ansicht→Transparenzraster.
In dieser Abbildung habe ich die Zeichenfläche mit der Grafik ausgewählt und zeige eine Vorschau des Projekts vor einer simulierten Hintergrundfarbe an.
Vorschau der Ausgabehintergrundfarbe mit einem benutzerdefinierten Transparenzraster.
Wenn Transparenz (z. B. 50 % Deckkraft) oder Transparenzeffekte wie Farbbrennen, Abdunkeln oder Multiplizieren auf SVG-Grafiken angewendet werden, behalten diese Effekte die Skalierbarkeit von SVG.
Diese Abbildung zeigt dieselbe Grafik – drei halbtransparente orangefarbene Rechtecke – exportiert als PNG-Datei (oben) und SVG. Sie können sehen, wie sich die Qualität der PNG-Datei verschlechtert, wenn ich sie in einem Browser vergrößere. Was Sie nicht sehen können, ist, dass die PNG-Datei fast doppelt so groß ist wie die SVG.
Vergleich der PNG-Ausgabe (oben) mit SVG, wenn Transparenz angewendet wird
Hier ist eine Zusammenfassung der Vorteile der Verwendung von SVG für Transparenzeffekte:
Übrigens, wenn Sie neugierig sind, wie der generierte SVG-Code für diesen Satz von Rechtecken aussieht und wie einfach es für einen Web- oder App-Entwickler ist, damit zu arbeiten, hier ist der Code für die erste der drei SVG-Boxen , mit 60 Prozent Deckkraft angewendet:
<="" code="">
Wenn Sie schließlich möchten, dass der Hintergrund Ihrer SVG-Datei eine Farbfüllung hat, können Sie dies auch über die Dokumenteigenschaften erreichen Speisekarte. Klicken Sie einfach auf den weißen Streifen neben der Aufschrift Hintergrundfarbe. Auf Ihrem Bildschirm wird eine Farbauswahl angezeigt.
Es ist wichtig zu beachten, dass Ihr SVG-Hintergrund trotz der Farbfüllung weiterhin transparent bleibt, solange die A-Spalte (die darstellt). Transparenz der Farbe) bleibt bei 0. Wenn Sie möchten, dass das Dokument tatsächlich diese Hintergrundfarbe hat (auch bei Exporten), können Sie diese Spalte von 0 auf erhöhen 100.
Und das sollte für die Arbeit mit Hintergründen in Inkscape reichen. Wenn Sie Fragen haben, die in diesem Beitrag nicht beantwortet wurden, hinterlassen Sie einfach unten einen Kommentar und ich schreibe Ihnen zurück, wenn ich helfen kann.
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 […]
