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.

Tipp

Entwerfen Sie mehrere Designs, speichern Sie die Datei als Vorlage, und bewahren so die Einstellungen für das nächste Dokument, das Sie entwerfen.

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.

Fürs Web arbeiten

Inkscape exportiert jeden Teilbereich einer SVG-Grafik in ein Rastergrafikformat wie PNG. Individuelle Elemente wie Logos und Icons müssen Sie dazu lediglich auswählen und dann den Menüpunkt Datei | Bitmap exportieren aufrufen. Der Exportdialog errechnet automatisch die Höhe und Breite einer Auswahl. Sie können die Menge an Weißraum, der das ausgewählte Objekt umgibt, verändern, indem Sie die Koordinaten (x0,y0) und (x1,y1), welche die obere linke und untere rechte Ecke des Rahmens bezeichnen, umbiegen. Die Größe der Ausgabe beeinflussen Sie, indem Sie die Parameter für Höhe und Breite manuell festlegen (Abbildung 5).

Abbildung 5: Exportieren Sie komplette Grafiken oder Teile davon in das Bitmap-Format, können Sie in einem Dialogfenster eine Auflösung für das Ergebnis festlegen.

Für ein komplettes Seitendesign sollten Sie die Vorteile von Inkscapes Ebenenunterstützung nutzen. Die erlaubt es, ein komplettes Design in handliche Einzelkomponenten zu zerlegen – so genannte Slices (Abbildung 6). In Inkscape wird die Funktion mit Schneider übersetzt, tatsächlich erinnern die Slices an Schnittmuster. Es gibt zwei Inkscape-Erweiterungen, die Ihnen beim Schneidern helfen. Eine von ihnen ist in Inkscape 0.48 integriert: Sie finden sie unter Erweiterungen | Internet | Schneider. Die andere entwickelt Matt Harrison separat, Sie laden sie über Harrisons GitHub-Webseite herunter [2].

Abbildung 6: Die Elemente Ihres Designs, die Sie benötigen, schneiden Sie mit Hilfe von Rechtecken einfach aus. Diese Prozedur nennt sich "Slicen" oder "Schneidern".

Diese Werkzeuge funktionieren nach einem ähnlichen Prinzip. Sie beginnen, indem Sie die Grafik für Ihre Webseite in Form einer Ebene anlegen (oder in so vielen Ebenen wie Sie wollen, wählen Sie dazu Ebene | Ebenen). Als nächstes stülpen Sie den vorhandenen Ebenen eine Slices-Ebene über. Über Rechtecke kennzeichnen Sie die Areale des Designs, die Sie später als einfaches Bild exportieren wollen. Dazu gehören zum Beispiel der Kopfbereich, die Seitenleiste, die Navigationsleiste oder der Fußbereich.

Aus Ihrem so säuberlich unterteilten Design suchen Sie nun jedes einzelne Element heraus und verstecken andere, indem Sie auf das Augensymbol in der Statusleiste klicken und dann Bitmap exportieren aus dem Datei-Menü wählen. Verbergen Sie bestimmte Slices, fliegen diese nicht aus der Auswahl – die betroffenen Objekte landen allerdings nicht in dem exportierten Bitmap.

Der eingebaute Webzerstückler

Soweit die Theorie. Die Slicing-Erweiterungen sind ein Versuch, den beschriebenen Prozess zu automatisieren, damit Sie nicht alle Schritte durchlaufen müssen. Um sie in Aktion zu sehen, erzeugen Sie den Designentwurf einer Webseite in Inkscape und wählen dann Erweiterung | Internet | Schneider | Geschnittenes Rechteck erzeugen. Eine Dialogbox fordert Sie auf, dem Slice einen neuen Namen zu geben und das bevorzugte Bildformat, die DPI-Einrichtung und andere Optionen festzulegen. Sie bestimmen auch die Hintergrundfarbe, was unter anderem wichtig wird, wenn Ihr Design Transparenz verwendet (Abbildung 7).

Abbildung 7: Für jedes Slice legen Sie individuelle Namen fest. Das erleichtert den späteren Einsatz in Ihrem Design.

Die Erweiterung legt automatisch eine Slice-Ebene an, wenn Sie das erste Rechteck definieren und nennt diese Ebene Web Slicer. Für jedes neue Stück, das Sie generieren, erzeugt Inkscape ein halbtransparentes, rötlich gefärbtes Rechteck in der Web-Slicer-Ebene. Egal, wo Sie es nun auf der Seite positionieren und wie Sie seine Größe ändern – den darunterliegenden Inhalt exportiert Inkscape als Slice.

Standardmäßig exportieren Sie alle definierten Slices als Rastergrafiken, indem Sie Erweiterungen | Internet | Schneider | Exportiere Layout-Teile und HTML+CSS-Code auswählen. Das erfasst sämtliche Slices und erzeugt die darunterliegenden Bildelemente wahlweise im PNG- oder JPG-Format. Die Formate legen Sie zuvor im Dialog zum Einrichten eines Rechtecks fest (Geschnittenes Rechteck erzeugen).

In dem Dialogfenster stoßen Sie auf eine Reihe von Registern, über die Sie formatspezifische Einstellungen für die Ausgabe vornehmen. Die JPEG- und GIF-Tabs verhalten sich ziemlich gewöhnlich, sie beeinflussen die Qualität und ähnliches. Der HTML-Reiter verdient hingegen mehr Aufmerksamkeit. Wann immer Sie den Slice-Export vornehmen, exportieren Sie nicht nur PNG-Bilder für jedes Stück, sondern erzeugen auch eine Beispieldatei im HTML-Format. Diese verlinkt die Slices korrekt und ordnet sie in einer CSS-Datei an (Abbildung 8).

Abbildung 8: Inkscape exportiert Slices mitsamt einer HTML- und CSS-Datei. Beide lassen sich problemlos im Browser aufrufen.

Das Feature ist natürlich ein großer Gewinn für Designer. Es erspart Ihnen Arbeit, weil Inkscape das HTML und CSS für Ihr Layout automatisch generiert und auch jedes Mal aktualisiert, wenn Sie es verändern. Da die Software für die Slices allerdings recht generische Namen vorsieht – etwa Element1 – bearbeiten Sie die Ausgabe manuell. Das HTML-Register im besagten Dialog lässt Sie jedem Slice ein HTML id Attribut zuordnen, das dann im finalen HTML landet (Abbildung 7).

Der Dialog erlaubt es zudem, ein HTML Klassen Attribut zu setzen (wenn Sie eines verwenden), den Positionsanker zu platzieren und zwischen verschiedenen Layoutoptionen zu wählen. Die Standardauswahl lautet hier Positioniert html Block-Elemente mit dem Bild als Hintergrund. Wahlweise spezifizieren Sie auch sich wiederholende oder gekachelte Hintergründe (inklusive rein horizontaler oder vertikaler Wiederholungen) oder unabhängige Bilder (mit festen Positionen oder frei schwebend).

Ein alternativer Web Slicer

Die eingebaute Web-Slice-Erweiterung ist nett, aber ziemlich neu, weshalb noch einige Funktionen fehlen – das schließt die Dokumentation ein. Beschäftigen Sie sich mit dem Zusammenstückeln von Web-Designs, schauen Sie sich einmal die andere Option an und laden Sie die alternative Inkscape-Schneider-Erweiterung herunter. Beide Erweiterungen lassen sich parallel installieren, insofern ist es sicher, damit zu experimentieren.

Die Erweiterung zu installieren ist einfach: Sie laden zwei Dateien von der GitHub-Seite des Projekts herunter, layer2png.inx und layer2png.py. Dazu klicken Sie auf den Download-Button und entpacken dann das TAR.GZ- bzw. ZIP-Archiv. Kopieren Sie die darin enthaltenen Dateien in das Verzeichnis .config/inkscape/extensions/ in Ihrem Home und starten Sie Inkscape neu.

Wie beim eingebauten Slicer erzeugen Sie zunächst Ihr Design. Diese Erweiterung erfordert es allerdings, dass Sie die Slices selbst erzeugen und dann die Rechtecke direkt zeichnen – es gibt kein Pop-up-Fenster, das den Prozess begleitet. Legen Sie also manuell eine neue Slice-Ebene an und zeichnen Sie Rechtecke über die Grafik der Webseite, deren Deckkraft Sie am besten in den Ebeneneigenschaften reduzieren. Haben Sie sämtliche Slices eingezeichnet, klicken Sie mit der rechten Maustaste auf diese und wählen jeweils die Objekteigenschaften aus. Dabei handelt es sich um einen Inkscape-Dialog, nicht um einen Teil der Erweiterung. In dem Fenster sehen Sie die generische Objekt-ID, die Inkscape für das Rechteck erzeugt hat, etwa rect2994. Ändern Sie diese Bezeichnung und nennen Sie das Slice nun beispielsweise header oder footer (Abbildung 9).

Abbildung 9: In den Objekteigenschaften ändern Sie die generischen Namen für Ihre Slices. Die exportierten Dateien tragen dann diese Namen, was das Identifizieren erleichtert.

Sind Sie fertig, rufen Sie den Menüpunkt Erweiterungen | Internet | Export Layer Slices auf – die einzige Dialogbox für diese externe Slicer-Erweiterung. Sie tippen hier das Verzeichnis ein, in dem die Ausgabedateien landen sollen und geben in der Zeile darunter an, welche Ebene Sie als Slice-Ebene definieren. Klicken Sie auf Anwenden, durchforstet die Erweiterung die Slices und erzeugt die Ergebnisse.

Die Erweiterung scheint weniger Optionen zu haben, aber automatisiert mehr Aufgaben für Sie. Anders als der integrierte Slicer, benutzt sie automatisch die Objekt-ID als Ausgabename für das Slice. Sie färbt zudem die Slice-Rechtecke ein, um anzuzeigen, ob beim Export eine neue Datei erzeugt (grün) und eine alte Datei überschrieben wurde (rot). Welche Erweiterung Sie hilfreicher finden, hängt davon ab, wie Sie arbeiten.

Mit CSS-Gittern und Vorlagen arbeiten

Um das beste aus der Slice-Erweiterung zu holen, benötigen Sie davor natürlich ein ansprechendes Webseiten-Design. Die gute Nachricht ist, dass Inkscape es Designern einfach macht, mit populären Gittersystemen für CSS-Frameworks zu arbeiten, etwa 960 Grid System [3], Golden Grid [4] und Blueprint [5].

CSS-Gittersysteme sind Werkzeuge, die Web Designern mit Hilfe von Gittern helfen, saubere Formatierungen einzuhalten, mit konsistenten Spaltenbreiten und genügend Abstand zwischen den Elementen zu arbeiten. Sie definieren gewöhnlich ein bestimmtes Gitter mit einer fixen Zahl an Spalten (gewöhnlich 12 oder 16) sowie die dazugehörigen Zwischenräume. Die Spalten werden als CSS-Klassen definiert. Um etwa ein zwei Spalten breites Element zu definieren, erweitern Sie die HTML-Attribute um den Eintrag class="grid_2".

Um in Inkscape mit einem Gitternetz zu arbeiten, müssen Sie entweder ein Inkscape-Template herunterladen oder eine einfache Vektorgrafik-Vorlage im SVG-Format. Beide erhalten Sie gewöhnlich auf den Webseiten der Grid-Systeme. Das 960-Grid-System-Paket bringt zum Beispiel Code-Dateien mit (etwa die tatsächlichen CSS-Dateien, die Sie auf dem Server benötigen) sowie Vorlagen für eine Vielzahl an Designwerkzeugen – sowohl für quelloffene als auch für proprietäre. Die Inkscape-Vorlagen liegen im SVG-Format vor. Jedes besteht aus einem leeren, 1020 Pixel breiten, Dokument mit einem vordefinierten rechteckigen Gitternetz und vertikalen Hilfslinien, welche die Spalten und Abstände vorzeichnen (Abbildung 10).

Abbildung 10: Anbieter von Grid-Systemen wie 960 Grid System bieten auch Vorlagen für Inkscape an. Hier sehen Sie ein typisches 16-Spalten-Layout.

Inkscape unterscheidet nicht zwischen Vorlagen und gewöhnlichen Dateien, also sollten Sie Ihr Design sobald wie möglich unter einem neuen Namen speichern. Benutzen Sie das vorgefertigte Gitternetz, um Seiten nach dem Grid-System zu entwerfen. Noch einmal: Wenn Sie in den Voreinstellungen wie anfangs erwähnt Immer einrasten aktivieren, hilft Ihnen das, alle Elemente der Webseite pixelgenau zu positionieren.

Nutzen Sie den eingebauten Web-Slicer, geben Sie einfach den passenden Klassennamen in das HTML-Register ein, das beim Anlegen eines Rechtecks erscheint (HTML Klassen Attribut). So integrieren Sie das Gittersystem nicht nur in das finale Ergebnis, die Seitenelemente sind auch bereits richtig getaggt, wenn Sie die HTML-Seiten exportieren. Sie müssen allerdings noch die zum Grid-System gehörenden CSS-Dateien auf den Webserver laden und die passenden Klassen-IDs deklarieren.

Machen Sie in Ihrem Design freigiebig Gebrauch von Ebenen, um den Hintergrund von den Seitenelementen zu trennen, Blindtext auf einer eigenen Ebene zu behalten usw. Sie nutzen Ebenen auch gut als Platzhalter für Widgets, die ein JavaScript-Framework serverseitig generiert. Das Yahoo User Interface (YUI) enthält zum Beispiel Open-Source-Elemente für Webdesign und zwar in alle möglichen Formen [7]. Das reicht von Formularfeldern über Tabs bis hin zu Texteditoren mit integrierten Bedienelementen. Yahoo bietet Code an, um sowohl YUI-Widgets in Ihre Seite einzubauen als auch Widgets im SVG-Format, die Sie in Inkscape als Designelemente verwenden.

Hilfreiche Design-Tools

Gittersysteme und andere Web Frameworks helfen Ihnen, Ihre kreative Arbeit mit Inkscape besser zu organisieren. Aber wenn Sie eine professionelle Seite entwerfen und dabei Inkscape einsetzen, macht es Sinn, zu weiteren Open-Source-Werkzeugen zu greifen, um die Lücken zu füllen, die Inkscape und die Vorlagen nicht abdecken.

Eins dieser Tools ist ein guter Farbauswähler. Nutzen Sie am besten Gnomes Farbtool Agave [7] und den Farbpalettenkonvertierer SwatchBooker [8]. Agave erlaubt es Ihnen, harmonische Farben basierend auf einer Vielzahl an Farbkreisbeziehungen zu entdecken (Abbildung 11). SwatchBooker importiert Farbpaletten anderer Anwendungen wie Gimp, Krita und sogar Photoshop und verwandelt diese in ein für Inkscape lesbares Format.

Abbildung 11: Neue Farbschemata erstellen Sie in Ubuntu mit Agave. Die Gnome-Anwendung installieren Sie über das Software-Center.

Arbeiten Sie mit einer hochfrequentierten Website, müssen Sie sich meist Gedanken über die Größe von Dateien machen. Hier integrieren Sie Optimierer für Bilddateien wie etwa die Kommandozeilen-Werkzeuge pngcrush oder optipng. Testen Sie die Kompressionseinstellungen, bis Sie auf eine gute Balance zwischen Größe und Bildqualität stoßen.

Natürlich helfen auch vollwertige Webeditoren wie Bluefish und Kompozer dabei, CSS-, JavaScript- und HTML-Inhalte zu bearbeiten – die mit Inkscape erzeugten HTML- und CSS-Dateien sind nur ein Startpunkt, kein finales Produkt.

Die Zukunft des Designs

Inkscape ist ein quirliges Projekt und die entwickelnde Community spricht unter anderem davon, bessere Unterstützung für CSS und andere Webtechnologien direkt in Inkscape zu integrieren. Aktuell gibt es noch keine Lösung, CSS-Regeln auf Texte oder SVG-Objekte anzuwenden. Die Möglichkeit, formatierte HTML-Instanzen direkt in Inkscape zu erzeugen, würde die Tür für weitere Designoptionen öffnen – auch wenn Inkscape bereits jetzt eine nützliche Waffe für Web Designer ist.

Glossar

SVG

Scalable Vector Graphics basieren auf mathematischen Funktionen. Das macht sie skalierbar, was bedeutet, dass sie sich beliebig verlustfrei vergrößern lassen.

Content-Management-Systeme

Webseiten baut man heute in der Regel nicht mehr selbst, sondern greift zu fertigen, meist modular aufgebauten, Content-Management-Systemen. Joomla, Drupal oder auch Wordpress stehen kostenlos bereit und bringen eigene Galeriemodule und Nutzerverwaltungen mit.

Grafikprimitive

dabei handelt es sich um die essentiellen mathematischen Funktionen, auf deren Basis Inkscape und andere Vektorgrafikprogramme ihre Grafiken erzeugen.

Slices

Slices sehen aus wie ein Schnittmuster – aber nicht für Kleider, sondern für Webseiten. Sie schneiden zum Beispiel die rein grafischen Teile aus, die Sie nicht in HTML umsetzen können und exportieren sie dann in Form von HTML- und CSS-Dateien.

Ähnliche Artikel

Kommentare