Gif mit transparentem Hintergrund erstellen (wird als Ladeanimation verwendet)

Wie mein Titel schon sagt, ist es mein Ziel, ein GIF mit transparentem Hintergrund zu erstellen. Ich habe eine Animation in After Effects erstellt. Da es bei dieser Art von Hintergrund keine Möglichkeit gibt, als GIF zu exportieren, exportiere ich es als PNG-Sequenz und füge alle Bilder später in Photoshop wieder zusammen. Schließlich kann ich es als GIF mit transparentem Hintergrund exportieren. Wenn ich das jetzt tue, hat das Gif einen transparenten Hintergrund, aber die Animation ist von einem weißen Strich umgeben und ist eine Art pixelig. Hat jemand eine Idee, wie ich das beheben kann oder vielleicht eine andere mögliche Lösung für mich? Andere Dateiformate als gif wie svg etc. sind ebenfalls möglich. Am Ende wird diese Animation als Ladeanimation für das Web verwendet.

Ich habe es schon in viele Dateiformate exportiert, die einen Alphakanal zulassen aber noch kein Erfolg. Etwas, das ich über die pixelige Auflösung sagen möchte. Sicher kann es an der kleinen Auflösung liegen, aber warum ist es dann hochauflösend mit farbigem Hintergrund?

Bild des Problems

Gruß Yannik

Antworten (3)

Wenn Sie es auf einem schwarzen Hintergrund verwenden, setzen Sie zuerst einen schwarzen Hintergrund.

Dieser Rand ist das Ergebnis von Anti-Aliasing, das einige Pixel zu einem Mittelton zwischen zwei Farben macht. Blau-weiß oder gelb-weiß.

Bild, das das Anti-Aliasing zeigt

Ein transparentes Gif kann nur 1 Farbe transparent machen, das ist "das reine Weiß". Die "nicht so weißen" Pixel sind überhaupt nicht transparent.

Leider unterstützen GIFs keine Alpha-Transparenz. Es gibt keine Möglichkeit, das wirklich zu beheben. GIFs unterstützen nur entweder vollständig transparente oder vollständig undurchsichtige Pixel, ohne dazwischen. Grundsätzlich hängt die Nützlichkeit des Formats für Ihren speziellen Anwendungsfall also vollständig von dem Hintergrund ab, auf dem Sie es platzieren.

Wenn der Hintergrund einfarbig ist oder fast einfarbig ist, können Sie die Option „Matte“ verwenden, um die Farbe der äußeren Pixel (die Matte) zu ändern, sodass, wenn das GIF über einem Hintergrundbild platziert wird, Es sollte mit dem Hintergrund verschmelzen. Offensichtlich müssen Sie die Hintergrundfarbe kennen, damit dies überhaupt funktioniert.

Sie finden diese Funktion unter Datei > Exportieren > Für Web speichern (Legacy) , wenn Sie GIF als Ausgabeformat auswählen. Natürlich muss jeder GIF-Rahmen auch Transparenz haben, damit er funktioniert.

Hier ist ein Beispiel für das Dialogfeld "Für Web speichern", bei dem "Matte" auf "Schwarz" eingestellt ist. Im optimierten Bildfenster können Sie sehen, wie es dem GIF einen schwarzen Umriss anstelle eines weißen Umrisses verleiht.

Geben Sie hier die Bildbeschreibung ein

Danke für deine Hilfe Billy! Gibt es eine Möglichkeit, dasselbe stattdessen in einem anderen Dateiformat wie SVG usw. zu exportieren?
@BeatB Wenn Sie möchten, dass es sich um animiertes SVG handelt, können Sie dies mit etwas namens Lottie tun - etwas komplex. Aber es gibt auch andere Formate wie WebM, die ich gerne anstelle von GIF verwende

In Photoshop gibt es eine Exporteinstellung namens Matte , wenn Sie es auf None sehen , wird es die seltsame schwarz/weiße Umrandung entfernen, ABER es sieht pixelig aus .Geben Sie hier die Bildbeschreibung ein

Wenn Sie jedoch bereits wissen, welche Farbe der Hintergrund auf der Website haben wird, können Sie Ihre eigene Umrissfarbe festlegen, mit der sie nicht verpixelt aussieht und sich mit der Hintergrundfarbe vermischt.

Geben Sie hier die Bildbeschreibung ein

Gif mit transparentem Hintergrund erstellen (wird als Ladeanimation verwendet)
AntwortenHierDatenschutz-Bestimmungen1y, 0v