AA_puzzle.jpg

© James Thew, Fotolia

Stückwerk

Webseiten entwerfen mit Inkscape

27.07.2011
Nicht zu unrecht hat sich das Vektorgrafikprogramm Inkscape mittlerweile einen Platz in der Werkzeugkiste der Grafikprofis erarbeitet. Wir zeigen, wie Sie mit der freien Software Webseiten gestalten.

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.

Ähnliche Artikel

  • Kreative Inkscape-Effekte in der Praxis
    Das Vektorzeichenprogramm Inkscape beherrscht nicht nur spröde Bleistift- oder Tuschelinien: Es imitiert bei Bedarf auch die eleganten Pinselschwünge eines Ölgemäldes. Drei leicht nachvollziehbare Beispiele stellen das unter Beweis.
  • Inkscape-Effekte gekonnt einsetzen
    Neben den grundlegenden Zeichenfunktionen bietet Inkscape ausgefeilte Effekte, die Vektorlinien in weich fließende Pinselschwünge verwandeln oder das Zeichnen von feingezähnten Papierrisskanten automatisieren.
  • Kreativität pur
    Inkscape war bisher schon gut. In der Version 0.45 präsentiert sich das Vektorzeichenprogramm allerdings noch kreativer.
  • Vektorzeichenprogramme
    Nach Jahren der Abstinenz gibt es mittlerweile einige Linux-Programme zum Zeichnen von Karten, Schaubildern und anderen Illustrationen. Wir haben uns sieben Programme angesehen, die angetreten sind, CorelDraw oder Designer vergessen zu machen.
  • Web-Seiten layouten mit Gimp
    Ü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.
Kommentare

Infos zur Publikation

Ubuntu User ist bis Ausgabe 02/2013 vierteljährlich erschienen, aktuelle Artikel zu Ubuntu finden sich ab Ausgabe 04/2013 im LinuxUser.

Tipp der Woche

Ubuntu 14.10 und VirtualBox
Ubuntu 14.10 und VirtualBox
Tim Schürmann, 08.11.2014 18:45, 0 Kommentare

Wer Ubuntu 14.10 in einer virtuellen Maschine unter VirtualBox startet, der landet unter Umständen in einem Fenster mit Grafikmüll. Zu einem korrekt ...

Aktuelle Fragen

Nach Ubdates alles weg ...
Maria Hänel, 15.11.2014 17:23, 4 Antworten
Ich brauche dringen eure Hilfe . Ich habe am wochenende ein paar Ubdates durch mein Notebook von...
Brother Drucker MFC-7420
helmut berger, 11.11.2014 12:40, 1 Antworten
Hallo, ich habe einen Drucker, brother MFC-7420. Bin erst seit einigen Tagen ubuntu 14.04-Nutzer...
Treiber für Drucker brother MFC-7420
helmut berger, 10.11.2014 16:05, 2 Antworten
Hallo, ich habe einen Drucker, brother MFC-7420. Bin erst seit einigen Tagen ubuntu12.14-Nutzer u...
Can't find X includes.
Roland Welcker, 05.11.2014 14:39, 1 Antworten
Diese Meldung erhalte ich beim Versuch, kdar zu installieren. OpenSuse 12.3. Gruß an alle Linuxf...
DVDs über einen geeigneten DLNA-Server schauen
GoaSkin , 03.11.2014 17:19, 0 Antworten
Mein DVD-Player wird fast nie genutzt. Darum möchte ich ihn eigentlich gerne abbauen. Dennoch wür...