Bildbearbeitung mit Inkscape

An die Zeiten, in denen Entwürfe für neue Websites noch mit einem HTML-Editor entstanden sind, werden sich wahrscheinlich nur noch die Online-Veteranen erinnern. Heute helfen allerlei Werkzeuge beim kreativen Prozess. Und auch wenn für den allerersten Entwurf einer neuen Site noch Bleistift, Papier und gute Ideen genügen, ist es doch praktisch, die Details am Computer gestalten zu können.Für diese Aufgabe bietet sich das kostenlos erhältliche Programme Inkscape an. Die Software ist Open Source und wird in Versionen für Windows, Linux und für den Mac angeboten.

Installation und Einrichtung

Wenn Sie Linux benutzen, können Sie Inkscape ohne Probleme direkt aus den Paketquellen Ihres Systems installieren, falls die Software nicht ohnehin bereits bei der ersten Einrichtung aufgespielt wurde. Windows- und Mac-Nutzer besuchen die offizielle Seite des Projekts . In der Rubrik Downloads finden Sie dann die Installationsprogramme.Unter Windows sollten Sie die Installation am besten mit den voreingestellten Parametern durchlaufen lassen. Im Rahmen der Installation wird die notwendige Umgebung gleich mitinstalliert. Da diese aber nicht originär für die Windows-Welt gedacht war, ist es nicht verwunderlich, dass sich das Programm unter dem Betriebssystem nicht immer harmonisch verhält.Dies betrifft häufiger die Ermittlung der Bildschirmdimensionen, sodass Optionsfenster beim ersten Aufruf gelegentlich zu klein dargestellt werden. Um alle Schalter und Einstellungen darin zu sehen, müssen diese dann mit der Maus vergrößert werden. Das Programm merkt sich aber die neuen Größen, sodass dieser Schritt nur einmalig nötig ist.

Seiten und Ebenen

Damit das spätere Design möglichst exakt zu den Vorgaben der neuen Website passt, passen Sie die Einstellungen eines neuen Dokuments an. Starten Sie Inkscape und wählen Sie aus dem Menü Datei den Befehl Neu. Es klappt ein Menü mit zahlreichen Vorgaben auf. Dort finden Sie auch bereits einige Einträge, denen das Wort desktop vorangestellt ist.Über Datei/Dokumenteneinstellungen rufen Sie sich die Eigenschaften der Zeichnung auf. Belassen Sie es bei der Seitengröße A4, aber achten Sie darauf, dass in der rechten oberen Ecke als Standardeinheit Pixel ausgewählt ist.In der Rubrik Benutzerdefiniert stellen Sie jetzt die Größe der Seite ein. Um Elemente später exakter ausrichten zu können, wechseln Sie in das Register Gitter. Klicken Sie dort auf Neu. Jetzt sollte sich die Zeichenfläche bereits mit einem Gitternetz füllen, das aus 1x1 Pixel großen Abständen besteht. Verlassen Sie den Dialog einfach durch Schließen des Fensters.Um möglichst exakte Arbeitsergebnisse zu erhalten, rufen Sie aus dem Menü Datei den Eintrag Inkscape-Einstellungen auf. Wechseln Sie im nachfolgenden Dialog in den Abschnitt Schritte. Dort reduzieren Sie den Wert im Feld Pfeiltasten bewegen, um auf einen Wert von einem Pixel. So können Sie später Objekte exakt aneinander ausrichten.Viele Designer arbeiten und nutzen heute Gridsysteme. Alle Elemente auf einer Seite werden hierbei innerhalb des Gitternetzes platziert. Das Gridsystem ist also bei der Entwicklung eines ausgewogenen Layouts behilflich. Im Web sind für viele der bekannten Systeme Vorlagen für Inkscape erhältlich, die bei der Platzierung von Elementen auf der Seite Orientierung geben.Nutzen Sie bei der weiteren Entwicklung die Möglichkeit, in Inkscape mit Ebenen zu arbeiten. Das erleichtert auch später den Export. Über Ebene/Ebenen öffnen Sie die Palette. Mit einem Klick auf das Pluszeichen legen Sie eine neue Ebene an. Vergeben Sie möglichst Namen, die der Funktion oder Stellung der Ebene auf der Seite entsprechend. Bevor Sie jetzt eine Figur anlegen, müssen Sie sich lediglich davon überzeugen, dass die korrekte Ebene markiert ist.In diesem Workshop wird von einem klassischen Layout ausgegangen. Die typische Seite besteht aus einem Kopfbereich, einer Seitenleiste, einem zweispaltigen zentralen Textbereich und einem Footer. Alle diese Elemente werden in Inkscape gestaltet und später dann als Vorlage für die weitere Code-Entwicklung exportiert.

Header-Bereich entwickeln

Inkscape bietet über seine Werkzeugleiste eine breite Auswahl an Grundformen (sogenannte Grafik-Primitive), mit denen Sie das Grundlayout der Seiten zusammenstellen können. Beginnen Sie mit dem Kopfbereich. Dazu klicken Sie in der Werkzeugleiste auf das Symbol eines Quadrats. Platzieren Sie den Mauszeiger am linken oberen Ausgangspunkt der neuen Figur und ziehen Sie diese nun mit gedrückter Maustaste durch Bewegen mit der Maus auf.

Beachten Sie hierbei die Fußzeile des Programmfensters. Dort zeigt Ihnen Inkscape die exakten Dimensionen der gerade entstehenden Figur an. Wahrscheinlich wird Ihnen die aktuelle Farbe des Objekts nicht zusagen. Klicken Sie in der Werkzeugleiste den Pfeil an und damit anschließend einmal auf das Objekt. Damit setzen Sie es in den Bearbeitungsmodus. Rund um die Figur werden Doppelpfeile eingeblendet, die für die Skalierung und das Drehen eines Objektes genutzt werden können.Um die verwendete Farbe zu verändern, führen Sie das Kommando Füllung und Kontur aus dem Menü Objekt aus. Im Register Füllung markieren Sie zum Beispiel das dritte Feld von links, um einen Farbverlauf einzusetzen. Danach klicken Sie auf den Schalter Bearbeiten. Mittels der Schieberegler können Sie nun die von Ihnen bevorzugte Farbe zusammenstellen oder auch Zwischenstationen in den Übergängen einrichten. Mit etwas Experimentierfreude gelangen Sie so sicherlich schnell zum passenden Farbton. Ein leichter Schatten könnte den grafischen Effekt abrunden. Dazu klicken Sie die Kopfgrafik an und führen die Tastenkombination Strg+D aus. Damit duplizieren Sie das gerade gewählte Objekt, das nun unmittelbar über seinem Ursprung liegt und auch bereits markiert ist. Verschieben Sie den rechten Rand um 20 bis 40 Pixel. Um einen Schatten hinzufügen, haben Sie zwei Möglichkeiten. Die schnellste Art besteht in der Anwendung eines Filters.Solange das Objekt markiert ist, wählen Sie Filter, Schatten und Lichter. Aus dem Untermenü nutzen Sie dann den gewünschten Effekt. Dessen Optionen steuern Sie im nachfolgenden Dialog. Wenn Sie dabei die Option Vorschau aktivieren, sehen Sie das Ergebnis, noch bevor Sie speichern. Falls Ihnen kein Effekt zusagt, können Sie einen Schatten auch leicht manuell erzeugen.Dazu duplizieren Sie einfach das gerade verkleinerte Duplikat des ursprünglichen Objekts. In den Eigenschaften der Füllung wählen Sie anschließend die Farbe Schwarz aus. Unter Unschärfe weisen Sie einen niedrigen Wert, etwa 3 zu. Jetzt platzieren Sie dieses schwarze Objekt im Stapel der übereinanderliegenden Rechtecke mit einem Druck auf die Taste Bild ab einfach unter das andere.

Weitere Teile definieren

Auf ähnliche Weise können Sie nun die weiteren Abschnitte der Seite definieren. Denken Sie daran, dass Sie mit Inkscape nicht nur ein Werkzeug für die Entwicklung des Designs vor sich haben, sondern ein vollständiges Zeichenprogramm für Vektorgrafiken. Sie können die Software sehr gut für die Entwicklung von Schaltflächen und anderen grafischen Elementen einsetzen, die Sie später auf Ihren Seiten einsetzen wollen.So eignet sich das Programm auch sehr gut für die Gestaltung von Logos, selbst wenn diese lediglich in ausgedruckter Form oder als Bitmap-Datei vorliegen. Dazu müssen Sie zunächst das Bitmap lediglich mit Datei/Importieren öffnen und auf der Zeichenfläche platzieren.Lassen Sie das Objekt markiert und rufen Sie anschließend Pfad/Bitmap vektorisieren auf. In der Regel genügen die voreingestellten Werte, um ein gutes Arbeitsergebnis zu erhalten. Damit wandeln Sie die Zeichnung in einen Pfad um. Dies ist wichtig, wenn Sie auf das Logo weitere Effekte wie Schatten anwenden wollen.Während die Kopfgrafik wahrscheinlich exakt so breit sein wird, wie die spätere Seite selbst, liegen andere Objekte frei auf der Zeichenfläche. Möchten Sie später Gebrauch von der Exportfunktion der Software machen, sollten Sie eine Ebene anlegen, auf der die verschiedenen Bereiche farbig markiert sind.Fügen Sie nach dem Export in Ihren HTML-Editor dann eine Grafik ein, sehen Sie nicht nur das gewählte Objekt, sondern auch die Dimensionen des umgebenden Bereichs.

Blindtexte integrieren

Inkscape enthält zusätzlich auch einige Textfunktionen, die Ihnen bei der Entwicklung einer ausgewogenen Typographie helfen. Klicken Sie in der Werkzeugleiste auf das Symbol mit dem Buchstaben A. Durch Klicken und Ziehen legen Sie damit einen Rahmen auf der Zeichenfläche an. In diesem Rahmen können Sie sofort mit dem Schreiben beginnen. Aus dem Menü Text definieren Sie davor am besten mittels Schrift und Text die gewünschte Schriftart und Schriftfamilie. Da es beim Gestaltungsprozess nur auf die optische Präsentation ankommt, können Sie sich Tipparbeit sparen, wenn Sie die integrierte Blindtextfunktion verwenden. Lassen Sie den Textcontainer markiert und führen Sie Erweiterungen/Text/Lorem ipsum aus.Im nachfolgenden Dialog definieren Sie die Länge und den Umfang des Blindtextes exakt nach Ihren Vorstellungen. Aktivieren Sie dabei die Option Vorschau, so sehen Sie gleich zu Beginn, ob der Text auch in den Rahmen passen würde. Das Eigenschaftenfenster für den Text verhält sich wie eine Formatleiste in der Textverarbeitung. Lassen Sie den Dialog am besten geöffnet, um etwa einzelne Passagen mit einem anderen Font oder einer anderen Schriftgröße zu versehen.

Slicing

Nachdem Sie jetzt Schritt für Schritt das Grundlayout der neuen Seite in Inkscape angelegt haben, stellt sich die Frage, wie Sie das Ergebnis möglichst schnell in Ihre HTML-Entwicklungsumgebung bekommen. Der einfache und bequeme Weg führt über eine Erweiterung des Programms.

Diese hat allerdings eine sehr wechselhafte Geschichte hinter sich und enthält regelmäßig Fehler, wenn eine neue Version von Inkscape zur Verfügung gestellt wird. Wenn Sie die Erweiterung unter Windows nutzen wollen, müssen Sie dort zusätzlich das Programm Imagemagick installieren, da ein Teil des Mechanismus darauf aufbaut.Beim Slicing werden die Grundformen und Figuren einer Seite aus Inkscape exportiert. Dabei entsteht auch eine HTML-Seite, die die so definierten Bereiche bereits in Form von HTML enthält. Diese bilden dann das Grundgerüst für die weitere Entwicklung. Es fehlen dabei zwar noch Stilvorgaben in Form eines CSS, aber die Struktur in Form von DIV-Containern ist damit bereits angelegt.Wechseln Sie dazu in das Menü Internet/Schneider und führen Sie Geschnittenes Rechteck erzeugen aus. Im nachfolgenden Dialog vergeben Sie einen Namen, der am besten mit dem Bereich der Seite korrespondiert, auf der er platziert ist. Im Register HTML tragen Sie die ID oder Klasse ein, die das Element in der HTML-Datei erhalten soll. Mit einem Klick auf Anwenden übernehmen Sie diese Einstellungen.Jetzt wird auf der Zeichenfläche ein rotes Rechteck platziert. Dieses passen Sie in den Abmessungen an den gewünschten Bereich an und platzieren es auch pixelgenau über dem entsprechenden Teil der Zeichnung. Legen Sie auf die gleiche Weise nun die weiteren Abschnitte an.Am Ende sollte Ihre gesamte Zeichenfläche mit solchen roten Rechtecken bedeckt sein. Jetzt führen Sie das Kommando Layout-Teile sowie HTML+CSS exportieren aus. Im nächsten Dialog müssen Sie lediglich den Namen des Ordners angeben, in dem die Elemente gespeichert werden. Danach verrichtet die Erweiterung ihren Dienst.Der zweite Weg führt über die Export-Funktion von Inkscape. Um etwa die Kopfgrafik zu exportieren, wechseln Sie auf die entsprechende Ebene. Blenden Sie alle weiteren Ebenen aus und markieren Sie mit Strg+A alle Elemente der Ebene.Mit Datei/Bitmap exportieren rufen Sie sich den Exportdialog auf. Sie werden feststellen, dass dort bereits die Dimensionen des Objekts korrekt ausgewählt sind. Über den Schalter Auswählen müssen Sie nur noch das Exportverzeichnis auswählen. Gehen Sie jetzt schrittweise für jede weitere Ebene vor, bis Sie alle Elemente exportiert haben.

Nächste Schritte

Je nachdem, ob Sie die Slicing-Funktion oder den Batch-Export genutzt haben, sehen die nächsten Schritte auf dem Weg zur Umsetzung des Designs unterschiedlich aus. Am Ende des Slicings steht ja bereits eine HTML-Datei, in der die Grundaufteilung der Seite zu finden ist. Inkscape erzeugt einen übersichtlichen Code, der sich aber so leicht etwa in die PHP-Datei eines Templates übernehmen lässt.Anders sieht dies naturgemäß bei der Verwendung des Batch-Exports aus. Hier wurde das Design zwar auch in seine einzelnen Bestandteile aufgeteilt, diese liegen aber lediglich als Grafiken vor.Diese müssen anschließend erst über die entsprechende Importfunktion in die Entwicklungsumgebung übernommen werden. Im einfachsten Fall landen die Bildfragmente als Hintergrund im Editor, sodass mit dessen grafischen Werkzeugen durch einfaches Klicken und Ziehen der Quellcode entsteht.Die eigentliche Programmierarbeit kann Ihnen Inkscape zwar nicht abnehmen, hilft Ihnen aber bei der Entwicklung eines konkreten Planes für die neuen Seiten.