Wie wird der Button-Hintergrund transparent?

Chrissi_d0b25f · 16. September 2003 um 15:56

Hallo,

ich möchte auf meiner HP einen Button bearbeiten.
Dieser Button ist kopiert und nun möchte ich ihn bearbeiten.
Mein Problem ist. Der Hintergrund des Buttons (Herz) ist weiß.
Also wenn ich diesen Button auf eine hellbl. Seite einfüge habe ich ein
weißes Rechteck indem dieses Herz ist.
Ich arbeite mit PhotoImpact und Picture It.
Wie kann ich diesen Button bearbeiten sodaß der Hintergrund transparent ist?

Danke
LG
Chrissi

masc_6ed3c5 · 16. September 2003 um 16:21

Moin Chrissi

Den Button komplett ausschneiden und in ein neues Dokument einfügen.
Dann den Button doppelklicken (oder rechte Maustaste - Eigenschaften).
Transparente Farbe auf weiß setzen und bestätigen.
Fertich

Gruß, masc

Chrissi_d0b25f · 16. September 2003 um 17:12

Hallo masc,

ich habe es genauso gemacht wie du es beschrieben hast.
Irgendwie nimmt er das Format nicht. Das Bild ist danach total verzerrt???
Hast du noch einen Tipp für mich??
Danke
Chrissi

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

Kampfbrot · 18. September 2003 um 01:02

Wie kann ich diesen Button bearbeiten sodaß der Hintergrund
transparent ist?

Transparente Farben gehen am besten, wenn man das Bild als Compuserve Bitmap (.gif) abspeichert. Hat allerdings den Nachteil, dass du dann nur 256 Farben zur Verfügung hast. Und du solltest drauf achten, dass die Farbe, die du auf transparent schaltest nirgendwo anders in deinem Bild vorkommt. Denn alles, was weiss ist wird dann auch durchsichtig.
Also füll am besten erstmal den Hintergrund mit irgend einer Farbe, die in deinem Button nicht vorkommt (grelles Pink, leuchtendes Grün oder irgend sowas) und diese Farbe stellst du dann als transparente Farbe ein (da fragst du am besten die Hilfe von deinem Programm)

.jpg-Formate können übrigens keine transparentenn Farben darstellen, da sie die Bilder auf ne andere Art und Weise komprimieren.

Hoffe, geholfen zu haben

chris h.(der liebe)

DannyFox64 · 18. September 2003 um 03:08

Hallo Chrissi!

Zwar bist Du hier in diesem Brett nicht ganz falsch, aber für diese Frage ist das Brett „Grafik“ besser geeignet (mehr Fachleute zu Grafikprogs.).

ich möchte auf meiner HP einen Button bearbeiten.
Dieser Button ist kopiert und nun möchte ich ihn bearbeiten.
Mein Problem ist. Der Hintergrund des Buttons (Herz) ist weiß.

Das ist kein sooo grosses Problem, zumindest dann, wenn…

Also wenn ich diesen Button auf eine hellbl. Seite einfüge
habe ich ein

…die Hintergrundfarbe der Homepage eben eine helle Farbe ist.

weißes Rechteck indem dieses Herz ist.

Wie gut ist denn die Qualität der Konturen???
Es spielt da mit eine Rolle, in welchem Format die Grafikdatei vorliegt…

JPEG -> meist schlechte Kontuierung
GIF -> kann sehr klare Konturen haben - muss es aber nicht
BMP -> könnte die (Pixel-) Kopie einer Vektor-Grafik sein, meist sehr hart kontuiert (absoluter Farbübergang von z.B. Rot auf pures Weiss)

Ich arbeite mit PhotoImpact und Picture It.

Das ist ja lustig: PI und PI *g*
Zu PhotoImpact sage ich dann mal PI. Und Picture It lassen wir mal weg - das ist doch Micro$oft (oder?).

Wie kann ich diesen Button bearbeiten sodaß der Hintergrund
transparent ist?

Das Zielformat, in dem Du später speicherst, sollte dafür am besten GIF (CompuServe GIF) sein, weil dies von allen Web-Browsern unterstützt wird. PNG (sprich: ping) käme zwar grundsätzlich auch in Frage, da PNG ebenfalls Transparenz-Farbe unterstützt, wird aber wieder nicht von allen… (Du weisst schon.)

Nun hast Du verschiedene Möglichkeiten:

Wenn es ein aussergewöhnliches Herz ist, so wie Du es sonst noch nie gesehen hast, dann solltest Du auch dieses nehmen. (1)

Wenn es ein Herz ist, das Du sehr leicht mit einer Symbolschriftart nachmachen kannst, ja warum dann nicht nachmachen… (2)

(1) Das besondere Herz

PI unterstützt bestimmt Transparenzfarbe. ^{Ich kenne jetzt leider nicht die Menüführung bei PI, aber suche doch mal nach einem Begriff wie „Leinwand“ (z.B. Dokument–Leinwand, Einstellungen–Leinwand) - so nennt man das synonym zur echten Malerei… Dort wirst bestimmt auswählen können in welcher Farbe oder eben transparent die Leinwand sein soll.}

Bei dem vorliegenden Bild könnte es also sein, dass du „Weiss“ als transparent bestimmen kannst. Damit dürfte dann das wesentliche gelöst sein… noch als GIF abspeichern. Fertig!

Ob das Ergebnis gut ist? --> Lass es uns wissen!

(2) Ein rotes Herz

Erstelle dann ein neues Bild, ruhig überformatig für das „kleine Herz“, vielleicht 2-3x so gross. Es müsste ein Dialogfeld erscheinen, in dem Du die Hintergrundfarbe (Leinwand-Farbe) auswählen kannst.

Entweder wählst Du dann „Hellblau“ - wie auf Deiner Homepage - oder „Transparenz“. Das musst Du probieren, weil - wie ich gerade eben in meiner Bildbearbeitung festgestellt habe - es unterschiedliche Methoden gibt, wie gespeichert oder konvertiert wird.

Na, jedenfalls fügst Du dann das (rote) Herz in Form von Text ein… Im Zeichensatz „Monotype Sorts“ hat es den Zeichencode 0169, das ist das Copyright-Zeichen©. Die Eingabe muss man meist über die Tastatur machen: [Alt]-Taste halten und auf dem Ziffernblock rechts „0169“ eingeben.

Ich denke, Du kommt damit weiter. Probiere halt, wie das im „Zielformat“ *.gif herauskommt.

Auf einer meiner Seiten habe ich mal eine Proforma-Homepage gestellt. An den Bildern dort kannst Du vielleicht nachvollziehen, was ich meine:

http://de.geocities.com/dannyfox64/ (eBay-Version)
http://de.geocities.com/dannyfox64/indexhood.html (hood.de-Version)
Überfahre die Bilder dort x mit der Maus… *g*

…wenn Du sie als Beispielbilder brauchst, um sie in PhotoImpact anzuschauen, hier die Direktlinks:
http://de.geocities.com/dannyfox64/src/mich-archiv_7…
http://de.geocities.com/dannyfox64/src/ebay060x30mit…
http://de.geocities.com/dannyfox64/src/hood-de_banne…

So, für heute nacht reicht’s. - Bis die Tage…

CU DannyFox64

DannyFox64 · 18. September 2003 um 03:15

Hallo Chrissi!

Tja, wirklich Upps!

http://de.geocities.com/dannyfox64/src/ebay060x30mit…

**Die Bilder auf GeoCities.com kann man ja leider nicht direkt runterladen…!

Also dann hier noch eine andere Version von „Direktlinks“:**

http://dannyfox64.gmxhome.de/src/mich-archiv_72x30tr…
http://dannyfox64.gmxhome.de/src/ebay060x30mitaura00…
http://dannyfox64.gmxhome.de/src/hood-de_banner2-234…

CU DannyFox64

masc_6ed3c5 · 18. September 2003 um 10:49

Moin Chrissi

Ich geh jetzt mal Schritt für Schritt vor:

Du öffnest die Grafik, die Du bearbeiten möchtest (Bild maximieren).
Links in der Navi findest Du das Standardauswahlwerkzeug (gestricheltes Quadrat mit eine kleinen Pfeil darin.
Das klickst Du an.
Setze den Mauszeiger etwas außerhalb der Grafik an, drücke die linke Maustaste und ziehe ein Quadrat um die Grafik um diese auszuwählen.
Wenn Du die Maustaste dann loslässt sollte die Grafik von einer blau-schwarz-gestrichelten Linie umgeben sein.
Auswahl in die Zwischenablage kopieren mit rechte Maustaste -> kopieren oder mit Strg+C.
Wenn Du den Mauszeiger über die Grafik führst siehst Du in der Statuszeile ganz rechts die Maße der Grafik.
Datei -> Neu -> Neues Bild oder das weiße Blatt darunter anklicken.
Benutzerdefinierte Breite und Höhe angeben.
Als Leinwand entweder die neue gewünschte Hintergrundfarbe einstellen oder auf Transparent. Wenn alles eingestellt ist mit ok bestätigen.
Grafik aus der Zwischenablage in das neue Bild einfügen mit rechte Maustaste -> einfügen oder mit Strg+V.
Nun hast Du die Grafik in dem neuen Bild als Auswahl liegen.
Die Grafik nun Doppelklicken oder rechte Maustaste -> Eigenschaften.
Es öffnet sich ein kleines Fenster.
Etwa mittig darin steht Transparenz 0.
Darunter kann man ein Häkchen setzen und rechts daneben die Farbe auswählen, die Transparent dargestellt werden soll.
Wenn Du den Farbcode der Hintergrundfarbe nicht kennst benutzt Du das Pipette-Werkzeug.
Pipette (linke Navigation) anklicken (Mauszeiger ändert sich und links oben steht jetzt das Wort Farben mit Farbkästchen darunter).
Pipette auf die Farbe führen, deren Farbcode Du wissen möchtest und 1x mit der linken Maustaste klicken.
Diese Farbe findest Du nun oben unter dem Wort Farben im ersten Kästchen.
Klicke auf dieses Farbkästchen und es öffnet sich der Farbwähler.
Ganz rechts unten siehst Du neben dem Wort Hex: den eingestellten Farbwert.
Farbwert merken.
Nun klickst Du in der linken Naiv ganz oben auf den schrägen Pfeil.
Danach mit dem wieder geänderten Mauszeiger doppelt auf die Grafik klicken (siehe Punkt 10).
In den Eigenschaften des Bildes klickst Du nun auf das schwarze Farbkästchen rechts neben Transparenz.
Es öffnet sich wieder der Farbwähler in den Du nun den Wert einträgst, den Du Dir hoffentlich gemerkt hast.
Mit ok bestätigen und noch mal bestätigen.
Nun sollte eigentlich das Herz auf einem transparenten Hintergrund liegen.
Es sollte auch nicht unproportional erscheinen.

Probiers mal aus - ist nicht schwer.
Ansonsten schau mal bei Jürgen vorbei - da findest Du allerlei Workshops für Photoimpact.
http://www.juergens-workshops.de/

Wenn gar nix hilft schick mir die Grafik per mail zu, dann ändere ich sie für Dich.

Gruß, masc