zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden transparentes Gif erstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.08.2007, 17:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2007
Beiträge: 47
Mesh befindet sich auf einem aufstrebenden Ast
Standard transparentes Gif erstellen

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2007, 11:44
Benutzerbild von fox
fox fox ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Beiträge: 1.011
fox sorgt für eine eindrucksvolle Atmosphärefox sorgt für eine eindrucksvolle Atmosphäre
Standard

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

Code:
img {
    border: none;
}
Sonst kann ich dir auch nicht helfen, du machst zu wenig Angaben.. welches Programm verwendest du?
__________________
:)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.08.2007, 13:22
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
Das Problem ist, egal wie ich es als Gif abspeichere, bildet sich immer um das Objekt ein hässlicher weißer Rand.
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
Mit Zitat antworten
  #4 (permalink)  
Alt 11.08.2007, 13:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2007
Beiträge: 47
Mesh befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Mesh (11.08.2007 um 14:02 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 11.08.2007, 14:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 11.08.2007, 14:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2007
Beiträge: 47
Mesh befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von Mesh (11.08.2007 um 14:11 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 11.08.2007, 14:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Mesh Beitrag anzeigen
Ich benutze einen Hintergrund, das besteht aus einem Verlauf und einem Muster, daher muss der Hintergrund transparent sein.
Dann brauchst du Alphatransparenz.

Zitat:
Ich sehe immer soviele Grafiken, die aus verschiedenen Formen bestehen, die super scharfe Kanten haben und dazu transparent sind.
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 11.08.2007, 14:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2007
Beiträge: 47
Mesh befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 11.08.2007, 14:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Mesh Beitrag anzeigen
Ich habe jetzt das blau angepasst und der weiße Rand ist weg, aber leider ist die Kante etwas Pixelig.
Ja, so ist das ohne Kantenglättung.
Frag mal die Suchmaschine deines Vertauens nach "Anti-Aliasing".

Zitat:
Ich möchte aber
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.

Zitat:
Diese Grafik ist perfekt, so wie ich mir ein transparente Grafik vorstelle
Das ist ein 17*17px großes Icon ohne Kantenglättung (wozu auch).
Möchtest du ein Favicon erstellen?

Zitat:
Diese Grafik hat leider diesen weißen Rand
Das ist eine 35*21px große Grafik mit Kantenglättung.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.08.2007, 12:54
Benutzerbild von baka.PuCHI
body { echo: kooan; }
neuer user
 
Registriert seit: 13.08.2007
Ort: Herford, NRW
Beiträge: 8
baka.PuCHI befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Transparentes Gif kontinuierlich bewegen erich.wanker CSS 1 06.04.2011 22:10
Transparentes einfarbiges gif-Rechteck erstellen!??? Scolex Grafik, Design, Typografie 4 15.03.2011 09:05
Gif im IE nicht animiert Zak CSS 3 30.08.2009 13:45
transparentes Gif mit "weiter-Button" ändern ohne Bambini CSS 10 28.11.2007 17:54
Dynamisch Bilder erstellen Omid Serveradministration und serverseitige Scripte 8 10.07.2007 11:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:33 Uhr.