Ich möchte gerne ein transparente Grafik erstellen. Das Problem ist, egal wie ich es als Gif abspeichere, bildet sich immer um das Objekt ein hässlicher weißer Rand. Wie bekomme ich es hin, dass der Hintergrund transparent ist, aber das Objekt trotzdem scharfe (ohne weißen Rand) Kannten hat. Da das Objekt eine Raute ist, kann ich es nicht als JPG abspeichern, weil der Hintergrund angezeigt werden soll. Danke schon mal für eure Hilfe.

Eventuell wird der Rand durch CSS (Bei verlinken) gebildet?

Sonst kann ich dir auch nicht helfen, du machst zu wenig Angaben.. welches Programm verwendest du?

__________________
:)

Könntest du uns das zeigen?

Vergiss auch nicht, dass GIF nur 256 Farben hat und nur EINE Farbe transparent machen kann. Man hat also keine Alphatransparenz wie bei einem PNG, dadurch kann es je nach Hintergrund sehr pixelig aussehen.

__________________
“My software never has bugs. It just develops random features ...”

» DevShack - die Website des freien Webentwicklers Boris Bojic

Ich benutze Photoshop CS. Ich habe ein Beispiel hochgeladen, bei einem dunklen Hintergrund sieht man den weißen Rand. Die Grafik die ich erstellen möchte soll ca. 80x80px haben und eventuell rund oder halt diese Raute. Da ich das Wappen gerne auf meine Seite einbinden möchte, sieht das natürlich nicht gut aus. Rechteckige Grafiken speichere ich natürlich als JPG ab, da ist ja dann egal. Wie erstellt ihr denn runde Grafiken, damit es im Web gut aussieht? Gerade Wappen haben ja die verschiedensten Formen.

Grafik

Vor welchem Hintergrund soll die Grafik stehen?
Wenn der Hintergrund einfarbig ist, dann brauchst du keine Transparenz, dann kannst du die entsprechende Farbe in das Gif mit aufnehmen.
Ansonsten musst du beim Absichern die passende Transparenz-Hintergrundfarbe auswählen, damit die Randpixel entsprechend berechnet werden.

Ich benutze einen Hintergrund, das besteht aus einem Verlauf und einem Muster, daher muss der Hintergrund transparent sein. Ich sehe immer soviele Grafiken, die aus verschiedenen Formen bestehen, die super scharfe Kanten haben und dazu transparent sind.

So gehe ich in Photoshop vor:

1. ich erstelle die Grafik
2. Dann gehe ich auf Bild, Modus, indizierte Farben und wähle aus:
Palette: Web, transparent, Basis Vorderfarbe (Farbe der Grafik, in diesem Fall das blau), Dither= ohne.
3. dann gehe ich auf: für Web speichern und speichere die Datei ab.

Muss ich vielleicht noch unter Punkt 3 was einstellen?

Dann brauchst du Alphatransparenz.

Bist du ganz sicher, dass diese Grafiken GIFs mit Transparenz sind? Zeig doch mal eine dieser sovielen Grafiken -- mitsamt ihrem Hintergrund.

Die Kantenglättung erzeugt bei nicht-orthogonalen Kanten immer einen Rand. Die Farbe dieses Randes kannst du beeinflussen.

Ich habe jetzt das blau angepasst und der weiße Rand ist weg, aber leider ist die Kante etwas Pixelig. Klick das funktioniert aber nur, wenn die Grafik eine Farbe hat. Ich möchte aber gerne eine Grafik erstellen, wo 2 verschiedene Wappen sind. 2 verschiedene Formen und 2 verschiedene Farben. Da kann ich das dann wohl nicht machen.

Hier die Beispiele:

Diese Grafik ist perfekt, so wie ich mir ein transparente Grafik vorstelle

Diese Grafik hat leider diesen weißen Rand

Ja, so ist das ohne Kantenglättung.
Frag mal die Suchmaschine deines Vertauens nach "Anti-Aliasing".

Du wirst schwerlich jemanden finden, der dir konkrete Ratschläge geben kann, wenn du nicht genau das herzeigst, was du erreichen willst. Vorder- und Hintergrund.
Wenn dein Wappen vor dem Hintergrund nicht bewegt wird, dann kann Wappen und Hintergrund auch ein Bild sein -- und das Transparenzproblem besteht nicht.

Das ist ein 17*17px großes Icon ohne Kantenglättung (wozu auch).
Möchtest du ein Favicon erstellen?

Das ist eine 35*21px große Grafik mit Kantenglättung.

Für transparente Bilder auf einen BG mit Pattern und Verläufe empfiehlt sich nur die Alpha-Transparenz. Problem dabei ist eben, dass der IE dies erst ab der neuen 7er-Version unterstützt. Ansonsten produziert er für die transparenten Flächen immer eine mittelgraue Farbe.

Abhilfe könnte da ein sogenannter PNG-IE-Fix geben:
Wie kann man PNG-Alphatransparenz im IE nutzen? - jeenaparadies.net