Bilder freistellen - GIMP (einfach)

  • Heute widmen wir uns einem Thema welches für jeden Webdesigner früher oder später wichtig werden kann: Das Freistellen von Elementen aus Fotos.

    [b][color=#000000]Software / Technik:[/color][/b]
    Wir schauen uns heute das Freistellen von Objekten mit Hilfe von GIMP und dessen Pfaden an. Dies testen wir an 3 Beispielen und klären hinterher, welche alternativen Techniken es gibt und wo die Vor- und Nachteile liegen.

    [b][color=#000000]Schwierigkeit:[/color][/b]
    Dieses Tutorial ist ziemlich einfach, ich werde auf die ausgeführten Schritte genau eingehen und alles eher simpel halten. Es wird in nächster Zeit eine fortgeschrittene Anleitung geben, in welcher wir mit Photoshop arbeiten und komplexere Verfahren für bessere Ergebnisse bei schwierigen Objekten besprechen.

    GIMP ist ein kostenloses aber umfangreiches Programm um Bilder zu bearbeiten, [url='http://www.gimp.org/']hier[/url] ist die Software zu beziehen und eine Anleitung zur Installation sowie erste Schritte gibt es [url='http://www.html-seminar.de/gimp.htm']hier[/url] auf html-seminar.de.

    Mit Strg ist übrigens die Steuerungstaste (ganz unten Links) gemeint, Apfelmenschen drücken dementsprechend wohl die Commandtaste.

    [b][color=#000000]Tutorial Teil 2:[/color][/b]
    Das 2. Tutorial zum Thema freistellen wird Photoshop und einige erweiterte Techniken beinhalten. Alleine das Erstellen des Tutorials wird Tage dauern, von daher bitte ich um etwas Geduld bis das Ganze so weit ist, es wird dann selbstverständlich hier verlinkt.

    [b][color=#000000]Inhalt:[/color][/b][list=1][*] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no1']Pfade - kurz erklärt[/url] [*] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no2']Beispiel Würfel[/url] [*] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no3']Beispiel Tattoo[/url] [*] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no4']Beispiel Fisch[/url] [*] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no5']Alternative Techniken[/url] [*] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no6']Schlusswort[/url] [/list] Bitte trotz Inhaltsverzeichnis chronologisch vorgehen, die Schritte bauen teilweise aufeinander auf.

    [b][color=#000044][size=14]1. Pfade - Was ist das eigentlich?[/size][/color][/b] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no0'][sup](TOP)[/sup][/url]
    Das Pfadwerkzeug ist im Werkzeugkasten zu finden: [attach]686[/attach][attach=687,right][/attach]
    Außerdem zu erreichen ist es durch das Drücken der[color=#000000][b] P[/b][/color]-Taste auf der Tastatur (en. für [b][color=#000000]P[/color][/b]ath).

    Die Einstellungen für das Pfadwerkzeug sind nicht sonderlich kompliziert:
    Path Config
    An dieser Stelle entschuldige ich mich besser dafür das mein GIMP derzeit als englische Version läuft, ist aber jetzt nicht so wichtig. Uns interessieren sowieso nur 3 Optionen: Design, Edit (Bearbeiten) und Selection from Path (Auswahl aus Pfad), wobei wir die ersten beiden mit der Tastatur umschalten werden (alles andere wäre Wahnsinn, grundsätzlich sind Tastaturkürzel schneller und in der Bildbearbeitung früher oder später Pflicht für schnelles Arbeiten).

    Mit dem Pfadwerkzeug aktiviert können wir mit einem Klick in ein Dokument nun Punkte setzen, sobald wir 2 davon an unterschiedlichen Stellen gesetzt haben werden diese durch einen [b]Pfad[/b] verbunden:

    Die Punkte, welche wir erstellen, nennen wir Anker. Die wichtigsten Funktionen für das Pfadwerkzeug:

    [b]Anker erstellen:[/b] Auf eine Stelle ins Dokument klicken
    [b]Anker selektieren:[/b] Auf den Anker klicken
    [b]Anker verschieben:[/b] Den Anker mit gedrückter Maustaste an die gewünschte Stelle verschieben
    [b]Anker löschen:[/b] Strg+ Alt + Mausklick auf den gewünschten Anker
    [b]Anker verbinden:[/b] Dies müssen wir nur in einem Fall machen und zwar um den letzten gesetzten Anker mit dem ersten zu verbinden, dies tun wir indem einer der beiden Anker selektiert wird und ein Mausklick mit gedrückter Steuerung-Taste auf den anderen erfolgt.

    [b][color=#000000]Warum denn nun eigentlich das Pfadwerkzeug, Es gibt doch auch das Lasso-Tool?[/color][/b]
    Eine berechtige Frage, der Vorteil liegt klar darin das ein Pfad bei jeder Änderung gespeichert wird, sollten wir das Pfadwerkzeug versehentlich oder absichtlich deaktivieren so können wir später am selben Pfad weiterarbeiten, dazu gehen wir im Fenster in dem normal unsere Ebenen angezeigt werden und klicken im oberen Reiter auf Paths (Pfade), hier sind nun all unsere Pfade aufgelistet und wenn wir das Auge links daneben aktivieren wird der entsprechende Pfad im Dokument farbig angezeigt, aktivieren wir nun das Pfadwerkzeug und klicken auf den Pfad im Dokument so können wir diesen weiter bearbeiten, außerdem können wir unsere Pfade hier auch benennen:

    [b][color=#000044][size=14]2. Beispiel Würfel[/size][/color][/b][attach=684,right][/attach][attach=693,right][/attach] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no0'][sup](TOP)[/sup][/url]
    Nun wissen wir wie ein Pfad angelegt wird, also können wir loslegen, hier haben wir ein Bild von einem schicken orangefarbenen Würfel, jedoch mit störendem grünen Hintergrund, so können wir den Würfel auf unserer Website nicht verwenden, also entfernen wir den Hintergrund.

    Wir beginnen nun also den Würfel mit dem Pfadwerkzeug zu umranden:

    [attach]691[/attach]

    Wenn wir mit unserem Pfad zufrieden sind klicken wir in den Einstellungen im Werkzeugkasten einfach auf [b]Selection from Path / Auswahl aus Pfad[/b]. Nun ist der Würfel selektiert und wir kommen zum nächsten Schritt.

    [b][color=#660000]Achtung:[/color][/b] Wir müssen zu diesem Zeitpunkt unbedingt darauf achten das die Ebene auf der sich das Würfel-Bild befindet einen Alphakanal besitzt. Der Alphakanal ist der Bereich welcher die Transparenz angibt, ist kein Alphakanal vorhanden gibt es auch keine Transparenz sondern nur einen weißen Hintergrund.

    Wir gehen also im Ebenendialog auf den Reiter [b]Layers / Ebenen[/b] und klicken mit der rechten Maustaste auf die entsprechende Ebene um das Kontextmenü zu öffnen. Sollte hier die Option [b]Add Alphakanal / Alphakanal hinzufügen[/b] anklickbar sein, so wird es nun getan, ist dies nicht der Fall so ist bereits ein Alphakanal vorhanden, das Ganze sollte so aussehen:

    Wo das Kontextmenü zu finden ist erklärt das linke Bild auf der rechten Seite dieses Beitrages.

    [b][color=#000000]Alphakanal vorhanden, was nun?[/color][/b]
    Wir haben nun mehrere Möglichkeiten, wir könnten zum Beispiel einfach den markierten BEreich kopieren und einfügen, dann auf den "Neue Ebene"-Button drücken und die Hintergrundebene öffnen, mir aber viel zu kompliziert.

    Wir Invertieren nun die Auswahl mit der Tastenkombination [b]Strg + i[/b], oder alternativ über das Menü am oberen Bildschirmrand: [b]Select -> Invert / Auswahl -> Invertieren[/b] und entfernen das überflüssige Material mit der Entf(ernen)-Taste, alternativ über [b]Edit -> Clear / Bearbeiten -> .. ja.. leeren oder so[/b].

    Nun ist nur unser Würfel übrig, keine Ebenen die noch gelöscht werden müssen, alles super, wir merken uns also:
    [b]Pfad erstellen[/b] ->[b] Auswahl aus Pfad[/b] -> [b]Strg + i[/b] -> [b]Entf [/b]-> fertig!

    [b][color=#000000]Hässlicher Rand, HILFE![/color][/b]
    Es wird immer wieder dazu kommen das die Auswahl nicht ganz so schön ist:

    [attach]694[/attach]

    Keine Schande, passiert den Besten. Mit zunehmender Erfahrung neigt man dazu diese Kanten direkt zu vermeiden indem man den Pfad direkt etwas weiter innen anlegt, es gibt jedoch auch andere Möglichkeiten diese Kanten zu entfernen.

    [b][color=#000000]Kante entfernen[/color][/b]
    Wir können den Würfel einfach kleiner machen, hierzu rufen wir im Ebenendialog das Kontextmenü der Würfelebene auf und wählen ganz unten [b]Alpha to Selection / Auswahl aus Alphakanal[/b], nun ist wieder der Würfel selektiert (wir hätten alternativ auch den gespeicherten Pfad erneut in eine Auswahl umwandeln können, so geht es aber schneller). Als nächstes verkleinern wir die Auswahl um einen Pixel, sollte die Kante breiter sein werden daraus auch schon mal zwei oder drei, in diesem Fall ist es jedoch nur einer: [b]Select -> Shrink/ Auswahl -> Verkleinern[/b], im darauf auftauchenden Fenster tragen wir die gewünschte Breite, in diesem Fall 1px, ein. Nun ist die Auswahl verkleinert und wir entfernen wie gelernt/gewohnt alles Überschüssige: Strg + i -> Entf(ernen), unsere Kante ist in diesem Fall verschwunden.

    Es kann natürlich auch sein das nur ein bestimmter Bereich der Kanten betroffen ist, hier können wir auch den Pfad anpassen und eine neue Auswahl erstellen oder aber wir nehmen uns simpel das Radiergummi und radieren vorsichtig überschüssige Pixel weg. Ebenenmasken helfen hier auch, jedoch ist das ein Fall für das Tutorial für Fortgeschrittene, sorry ;)
    [b][color=#000044][size=14]3. Beispiel Tattoo[/size][/color][/b][attach=695,right][/attach] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no0'][sup](TOP)[/sup][/url]
    Wir wollen dem Würfel jetzt ein schickes Tattoo verpassen, also suchen wir ein Tattoo, am rechten Rand habe ich eines angehängt mit dem wir nun arbeiten werden, es ist sehr einfach gehalten, im nächsten Tutorial für die etwas schwerere Kost wird das noch [b]richtig[/b] spannend, das kann ich versprechen!

    Wir umranden nun im ersten Schritt wieder den Stern mit unserem Pfadwerkzeug. Sind wir fertig klicken wir wie gewohnt auf [b]Selection from Path / Auswahl aus Pfad[/b].

    [i]"Du willst mich ja wohl ver*****en, das ist doch absoluter Blödsinn, das geht doch garnicht!!!"[/i] - 'Tschuldigung, ich erklärs ja schon ;)

    Natürlich ist auch mir nicht entgangen das der Stern innen hohl ist, wir müssen nun einen Zwischenschritt tun und zwar legen wir eine neue Ebene an und nennen sie "[i]Auswahlkopie[/i]" oder verbreiteter "[i]Ebene 2[/i]" (*zwinker*), nun nehmen wir das Füllwerkzeug und füllen unsere Auswahl auf der [i]Auswahlkopie[/i]-Ebene mit Schwarz. Keine Sorge, der Schwarze Stern wird vermutlich deutlich kleiner wirken als der Stern auf dem Originalbild aber das interessiert uns derzeit nicht (gleich mehr).

    Wir blenden nun die eben erstellte Ebene aus und legen einen neuen Pfad an, dieses mal auf der Innenseite des Tattoos, ich warte so lange auf dich :whistling:

    Nun erstellen wir aus dem Pfad wieder eine Auswahl, blenden unsere [i]Auswahlkopie[/i]-Ebene ein, aktivieren diese (so das die Ebene im Ebenendialog einen blauen Hintergrund bekommt) und drücken die Entf(ernen)-Taste. Wir öffnen im Ebenendialog nun erneut das Kontextmenü und wählen [b]Alpha to Selection / Auswahl aus Alphakanal[/b], nun verstecken wir die [i]Auswahlkopie[/i]-Ebene und aktivieren unsere Tattoo-Ebene und was kommt nun? Richtig: Strg + i -> Entf(ernen). That's it!
    [b][color=#000044][size=14]4. Beispiel Fisch[/size][/color][/b][attach=683,right][/attach] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no0'][sup](TOP)[/sup][/url]
    Ein Fisch? Herzlichen Glückwunsch! Der Grund dafür ist das wir eine Website über Aquarien anlegen wollen und dafür brauchen wir nun mal diesen Fisch. Schauen wir uns den bisherigen Zustand der Seite doch mal an:

    [attach]696[/attach]

    Ziemlich langweilig was? Dann zeigen wir unserem Fisch doch mal wie man in unserem Gewässer schwimmt. Hier ist nun tatsächlich das erste Mal etwas Übung notwendig. Die Kanten des Fisches sind im Vergleich zum Hitnergrund nicht sehr scharf sondern eher weich, dies hat 2 Seiten:
    1. Wir haben hier etwas Spielraum was den Pfad betrifft
    2. Nutzen wir diesen Freiraum falsch so wird das Ergebnis nicht sehr gut

    Ich kann hier nun herzlich wenig helfen, bitte bedenke das du jederzeit scrollen kannst, scrolle weit weg so das du den ganzen Fisch siehst, fixiere mit deinen Augen eine Kante und "merke" sie dir, wenn du nun nah heran scrollst hast du ein ungefähres Bild wo du lang musst, so folgst du nun dem Fisch, du musst an dieser Stelle nicht zu genau werden, ich präsentiere hier einige Ausschnitte die ich sehr schlecht getroffen habe, die jedoch im Endresultat nicht auffallen, mehr zu dieser Genauigkeit im Fortgeschrittenen-Tutorial:

    [attach]697[/attach][attach]698[/attach][attach]699[/attach][attach]700[/attach]

    Die ersten beiden Bilder kann man deutlich schöner machen, ist aber garnicht notwendig. Die letzten beiden Bilder weisen jeweils Pixelfehler am Fisch auf, ich habe den Pfad so angepasst das der Fisch realistisch "rund" bleibt und keine Einbrüche in der Haut oder der Flosse zu sehen sind, welche wirklich merkwürdig wären.

    Wir könnten die weichen Kanten nun mit etwas Transparenz versehen um sie weich zu halten, jedoch verzichte ich in dem Fall darauf, verschiebe dies ins nächste Tutorial und setze unseren Fisch in seinem neuen Reich aus:

    [attach]701[/attach]

    Schwimme in Frieden kleiner Fisch.
    [b][color=#000044][size=14]5. Alternativen[/size][/color][/b] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no0'][sup](TOP)[/sup][/url]
    Wir haben in GIMP implementiert einige kleine Wichtel die uns dabei helfen Objekte frei zu stellen. Und zwar alles was eine Selektion erstellen kann:

    Wie genau die einzelnen Tools funktionieren kann ich ausführlich leider nicht erklären, wichtig ist jedoch die SHIFT - Taste denn mit dieser kann man mit den meisten Tools multiple Auswahlen erstellen, ansonsten müssen wir auf die Sicherungsebene zurückgreifen (nie verkehrt). Ich erkläre das anhand des Würfels und des Zauberstabes *hex hex*.

    [b][color=#000000]Der Zauberstab...[/color][/b]
    ... selektiert mit justierbarer Toleranz einen Bereich um den ausgewählten Pixel der eine farbliche Ähnlichkeit aufweist. Sprich: Wir drücken auf einen orangefarbenen Pixel und alle anderen ähnlichfarbigen Pixel werden dazu markiert. Ich öffne nun das Würfel-Bild und stelle die Toleranz des Zauberstabes (Threshold, z.Dt. weiß ich das leider nicht) auf 40:

    Wenn ich nun auf die horizontale Fläche des Würfels klicke erhalte ich eine interessante Auswahl: [sup][color=#999999](Für bessere Sichtbarkeit Auswahl in Pfad umgewandelt)[/color][/sup]

    [attach]704[/attach]

    Nicht sonderlich spannend. Was aber wenn ich nun die Shfit Taste gedrückt halte und auf eine der noch nicht markierten unteren Ecken klicke, es ist Zauberei:

    [attach]705[/attach]

    Ich wünschte ich hätte die Zeit und Geduld jedes Tool auf diese Weise zu erklären, aber das geht einfach nicht. Bitte probiere viel herum, Fragen sind gerne gesehen.

    [b]Was macht denn Shift?[/b]

    Diese kleinen Buttons und du, ihr werdet beste Freunde :)

    1. Erstellt unabhängig ob eine Auswahl vorhanden ist eine neue Auswahl (kein Modifikator)
    2. Erstellt eine neue Auswahl oder fügt einen neuen Bereich zur aktuellen Auswahl hinzu (Shift)
    3. Entfernt einen Bereich der bereits vorhandenen Auswahl (Strg)
    4. Beschränkt die bereits vorhandene Auswahl auf die neue Auswahl (Shift+Strg)

    Sehr wichtige Tools, jedes Auswahlwerkzeug hat diese Methode!
    [b][color=#000044][size=14]6. Schlusswort[/size][/color][/b] [url='http://www.html-seminar.de/html-css-php-forum/board40-themenbereiche/board32-bildbearbeitung/4679-bilder-freistellen-gimp-einfach/#no0'][sup](TOP)[/sup][/url]

    Ich hoffe ich konnte helfen, du konntest was lernen und wir sehen uns auch im nächsten Teil. Wie immer stehen die Kommentare offen für Fragen, Anregungen, etc. man kennt es ja, bis da hin, ich bin raus :love:

    [attach]685[/attach] [attach]688[/attach] [attach]689[/attach] [attach]690[/attach] [attach]692[/attach] [attach]702[/attach] [attach]703[/attach] [attach]706[/attach]