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.

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

Server antwortet mit falschem Namen
oin notna, 21.07.2014 19:13, 0 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...
openSUSE 13.1 - Login-Problem wg. Fehler im Intel-Grafiktreiber?
Thomas Kallay, 03.07.2014 20:26, 8 Antworten
Hallo Linux-Community, habe hier ein sogenanntes Hybrid-Notebook laufen, mit einer Intel-HD460...
Fernwartung für Linux?
Alfred Böllmann, 20.06.2014 15:30, 7 Antworten
Hi liebe Linux-Freunde, bin beim klassischen Probleme googeln auf www.expertiger.de gestoßen, ei...