sprayer.jpg

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

Seiten malen

Web-Seiten layouten mit Gimp

01.08.2005 Ü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

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 800x600. 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

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

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

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.

Nachdem Sie aus der Schrift einen Pfad erzeugt haben, wählen Sie im Menü Dialoge die Option Pfade. In der Pfade-Palette sehen Sie in diesem Beispiel zwei Pfadobjekte. Die Symbolleiste am unteren Rand bietet Ihnen die Möglichkeit, aus dem Pfad eine Auswahl zu erstellen (Abbildung 5). Wenden Sie diese Funktion nun für den ersten Pfad, also dem Text mit der größeren Schrift, an.

Abbildung 5

Abbildung 5: In der Pfad-Palette verwandeln Sie Pfade in Elemente der Bitmap-Grafik.

Die Auswahl dient als Basis einer so genannten Ebenenmaske. Wählen Sie in der Ebenen-Palette den Eintrag Created – der Name entspricht dem enthaltenen Text – und duplizieren Sie ihn. Klicken Sie anschließend wiederum mit dem Textwerkzeug auf den Schriftzug, können Sie im Hauptfenster seine Farbe ändern. Im Farbauswahl-Dialog sehen Sie die zuletzt verwendeten Farben, wählen Sie das Dunkelrot der Hintergrunds.

Nun öffnen Sie über EbeneMaskeEbenenmaske hinzufügen ein Dialogfeld, in dem Sie Option Auswahl aktivieren und mit OK bestätigen. Klicken Sie das Verschieben-Werkzeug im Hauptfenster an und verrücken Sie die den dunkelroten Text mit den Pfeiltasten; zwei Mal nach unten und ein Mal nach rechts führen zum Ergebnis in Abbildung 6. Wichtig ist dabei, dass im Feld Wirkt auf: wie in der Voreinstellung die Ebene das zu verschiebende Objekt bleibt (Abbildung 7).

Abbildung 6

Abbildung 6: Aus zwei verschobenen Textobjekten entsteht mit Weichzeichner und Schlagschatten ein 3D-Effekt.

Abbildung 7

Abbildung 7: Mit diesen Symbolen stellen Sie beim Verschieben- und beim Skalieren-Werkzeug den Wirkungsbereich ein.

Wenn Sie nun noch den Filter FilterWeichzeichnenGaußscher Weichzeichner (Horizontal und Vertikal: 5 px) sowohl auf die hellrote wie auch die dunkelrote Textebene anwenden (Ebenen wählen, dann den Filter ausführen), fehlt nur noch ein Schritt zum 3D-Effekt: Wählen Sie die hellere Textebene und fügen Sie ihr einen Schlagschatten hinzu (Script-FuSchattenSchlagschatten). Auf dieselbe Weise behandeln Sie im Beispiel die zweite Zeile der Logo-Box.

Nun richten Sie die Schriftzüge so aus, dass sie linksbündig untereinander stehen. Danach verschieben Sie beide an ihre vorgesehen Position. Dazu klicken Sie in allen sechs Text-Ebenen im Ebenendialog (je zwei Mal die Texte selbst und ihre Duplikate sowie die vom Schlagschatten-Effekt erzeugten Ebenen namens Drop-Shadow) in den leeren Raum rechts vom Augen-Symbol (Abbildung 2). Damit verketten Sie alle markierten Ebenen und verschieben sie gemeinsam per Maus an ihre endgültige Position.

Jetzt fehlt noch die weiße Box, auf der der Schriftzug steht. Ziehen Sie eine viereckige Auswahl um die Schrift herum auf, erstellen Sie eine neue Ebene und füllen Sie die Auswahl weiß. Den weißen Balken daneben zeichnen Sie auf dieselbe Weise. Um den im Beispiel gezeigten Effekt zu erreichen, versehen Sie beide weiße Flächen mit einem Schlagschatten.

Zur Navigation durch die Website dient in unserem Beispiel die Menüleiste am linken Rand. Dazu erstellen Sie zunächst das oberste Rechteck, indem Sie wiederum eine viereckige Auswahl aufziehen, daraus eine neue Ebene erstellen und mit weißer Farbe füllen. Daraufhin duplizieren Sie die neue Ebene und verschieben das Duplikat nach unten. Diesen Vorgang wiederholen Sie, bis Sie für alle Menüpunkte ein Viereck platziert haben. Dann erst wenden Sie die beiden Effekte für den 3D-Look, Bewegungsunschärfe und Schlagschatten, auf alle Ebenen an. Zu guter Letzt beschriften Sie die Buttons mit dem Textwerkzeug.

Von Gimp nach HTML

Die Umwandlung der Bitmap-Grafik in HTML-Code erfolgt auf der Basis einer Tabelle. Die einzelnen Menü-Buttons entsprechen dann Tabellenfeldern und lassen sich mit eigenen Links verknüpfen, die den Hauptbereich in der Mitte jeweils unterschiedlich füllen. Gimp nimmt diese Unterteilung an Hand von Hilfslinien vor. Setzen Sie diese wie in Abbildung 8, indem Sie auf eines der Lineale klicken und die Maus bei gedrückter Taste nach unten oder links ziehen.

Außerdem funktioniert der Export nur für eine Ebene. Da beim Vereinigen sämtliche Ebeneninformationen verloren gehen, speichern Sie das Bild zunächst unter einem neuen Namen. Dann wählen Sie in der Ebenenpalette im Kontextmenü nach einem Rechtsklick die Option Bild zusammenfügen.

Abbildung 8

Abbildung 8: Das Gimp-Plugin Py-Slice erstellt aus einem Bild eine HTML-Tabelle. Als Spalten- und Zeilengrenzen dienen Hilfslinien.

Nun steht der Konvertierung nichts mehr im Wege: FilterWebPy-Slice ruft das dafür zuständig Werkzeug auf. In den Einstellungen wählen Sie unter The format of the images den Eintrag png. Dieses Format eignet sich besser als beiden Alternativen: JPEG verwendet ein so genannte verlustbehaftetes Kompressionsverfahren, dadurch können beispielsweise Linien verschwimmen. GIF-Grafiken teilen diesen Nachteil zwar nicht, sie beschränken sich jedoch auf 256 Farben. Darunter würden in unserem Beispiel die Farbverläufe leiden. Das PNG-Format stellt bis zu 16,7 Millionen Farben bei verlustfreier Kompression dar und alle gängigen Browser zeigen es problemlos an.

Die Option Use separate directory for images? (eingebettete Bilder in einem Unterverzeichnis speichern) aktivieren Sie, wenn Sie alle aus dem Gesamtbild geschnittenen Einzelbilder in einem eigenen Verzeichnis vorfinden möchten. Bestätigen Sie dann mit OK; anschließend lässt sich die bei den Py-Slice-Einstellungen unter Dateiname und Pfad konfigurierte Datei im Web-Browser anzeigen.

Ab in den Quellcode

Wenn Sie die HTML-Datei in einem Texteditor öffnen, erkennen Sie am HTML-Code, dass Gimp eine Tabelle erstellt hat, in deren Zellen die Teile der an den Hilfslinien zerschnittenen Grafik liegen. Abbildung 9 zeigt die Verbindung zwischen dem HTML-Code und dem Gesamtbild; die drei Zellen einer Spalte stehen jeweils untereinander.

Das Beispiel sieht jedoch vor, dass die zentrale weiße Fläche einen einheitlichen Block bildet, die von Gimp vorgegebene Zeilenaufteilung soll deshalb nur für die Menüpunkte gelten. Dazu ändern Sie im Quelltext die mittlere Zelle der zweiten Zeile, also Zelle 1-1, in der neunten Zeile des HTML-Codes ab zu <td rowspan="7" valign="top">. Löschen Sie außerdem den Text <img alt=" " src="images/pyslice-1-1.png" width="582" height="48">. Damit ist dieser Bereich frei für Ihren eigenen Inhalt. Texte, Bilder oder andere HTML-Elemente, die Sie an dieser Stelle in den Quellcode schreiben, landen im weißen Bereich.

Abbildung 9

Abbildung 9: So stehen das Originalbild in Gimp und der von Py-Slice erzeugte HTML-Code im Zusammenhang.

Die folgenden sechs mittleren Zellen (also von 2-1 bis 6-1, entsprechend den Zeilen 14, 19, 24, 29, 34 und 39 im HTML-Quellcode) löschen Sie, denn sie stellen lediglich die einzelnen Abschnitte des weißen Bereichs im Zentrum der Seite dar. Das Schema des Ergebnisses zeigt Abbildung 10; den angepassten Quelltext finden Sie außerdem auf unserer Heft-CD.

Abbildung 10

Abbildung 10: Nach diesem Schema funktioniert die aus dem Bild generierte und manuell angepasste HTML-Tabelle.

Damit die Menüleiste auch wirklich als Menü funktioniert, müssen Sie noch passende Links manuell einarbeiten: In den Zeilen im Code, die den Zellen 1-0 bis 6-0 entsprechen (Abbildung 9) fügen Sie dazu unmittelbar nach <td> den HTML-Code für den Link ein, also etwa <a href="Pfad/Dateiname"> ein, und am Ende der Zeile vor </td> schließt </a> das Link-Tag.

Zum vollständigen HTML-Dokument fehlt außerdem der HTML-Rumpf. Auch wenn die meisten Browser die von Py-Slice erzeugten HTML-Codes auch alleinstehend korrekt anzeigen, müssen gemäß dem Standard am Anfang der Datei Zeilen dieser Art stehen:

<HTML>
<HEAD>
<TITLE>[Mein Seitentitel]</TITLE>
<META HTTP-EQUIV="Content-Type" ↩
CONTENT="text/html; charset=↩
iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<div align="center">

Ihre Gegenstücke bilden am Ende der HTML-Datei diese Zeilen:

</div>
</BODY>
</HTML>

Der <div>-Tag zentriert die gesamte Seite, damit sie auch bei höheren Auflösungen ansprechend platziert wird. Beim Rest handelt es sich um HTML-Kopf und -Fuß, nach dem HTML-Standard bei jeder Seite unverzichtbar. Zur weiteren Gestaltung lesen Sie den Artikel über Cascading Style Sheets ab Seite 42 im Heft, HTML-Grundlagen schlagen Sie beispielsweise unter [2] nach.

Resümee

Natürlich stellt die beschriebene Vorgehensweise – nämlich von einer Grafik ausgehend das Gerüst einer HTML-Seite zu generieren – nicht für alle Typen von Web-Seiten den optimalen Weg dar. Einige Web-Designer sind gar der Ansicht, eine gute HTML-Seite könne nur Zeile für Zeile im Texteditor entstehen. Andere, wie David Siegel [3], empfehlen aber durchaus den hier vorgestellten Weg. Die Möglichkeiten, die Gimp hier bietet, erleichtern auf ihre Weise jedenfalls das Erstellen des Grundgerüsts. Professionelle Web-Seiten erfordern allerdings nach wie vor tiefer gehende Kenntnisse von HTML und CSS.

Infos

[1] Gimp: http://www.gimp.org

[2] SelfHTML: http://de.selfhtml.org

[3] David Siegel, "Creating Killer Web Sites": http://www.killersites.com

[4] Gimp und Python: "Gimp-Scripts schreiben", Oliver Frommel, Linux-User 02/2005, S. 33 ff.

Der Autor

Peter Kreußel hat Deutsch, Englisch und Philosophie studiert. Heute ist er Redakteur sowohl im Online- als auch im Print-Bereich. Der Computer gehört seit der C64-Zeit zu seinem Leben.

Tip a friend    Druckansicht beenden Bookmark and Share
Kommentare