Stückwerk

Mit Inkscape [1] entwerfen Sie sowohl druckfähige Designs als auch Icons für den Desktop sowie zahlreiche weitere Typen von Grafiken. Vermutlich wissen Sie bereits, wie Sie mit Inkscape einfach komplexe Freihandgrafiken im Vektorgrafikformat SVG gestalten. Daneben eignet sich die Software aber auch als Werkzeug zum Erstellen von Designs für Webseiten (Abbildung 1). Dank ihres XML-basierten Unterbaus und eines Plug-in-Systems, erzeugen Sie nicht nur ein sauberes, strukturiertes Design. Sie integrieren es auch in existierende Content-Management-Systeme (CMS).

Abbildung 1: Aktivieren Sie das Gitternetz von Inkscape und wählen Sie geschickte Voreinstellungen, entwerfen Sie sehr präzise Designs.

Um Ihnen zu zeigen, wie Sie Inkscape als Webdesign-Tool einsetzen, werfen wir zunächst einen kurzen Blick auf die Einstellungen. Dann lernen Sie Wege kennen, um Mock-ups zu entwerfen, die Sie exportieren und in HTML-Seiten integrieren. Sie erfahren, wie Sie Designelemente als individuelle Rastergrafikdateien exportieren, aber auch, wie Sie mit Designvorlagen für Webseiten arbeiten, Gittersysteme einsetzen und CSS-Frameworks verwenden.

Weboptimierte Voreinstellungen wählen

Der erste Schritt beim Webdesign besteht darin, Inkscapes Myriaden Einstellungen so zu justieren, dass die Software saubere und professionelle Zeichnungen erzeugt. Wählen Sie dazu aus dem Menü Datei den Eintrag Dokumenteinstellungen. Die Größe der Arbeitsfläche stellen Sie auf A4, als Standard-Einheiten bietet Inkscape u.a. Millimeter, Pixel und Punkte an – das ist insbesondere für den Print-Bereich wichtig (Abbildung 2).

Abbildung 2: Wenn Sie nicht sicher sind, welche Auflösung für Ihr Design Sie wählen sollen, versuchen Sie es mit 1020 x 1020 Pixeln.

Setzen Sie die Standard-Einheiten zunächst auf Pixel (px). Dann geben Sie die gewünschte Höhe und Breite in dem Bereich unterhalb der Seitengröße an. Im Zweifelsfall verwenden Sie eine Auflösung von 1020x1020 Pixel. Sie sollten dabei stets an die komplette Auflösung des Browsers denken und nicht nur an den aktiven Bereich Ihrer Webseite. Generell visualisieren Sie das Design einfacher, wenn die Vorlage die gesamte Bildschirmfläche inklusive der Freiflächen für Werbebanner umfasst.

Wechseln Sie nun zum Reiter Gitter (Abbildung 3) und erzeugen Sie ein rechteckiges Gitter, indem Sie auf Gitter | Neu klicken. Versichern Sie sich, dass es bei den Koordinaten 0,0 beginnt (Ursprung X, Ursprung Y) und verwenden Sie jeweils einen 1-Pixel-Leerraum in die Richtungen der X- und Y-Achse (Abstand X, Abstand Y).

Abbildung 3: Gitter helfen Ihnen, punktgenau am Design zu arbeiten. Über die Pfeiltasten verschieben Sie markierte Elemente in 1-Pixel-Schritten.

Wechseln Sie dann zum Reiter Einrasten und aktivieren Sie Immer einrasten im Bereich Am Gitter einrasten. Kombinieren Sie diese Wahl mit dem 1-Pixel-Gitter, das erscheint, wenn Sie nah genug an die Zeichnung heranzoomen. So kleben Sie Ihre Konstruktionen an exakten Pixelgrenzen zusammen, was zu einer scharfen Darstellung des Resultats führt.

Eine weitere modifizierbare Option ist das Verhalten der Pfeiltasten. Im Bereich Schritte, in den Sie über Datei | Inkscape-Einstellungen gelangen, sorgen Sie dafür, dass ein Druck auf die Pfeiltasten den Cursor lediglich um einen Pixel verschiebt, was ein sehr präzises Anordnen von Elementen ermöglicht. Im Gegensatz zu den oben erwähnten Dokumenteinstellungen handelt es sich hier um eine systemweite Konfiguration, die auch einen Neustart von Inkscape überlebt.

Webgrafiken erzeugen

Inkscapes Werkzeugkiste liefert, was Sie benötigen, um Ihr Layout zu entwerfen. Dabei ist es egal, ob es sich um Logos und Freihand-Icons handelt oder um ausgefeilte Anordnungen aus Rechtecken (Slices) und Farbverläufen, um die verschiedenen Bereiche einer Webseite zu markieren. Die aktuelle Version 0.48 von Inkscape, die Sie in Ubuntu 11.04 vorfinden, unterstützt fortgeschrittene Grafikprimitive wie Spiralen, 3-D-Boxen und Diagrammkonnektoren. Die neuen Zeichenwerkzeuge umfassen kalligraphische Pinsel, Sprühfarben-Objekte sowie ein Verformungs-Tool, das es erlaubt, Bézierkurven und -linien zu verbiegen, indem Sie sie mit diesem Werkzeug "übermalen".

Vor allem aber besteht eine der größten Stärken von Inkscape in puncto Webdesign darin, dass die Software Filtereffekte für Vektorgrafiken beherrscht. Arbeiten Sie gewöhnlich mit einem Rastergrafikprogramm wie Gimp, hält SVG schöne Überraschungen für Sie bereit. Beim Bearbeiten der Bilder kommt unter der Haube XML zum Einsatz. Das bedeutet, dass Sie das Bild beim Bearbeiten zwar verändern, die Modifikationen aber nicht direkt anwenden (nicht-destruktives Arbeiten).

Es gibt mehrere hundert vordefinierte Filtereffekte für Inkscape, die Sie über das Filter-Menü erreichen und die von einfachen Schmier- und Weichzeicheneffekten bis hin zu kombinierten Effekten wie Schattenwerfen und Glühen reichen. In Abbildung 4 sehen Sie den integrierten Filter-Editor. Wenn Sie also den Filter Schatten und Lichter | Leuchtender Umriss auf einen Text anwenden, lassen sich sämtliche Parameter ändern – von den X-Y-Rändern bis hin zum Unschärfe-Faktor.

Abbildung 4: Inkscape bietet – ähnlich wie Gimp – Filter an, über die Sie Grafiken verändern. Allerdings erhalten Sie im Ergebnis Vektorgrafiken, die Sie verlustfrei vergrößern und verkleinern.

Ein weiteres hervorragendes Merkmal von Inkscape besteht in der Möglichkeit, Objekte zu klonen. Anders als beim einfachen Duplizieren eines Objekts (das auch möglich ist), verlinkt das Klonen ein kopiertes Objekt zu seinem Original. Es erbt dadurch alle Eigenschaften des Originals inklusive der Füllung sowie Typ und Breite der Striche.