Unscharfer Rand bei Schrift im Bild

Computer: Software & Programmierung Photoshop & Grafik
#1

Hallo.

Ich wollte Buttons für meine neue HP erstellen. Simpel und einfach. Der Hintergrund der Buttons soll tranparent sein (damit man den Hintergrund der Seite sieht). Dies machte ich einfach mit Dreamweaver und Adobe Photoshop - und erhielt zwar den transparenten Hintergrund des Buttons, leider ist jedoch der Rand der Schrift total unscharf und sieht aus wie „gerissen“. Es handelt ich um ein gif-Bild, da beim JPG kein tranp. Hintergund möglich war. Woran liegt das mit der unscharfen Schrift? Hier ein Beispiel: http://www.stephenlynch.de/unscharf.html

Wäre über eure Rückmeldung sehr dankbar!!!
Liebe Grüße
Florian

#2

Hallo Florian,

ich kenne mich mit Photoshop nicht aus, aber dein gif ist sehr klein und besteht aus verschiedenen Grautönen (dunkel bis weiß). die sind natürlich alle nicht transparent. Du könntest jetzt das gif auf drei Farben reduzieren (schwarz, weiß und transparent) und damit sicherstellen, dass nichts weiteres angezeigt wird. Ich nehme an, dass der Dreamweaver damit nichts zu tun hat.

Cheers, Felix

#3

Hallo und danke für die schnelle Antwort.

Selbst bei Graustufenbildern, ist das Problem da. Ich würde jedes Programm nutzen - hauptsache ich bekomme scharfe Schriftränder auf den Bildern… andere bekommen das ja auch hin. *lol* UNd leider kommt noch hinzu, dass ich simple Mouseover-Bilder verwenden will - sprich Farbe ist schon notwendig…

Noch irgendeine Idee?? Danke!!!

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#4

Hallo,

Ich wollte Buttons für meine neue HP erstellen. Simpel und
einfach. Der Hintergrund der Buttons soll tranparent sein
(damit man den Hintergrund der Seite sieht). Dies machte ich
einfach mit Dreamweaver und Adobe Photoshop - und erhielt zwar
den transparenten Hintergrund des Buttons, leider ist jedoch
der Rand der Schrift total unscharf und sieht aus wie
„gerissen“. Es handelt ich um ein gif-Bild, da beim JPG kein
tranp. Hintergund möglich war. Woran liegt das mit der
unscharfen Schrift? Hier ein Beispiel:
http://www.stephenlynch.de/unscharf.html

Im Photoshop:
Datei - Für Web speichern

In dem Fenster: GIF auswählen und als Hintergrundfarbe die Farbe Deines Hintergrundes auswählen.

Wenn Dein Hintergruns mehrfarbig ist musst Du rumprobieren, ob es einen Mittelwert gibt der passt.
Gibt es keinen, dann musst Du den Button gleich so anlegen, dass er den Hintergrund Deiner Site im Hintergrund hat.

Grüße
Christian

#5

Hi Christian.

Im Photoshop:
Datei - Für Web speichern

Habe ich so gemacht, wie auch sonst. =)

In dem Fenster: GIF auswählen und als Hintergrundfarbe die
Farbe Deines Hintergrundes auswählen.

Auch das habe ich gemacht (Transparent).

Gibt es keinen, dann musst Du den Button gleich so anlegen,
dass er den Hintergrund Deiner Site im Hintergrund hat.

Transparent.

Genau deswegen weiß ich nicht, warum es nicht klappt! =)

#6

Hallo,

Im Photoshop:
Datei - Für Web speichern

Habe ich so gemacht, wie auch sonst. =)

zB mit Modus-Indiziert und dann speichern unter? Aber darum gings ja nicht.

In dem Fenster: GIF auswählen und als Hintergrundfarbe die
Farbe Deines Hintergrundes auswählen.

Auch das habe ich gemacht (Transparent).

Ja, das Häkchen bei transparent ist wichtig, klar - aber hast Du auch eine Hintergrundfarbe ausgewählt?
Und oben erstmal 256 Farben zur Verfügung?

Grüße
Christian

#7

Ja, das Häkchen bei transparent ist wichtig, klar - aber hast
Du auch eine Hintergrundfarbe ausgewählt?
Und oben erstmal 256 Farben zur Verfügung?

Wozu eine Hintergrundfarbe beim Text-Bild? Soll ja nur der Text sein mit transparentem Hintergrund. Die Seite selbst ist mit einem Bild hinterlegt. Und ja, 256 Farben stehen zur Verfügung. Aber selbst wenn ich alles in grau mache, ist der Text unleserlich oder so „zerrissen“.

Irgendwie muss es ja möglich sein (mit welchem Programm auch immer) den Text „scharf“ und leserlich hinzubekommen - hoffe ich doch. =)

#8

Hallo,

Klar. Am besten dazu mal ausprobierten, was Du hier als Tipp bekommst und dann meckern :smile:

Die Hintergrundfarbe ist dazu da, die zerrissenen Ränder zu vermeiden.
Photoshop legt Deine Schrift mit leicht unscharfen Kanten an - das nennt man dann AntiAliasing und es vermeidet einen Pixeleffekt an den Diagonalen oder Rundungen Deiner Schrift.
Photoshop nutzt dazu halbtranparente Pixel - die können aber im GIF-Format nicht dargestellt werden.
Deswegen musst Du vorher festlegen, auf welcher Hintergrundfarbe der halbtransparente Effekt dargestellt weder soll, damit das dann bei endgültigen Export in endgültige Farben umgerechnet werden kann.

Probiers halt mal aus. Standardmäßig steht die Hintergrundfarbe glaube ich auf „weiß“ - das sind dann genau die zerrissenen weißen kanten, die Du immer erzeugst.

Grüße
Christian

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#9

Noch irgendeine Idee?? Danke!!!

Ja. Halte dich mal an das, was dir der Christian erklärt hat, denn genau das ist
dein Problem. Oder du verwendest kein Antialiasing auf deine Schrift an, dann
brauchst du auch keine Hintergrundfarbe mit anzugeben, dafür sieht die Typo dann
auch sägezahnmäsig aus.

Hier wird das Thema gut erklärt:
http://de.wikipedia.org/wiki/Antialiasing

#10

Klar. Am besten dazu mal ausprobierten, was Du hier als Tipp
bekommst und dann meckern :smile:

Ich mecker doch gar nicht. =) Falls dem so war, sorry. Schätze ja die Hilfe! =)

Die Hintergrundfarbe ist dazu da, die zerrissenen Ränder zu
vermeiden.

Habe die png-Buttons mit Fireworks erstellt und mit Photoshop als Webbild gespeichert. Bei Fireworks habe ich auch schon alle „AntiAlias“-Funktionen durch. Muss ich also den Hintergrund der Schrift festlegen? Sprich, die Schrift wäre nicht pur auf dem Button, sondern mit etwas „farbigem“ Hintergrund?

Photoshop legt Deine Schrift mit leicht unscharfen Kanten an -
das nennt man dann AntiAliasing und es vermeidet einen
Pixeleffekt an den Diagonalen oder Rundungen Deiner Schrift.
Photoshop nutzt dazu halbtranparente Pixel - die können aber
im GIF-Format nicht dargestellt werden.

Ja, aber nur im Gif habe ich den transparenten Button so speichern können - jpg macht den Hintergrund weiß.

Probiers halt mal aus. Standardmäßig steht die
Hintergrundfarbe glaube ich auf „weiß“ - das sind dann genau
die zerrissenen weißen kanten, die Du immer erzeugst.

D.h. ich sollte die Buttons mal komplett im Photoshop erstellen und dort die „Leinwandfarbe“ auf Transparent stellen und die Hintergrudnfarbe der Schrift auf z.b. weiß?!

Ich verzweifle noch mit dem ganzen Zeug. *lol*

#11

Habe die png-Buttons mit Fireworks erstellt und mit Photoshop
als Webbild gespeichert. Bei Fireworks habe ich auch schon
alle „AntiAlias“-Funktionen durch. Muss ich also den
Hintergrund der Schrift festlegen? Sprich, die Schrift wäre
nicht pur auf dem Button, sondern mit etwas „farbigem“
Hintergrund?

Ja. Genau so und leider nicht anders gehts bei GIFs.

Ja, aber nur im Gif habe ich den transparenten Button so
speichern können - jpg macht den Hintergrund weiß.

Ist klar.

Probiers halt mal aus. Standardmäßig steht die
Hintergrundfarbe glaube ich auf „weiß“ - das sind dann genau
die zerrissenen weißen kanten, die Du immer erzeugst.

D.h. ich sollte die Buttons mal komplett im Photoshop
erstellen und dort die „Leinwandfarbe“ auf Transparent stellen
und die Hintergrudnfarbe der Schrift auf z.b. weiß?!

Nö, Du kannst auch ein PNG öffnen und dann speichern.
Die „Leinwandfarbe“ bleibt bitte transparent.

*gebetsmühlenmodus an* Und im Dialogfenster „Für Web speichern“ wählst Du dann bitte eine Hintergrundfarbe aus, die der Farbe entspricht, auf der die Buttons hinterher liegen sollen *gebetsmühlenmodus aus*

(Gleich mach ich Dir ein Video, wenn Du es wieder nicht findest…)

Grüße
Christian

#12

Hallo Florian,

es liegt wahrscheinlich daran, das die Hintergrundfarbe, die Du transparent machen willst, nicht auf dem ganzen Bild gleichmäßig ist. Darum wird der Hintergrung auch nicht kommplett transparent. Du musst die Grafik wohl nachbearbeiten und die abweichenden Pixel anpassen. Dann sollte auch eine schärfere Kante bei rauskommen.

Gruss Marsson

#13

ICH HAB’s!!! DANKE!!! =)