Blogatelier

Auf Gimpusers gibt es ein Video welches die Erstellung eines Weblayouts zeigt. Leider fehlt eine Audiospur, aber man kann ja alles live nachmachen und so wird es doch greifbar. Der Macher nutzt Gimp in der Version 2.2 und das Video ist rund 25min lang.

Folgende Techniken werden gezeigt und am Ende steht das fertige Weblayout, das so aussieht:

* Anlegen von Ebenen
* Spiel mit Farbverläufen
* Anlegen von Pfaden
* Anwenden des Skripts “Schlagschatten”
* Kopieren von vereinigten Ebenen
* Einfügen und Anpassen eines Logos
* Einsatz von Hilfslinien zur Schriftplatzierung
* Einfügen und geschicktes Platzieren eines Bildes
* Einpassen des Bildes mittels weichpinseln
* Einfügen von Schrift samt Kantenglättung
* Einfügen einer Formularvorlage für Login und Passwort
* Einfügen von Fließtext samt Überschriften
* Erstellen eines Aufzählungsbutton nach dem Logoelement

Auf gimpusers gibt es noch weitere Tutorials,unter anderem die im Layout zu sehenden Wassertropfen, rund um das Open Source -Bildbearbeitungsprogramm Gimp. Jetzt kommt bald Gimp 2.4 und da wird dann wohl noch viel mehr möglich sein.

Feed abonnieren, Beitrag emailen oder bookmarken...

In meinem ersten Videotutorial werde ich zeigen, wie man einen Screenshot mit dem Programm Gimp aufpeppt. Erst werde ich einen Abschnitt durch einen Kasten hervorheben und das Bild anschließend zuschneiden.

Screenshots kann man bestimmt auch einfacher machen, aber die hier geschilderte Vorgehensweise bietet viele weitere Anwendungsmöglichkeiten. Gezeigt wird der Umgang mit Pfaden, Hilfslinien, Ebenen und dem automatischen Zuschneiden.

So sieht es aus wenn alles fertig ist:

Gimp ist ein mächtiges Werkzeug – dazu läuft es auf vielen Betriebssystemen, ist Open Source und kostenlos. Die Photoshop-Alternative eignet sich somit auch zur Bildbearbeitung. Ich hoffe ich konnte jedem die erste Scheu nehmen und vielleicht riskiert ihr ja einen Download. Unter Windows kriegt ihr das Tool hier und unter Linux ist es meist vorinstalliert oder in einem Repository.

Der Screencast ist schnell und dreckig – ich habe den Ton via Handy aufgeommen, als Bildschirm-Aufnahme-Software “Xvidcap” unter Ubuntu verwendet und mit xxxx den Ton unters Video gelegt. Zum konvertieren der Dateien nutzte ich das vortreffliche Online-Tool Media-Convert.

Viel Spaß!

Hier geht es zum Download des Screencasts (”sc01_gimp_screencast” 4 Minuten; 25 Mb)

• als WMV-Datei (Rechtsklick auf Datei und “Ziel speichern unter”)

• als AVI-Datei (Rechtsklick auf Datei und “Ziel speichern unter”)

• als qualitativ schlechtere Version bei GoogleVideo:

Die Arbeitsschritte im einzelnen:
Browseransicht – Ausschnitt ausfindig machen – Screenshot anfertigen (Ubuntu: Alt+Druck) – Browser minimieren und Screenshotbild via Gimp öffnen – Zielbereich auswählen – Zielbereich ausschneiden – Neue Ebene einfügen – Auswahl einfügen – Auswahl verankern – Hintergrundebene löschen – Bild automatisch zuschneiden – Hilfslinie horizontal einziehen (links Klick in die Seite und nach unten ziehen) – Hilflinie vertikal einziehen – Pfadwerkzeug auswählen – Eckpunkte setzen – Rote Vordergrundfarbe wählen – Pfad nachzeichnen (Pixelbreite des Strichs bestimmen und Option Pinsel als Hilfsmittel anklicken – Bild speichern unter – Name und png wählen – Abspeichern – fertig.Anmerkung:
Dieser Screencast hat mir viel Kopfzerbrechen bereitet. Ich habe viel Zeit mit dem Lesen in Hilfeforen zugetan und die nächsten Screencasts werden mit Sicherheit richtig fix von der Hand gehen. Folgende Programme kamen zum Einsatz: Ubuntu (Xvidcap, Audacity); Online (Media-convert); Windows XP (Windows Movie Maker, Audacity). Erfreulich zu sehen, dass ich mit meinem Handy Video, Bilder und Ton auf den Rechner überspielen und diese Dateien konvertieren kann.Weiterführende Links:

* Blogatelier Artikelserie Gimp-Bedienung
* Blogatelier Artikelserie Bildbearbeitung
* Projektseite Gimp

Feed abonnieren, Beitrag emailen oder bookmarken...

9 Text

Gimp erzeugt für jedes Textfeld eine eigene Ebene. Textebenen müssen im Vergleich zu herkömmlichen Ebenen ganz andere Infos enthalten. Man kann den Text intuitiv formatieren.
Die Option Hinting sollte man aktivieren, da Gimp dann versucht den Text schöner und nicht ausgefranst, erscheinen zu lassen.
Kantenglättung lässt den Text weicher erscheinen und man kann mit Einzügen, verschiedenen Zeilenabständen und Schriftarten arbeiten. Du kannst aus dem Text dann später auch einen Pfad erstellen und diesen Pfad dann weiter bearbeiten.

10 Filter

Besonders interessant finde ich die Verbesserungsfilter.
Die Funktionsweise der Filter, also was da mathematisch abläuft, interessiert mich nicht wirklich und somit verwende ich hier „Trial and Error“.
„Entflackern“ korrigiert unscharfe Kanten und horizontale Streifen.
„Flecken entfernen“ hilft gegen schlecht eingescannte Vorlagen (Moire-Effekt), Staub und Kratzer.
„Streifen entfernen“ eliminiert vertikale Streifen (ggf. durch Scannen entstanden).
„NL“ stellt den schiefen Turm von Pisa senkrecht, wenn ich das richtig verstanden habe.
„Schärfen“ – selbsterklärend

Das war es schon, ich hoffe es hilft dem ein oder anderen eines seiner Bilder etwas nachzubessern.

Inhalt Artikelserie GIMP-Bedienung
#1 Allgemeines und Inhalt
#2 Eine Auswahl treffen
#3 Transformationswerkzeuge
#4 Malwerkzeuge
#5 Farbwerkzeuge
#6 Ebenen
#7 Text und Filter

Feed abonnieren, Beitrag emailen oder bookmarken...

8 Ebenen

Ebenen sind mit einem Stapel Folien vergleichbar. Man blickt von oben drauf und sieht ein Bild vor sich. Ein Bild kann unendlich viele Ebenen besitzen. Du kannst die jeweils aktive Ebene mit Werkzeugen und Filtern bearbeiten. Das nennt man aktive Zeichenfläche (andere aktive Zeichenflächen sind Kanäle, Ebenenmasken und Auswahlmasken).

Es empfielt sich, den Ebenendialog immer in Blickweite zu haben. Andernfalls kann man leicht durcheinander kommen.
Das Auge im Ebenendialog zeigt an, ob die Ebene sichtbar ist. Mit dem Drücken der Shift-Taste kann man anschließend alle anderen Ebenen (un)sichtbar schalten.

Man kann Ebenen mit dem Kettensymbol gruppieren und somit auf mehreren Ebenen gleichzeitig eine Auswahl verschieben.
Die Ebenengröße ist nicht immer so groß wie das Bild. Du kannst Ebenen vergrößern, damit du sie an der gewünschten Stelle auch bearbeiten kannst. Du kannst immer nur an einer Stelle arbeiten, wenn dort auch noch die aktive Ebene vorhanden ist. Die aktive Ebene ist durch eine gelb-schwarze Markierung hervorgehoben.

Es gibt 21 Ebenenmodi ( http://docs.gimp.org/de/glossary.html#glossary-modes ). Diese regeln wie die aktive mit der unteren Ebene verknüpft wird. Folglich sind zum Anwenden von Ebenenmodi mehrere Ebenen nötig.

Im Bild unter Ebene->Maske-> Ebenenmaske kann man eine Ebenenmaske hinzufügen. Diese wird dann im Ebenendialog neben der eigentlichen Vorschau angezeigt. Die Maske kann dann bearbeitet werden. Das Wechseln zwischen Ebene und Maske kann über einen Klick in der Vorschau erreicht werden. Das jeweils aktive Element hat einen weißen Rand in der kleinen Vorschau im Ebenendialog.

Inhalt Artikelserie GIMP-Bedienung
#1 Allgemeines und Inhalt
#2 Eine Auswahl treffen
#3 Transformationswerkzeuge
#4 Malwerkzeuge
#5 Farbwerkzeuge
#6 Ebenen
#7 Text und Filter

Feed abonnieren, Beitrag emailen oder bookmarken...

7 Farbwerkzeuge

7.1 Farbabgleich
Standardmäßig ist der Farbabgleich nicht im Werkzeugfenster, also lässt er sich über das Bildfenster -> Werkzeuge-> Farben-> Farbabgleich erreichen. Durch die Vorschau kann man sein Handeln ganz gut einschätzen. Man kann damit Farbstiche aus den Bildern entfernen.

7.2 Farbton-Sättigung
Herumspielen und die Vorschau im Auge behalten. Auf der aktuellen Ebene können Farbton, Sättigung und Helligkeit verändert werden.

7.3 Einfärben
Eignet sich um den Sepia-Effekt mit beliebigen Farben auf das Bild anzuwenden.

7.4 Helligkeit-Kontrast
Es ist sehr komfortabel, aber die Werkzeuge „Wert“ und „Kurven“ ermöglichen bessere Lösungen.

7.5 Schwellwert
Erzeugt ein Schwarz-Weiß Bild. Die Einstellung was schwarz und weiß ist, erfolgt über das Histogramm.

7.6.Werte
Verweis auf Dokumentation( http://docs.gimp.org/de/gimp-tool-levels.html ) – komplexe Kiste.

7.7 Kurven
Das mächtigste aber auch komplexeste Werkzeug – Doku ( http://docs.gimp.org/de/gimp-tool-curves.html )

7.8 Posterisieren
Die Farbanzahl wird in einem gewichteten Maß verringert. Es bleibt eine Ähnlichkeit zum Original

Inhalt Artikelserie GIMP-Bedienung
#1 Allgemeines und Inhalt
#2 Eine Auswahl treffen
#3 Transformationswerkzeuge
#4 Malwerkzeuge
#5 Farbwerkzeuge
#6 Ebenen
#7 Text und Filter

Feed abonnieren, Beitrag emailen oder bookmarken...

6. Malwerkzeuge

6.1 Allgemeines
Es gibt neun Malwerkzeuge. Am besten kann man diese mit einem Grafiktablett nutzen. Wenn man mit Pfaden arbeitet kann man die Werkzeuge automatisch nutzen (Pfad nachzeichnen).
Die STRG-Taste ist bei den Malwerkzeugen eine feine Sache: es wird automatisch die Pipette aufgerufen und die Farbe des Pixels wird als die prädistinierte Vorder-bzw. Hintergrundfarbe gesetzt.
SHIFT zeigt eine gerade Orientierungslinie an.
Im ES gibt es die Modi. Hier ist die Ansicht im Glossar der Doku sehr anschaulich ( http://docs.gimp.org/de/glossary.html#glossary-modes ) . Auf die anderen Einstellungen gehe ich hier nicht weiter ein.

6.2 Überblick über alle
Ich werde die meisten Malwerkzeuge nur selten einsetzen und daher halte ich es ganz kurz und zitiere die Doku:

„Vier der Malwerkzeuge – Stift, Pinsel, Sprühpistole (Airbrush) und Tinte – verhalten sich ähnlichen wie ihren realen Vorbilder: Sie können sie benutzen, um zu zeichnen. Die restlichen benutzen einen Pinsel für etwas andere Arbeiten: der Radierer entfernt Bildteile, das Klonen Werkzeug kopiert Muster, das Verknüpfen Werkzeug dient zum Weichzeichnen oder Schärfen, das Verschmieren Werkzeug ermöglicht ein gezieltes verschmieren in Bildern und das Abwedeln/Nachbelichten Werkzeug tut genau was sein Name schon andeutet, nämlich einzelne Stellen im Bild gezielt abdunkeln oder aufhellen.“

6.3 Klonen
Eignet sich zum Retuschieren und Ausbessern von Fotos. Mit Strg wird der Klonpunkt fixiert. Einfache Mausklicks lassen den Punkt dort, ein Dauerklick lässt den Fixierpunkt mitlaufen. Es empfiehlt sich vorher eine Auswahl festzulegen, dann kann man befreiter returschieren, da nichts außerhalb der Auswahl verändert wird.

6.4 Weichzeichnen/ Schärfen
Beim Weichzeichnen werden einzelne Pixel verwischt. Es gibt für ganze Ebenen auch einen Filter. Beim Schärfen werden ähnliche Farben vereint und es entstehen Kanten. Die Rate steuert die Intensität des Werkzeugeinsatzes.

6.5 Verschmieren
Beim Verschmieren werden mit dem Pinsel Pixel verschmiert. SHIFT zwingt das Werkzeug auf einer geraden Linie zu verschmieren.

6.6 Abwedeln/ Nachbelichten
Hiermit kann man einzelne Pixel aufhellen oder abdunkeln.

Inhalt Artikelserie GIMP-Bedienung
#1 Allgemeines und Inhalt
#2 Eine Auswahl treffen
#3 Transformationswerkzeuge
#4 Malwerkzeuge
#5 Farbwerkzeuge
#6 Ebenen
#7 Text und Filter

Feed abonnieren, Beitrag emailen oder bookmarken...

3 Farbpipette
Hier kann ich mir den Farben-Wert des Pixels anzeigen lassen. Man kann zwischen verschiedenen Farbmodellen wählen.

4 Winkel-/Abstandsmesser
Sieh an, habe ich noch nie gebraucht/benutzt und trotzdem schön zu wissen.
[ Die beiden habe ich der Vollständigkeit mit aufgeführt]

5 Tranformationswerkzeuge

5.1 Allgemeines
Transformieren heißt, die Pixel zu ändern. Auf einige übergreifende Fähigkeiten mehrerer Transformationswerkzeuge gehe ich jetzt ein.
Einstellungsscreen(ES) „wirkt auf“: immer kurz nachsehen ob auch das Richtige markiert ist.
„Interpolation“ (oder auch Aliasing) bezeichnet die Hochrechnung oder den digitalen Zoom. Kubisch ist am besten, dauert aber am längsten.
„Ergebnis beschneiden“ führt dazu, dass das aktivierte Element auf die Originalgröße des Bildes zugeschnitten wird. Beim Rotieren bspw. wird das Bild an manchen Stellen über das Original hinausgehen, und wird bei aktivierter Funktion schön dort abgeschnitten.

5.2 Fadenkreuz (Verschieben)
Mit dem Fadenkreuz kann ich das gesamte Bild oder eine Auswahl verschieben.
Man muss aufpassen dass im ES bei “wirkt auf” das Richtige angehakt ist (mal wieder :-)). Nervige Geschichte, wenn man die Auswahl verschieben will und man immer die gesamte aktive Ebene greift. Es kann auch mit den Pfeiltasten verschoben werden (Genauigkeit) – dies lässt ein sehr genaues Verschieben zu.

5.3 Zuschneiden/ Größe ändern
„Zuschneiden“ bildet die Auswahl als neues Bild ab.
„Größe ändern“ lässt hingegen die Auswahl nach dem Zuschneiden an dem Ort, wo sie vorher war und die Originalgröße des Bildes bleibt gleich.
„Aus Auswahl“ erzeugt eine automatische Berechnung aus der Auswahl (funktioniert bei mir allerdings selten). Spart man Arbeit wenn man etwas recht komplex auswählen musste.
„Automatisch schrumpfen“ hat bei mir ebenfalls noch nicht gefunzt. Ihr seht also, einige Erfolgserlebnisse blieben wir bis dato noch verborgen.

5.4 „Drehen“
Keine Besonderheiten

5.5 „Skalieren“
Das sind die dicken Änderungen (Verzerren des Bildes). Unbedingt nochmal im ES die Einstellungen überprüfen.

5.6. „Scheren“
Der „Scherenfaktor x“ bezeichnet die Verschiebung der oberen gegen die untere Kante. Ein positiver Wert verschiebt im Uhrzeigersinn. Was bei Scherenfaktor y und bei einem negativen Wert passiert, überlass ich dem Scharfsinn.

5.7 „Perspektive“
Uijala- das fetzt. Einfach rein ins Bild und loslegen. Die Matrix verändert die Werte von selbst, wenn man mittels der Maus einen Perspektivwechsel hinlegt..

5.8 „Spiegeln“
Ebenfalls selbsterklärend.

Inhalt Artikelserie GIMP-Bedienung
#1 Allgemeines und Inhalt
#2 Eine Auswahl treffen
#3 Transformationswerkzeuge
#4 Malwerkzeuge
#5 Farbwerkzeuge
#6 Ebenen
#7 Text und Filter

Feed abonnieren, Beitrag emailen oder bookmarken...