Mit Gimp eine Grid Webseitenvorlage erzeugen

In diesem Tutorial zeige ich euch, wie man mit Gimp eine Webseitenvorlage für das das 960px Gestaltungsraster erzeugt. Das Gestaltungsraster ist auch bekannt unter der Bezeichnung 960 Grid System. Wer im Netz danach sucht, wird viele informative Artikel dazu finden.

Der Einsatz des sogenannten Grid Systems ist deshalb zu bevorzugen, weil es Webdesignern hilft bei der Erstellung einer Webseite, diese gestalterisch besser in einzelne Sektionen einzuteilen. Diese Vorgehensweise erleichtert die Arbeit an einem Webseitenproto wesentlich.

Die Spaltenanzahl im 960 Grid System

Viele Designer bauen ihre Webseiten gemäß dem 960 Grid System entweder mit 6, 12 oder 16 Spalten auf. Am gängigsten ist wohl die 12 Spalten- und 16 Spaltenvariante. Dieser Artikel liefert eine Beschreibung zur Erstellung einer Gimp Webseitenvorlage für alle drei Optionen.

Bevor wir beginnen vorweg noch der Hinweis zur von mir verwendeten Größe. Die Webseitenvorlagen für Gimp haben alle eine Basisbreite von 970px. Der Grund ist ganz einfach. Ich lasse jeweils links und rechts einen 5px Rand stehen, der später dem Textbereich optisch mehr Luft lässt. Viele 960 Grid System Vorlagen haben rechts eine Spaltenbreite von 10 oder 20 Pixel. In meinen Beispielen verwende ich einen 10px Abstand zur nächsten Spalte. In Abbildung 6 sieht man, wie das 6spaltige Raster mit einem 20px Abstand aussehen würde. In diesem Fall wird die in Schritt 3 angesprochene Spaltenbreite anstelle der 10px um 20px reduziert. An der weiteren Vorgehensweise ändert sich nichts.

Mit Gimp eine 6spaltige Webseitenvorlage für das 960px Gestaltungsraster erstellen

Schritt 1: die Basisdaten definieren

• Starte die Software und rufe die Programmeinstellungen über das Menü Datei / Einstellungen auf. Über einen Klick auf Standardraster im linken Bereich, öffnet sich die Standardbildraster Information die Gimp regulär für neue Bilder verwendet.
• Hier passen wir nun die Einstellungen für die 6spaltige Rasterdarstellung an (siehe Abbildung 1).
• Unter Darstellung wird der Linienstil auf Gestrichelt gesetzt. Die Vordergrundfarbe passen wir auf einen dezenten gräulichen Farbton an. Die Hintergrundfarbe kann weiß belassen werden.
• Die Angaben bei Abstand beziehen sich auf die einzelnen Spalten. Die Spaltenbreite für das 6spaltige Raster berechnet man wie folgt: 960px : 6 (Spalten) = 160px
• Somit tragen wir bei Breite den Wert 160 ein. Die Höhe ergibt sich aus der von Dir bevorzugt zu verwendenden Höhenangabe deiner Datei. Du wirst Dir leichter tun, wenn Du hier die tatsächliche Bildhöhe verwendest, mit der Du später arbeiten willst um den Webseitenproto zu erstellen (z. B. 800px).
• Die Angaben bei Versatz sind dafür notwendig, um den 5 Pixel Rand links und rechts von der 960px Gesamtbreite zu definieren. Wie ich schon zu Beginn erwähnt habe, bevorzuge ich eine Basisbreite von 970 Pixel, wobei die 10 Pixel auf den jeweils links und rechts bestehenden Rand aufgeteilt werden.

Schritt 2: die Gimpvorlage erzeugen

Nachdem die Basiseinstellungen für das 6spaltige Raster definiert sind, erstellen wir über Datei / Neu ([Strg+N]) eine neue Bilddatei. Die Breite wird mit 970 Pixel definiert und die Höhe entspricht der von Dir benötigten Größe (z. B. 800 Pixel). In Abbildung 2 sieht man ein neues Bild, welches ich eben mit den genannten Angaben erstellt habe. In diesem Bild kann man bereits das von uns in Schritt 1 definierte Raster erkennen, welches das Bild in 6 gleiche Spalten unterteilt. Links und rechts davon zeigt sich der schmale 5 Pixel breite Rand, welcher auf die Angaben bei Versatz basiert. Die eben erstellte Datei wird nun im gimpeigenen XCF-Dateiformat gesichert. Wer möchte, kann die Größenangaben für spätere Arbeiten an ähnlichen Dateien als Vorlage für das 960px Rasterdesign sichern. Hierzu klicken wir im Bildmenü Datei auf Als Vorlage speichern. Im Dialogfenster Eine neue Vorlage erstellen wird ein passender Name vergeben und das Ganze mittels der Schaltfläche OK gesichert. Wichtig: Bei diesem Vorgang werden lediglich die Größenangaben gesichert und nicht die verwendeten Farben, erzeugten Ebenen oder Rastereinstellungen.

Abbildung 1: Einstellungsmöglichkeiten für das Standardraster in Gimp.	Abbildung 2: Hier zeichnen sich bereits die sechs festgelegten Rasterspalten ab.	Abbildung 3: Die Rasteransicht in Gimp muss gelegentlich erst aktiviert werden.

Schritt 3: die Vorlage optisch in Sektoren einteilen

In Schritt 1 haben wir bereits die Breite einer einzelnen Spalte mit einem Wert von 160 Pixel errechnet. Von diesen 160 Pixeln ziehen wir nun 10 Pixel für den Abstand zur nächsten Spalte ab. Daraus ergibt sich ein Wert von 150 Pixel.

• Über das Bildmenü Datei / Neu erstellen wir ein neues Bild mit einer Breite von 150px und der Höhe des aktuellen Bildes (in unserem Beispiel wäre das 800 Pixel).
• Dieses neue Bild füllen wir mit einer beliebigen Farbe.
• Anschließend wird mit der Tastenkombination [Strg+A] das Bild ausgewählt und über [Strg+C] in die Zwischenablage kopiert.
• Wir wechseln zurück zur Gridvorlage. Dort erstellen wir eine neue transparente Ebene oberhalb der Hintergrund Ebene.
• In diese neue Ebene kopieren wir den Bildbereich aus der Zwischenablage und positionieren ihn wie in Abbildung 4 zu sehen in die erste der sechs Spalten. Mit den restlichen Spalten fahren wir genauso fort.
• Abschließend positionieren wir die benötigten Elemente wie in Abbildung 5 ersichtlich an den entsprechenden Stellen.

Tipp: Die Positionierung der einzelnen Elemente fällt leichter, wenn über das Bildmenü Ansicht die Punkte Magnetische Hilfslinien und Magnetische Raster aktiviert ist.

Abbildung 4: Die einzelnen Spalten werden noch mit der optischen Trennung versehen.	Abbildung 5: Im Raster werden abschließend die einzelnen Elemente positioniert.	Abbildung 6: So sieht es aus, wenn man anstelle der 10px lieber einen 20px Abstand zur nächsten Spalte bevorzugt.

Mit Gimp eine 12spaltige Webseitenvorlage für das 960px Gestaltungsraster erstellen

Schritt 1: die Basisdaten definieren

• Wie im vorausgehenden Abschnitt bereits angesprochen, passen wir zuerst die Programmeinstellungen über das Menü Datei / Einstellungen im Bereich Standardraster an. Hierfür auf den entsprechenden Menüpunkt klicken. Anschließend die Einstellungen aus Abbildung 7 anwenden.
• Die Spaltenbreite für das 12spaltige Raster berechnet man wie folgt: 960px : 12 (Spalten) = 80px
• Somit tragen wir bei Breite den Wert 80 ein. In unserem Beispiel verwenden wir 800 Pixel als Wert für die Höhe.
• Auch hier sind die Angaben bei Versatz dafür notwendig, um den 5 Pixel Rand links und rechts von der 960px Gesamtbreite zu definieren.

Schritt 2: die Gimpvorlage erzeugen

• Nachdem die Basiseinstellungen für das 12spaltige Raster definiert sind, erstellen wir über Datei / Neu ([Strg+N]) eine neue Bilddatei. Die Breite wird mit 970 Pixel definiert und die Höhe entspricht der von Dir tatsächlich benötigten Größe.
• In Abbildung 8 zeigt ein neues weißes Bild mit den 12 von uns definierten Raster. Links und rechts davon zeigt sich der schmale 5 Pixel breite Rand, welcher auf die Angaben bei Versatz beruht.
• Die eben erstellte Datei sichern wir nun im gimpeigenen XCF-Dateiformat, bevor wir fortfahren.

Schritt 3: die Vorlage optisch in Sektoren einteilen

In Schritt 1 haben wir bereits die Breite einer einzelnen Spalte mit einem Wert von 80 Pixel errechnet. Von diesen 80 Pixeln ziehen wir nun 10 Pixel für den Abstand zur nächsten Spalte ab. Daraus ergibt sich ein Wert von 70 Pixel.

• Über das Bildmenü Datei / Neu erstellen wir ein neues Bild mit einer Breite von 70px und der Höhe des aktuellen Bildes (in unserem Beispiel sind das 800 Pixel).
• Dieses neue Bild füllen wir mit einer beliebigen Farbe.
• Anschließend wird mit der Tastenkombination [Strg+A] das Bild ausgewählt und über [Strg+C] in die Zwischenablage kopiert.
• Wir wechseln zurück zur Gridvorlage. Dort erstellen wir eine neue transparente Ebene oberhalb der Hintergrund Ebene.
• In diese neue Ebene kopieren wir den Bildbereich aus der Zwischenablage und positionieren ihn wie in Abbildung 9 zu sehen in die 12 Spalten.
• Abschließend positionieren wir die benötigten Elemente der Webseite (Bilder, Texte, Überschriften etc.) an den entsprechenden Stellen.

Abbildung 7: Einstellungsmöglichkeiten für das Standardraster in Gimp.	Abbildung 8: Die neue Datei zeigt die eben definierten 12 Rasterspalten.	Abbildung 9: Die einzelnen Elemente der Webseite positioniert man nun entlang der Raster.

Mit Gimp eine 16spaltige Webseitenvorlage für das 960px Gestaltungsraster erstellen

Schritt 1: die Basisdaten definieren

• Wie in den beiden vorausgehenden Abschnitten schon ausgeführt, passen wir zuerst die Programmeinstellungen über das Menü Datei / Einstellungen im Bereich Standardraster an. Hierfür auf den gleichnamigen Menüpunkt klicken. Anschließend die Einstellungen aus Abbildung 10 anwenden.
• Die Spaltenbreite für das 16spaltige Raster berechnet man wie folgt: 960px : 16 (Spalten) = 60px
• Somit tragen wir bei Breite den Wert 60 ein. In unserem Beispiel verwenden wir 800 Pixel als Wert für die Höhe.
• Auch hier sind die Angaben bei Versatz dafür notwendig, um den 5 Pixel Rand links und rechts von der 960px Gesamtbreite zu definieren.

Schritt 2: die Gimpvorlage erzeugen

• Nachdem die Basiseinstellungen für das 16spaltige Raster definiert sind, erstellen wir über Datei / Neu ([Strg+N]) eine neue Bilddatei. Die Breite wird mit 970 Pixel definiert und die Höhe entspricht der von Dir tatsächlich benötigten Größe.
• In Abbildung 11 sieht man, wie das 16spaltige Raster aussehen wird. Links und rechts davon zeigt sich der schmale 5 Pixel breite Rand, welcher auf die Angaben bei Versatz beruht.
• Die eben erstellte Datei sichern wir nun im gimpeigenen XCF-Dateiformat, bevor wir fortfahren.

Schritt 3: die Vorlage optisch in Sektoren einteilen

In Schritt 1 haben wir bereits die Breite einer einzelnen Spalte mit einem Wert von 60 Pixel errechnet. Von diesen 60 Pixeln ziehen wir nun 10 Pixel für den Abstand zur nächsten Spalte ab. Daraus ergibt sich ein Wert von 50 Pixel.

• Über das Bildmenü Datei / Neu erstellen wir ein neues Bild mit einer Breite von 50px und der Höhe des aktuellen Bildes (in unserem Beispiel sind das 800 Pixel).
• Dieses neue Bild füllen wir mit einer beliebigen Farbe.
• Anschließend wird mit der Tastenkombination [Strg+A] das Bild ausgewählt und über [Strg+C] in die Zwischenablage kopiert.
• Wir wechseln zurück zur Gridvorlage. Dort erstellen wir eine neue transparente Ebene oberhalb der Hintergrund Ebene.
• In diese neue Ebene kopieren wir den Bildbereich aus der Zwischenablage und positionieren ihn wie in Abbildung 12 zu sehen in die 16 Spalten.
• Abschließend positionieren wir die benötigten Elemente der Webseite (Bilder, Texte, Überschriften etc.) an den entsprechenden Stellen.

Abbildung 10: Einstellungsmöglichkeiten für das Standardraster in Gimp.	Abbildung 11: Die neue Datei zeigt die eben definierten 16 Rasterspalten.	Abbildung 12: Optisch unterteilte Rasterspalten.