Home  >  Tutorials  >  Beginners Class Tutorials  >
Transparente GIFs
E-mail this tutorial to a friend Email to a Friend

Transparente GIFs

Von: Charith
Bearbeitet vom PSPUG Learning Center
und von Prof

 
Transparente GIFs sehen sehr schön aus auf einer Webseite. Graphiken sind immer rechteckig oder quadratisch, aber das ist nicht unbedingt die Form, die wir auf unseren Webseiten haben möchten; manchmal hätten wir lieber nur einen Teil des Bildes auf der Webseite. Bei transparenten GIFs kann man eine Farbe des Bildes transparent erscheinen lassen, so daß der Hintergrund der Webseite durchscheinen kann.
 
Download the attachments for this tutorial  Download-Datei

In der Download-Datei links findet ihr zwei Bilder, mit denen wir das Erstellen transparenter GIFs üben werden.

 


Bild öffnen

Transparenz

Öffnet "/tutorial/html/beginclass/star.jpg" aus eurer Download-Datei. Ihr seht, daß dieses Bild einen sehr hellen blauen Hintergrund hat.

 

Laßt uns untersuchen, wie Transparenz funktioniert und wie man transparente GIF-Dateien macht. Wenn ihr versucht, dieses Bild auf eine Webseite zu stellen, dann wird auch die hellblaue Hintergrundfarbe mit angezeigt. (Wenn ihr Animation Shop öffnet, könnt ihr auch dort Dateien laden und betrachten. Zur Zeit wird auch dort dieses Bild star.jpg mit dem hellblauen Hintergrund angezeigt.)

Dupliziert das Bild zunächst mit Fenster || Duplizieren, um das Original zu behalten, und schließt das Originalbild.

 




Werkzeug "Farbauswahl"

Um dieses Bild zu einem transparenten GIF zu machen, mnüssen wir zunächst die Hintergrundfarbe entfernen.

Klickt auf das Werkzeug "Farbauswahl" in eurer Werkzeugleiste und macht dann einen Rechtsklick in den blauen Hintergrundbereich, um diese Farbe zu eurer Hintergrundfarbe zu machen.

Geht jetzt zu Farben || Farbtransparenz einstellen. Es erscheint ein Dialogfenster, in dem ihr auf "Ja" klickt.

Dann erscheint das Dialogfenster "Farbtiefe verringern - 256 Farben". Laßt hier alle Einstellungen, wie sie sind, und klickt einfach auf OK.

Im folgenden Dialogfenster "Transparenz einstellen" wählt ihr "Aktuelle Hintergrundfarbe transparent schalten". Klickt auf "Überprüfen", um zu sehen, ob der Hintergrund transparent ist. Dann klickt auf OK.

 

Bild speichern
Speichert das Bild: Geht zu Datei || Speichern unter. Als "Dateityp" wählt ihr "Compuserve Graphics Interchange (*.gif)", dann klickt auf den Button "Optionen". Wählt hier "Version 89a" und "Non-interlaced" und klickt auf OK. Gebt einen Namen für die Datei ein, z.B. "/tutorial/html/beginclass/clearstar.gif", und klickt auf "Speichern". Bei der Meldung, daß die Anzahl der Farben auf 256 reduziert wird, klickt ihr auf OK.
 

In PSP 6 und 7 gibt es noch eine andere Möglichkeit, transparente GIFs zu speichern (in PSP 6 geht man zu Datei || Export || Transparentes GIF-Bild, in PSP 7 zu Datei || Export || GIF-Optimierung). Wir werden diese Möglichkeiten hier nicht durchspielen, ihr solltet es euch aber einmal selbst ansehen! :o)

Ihr habt gerade ein transparentes GIF gemacht! Anmerkung: Ihr werdet erst sehen, daß die von euch gewählte Farbe transparent ist, wenn ihr das Bild mit einem andersfarbigen Hintergrund auf eine Webseite stellt. In Paint Shop Pro wird eine Graphik immer mit all ihren Farben angezeigt.

Die vorige Übung war sehr einfach. Leider haben nicht alle Graphiken und Bilder einen solchen einfarbigen Hintergrund.

 


Bild öffnen

Ein zweites Beispiel:

Öffnet die Datei "/tutorial/html/beginclass/star1.jpg" aus eurem Download.

 

Ihr seht, daß der Hintergrund dieses Bild aus einem Farbübergang mit vielen Farben besteht. Um aus einem solchen Bild ein transparentes GIF zu machen, muß man zuerst den Hintergrund bearbeiten und in eine Vollfarbe umwandeln. Wir werden diese Farben in einen einfarbigen weißen Hintergrund umwandeln.

Wenn ihr bei diesem Bild jetzt den Zauberstab anwenden würdet, würde er nicht den gesamten Hintergrund außerhalb des Sterns auswählen, wie das bei dem letzten Beispiel mit dem hellblauen Hintergrund der Fall war.

 
Aktive Farben (PSP 5 & 6) Aktive Farben (PSP 7)
PSP 5/6 PSP 7
Setzt sowohl Vorder- als auch Hintergrundfarbe auf Weiß. (In PSP 7: Vorder- und Hintergrundstil = Vollfarbe, Vorder- und Hintergrundtextur = Keine Textur.)
 
Werkzeug "Zauberstab"



Hier gibt es die Möglichkeit, den Wert für die Toleranz beim Zauberstab so zu setzen, daß er mehr Pixel auswählt als nur die eine Vollfarbe, die angeklickt wird; es werden dann auch ähnliche Farben ausgewählt, die an die angeklickte Farbe anstoßen. Fangt mit einem Wert an und wählt einen Bereich des Hintergrundes aus – paßt aber auf, daß nicht ein Teil des Sterns dabei ist.

Wenn ihr einen Teil des Sterns erwischt habt, hebt die Auswahl mit einem Rechtsklick auf das Bild auf, setzt den Wert für die Toleranz etwas herunter und versucht es noch einmal.

Wenn der Wert für die Toleranz zu klein gewählt ist, wird ein kleinerer Bereich ausgewählt. In diesem Fall erhöht einfach die Toleranz ein bißchen und versucht es noch einmal.

Versucht jetzt einen Wert von 60 für die Toleranz und klickt in den Hintergrund des Bildes, dann drückt die Entf-Taste. Klickt in ein anderes Stück vom Hintergrund, das jetzt noch nicht weiß ist, und drückt wieder die Entf-Taste. Wenn der ausgewählte Bereich zu groß ist, setzt den Toleranzwert herunter.

Fahrt auf diese Weise fort, bis der Hintergrund ganz oder fast weiß ist.

 
Werkzeug "Lupe" (Zoom) Einige Pixel des Hintergrundes sind jetzt noch nicht weiß. Um diese Pixel auch noch zu entfernen (bzw. weiß zu färben), gibt es jetzt mehrere Techniken. Am besten zoomt ihr aber erst zwei- oder dreimal in das Bild hinein.
 
Werkzeug "Lasso" (Freihandauswahl)

Methode 1: Kickt auf das Freihand-Werkzeug (Lasso) in der Werkzeugleiste:
– Auswahltyp = Freihand
– Randschärfe = 0
– Antialias = aktiviert

Dann umkreist die Überreste des Hintergrundes mit der Maus, so daß diese Bereiche ausgewählt sind, und drückt die Entf-Taste (vielleicht müßt ihr die Entf-Taste mehrmals drücken).

Fahrt damit fort, bis der Hintergrund vollständig weiß ist.

 
Werkzeug "Standardpinsel"

Methode 2: Klickt auf den Standardpinsel in der Werkzeugleiste und vergewissert euch, daß der Pinsel auf "Normal" gesetzt ist (wenn nötig, klickt auf den kleinen Pinsel in der Kontroll-/Stil-Palette und wählt "Normal" aus dem Kontextmenü). Die anderen Einstellungen sind:
– Form = PSP 5: Rechteck, PSP 6 und 7: Quadrat
– Stärke bzw. Größe = 1
– Alle anderen Einstellungen = 100

Geht mit der Maus über die Pixel im Hintergrund, die noch nicht weiß sind, und klickt darauf oder zieht die Maus darüber, um diese Pixel mit Weiß zu übermalen. Fahrt damit fort, bis der Hintergrund vollständig weiß ist.

 
Bild speichern

Dann stellt – wie oben beschrieben – Weiß als transparente Farbe ein und speichert euer Bild als transparentes GIF.

– Viel Spaß! – :o)

 

Mit diesem Tutorial ist unsere Serie für Einsteiger in Paint Shop Pro abgeschlossen. Ihr solltet euch jetzt auf jeden Fall auch einmal die anderen Tutorials auf unserer Webseite ansehen. Schaut auch einmal in unserem Learning Center vorbei: zusätzliche Tutorials, Online-Klassen, das Self-Learning Programme und die Tips und Tricks – viele Angebote, die euch das Lernen zum Vergnügen machen! Wenn ihr Fragen habt, dann kommt zu unserem Message Forum, wo euch viele Leute gerne zu allen Fragen rund um PSP zur Seite stehen.

Viel Vergnügen bei der "Arbeit" mit Paint Shop Pro!

 
(Übersetzung aus dem Englischen von Doro Sensen)