Gimp 101 (Part I)

Hallöchen miteinander :)

Eigentlich wollte ich ja mit PS2Gimp beginnen, da allerdings die meisten eine Einführung von "Null" an haben wollten und/oder wie man Bilder nebeinander kriegt, habe ich beschlossen diesem Wunsch den Vorzug zu geben. Meine persönliche Anfangszeit ist schon ca. 8 Jahre her (ich musste Windows noch vorgaukeln, dass ich Linux hatte, um es zum laufen zu bringen), falls ich also irgendwie etwas zu kompliziert erkläre, bitte teilt mir das noch mit und ich passe es an.


In diesem ersten Teil möchte ich euch zu Beginn wirklich die Basis erklären und dann geh ich gleich dazu über, wie man Bilder nebeinander platziert, da das das Hauptproblem zu sein scheint. Im nächsten Teil würde ich dann gerne jedes einzelne Werkzeug mit ein paar Beispielen erklären, falls der Wunsch vorhanden ist, ansonsten kann ich gerne noch einmal ein anderes "Grundproblem" erläutern, die Serie hängt von euch ab, also bin ich da flexibel.
Okay, legen wir los.

Gimp installieren

Damit ihr loslegen könnt, müsst ihr Gimp natürlich ersteinmal installieren. Das macht ihr am besten direkt von der Gimp Website aus. Wie man Programme installiert muss ich hoffentlich nicht mehr erklären. Ansonsten findet ihr Tutorials zu Hauf dazu und ich will den Rahmen nicht sprengen, also belasse ich es beim Link.

Basic Basic Info

Wenn ihr Gimp startet, habt ihr euer Fenster und darin verschiedene Reiter. Die Werkzeuge, Ebenen etc. (das alles kann ich noch einmal separat erklären, wenn ihr euch das wünscht)
(Ich hab Gimp auf Englisch, weil ich nie auf Deutsch deswegen gearbeitet habe, deswegen sind meine Instruktionen mit den Englischen Begriffen, aber ich habe immer Bilder, also solltet ihr es auch auf Deutsch finden können, hoffe ich)



Im File-Menü findet ihr verschiedene Optionen, eine davon ist New, damit erstellt ihr neue Bilder, also sozusagen "leere" Bilder



Wenn ihr darauf klickt, öffnet sich ein kleines Fenster in dem ihr die Grösse eures Bildes eingebt. Ihr könnt auch aus einer Anzahl Vorlagen auswählen, Papierformate zum Beispiel.



Die andere Option unter File, die ich hervorheben möchte ist Open, damit öffnet ihr bereits vorhandene Dateien. Dort öffnet sich ebenfalls ein Fenster aus dem ihr eure Dateien auswählen könnt.



Unter Edit findet ihr Preferences, welches die Einstellungen sind. Dort könnt ihr die Sprache, Grösse eures Default-Bildes und die ganzen Speicherorte finden, wo also zum Beispiel die Plugins gespeichert werden, wo die Patterns und/oder Brushes etc.









Mehr möchte ich dazu für's erste nicht sagen, das brauchen wir für's erste, sowie zwei Tools, die ich allerdings erst dann erkläre, wenn wir sie brauchen.

Dateiformate

Gimp ist ein Bildbearbeitungsprogramm, ehe ihr euch aber mit Bildbearbeitung auseinandersetzt solltet ihr euch mit den geläufigsten Bildformaten auseinandersetzen. Ich habe dazu vor Ewigkeiten mal einen Post geschrieben, diesen verlinke ich euch, falls ihr was mit den Begriffen .png, .jpg, .gif etc. anfangen könnt, braucht ihr das nicht zu lesen.
Datei-Kürzel

Wichtigste Plugins installieren

Als nächstes zu Plugins. Es gibt Unmengen an Plugins für Gimp, also zusätzliche Funktionen. Zwei davon empfehle ich jedem. Die Layer Styles, welche uns wirklich die Fähigkeit geben nahezu jedes Photoshop Tutorial zu befolgen und das Save for Web-Plugin. Photoshop-Nutzern wird das bekannt sein. Diese Art zu speichen komprimiert eure Bilder, etwas Qualität geht zwar verloren, aber die Komprimierung verkleinert die Grösse eurer Datei und macht sie somit viel Web-freundlicher, denn niemand wartet gerne darauf, dass die Bilder laden. Also speichert alle Bilder, die ihr im Internet verwenden wollt mit diesem Plugin und am besten auch in einer anständigen Grösse. Keine Bilder bei 4000px Breite, die ihr dann in einem Miniaturformat anzeigen lasst.
Wie ihr diese Plugins installiert habe ich ebenfalls in einem separaten Post auf meinem Blog geschrieben.
Save 4 Web & Layer Styles

Brushes, Patterns etc. installieren

Und nun zum letzten Link des Tages. Wie man Brushes, Patterns etc. installiert. Das sind alles Sammellinks für den Fall, dass ihr das mal in einem Tutorial von mir braucht, damit ich gleich hierhin linken kann, und alles ist beisammen.
Brushes, Patterns etc.

n Bilder nebeneinander in einer Datei

Okay, soviel dazu. Kommen wir nun zu einer konkreten Anwendung (was ich viel lieber mache, damit lernt man einfacher) und zwar wie man Bilder nebeneinander platziert. Mein eigenes Bild ist relativ breit geworden, weil es als Desktop-Hintergrund für einen grossen Bildschirm geplant ist, aber ich verwende es nun trotzdem hier. Die Dimensionen sind allerdings etwas zu gross für einen "normalen" Webgebrauch.


Bilder im "normalen" Format: Veins | Ruffly | Fly With Me | Messed Up Symetry | Tears of Glass | Into Machines

Zu Beginn muss ich sagen, Gimp hat viel mit einfacher Mathematik zu tun. Man muss in Gimp eindeutig mehr rechnen, aber wenn ihr einen Taschenrechner habt, sollte das kein Problem sein.

Am einfachsten ist es, wenn man sich diese Aufgabe wie eine Matheaufgabe stellt: (Oh Gott, jetzt verjag ich bestimmt alle...)

6 Bilder mit der Höhe z und den Breiten a, b, c, d, e & f sollen in einem grossen Rahmen regelmässig verteilt werden, wobei ein Rand oben (y) und ein Rand rechts und links (x) miteinbezogen werden soll. Bestimmen sie die Höhe und Breite des Rahmens.

Man sieht, ich bin kein Mathematiker, so eine Matheaufgabe würde nie einer stellen, aber damit ihr euch vorstellen könnt, was ich meine... legen wir los.

1. Bilder öffnen

Der erste Schritt ist es, alle Bilder, die ihr platzieren wollt in Gimp zu öffnen (mit File>Open)

Falls ihr das im Web tut, überlegt euch immer, dass das Bild breiter wird, umso mehr Bilder ihr verwendet, wollt ihr so etwas also bsp.weise als Header nutzen, sind 6 Bilder wahrscheinlich zu viel.

2. Skizze

Okay, gehen wir zurück zur Matheaufgabe. Wir haben gelernt, dass man mit einer Skizze beginnen soll, sich eine Gleichung aufstellt und diese dann nach den Unbekanntn löst.
Also beginnen wir mit einer Skizze, wie unser Bild am Ende aussehen muss (keine Sorge, das macht ihr einmal und dann nie wieder, weil ihr danach wisst, wie es geht)



Wie ihr seht habe ich auch gleich noch eine allg. Gleichung aufgestellt, wie wir die Grösse unseres Rahmens bestimmen können.

Breite(w)=a+b+c+d+e+f+7x
Höhe(h)=2y+z

Ihr seht, es ist wirklich einfache Mathematik.
Was ihr als erstes tut ist eine euch eine Höhe zu definieren. Für mich waren das 300px, das ist die Gemeinsamkeit der Bilder, sie alle sind 300px hoch, oder müssen noch 300px hoch gemacht werden.

3. Bilder Skalieren

Um die Bilder in die gewünschte Grösse zu bringen, wählen wir das Scale-Tool aus, befestigen das Bildverhältnis und geben Höhe 300px ein, das Bild wird dann durch das Klicken von scale in die gewünschte Grösse gebracht.
Das machen wir für jedes einzelne unserer Bilder

4. Mathe

Und dann können wir rechnen. Die Grösse des Bildes steht bei Gimp am oberen Rand des Fensters, wir befolgen also unsere Formel, bestimmen einen Rand von 10px (oder was auch immer ihr mögt) und finden somit unsere Grösse heraus
Die Rechung meines Beispiels sieht so aus:

5. Bild erstellen

Damit haben wir unsere Dimensionen und erstellen unser Bild (File>New)

6. Ebenen hinzufügen

Was wir dann tun ist copy paste. Die Bilder kopieren (Strg./Ctrl.+C) und dann in unserem Bild einzufügen (Strg./Ctrl.+V) das ganze wird dann als schwebende Auswahl angezeigt. Damit diese schwebende Auswahl zu einer Ebene wird, klicken wir auf das neue Ebene Symbol, welches ich euch markiert habe (links im Reiter)

7. Positionieren

Als nächstes Positionieren wir unsere Bilder. Dafür gibt es das Alignment-Tool welches wir auswählen. Markiert die oberste Ebene (es muss immer die oberste sein, schiebt diese Ebene also nach unten, sobald ihr mit der Platzierung fertig seid), platziert sie mittig und 10px vom linken Rand entfernt.



Für die nächste Ebene rechnen wir 10 (von links) + Bildbreite (1.Bild) + 10 (Abstand von Bild1 zu Bild2) und geben das als Abstand von links ein.
Auf diese Weie platzieren wir alle unsere Bilder und sind dann fertig.

8. Speichern

Gespeichert wird mit SaveforWeb oder Export, da ich davon ausgehe, dass ihr hier alle für's Web speichert, verwendet Save for Web.

Wollt ihr das Bild ohne Hintergrund speichern, macht die Hintergrund-Ebene unsichtbar und speichert im PNG-Format.







Und dann war's das auch schon für Teil 1. Ich hoffe das hat euch vielleicht etwas weitergeholfen und ich bin nicht zu kompliziert geworden in meinen Beschreibungen. Falls doch, meldet euch über Kommentar oder mein Kontaktformular und ich versuche zu helfen. :)