Aus LinuxUser 08/2005

Web-Seiten layouten mit Gimp

© Cecilia Alvarez, http://cecilia.impulsoblue.com/

Seiten malen

Übersichtliche Homepages definieren sich über’s Layout. Da liegt es nahe, mit einem Grafikprogramm zunächst die Oberfläche festzulegen und daraus den HTML-Code zu generieren. Der Alleskönner Gimp macht’s möglich.

Puristen predigen es auch beim Web-Design: Nur wer den Code – in diesem Fall HTML – Zeile für Zeile im Texteditor eintippt, kommt zu einem sauberen Ergebnis. Doch schneller geht es, das Layout per Bildbearbeitung zu kreieren und daraus das HTML-Gerüst zu erstellen. Gimp [1] liefert ab Version 2 das dazu nötige Plugin Py-Slice mit. Es unterteilt die Grafik in kachelförmige Teile und erstellt daraus HTML-Tabellen, in denen es die Einzelbilder wie im Original anordnet. Diese lassen sich ohne Aufwand für grafisch anspruchsvolle Homepages verwenden, wie in unserem Beispiel in Abbildung 1.

Abbildung 1: Eine Web-Seite mit 3D-Effekten – mit Gimp eine Frage von wenigen Handgriffen.
Abbildung 1: Eine Web-Seite mit 3D-Effekten – mit Gimp eine Frage von wenigen Handgriffen.

Die meisten aktuellen Distributionen liefern Gimp in Version 2.2 aus, die als Grundlage für diesen Workshop fungiert. Suse-Benutzer müssen das Programm allerdings manuell mit der Python-Erweiterung und dem Py-Slice-Plugin nachrüsten [4]. Starten Sie dann Gimp und legen Sie eine neue Grafik an (DateiNeu). Wählen Sie in der Auswahlliste Vorlagen den Eintrag 800×600. Diese Auflösung entspricht der der der späteren Homepage. Dann geben Sie der neuen Datei einen Namen, unter dem Sie sie abspeichern. Verwenden Sie das Gimp-eigene .xcf-Format, um alle Gimp-Funktionen nutzen zu können.

Das Beispiel-Projekt

Gimp arbeitet mit so genannten Ebenen. Sie lassen sich mit übereinanderliegenden Folien vergleichen, die Sie einzeln bearbeiten. So können Sie Werkzeuge und Effekte auf einzelne Bildbereiche, nämlich Ebenen, anwenden.

DialogeEbenen oder [STRG+L] öffnet das Ebenendialogfeld. Die Schaltfläche Neue Ebene (Abbildung 2) dient zum Erstellen neuer Ebenen. Aktivieren Sie im Dialogfenster unter Ebenenfüllart die Option Transparenz und bestätigen Sie mit OK, um eine neue Ebene zu erstellen. Alles, was Sie dem Bild jetzt hinzufügen, landet auf dieser Ebene, denn eine neue Ebene platziert Gimp stets über der derzeit aktiven.

Abbildung 2: Das Ebenen-Dialogfeld erstellt und verwaltet die einzelnen Ebenen eines Bild.
Abbildung 2: Das Ebenen-Dialogfeld erstellt und verwaltet die einzelnen Ebenen eines Bild.

Markieren Sie als nächstes die ganze Zeichnung mit [Strg+A]. Eine gestrichelte Linie um die Zeichnung gibt die Grenze der Auswahl wieder. Wählen Sie anschließend im Menü Auswahl die Funktion abgerundetes Rechteck; beim Radius geben Sie einen Wert von fünf Prozent ein. Dadurch erhält die Auswahl abgerundete Ecken wie in unserem Beispiel von Abbildung 1.

Die gesamte Fläche füllen Sie nun mit roter Farbe: Klicken Sie auf die Farbauswahl für den Vordergrund in der Werkzeug-Palette (Abbildung 3) und stellen Sie für Rot, Grün und Blau die Werte 190, 0 und nochmals 0 ein für einen kräftiges Rotton. Wählen sie in der Werkzeugpalette das Füllen-Werkzeug und aktiveren Sie für Beeinflusster Bereich die Option ganze Auswahl füllen. Ein Klick in die Auswahl färbt diese schließlich ein.

Abbildung 3: Im Gimp-Hauptfenster finden Sie die Werkzeuge und die Farbauswahl.
Abbildung 3: Im Gimp-Hauptfenster finden Sie die Werkzeuge und die Farbauswahl.

Für den nächsten Arbeitsschritt benötigen Sie Hilfslinien. Klicken Sie dazu auf BildHilfslinieneue Hilfslinie und wählen Sie als Richtung horizontal und als Position 100. Auf dieselbe Weise erzeugen Sie eine weitere horizontale Hilfslinie mit dem Wert 525 sowie zwei vertikale auf den Positionen 125 und 725. Die Schnittpunkte der Hilfslinien markieren die Ecken des weißen Rechtecks in der Mitte der Seite (Abbildung 4).

Abbildung 4: Das Skalieren-Werkzeug passt die Größe einer Ebene an.
Abbildung 4: Das Skalieren-Werkzeug passt die Größe einer Ebene an.

Stellen Sie nun sicher, dass die Option magnetische Hilfslinien im Menü Anzeige aktiviert ist. Dann wählen Sie aus der Werkzeug-Palette das Skalieren-Werkzeug (Abbildung 3) und stellen unter Wirkt auf im Gimp-Hauptfenster Auswahl transformieren ein. Wenn Sie nun auf die Zeichnung klicken, öffnet sich das Dialogfeld Skalierinformationen. Ziehen Sie nacheinander die kleinen Quadrate an den Ecken des gestrichelten Auswahlrechtecks auf die Schnittpunkte der Hilfslinien, so dass die Markierung dem freien weißen Bereich entspricht (Abbildung 4). Die Hilfslinien ziehen die Maus dabei „magnetisch“ an, um Ihnen das genaue Platzieren zu erleichtern. Ein Klick auf Skalieren schließt den Vorgang ab.

Zum Füllen der Auswahl mit weißer Farbe legen Sie über den Ebenendialog eine neue Ebene an: Wählen Sie den obersten Eintrag und klicken Sie auf Neue Ebene, wiederum mit transparentem Hintergrund. Danach stellen Sie in der Werkzeug-Palette als Vordergrundfarbe weiß ein, also die Werte für Rot, Grün und Blau jeweils auf 255. Mit dem Füllwerkzeug genügt nun ein Klick auf die ausgewählte Fläche, um sie weiß zu färben. Anschließend heben Sie die Markierung mit [STRG+A] auf.

Effekte für’s Auge

Für den 3D-Effekt sorgt der Schlagschatten aus dem Menü Script-FuSchatten. Wählen Sie im Ebenendialog die zuletzt erstellte Ebene und wenden den Schlagschatten darauf ebenfalls an. Gimp vergrößert die Grafik automatisch um den Platz, den der Schatten zusätzlich benötigt. Allerdings wächst der weiße Hintergrund nicht mit. Nach Auswahl der Hintergrund-Ebene im Ebenen-Dialog beseitigt ein Klick auf EbeneEbene auf Bildgröße diesen Fehler.

Nun fehlt noch der Schriftzug mit seinem 3D-Look. Beginnen Sie, indem Sie mit dem Schriftwerkzeug gewöhnlichen Text einfügen. Unser Beispiel verwendet die Schriftart Sans Bold Italic und als Farbe ein etwas helleres Rot als das des Hintergrunds mit den Werten 250, 225, 225 für Rot, Grün und Blau. Ein Mausklick mit dem Textwerkzeug im weißen Bereich öffnet dann ein Dialogfenster, in das Sie Created eingeben.

Wählen Sie nun für den kleineren Text die Schriftart Sans oder eine andere nicht-kursive Schrift und reduzieren Sie die Größe. Ein Klick mit dem Textwerkzeug unterhalb des bereits erstellten Textes legt dort einen neuen Textblock an. Beide Texte erscheinen als eigene Ebenen im Ebenendialog. Wählen Sie einen der Blöcke aus und klicken Sie in der Werkzeugpalette auf den bei ausgewähltem Textwerkzeug erscheinenden Button Pfad aus Text erzeugen. Anschließend wiederholen Sie diesen Vorgang für den zweiten Textblock.

Ein Pfad erfüllt eine ähnliche Funktion wie eine Hilfslinie, allerdings handelt es sich dabei um eine eingebettete Vektorgrafik einer beliebigen Form. Ein Pfad erscheint weder auf einem Ausdruck, noch lässt er sich in ein Bildformat wie JPEG oder PNG exportieren. Allerdings können Sie die durch einen Pfad beschriebene Form in eine Auswahl konvertieren.

LinuxUser 08/2005 KAUFEN
EINZELNE AUSGABE Print-Ausgaben Digitale Ausgaben
ABONNEMENTS Print-Abos Digitales Abo
TABLET & SMARTPHONE APPS
Deutschland

Hinterlasse einen Kommentar

  E-Mail Benachrichtigung  
Benachrichtige mich zu: