Problem - weiße Ränder nach Freistellen und Speichern in gif
- Ersteller gruenmuckel
- Erstellt am
gruenmuckel
Grand Admiral Special
Ich habe da ein Problem.
Ich erweitere gerade unseren Internetshop und habe dabei ein Problem.
Ich stelle Produkte frei. Beim Speichern in GIF treten an den Kanten weiße Säume auf. Das sieht ziemlich furchtbar aus finde ich. Gif mit Transparenz muss aber sein weil die Fotos im Shop auf zwei verschiedenen Hintergründen angezeigt werden.
Wie bekomme ich das in den Griff? Ich nutze Photoshop CS4 und den "Für Web und Geräte speichern"-Dialog.
anbei ein Beispiel:
Ich erweitere gerade unseren Internetshop und habe dabei ein Problem.
Ich stelle Produkte frei. Beim Speichern in GIF treten an den Kanten weiße Säume auf. Das sieht ziemlich furchtbar aus finde ich. Gif mit Transparenz muss aber sein weil die Fotos im Shop auf zwei verschiedenen Hintergründen angezeigt werden.
Wie bekomme ich das in den Griff? Ich nutze Photoshop CS4 und den "Für Web und Geräte speichern"-Dialog.
anbei ein Beispiel:
Zuletzt bearbeitet:
Das Problem dabei ist, daß Du beim Freistellen eine geglättete Kante eingestellt hast, d.h. der Übergang zum (offensichtlich weißen) Hintergrund ist nicht sofort auf 255:255:255, sondern noch minimal eingefärbt, z.B. 254:253:250 o.ä. Mit dem Auge kaum zu erkennen, aber wenn Du dann beim GIF-speichern sagst, welche Farbe transparent werden soll, kannst Du ja nur einen Farbwert auswählen, also das saubere Weiß. Das leicht eingefärbte Weiß an der Kante bleibt aber opaque und entsprechend sichtbar.
Es gibt also zwei Möglichkeiten, wie du die weißen Ränder wegbekommst: Entweder nimmst Du einen andersfarbigen Hintergrund, z.B. Pink, dann hast Du eben pinke Ränder
(kann man als Fake aber machen, wenn man die gleiche Hintergrundfarbe nimmt wie die Webseite, auf der es eingebunden werden soll, in Deinem Beispiel also diesen Beigeton. Ist gepfuscht, kann aber in Einzelfällen ok sein) Oder etwas ernstgemeinter die andere Möglichkeit: Hartes Ausschneiden ohne Glättung bzw. Antialiasing. Kann man bei Photoshop z.B. direkt oben beim jeweiligen Ausschneidewerkzeug anhaken (siehe unten), muß man eingestellt haben, bevor man die Ameisenstraße legt. Damit kriegst Du dann zwar eine häßliche Treppenkante, aber wenn es die Transparenzkante eines GIFs (gilt übrigens für Icons im Windows-ICO-Format genauso) werden soll, geht es nicht anders.
Alternativ nimmst Du einfach PNG, das erlaubt auch halbtransparente Farben und sieht dank größerer Farbtiefe sowieso besser aus. Wer nimmt denn heute schon noch GIF?
Es gibt also zwei Möglichkeiten, wie du die weißen Ränder wegbekommst: Entweder nimmst Du einen andersfarbigen Hintergrund, z.B. Pink, dann hast Du eben pinke Ränder
(kann man als Fake aber machen, wenn man die gleiche Hintergrundfarbe nimmt wie die Webseite, auf der es eingebunden werden soll, in Deinem Beispiel also diesen Beigeton. Ist gepfuscht, kann aber in Einzelfällen ok sein) Oder etwas ernstgemeinter die andere Möglichkeit: Hartes Ausschneiden ohne Glättung bzw. Antialiasing. Kann man bei Photoshop z.B. direkt oben beim jeweiligen Ausschneidewerkzeug anhaken (siehe unten), muß man eingestellt haben, bevor man die Ameisenstraße legt. Damit kriegst Du dann zwar eine häßliche Treppenkante, aber wenn es die Transparenzkante eines GIFs (gilt übrigens für Icons im Windows-ICO-Format genauso) werden soll, geht es nicht anders.Alternativ nimmst Du einfach PNG, das erlaubt auch halbtransparente Farben und sieht dank größerer Farbtiefe sowieso besser aus. Wer nimmt denn heute schon noch GIF?
gruenmuckel
Grand Admiral Special
Tja, is eben so. 
Ich probiere deine Tipps gleich mal aus.
Eben habe ich mir beholfen indem im im "Für Web und Dingens speichern" Dialog den Hintergrund auf "ohne" gestellt habe. Vorher war da weiß eingestellt.
Sieht eigentlich auch ganz brauchbar aus.
Ich gehe beim Freistellen so vor, das ich entweder das Schnellauswahlwerkzeug nehme (je nach Hintergrund und klaren Kanten klappt das super) oder mit gehaltener Shift-Taste per Radiergummi um das Motiv gehe. Dann hab ich eine mehrere Pixel Breite Kontur ohne Inhalt und kann den Rest prima per Zauberstab und Kante verbessern killen.
Ich probiere deine Tipps gleich mal aus.
Eben habe ich mir beholfen indem im im "Für Web und Dingens speichern" Dialog den Hintergrund auf "ohne" gestellt habe. Vorher war da weiß eingestellt.
Sieht eigentlich auch ganz brauchbar aus.
Ich gehe beim Freistellen so vor, das ich entweder das Schnellauswahlwerkzeug nehme (je nach Hintergrund und klaren Kanten klappt das super) oder mit gehaltener Shift-Taste per Radiergummi um das Motiv gehe. Dann hab ich eine mehrere Pixel Breite Kontur ohne Inhalt und kann den Rest prima per Zauberstab und Kante verbessern killen.
wie gesagt, stell da mal statt weiß oder ohne dieses Beige ein. Dann dürfte es einen schönen Übergang geben, bloß ist das GIF auf anderen Hintergründen noch häßlicher. Aber wenn es eh nur für diesen bestimmten Zweck eingesetzt wird, wäre das ja egal.
Ähnliche Themen
