Home / Online-Artikel / Ubuntu User / 2011 / 04 / Webseiten entwerfen mit Inkscape

Newsletter abonnieren

Lies uns auf...

Folge LinuxCommunity auf Twitter

Top-Beiträge

Debian leicht gemacht
(161 Punkte bei 4 Stimmen)

Heftarchiv

LinuxUser Heftarchiv

EasyLinux Heftarchiv

Ubuntu User Heftarchiv

Ubuntu User Heftarchiv

Partner-Links:

Das B2B Portal www.Linx.de informiert über Produkte und Dienstleistungen.

Stückwerk

Webseiten entwerfen mit Inkscape

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

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

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

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

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).

Tip a friend    Druckansicht Bookmark and Share
Kommentare

Hits
Wertung: 213 Punkte (18 Stimmen)

Schlecht Gut

Infos zur Publikation

Infos zur Publikation

title_2012_01

Aktuelle Ausgabe kaufen:

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

Bilder vergleichen mit diffimg
Bilder vergleichen mit diffimg
Tim Schürmann, 01.04.2014 12:40, 1 Kommentare

Das kleine Werkzeug diffimg kann zwei (scheinbar) identische Bilder miteinander vergleichen und die Unterschiede optisch hervorheben. Damit lassen sich nicht nur Rätsel a la „Orignial und Fäls...

Aktuelle Fragen

programm suche
Hans-Joachim Köpke, 13.04.2014 10:43, 8 Antworten
suche noch programme die zu windows gibt, die auch unter linux laufen bzw sich ähneln sozusagen a...
Funknetz (Web-Stick)
Hans-Joachim Köpke, 04.04.2014 07:31, 2 Antworten
Bei Windows7 brauche ich den Stick nur ins USB-Fach schieben dann erkennt Windows7 Automatisch, a...
Ubuntu 13.10 überschreibt immer Windows 8 Bootmanager
Thomas Weiss, 15.03.2014 19:20, 8 Antworten
Hallo Leute, ich hoffe das ich richtig bin. Ich habe einen Dell Insipron 660 Ich möchte gerne Ub...
USB-PTP-Class Kamera wird nicht erkannt (Windows-only)
Wimpy *, 14.03.2014 13:04, 15 Antworten
ich habe meiner Frau eine Digitalkamera, AGFA Optima 103, gekauft und wir sind sehr zufrieden dam...
Treiber
Michael Kristahn, 12.03.2014 08:28, 5 Antworten
Habe mir ein Scanner gebraucht gekauft von Canon CanoScan LiDE 70 kein Treiber wie bekomme ich de...