Home / LinuxUser / 2005 / 08 / Web-Seiten layouten mit Gimp

Newsletter abonnieren

Lies uns auf...

Folge LinuxCommunity auf Twitter

Top-Beiträge

Eingedost
(161 Punkte bei 4 Stimmen)
Aufteiler
(161 Punkte bei 4 Stimmen)

Heftarchiv

LinuxUser Heftarchiv

EasyLinux Heftarchiv

Ubuntu User Heftarchiv

Ubuntu User Heftarchiv

Partner-Links:

Das B2B Portal www.Linx.de informiert über Produkte und Dienstleistungen.

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.

Tip a friend    Druckansicht Bookmark and Share
Kommentare

1956 Hits
Wertung: 55 Punkte (2 Stimmen)

Schlecht Gut

Infos zur Publikation

Infos zur Publikation

LinuxUser 05/2014

Aktuelle Ausgabe kaufen:

Heft als PDF kaufen

LinuxUser erscheint monatlich und kostet in der Nomedia-Ausgabe EUR 5,95 und mit DVD EUR 8,50. Weitere Informationen zum Heft finden Sie auf der LinuxUser-Homepage.

Im LinuxUser-Probeabo erhalten Sie drei Ausgaben für 3 Euro. Das Jahresabo (ab EUR 60,60) können Sie im Medialinx-Shop bestellen.

Tipp der Woche

Bilder vergleichen mit diffimg
Bilder vergleichen mit diffimg
Tim Schürmann, 01.04.2014 12:40, 1 Kommentare

Das kleine Werkzeug diffimg kann zwei (scheinbar) identische Bilder miteinander vergleichen und die Unterschiede optisch hervorheben. Damit lassen sich nicht nur Rätsel a la „Orignial und Fäls...

Aktuelle Fragen

programm suche
Hans-Joachim Köpke, 13.04.2014 10:43, 8 Antworten
suche noch programme die zu windows gibt, die auch unter linux laufen bzw sich ähneln sozusagen a...
Funknetz (Web-Stick)
Hans-Joachim Köpke, 04.04.2014 07:31, 2 Antworten
Bei Windows7 brauche ich den Stick nur ins USB-Fach schieben dann erkennt Windows7 Automatisch, a...
Ubuntu 13.10 überschreibt immer Windows 8 Bootmanager
Thomas Weiss, 15.03.2014 19:20, 8 Antworten
Hallo Leute, ich hoffe das ich richtig bin. Ich habe einen Dell Insipron 660 Ich möchte gerne Ub...
USB-PTP-Class Kamera wird nicht erkannt (Windows-only)
Wimpy *, 14.03.2014 13:04, 15 Antworten
ich habe meiner Frau eine Digitalkamera, AGFA Optima 103, gekauft und wir sind sehr zufrieden dam...
Treiber
Michael Kristahn, 12.03.2014 08:28, 5 Antworten
Habe mir ein Scanner gebraucht gekauft von Canon CanoScan LiDE 70 kein Treiber wie bekomme ich de...