Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 8. Oktober 2015

Statt Bézierkurven: Schöner zeichnen mit Spiralpfaden

Wer mit Illustrator oder einem ande­ren Grafikprogramm unter­wegs ist, kommt um Bézierkurven nicht drum her­um. Sie ermög­li­chen es, Kurven jeg­li­cher Art zu zeich­nen. Allerdings braucht es etwas Übung, mit Bézierkurven form­schö­ne Rundungen zu erzeu­gen. Gerade beim Zeichnen von Buchstaben wie bei­spiels­wei­se dem kur­ven­rei­chen S ist es nicht ein­fach, eine Bézierkurve auf Anhieb so anzu­le­gen, dass die Bögen des Buchstabens aus­ge­wo­gen sind. Daher gibt es mitt­ler­wei­le Zeichen- und Schriftprogramme, die mit soge­nann­ten Spiralpfaden eine Alternative zu klas­si­schen Bézierkurven anbie­ten. Mit ihnen las­sen sich har­mo­nisch run­de Pfade leicht rea­li­sie­ren.

schoenerzeichnen-teaser_DE

Das Problem mit den Bézierkurven

Die Funktionsweise von Bézierkurven ist schnell erzählt. Eine Bézierkurve hat an ihren bei­den Endpunkten jeweils soge­nann­te Kontrollpolygone. Das sind Vektoren, wel­che den Verlauf der Kurve beschrei­ben. Dank die­ser Polygone kön­nen ganz unter­schied­li­che Kurven defi­niert wer­den. Wer schon ein­mal ver­sucht hat, einen Halbkreis per Bézirkurve zu zeich­nen, weiß um die Schwierigkeit, die Kontrollpolygone ent­spre­chend anzu­le­gen. Ähnlich schwie­rig ist es, eine S-Kurve oder Spirale auf die­sem Wege zu zeich­nen.

illustrator_bezirkurve
In Illustrator gezeich­ne­te Bézierkurve

Gerade bei der Schriftgestaltung sind gleich­mä­ßig ver­lau­fen­de Kurven eine wich­ti­ge Voraussetzung für har­mo­ni­sche Schriften. Da das Zeichnen sol­cher Pfade per Bézierkurve schwie­rig ist, hat der Softwareentwickler Raph Levien soge­nann­te Spiralpfade als Alternative zu Bézierkurven ent­wi­ckelt. Bei Spiralpfaden gibt man ein­fach meh­re­re Punkte an, an denen sich eine ein­fa­che oder mehr­fa­che Kurve oder Spirale ori­en­tie­ren soll.

Bei einer ein­fa­chen C-Kurve wer­den drei Punkte defi­niert. Der ers­te und letz­te Punkt des Spiralpfads defi­nie­ren dabei den Anfangs- und Endpunkt der Kurve; der dazwi­schen lie­gen­de Punkt defi­niert den Radius. Auf die­se Weise kön­nen kom­ple­xe Kurven auf der Basis kreis­för­mi­ger Bahnen gezeich­net wer­den.

Einsatz in FontForge und Inkscape

Da Spiralpfade vor allem für die Schriftgestaltung ent­wi­ckelt wur­den, fin­det man sie zum Beispiel in dem Schriftenwerkzeug FontForge. Bei FontForge han­delt es sich um eine freie Software zur Erstellung von Schriften. Neben klas­si­schen Bézierkurven kön­nen dort auch Spiralpfade ange­legt wer­den. Dabei kann zwi­schen Bézierkurven- und Spiralpfad-Modus immer hin- und her­ge­wech­selt wer­den.

fontforge_spiralpfad
In FontForge gezeich­ne­ter Spiralpfad

Auch eine bestehen­de Bézierkurve kann als Spiralpfad bear­bei­tet wer­den. Umgekehrt gilt dies genau so. Wer ein­mal mit Spiralpfaden gear­bei­tet hat, wird die Vorteile gegen­über klas­si­schen Bézierkurven schnell fest­stel­len.

Auch das Zeichenprogramm Inkscape unter­stützt Spiralpfade. Die Anwendung unter­schei­det sich dort aller­dings ein wenig von FontForge. Denn zunächst wird dort eine klas­si­sche Bézierkurve gezeich­net, die sich anschlie­ßend in einen gleich­mä­ßig geform­ten Spiralpfad umwan­delt. Man sieht das Ergebnis also erst bei fer­tig gezeich­ne­tem Pfad. Allerdings hat man auch dort die Möglichkeit, den Spiralpfad nach­träg­lich zu ver­än­dern.

Die ein­zel­nen Punkt des Spiralpfades kön­nen ein­fach ver­scho­ben wer­den. Die Größe des Pfades und die Kurvenführung lässt sich auf die­ser Weise leicht anpas­sen.

Spiralpfad per Freihandlinie zeichnen

Interessant ist die Möglichkeit, in Inkscape einen Spiralpfad mit dem Freihandlinien-Werkzeug zu zeich­nen. Das Werkzeug erlaubt es, Linien wie mit einem Stift zu zeich­nen. Die gezeich­ne­ten Konturen sind ent­spre­chedn kra­ke­lig und meist unför­mig. In Kombination mit dem Spiralpfad-Modus und einer zuvor defi­nie­ren Glättung kön­nen per Freihandlinie sehr schnell und effek­tiv Kurven ange­legt wer­den.

inkscape_spiralpfad
In Inkscape per Freihandlinie gezeich­ne­ter Spiralpfad

Die Glättung erwar­tet einen Wert zwi­schen 0 und 100. Bei 0 bleibt die Freihandlinie so erhal­ten, wie sie gezeich­net wur­de. Bei 100 Prozent Glättung wird aus jeder Freihandlinie eine gera­de Linie. Mit Werten dazwi­schen las­sen sich mal mehr, mal weni­ger kom­ple­xe Kurven zeich­nen.

Fazit und Links zum Beitrag

Nicht nur bei der Schriftgestaltung, son­dern auch im Logodesign und bei der Gestaltung von Diagrammen kön­nen Spiralpfade eine gro­ße Hilfe sein. Ein Blick in die jewei­li­gen Werkzeuge in FontForge und Inkscape loh­nen sich.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar

  1. Hallo,

    das scheint ja eine echt gute Alternative für jeden zu sein, der mit den Bézierkurven nicht so gut zurecht­kommt. Ich bin gespannt, ob und wann die Programmierer von Illustrator nach­bes­sern wer­den.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.