Lionstarrs Linux Blog

Gleich zu Anfang: Die fertige GIMP Datei gibt es hier.

Teil 1
Teil 2
Teil 3

In diesem Tutorial möchte ich euch beibringen, wie man ein fixed-width Design mit dem freien Grafik-Programm GIMP, und HTML sowie CSS erstellt. Später werden wir auch noch PHP verwenden, aber dies gehört nicht zur Hauptidee des Tutorials.

1. Zutaten

Also, was braucht man um ein Webdesign zu erstellen? Ich benutze folgende Software:

• GIMP:The GIMP ist ein empfehlenswertes gratis Bildbearbeitunsprogramm und eine freie (Open-Source) Alternative zu sehr teuren Programmen wie Photoshop.
• Weaverslave: Weaverslave ist ein freier Text-Editor, der Features wie Source-Highlighting & Co unterstützt. Es gibt sicher bessere Software, aber ich habe mich im Laufe der Jahre an ihn gewöhnt.
• xampp: Für den letzten Teil werden wir einen Webserver brauchen. XAMPP bietet die Möglichkeit eben diesen ohne Probleme per Doppelklick zu installieren. Einfach genial.

Natürlich ist keine dieser Software Zwang, aber es wird einfacher das Tutorial nachzuvollziehen, wenn man sie auch benutzt.

2. Das Grund-Gerüst

Nachdem nun geklärt ist, welche Software man braucht, wollen wir auch gleich anfangen. Wenn man frei designed folgt jetzt natürlich die Phase, in der man sich überlegt, wie das ganze am Ende aussehen soll. Praktischerweise ist dies aber ein Tutorial, und so ist die Idee schon vorhanden.

Als erstes müssen wir ein neues Bild mit den Maßen 880px mal 640px anlegen. Wer will, kann noch in den erweiterten Einstellungen den standardmäßigen Kommentan Created by The GIMP entfernen. Nun haben wir ein Bild ganz in weiß – wir wollen den Hintergrund aber in 8195e0 haben. Dazu benutzen wir das Füllwerkzeug und füllen die ganze Auswahl in dieser Farbe.

Jetzt brauchen wir eine neue Ebene, die den eigentlichen Inhalt später enthalten soll. Mit STRG+Umschalt+N erzeugen wir diese und wählen als Größe 680px mal 400px mit der Hintergrundfarbe weiß. Diese Ebene wollen wir im Bezug auf das Bild zentrieren. Praktischerweise gibt es dafür das Ausrichten-Tool() von GIMP. Mit Q kann es ausgewählt werden. Daraufhin muss mit einem Klick auf die weiße Ebene das auszurichtende Objekt gewählt werden. Nun wählt man Relativ zu Bild und betätigt die Buttons für das vertikale und horizontale Zentrieren.

Als nächstes soll diese Ebene einen Schlagschatten bekommen. Praktischerweise bietet GIMP diesen als Filter im Menü Filter -> Licht und Schatten -> Schlagschatten an. Hier sollte nun der Versatz x sowie Versatz y auf 0 gestellt werden und das Häkchen vor Größenänderung zulassen entfernt werden. Nach dem Bestätigen mit OK sollte nun ein Schlagschatten erscheinen. Das Ganze sollte nun ungefähr so aussehen:

3. Der Header

Um den Header zu erstellen, wollen wir einen Farbverlauf bemühen. Dazu sollten wir ersteinmal eine neue Ebene erstellen, 680px mal 61px. Das Ausrichten überlasse ich diesmal euch, die Ebene soll horizontal zentriert und vertikal am oberen Rand der weißen Ebene positioniert werden. Die neue Ebene muss jetzt in der Reihenfolge ganz nach oben verschoben werden. Dazu öffnet man mit STRG+L das Ebenen-Menü und wählt die Header-Ebene aus. Wer will kann nun auch noch alle Ebenen richtig bezeichnen – dazu muss man nur auf eine Ebene doppelklicken. Auf jeden Fall sollte man die Ebene nach oben verschieben, um sie sichtbar zu machen – dies geht durch mehrfaches drücken von . Nun wählt man mit L das Farbverlaufs-Werkzeug aus und stellt sicher, dass die Ebene mit dem Header ausgewählt ist.
Jetzt kann man versuchen einen Farbverlauf zu erzeugen. Wenn das Blau die Vordergrundfarbe ist, dann sollte man unten am Header beginnen und den Farbverlauf für den besten Effekt ein bisschen über den Rand ziehen. Aber dies ist auch der Teil des Tutorials, wo man einfach immer wieder ausprobieren muss und sehen muss, was am besten aussieht.

Und dies war auch schon der erste Teil dieses Tutorials. Im zweiten Teil werden wir das erstellte Design nun in die für CSS wichtigen Schnipsel zerschneiden. Hier kann man die fertige GIMP-Datei herunterladen.