Auch wir haben unsere Designprojekte jahrelang mit Photoshop umgesetzt. Es erwies sich immer als ein Tool, welches kaum Wünsche offen ließ. Die Stärken liegen unserem Ermessen nach eindeutig in der Bildbearbeitung, vergleicht man Photoshop mit klassischen Layoutprogrammen, wie InDesign, Quarkxpress oder Illustrator. Die Skalierbarkeit von Objekten und Grafiken, das Anordnen, Ausrichten und Exportieren einzelner Designelemente für das Web- oder Appdesign in verschieden Ausgabegrößen, unterliegt aktuell noch vielen Einschränkungen oder einem sehr zeitaufwendigen Workflow.

Photoshop wurde in erster Linie für die Ausgabe von pixelbasierten Dateien entwickelt. Eine kontinuierliche Optimierung durch Adobe findet zwar regelmäßig statt, aus unserer Sicht fehlen aber zu viele Funktionen, die man beispielsweise aus der Arbeit mit Illustrator oder InDesign kennt. Als Alternative nahmen wir vektorbasierte Werkzeuge in den Focus, wie Illustrator, Sketch und Inkscape. Für unseren Workflow erkannten wir, dass Inkscape unseren Bedürfnissen am ehesten entsprach.

Bild: Inkscape Splashscreen

Unsere Arbeit mit Inkscape

Inkscape ist ein freies OpenSource-Designtool, das vektorbasiert arbeitet. Der Editor erzeugt eine XML-Struktur und SVG wird als Dateiformat eingesetzt. Die Produktionsdateien sind somit sehr nah an den SVG-Spezifikationen der W3C ORG. Fertig produzierte Layout-Dateien können bei der Umsetzung mit dem Browser, ideal mit Firefox oder Chrome, dank der hervorragenden SVG-Unterstützung, geöffnet werden. Bei der Untersuchung der geladenen Datei mit den jeweiligen Entwicklerwerkzeugen des Browsers werden die Vorteile deutlich.

Bild: SVG im Browser dargestellt

Farben, Schriftgrößen und CSS- Anweisungen für die Umsetzung, beispielsweise für das Webdesign, sind sofort sichtbar und lassen sich bei Bedarf auch per Copy & Paste direkt in das Code-Projekt einfügen. Zudem bieten HTML5 und CSS3 im Zusammenspiel mit SVG Dateien und Javascript viele Möglichkeiten der Animation ohne auf Flash zurückgreifen zu müssen. Es gibt mittlerweile auch sehr ausgereifte JavaScript-Bibliothen wie z.B. Snap.svg

Beispiele dazu findet man im Netz

Bild: Screenshot von snapsvg.io

Ein weiterer Vorteil, den Inkscape mit sich bringt, ist die Möglichkeit sehr schnell und gezielt einzelne Layout-Elemente als SVG-Datei ausgeben zu können. Damit lassen sich diese gleich in ein Projekt zur Aniamtion, als Logo, Icon oder als Element für die verlustfreie Skalierung im Responsive Design einbinden.

Auch beim Ausrichten, Anordnen und Verteilen der Elemente eines Layouts, verdeutlichen sich die Vorteile eines echten Layoutprogramms. Mit wenigen Mausklicks hat man ein sauber ausgerichtetes Design, im dem sich Objekte pixelgenau per Tastatureingabe verschieben und anordnen lassen.

Bild: Ausrichten und Verteilen in Inkscape

Das Exportieren aus Inkscape ist ebenso so einfach: Man markiert ein Objekt mit der Maus und exportiert mit Datei -> Bitmap exportieren (Umschalt + Strg + E) das jeweilige Objekt als PNG-Grafik. Hier können zudem die Ausgabegröße und Auflösung festgelegt werden.

Bild: Die Funktion exportieren in Inkscape

Mühseliges Finden, Zuschneiden und Exportieren einer Bildebene, wie in Bildbearbeitungsprogrammen, entfallen. Inkscape verfügt ebenso wie Illustrator über die Möglichkeit in Ebenen zu arbeiten, punktet aber zusätzlich mit einer Vielzahl von Funktionen, Filtern und zusätzlichen Plugins.

Es können auch Plottdateien erstellt werden, Präsentationen mit verschieden Werkzeugen (SVG-Animationen, die im Browser laufen), PDF-Dateien, Postscripts, AutoCAD und vieles mehr. Die Filterpallette ist umfangreich, vom Strichcodegenerator bis hin zur Möglichkeit Text in Blindenschrift zu rendern.

Ein großer Gewinn für Designer ist auch der Webslicer, der es ermöglicht, das gesamte Layout als Webpaket zu exportieren. So werden nicht nur Bilder, sondern auch eine Beispieldatei im HTML Format und die korrekt verlinkte CSS-Datei ausgegeben.

Unser Fazit

Christian Dürr, Designer bei ISEO, über die Arbeit mit Inkscape: „Die Veränderung des Workflows verlief nicht immer reibungslos, der Mensch ist ja auch gerne ein Gewohnheitstier. Hat man sich aber auf die Arbeitsweise mit Inkscape eingestellt, möchte man dieses Tool nicht mehr missen.“

Wir sind bei der Umsetzung unserer Layouts schneller und effektiver geworden. Photoshop nutzen wir natürlich noch immer, meist für die Bildbearbeitung oder für besonders anspruchsvollen „Eye Candy“.

SHARE ONShare on FacebookTweet about this on TwitterGoogle+