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.

LinuxCommunity kaufen

Einzelne Ausgabe
 

Ä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

Schnell Multi-Boot-Medien mit MultiCD erstellen
Schnell Multi-Boot-Medien mit MultiCD erstellen
Tim Schürmann, 24.06.2014 12:40, 0 Kommentare

Wer mehrere nützliche Live-Systeme auf eine DVD brennen möchte, kommt mit den Startmedienerstellern der Distributionen nicht besonders weit: Diese ...

Aktuelle Fragen

Videoüberwachung mit Zoneminder
Heinz Becker, 10.08.2014 17:57, 0 Antworten
Hallo, ich habe den ZONEMINDER erfolgreich installiert. Das Bild erscheint jedoch nicht,...
internes Wlan und USB-Wlan-Srick
Gerhard Blobner, 04.08.2014 15:20, 2 Antworten
Hallo Linux-Forum: ich bin ein neuer Linux-User (ca. 25 Jahre Windows) und bin von WIN 8 auf Mint...
Server antwortet mit falschem Namen
oin notna, 21.07.2014 19:13, 1 Antworten
Hallo liebe Community, Ich habe mit Apache einen Server aufgesetzt. Soweit, so gut. Im Heimnet...
o2 surfstick software für ubuntu?
daniel soltek, 15.07.2014 18:27, 1 Antworten
hallo zusammen, habe mir einen o2 surfstick huawei bestellt und gerade festgestellt, das der nic...
Öhm - wozu Benutzername, wenn man dann hier mit Klarnamen angezeigt wird?
Thomas Kallay, 03.07.2014 20:30, 1 Antworten
Hallo Team von Linux-Community, kleine Zwischenfrage: warum muß man beim Registrieren einen Us...