Simples Webdesign mit Gimp und Inkscape Hand in Hand

Mein Freund bat mich um ein Webdesign für ein privates Projekt. Und da ich sowieso noch Screendesign-Erfahrung mit Gimp sammeln wollte kam mir das gerade recht. Es handelt sich um ein Design für eine kleine Seite, die als Projekt-Dokumentation dienen soll. Relativ simpler Content bestehend aus lediglich 4 Seiten.

Dementsprechend simpel und ohne viel Schnickschnack sollte auch das Design auskommen. Abgesehen davon wollte ich mir in meiner ersten Screendesign-Arbeit mit Gimp das Leben durch Schlagschatten, 3D-Effekte und Verläufe nicht unnötig schwer machen, da ich weiß, dass ich in Gimp ohne Ebeneneffekte auskommen müsste. Ich entschied mich also für einen rein grafischen Stil, skizzierte mir den Grobaufbau der Seite und fertige erste Scribbles für die Grafikelemente an.

Um einen schönen grafischen Piktogramm-Stil zu erhalten entschied ich mich zusätzlich für das Arbeiten mit Vektoren. Also Inkscape geöffnet und mit wenigen simplen Formen einen Laptop gezeichnet. Dieser soll später auf der Startseite als Grafik dienen. Das ganze abgespeichert als SVG und fertig.

Startseiten-Grafik in Inkscape

Erfreulicherweise konnte ich die SVG-Dateien direkt in Gimpals Ebenen öffnen. Gimp legt hier dann automatische eine Ebne mit Alpha-Transparenz an. Wunderbar. Für die Piktogramme der Teaser fertigte ich ebenfalls Grafiken in Inkscape an und importierte diese.

So legte ich Schritt für Schritt die einzelnen Elemente zusammen und kombinierte sie mit Blindtextblöcken (loremipsum.de), Hintergründen und Linienelementen, die ich anhand von Hilfslinien ausrichtete um das 3er Raster einzuhalten. Da dieses Layout komplett ohne Fotografien auskommt hätte ich sicher auch die gesamte Seite in Inkscape anlegen können, aber ich wollte ja das Screendesign mit Gimp lernen, da ich das Gefühl habe mit Inkscape ohnehin schon besser klar zu kommen.

Alles in allem funktionierte das ganz gut. Hier und da wünsche ich mir immernoch einige Photoshop Features herbei, wie das automatische Duplizieren von Ebenen beim Ziehen mit der Maus und drücken von STRG und ALT und das gleichzeitige Markieren von mehreren Ebenen im Ebenen-Menü, jedoch bin ich mit dem Ergebnis an sich sehr zufrieden und stolz, dass hierfür keinerlei Photoshop nötig war.

Layout Startseite

Layout Detailseite

Tipps für den Aufbau eines XCF:

Ich verwende immer eine sinnvolle Ordnerstruktur beim Gestalten von Websiten, das macht es mir erstens einfacher den Überblick zu bewahren und vor allem erleichtert es die Zusammenarbeit im Team. Wenn ich das Design dem Programmierer übergebe und dieser sich ggf. Farbwerte, Schriftgrößen oder komplette Grafiken aus dem Dokument herausholen muss findet er sich leichter zurecht, wenn die einzelnen Bereiche der späteren Website bereits in der Layout-Datei so benannt sind (Bspw. Header, Footer, Content, Menu etc)

In diesem Fall trennt meine Aufteilung zunächst mal die Startseite von dem Detailseiten-Layout in HOME und DETAIL, da ich beide dieser Layouts immer gerne in einem Dokument bearbeiten möchte. Innerhalb dieser Ordner unterteile ich jeweils nochmal in HEADER, MEDIA, TEASER, FOOTER und BG (background). Darin befinden sich dann die entsprechenden Grafiken und Textblöcke, wobei ich immer verusche diese von oben nach unten oder von links nach rechts sortiert zu halten und natürlich auch sinnvoll zu benennen. Die bewusste Unterscheidung zwischen Ordnernamen in Großbuchstaben und Ebenennamen in Groß-und Kleinschreibung unterstützt nochmal die Übersichtlichkeit.

Zusätzlich lege ich manchmal ganz oben einen Definitions Order an in dem ich Pixel-Größen und Abstände anzeichne und die verwendeten Schriftarten und Formattierung notiere, diese kann ich dann ein- und ausblenden und dem Programmierer z.b. auch einfach ein PNG des Designs mit den Definitionen im Bild zukommen lassen, falls er kein Gimp/Photoshop hat um die Datei zu öffnen.

Aufbau der Ebenen

Definitionen Ordner

Um natürlich mit diesen Ordner-Strukturen arbeiten zu können ist die Installation der Entwicklerversion von Gimp notwendig. Das ist auch der Grund weswegen ich nun ausschließlich mit Gimp 2.7.3. arbeite. Ebenengruppen sind einfach das A und O im Webdesign und bringen soviele Vorteile.

Wenn man sich nun z.B. bei der Gestaltung von gewissen Objekten noch nicht sicher ist kann man Varianten als zusätzlichen Ordner anlegen. In meinem Fall z.B. habe ich mit dem Aussehen der Teaser-Boxen experimentiert und dazu den Ordner TEASER dupliziert und den orginal Ordner ausgeblendet. Die Anpassungen die ich in dem duplizierten Ordner vorgenommen habe kann ich nun jederzeit im Vergleich mit der anderen Version überprüfen oder einfach mal als ausgeblendeten Ordner aufheben, vielleicht kann man diese Version ja noch brauchen.

Teaser-Variante als separater Ordner

Oder man kann z.B. die komplette Farbgebung der Website nochmal in Frage stellen und mit verschiedenen Hintergrundfarben oder Verläufe testen. Diese speichere ich alle als extra Ebenen im Ordner BG. Somit habe ich immer einige Varianten zum Ausprobieren vorhanden, vermülle aber nicht die Übersichtlichkeit meiner Ebenen.