Wie erstelle ich mit Adobe Photoshop ein GIF mit transparentem Hintergrund?

8

Wie erstelle ich mit Adobe Photoshop ein GIF mit transparentem Hintergrund?

Es ist etwas spät am Abend, meinen Webentwickler darum zu bitten. Hier ist ein Screenshot des von mir erstellten Bildes:

Beispielbild

Aber ich möchte kein Weiß um die Buchstaben - es sollte eher so aussehen wie hier: http://wordfruit.com

Folgendes habe ich getan:

  • Ich habe das Original-GIF von den Website-Dateien heruntergeladen.
  • Wenn ich es in Photoshop öffne, ist die Ebene gesperrt und ich kann keine neue Ebene erstellen.
  • … Also habe ich es kopiert, in ein neues .psd-Dokument eingefügt und das bearbeitet
  • speicherte es schließlich als .gif
adobe-photoshop gif Richard Clunan
quelle
1
Als professioneller UX Designer würde ich PNG immer GIF vorziehen, da es Alphakanaltransparenz und bessere Komprimierung bietet. Das heißt, Sie verlieren keine Farbe, um sie als transparente Farbe festzulegen. Mein Entwickler und ich haben gerade eine Debatte geführt. Er möchte, dass ich ihm GIFs sende. Ich sagte ihm, er solle an seinem Beruf des Codierers festhalten und mich an meinen Beruf als Grafikdesigner halten.

Antworten:

15

Wenn Sie ein GIF (Export für Web) speichern, können Sie eine Farbe auswählen, um es transparent zu machen. Beachten Sie, dass Sie nur EINE Farbe auswählen können, sodass Sie normalerweise Halos um Ihr Bild haben, die von Ihrem Bild in die ursprüngliche Hintergrundfarbe übergehen.

Es ist besser, die ursprüngliche PSD-Datei zu erhalten und sie dann als transparentes PNG zu speichern.

DA01
quelle
2

Die Antwort basiert auf dem, was ich verstanden habe: |

Versuchen Sie dies so, wie Sie es tun

  • Laden Sie Ihr GIF-Bild von der Website herunter
  • In Photoshop öffnen gehen Sie zu Bild> Modus> RGB-Farbe auswählen (beachten Sie in Ihrem GIF-Bild jetzt die indizierte Farbe)

Bild von Google

  • Stellen Sie beim Erstellen eines neuen Dokuments sicher, dass Sie einen transparenten Hintergrund verwenden

Bild von Photoshopforce

Fügen Sie nun Ihr Bild ein und speichern Sie es als GIF.

Informationen zum Speichern von GIF finden Sie hier: Erstellen Sie ein transparentes GIF (Bitte beachten Sie nur den Abschnitt zum Speichern).

Nun mein Rat dazu, dass Ihr Designer / Entwickler Image Sprite verwendet, sodass es für Sie schwierig ist, die Änderungen so vorzunehmen, wie Sie es möchten. Besser, Sie bearbeiten die Original-PSD und speichern und verwenden sie, was Sie tun, entspricht nicht Ihrem Designer / Entwickler Sie verwenden etwas anderes und Sie tun etwas anderes ...

Sortieren und süßer Vorschlag: Finden Sie die Original-PSD, bearbeiten Sie Ihren Text und speichern Sie ihn als .gif, sonst warten Sie auf den Designer. So wie Sie es tun, ist es meiner Meinung nach Verschwendung.

Hoffe das wird ein bisschen helfen ..

Jack
quelle
Koiyu Ich denke, sein eigenes Image-Sprite war der einfachste Weg, ihn verständlich zu machen, nicht wahr?
Jack