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: 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: 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.

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.

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: 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: Aus zwei verschobenen Textobjekten entsteht mit Weichzeichner und Schlagschatten ein 3D-Effekt.
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.

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 

Ähnliche Artikel

  • Bildbearbeitung mit Gimp, Teil 3
    Heute möchte ich mich mit Ebenen beschäftigen. Wenn man komplexere Arbeiten macht, sind Ebenen der Weg der Wahl, um Bilddaten einfach zu organisieren und anzuordnen.
  • Effizienter arbeiten mit GIMP
    Unsere Tipps und Tricks bringen Ihnen Funktionen und Arbeitstechniken der Gimp-Version 2.6 näher. Wir zeigen, wie Sie eigene Pinselspitzen erstellen und damit Abrisskanten für Fotomontagen erzeugen, mit Bildern in verschiedenen Ebenen arbeiten und die rechteckige Auswahl sinnvoll nutzen.
  • 2D-Grafik unter KDE
    Es muss nicht immer Gimp sein: Das aus dem KOffice-Paket stammende Krita bietet eine intelligente Mischung aus Pixel- und Vektorgrafik und glänzt mit zahlreichen innovativen Features.
  • Den Künstler wecken
    Unsere Tipps und Tricks bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Wir zeigen in dieser Ausgabe, wie Sie Haare freistellen, Schriften mit Chromeffekten verschönern, zu dunkel geratene Fotos aufhellen und Bildbereiche spiegeln.
  • Anwender-Tipps und kleine Kniffe zu Gimp
    Die hier aufgeführten Tipps und Tricks bringen Ihnen Gimp-Funktionen und -Arbeitstechniken näher. Wir zeigen, wie Sie mit Tastenkombinationen effektiver arbeiten, Leuchtsymbole malen und über Filter einen realitätsnahen Wassereffekt erzeugen.
Kommentare

Infos zur Publikation

title_2014_08

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

Mit der Zeitschrift LinuxUser sind Sie als Power-User, Shell-Guru oder Administrator im kleinen Unternehmen monatlich auf dem aktuelle Stand in Sachen Linux und Open Source.

Sie sind sich nicht sicher, ob die Themen Ihnen liegen? Im Probeabo erhalten Sie drei Ausgaben zum reduzierten Preis. Einzelhefte, Abonnements sowie digitale Ausgaben erwerben Sie ganz einfach in unserem Online-Shop.

NEU: DIGITALE AUSGABEN FÜR TABLET & SMARTPHONE

HINWEIS ZU PAYPAL: Die Zahlung ist auch ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!       

Tipp der Woche

Schnell Multi-Boot-Medien mit MultiCD erstellen
Schnell Multi-Boot-Medien mit MultiCD erstellen
Tim Schürmann, 24.06.2014 12:40, 0 Kommentare

Wer mehrere nützliche Live-Systeme auf eine DVD brennen möchte, kommt mit den Startmedienerstellern der Distributionen nicht besonders weit: Diese ...

Aktuelle Fragen

Server antwortet mit falschem Namen
oin notna, 21.07.2014 19:13, 0 Antworten
Hallo liebe Community, Ich habe mit Apache einen Server aufgesetzt. Soweit, so gut. Im Heimnet...
o2 surfstick software für ubuntu?
daniel soltek, 15.07.2014 18:27, 1 Antworten
hallo zusammen, habe mir einen o2 surfstick huawei bestellt und gerade festgestellt, das der nic...
Öhm - wozu Benutzername, wenn man dann hier mit Klarnamen angezeigt wird?
Thomas Kallay, 03.07.2014 20:30, 1 Antworten
Hallo Team von Linux-Community, kleine Zwischenfrage: warum muß man beim Registrieren einen Us...
openSUSE 13.1 - Login-Problem wg. Fehler im Intel-Grafiktreiber?
Thomas Kallay, 03.07.2014 20:26, 8 Antworten
Hallo Linux-Community, habe hier ein sogenanntes Hybrid-Notebook laufen, mit einer Intel-HD460...
Fernwartung für Linux?
Alfred Böllmann, 20.06.2014 15:30, 7 Antworten
Hi liebe Linux-Freunde, bin beim klassischen Probleme googeln auf www.expertiger.de gestoßen, ei...