AI -> Canvas: HTML5 Canvas direkt aus Adobe Illustrator bestücken

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Mike Swanson war über 11 Jahre bei Microsoft beschäftigt und hat dort neben vielen anderen Produkten ein Plugin für Adobe Illustrator erschaffen, das wie guter Wein ist. Je älter es wird, desto besser wird es. Vor knapp zwei Jahren, als Swanson die erste Version von AI -> Canvas noch für seinen damaligen Arbeitgeber veröffentlichte, war Canvas zwar schon ein Thema, aber wer nutzte das Element bereits produktiv? Heutzutage sieht die Sache anders aus. In jeder Hinsicht…

AI -> Canvas jetzt auch für CS6 verfügbar

Was hat sich geändert? Swanson ist nicht mehr bei Microsoft, sondern stolzer Besitzer eines eigenen Startup. Microsoft hat das Plugin zwar weiterhin im Angebot, pflegt es aber naheliegenderweise (?) nicht mehr. Mit Version CS6 kann AI -> Canvas nicht mehr genutzt werden. Jedenfalls gilt das für die Version, die auf den offiziellen Microsoft-Seiten zum Download bereit steht.

Swanson sah sich persönlich in der Verantwortung, seinem Plugin ein Leben nach Microsoft und auch nach CS5 zu ermöglichen. Sprachs, ging hin und beschäftigte sich mit den neuen Erfordernissen des SDK zu CS6. Auf seinem privaten Blog stellt er seither die aktuelle Version 1.1 des Plugins zur freien Verfügung. Das kann nicht mehr und nicht weniger als die Version 1, die weiterhin über Microsoft kostenlos bezogen werden kann. Aber, und das ist der entscheidende Unterschied. Es läuft auf den Plattformen Windows 7 und Windows 8, Mac OS X v10.7 (Lion) und v10.8 (Mountain Lion) und bedient sowohl die 32-, wie auch die 64-bit Ausgabe des of Illustrator CS6.

Die Installation ist simpel. Aus dem einzelnen Zip-File, welches alle Versionen enthält, sucht man sich die passende heraus und speichert sie je nach Plattform hier:

  • Ai2Canvas64.aip (\Program Files\Adobe\ Adobe Illustrator CS6 (64 Bit) Plug-ins)
  • Ai2Canvas32.aip (\Program Files (x86)\Adobe\Adobe Illustrator CS6\Plug-ins)
  • Ai2CanvasMac.aip (/Applications/Adobe Illustrator CS6/Plug-ins)

Zu beachten ist, dass Version 1.1 die CS6 voraussetzt. Alle Creative Suites darunter, namentlich CS3, 4 und 5, können mit der bisherigen Version des Plugin kooperieren.

Was kann AI -> Canvas?

Das Canvas-Element ist nicht viel mehr als ein Container für komplexere grafische Anwendungen und Abläufe. Programmiert werden Abläufe und Darstellungen unter Verwendung von JavaScript. Damit dürfte schon deutlich werden, dass Grafiker, Illustratoren und Zeichner eher nicht die Beschicker dieses Elements sind, zumindest nicht ohne programmierende Mittelsmänner.

Mit AI -> Canvas kann jeder Illustrator-Aficionado funktionierende grafische Anwendungen für das Canvas-Element schreiben, ohne auch nur eine Zeile JavaScript schreiben zu müssen; was im Übrigen in der Regel schon an den entsprechenden Fähigkeiten scheitern dürfte. AI -> Canvas kümmert sich über einen simplen Export aus Adobe Illustrator heraus um die Erstellung des gesamten erforderlichen Codes nebst sämtlicher, etwa erforderlicher zusätzlicher Dateien. Vektordarstellungen, die das Canvas-Element nicht korrekt umsetzen könnte, wandelt das Plugin automatisch in Rastergrafik um und verlinkt die entsprechenden Bilddateien an den korrekten Stellen. Sogar Animationen, wie Übergänge, Bewegungen, Easings, Verläufe und einiges mehr können direkt aus der vertrauten Illustrator-Umgebung heraus erzeugt werden.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht


Beispiele für unmodifizierte Export-Ergebnisse

Wie bereits eingangs erwähnt, ist AI -> Canvas, völlig software-atypisch, wie guter Wein. Zum Zeitpunkt seiner Entstehung war die Funktionalität schon beeindruckend, wenn auch von geringem praktischen Nutzwert. Die zunehmenden HTML5-Fähigkeiten gängiger Browser machen das zwei Jahre alte Plugin immer wertvoller. Und Swansons Update für die aktuelle Illustrator-Version könnte AI -> Canvas zu einem späten Durchbruch verhelfen.

Nein, für Inkscape steht das Plugin nicht zur Verfügung…

Links zum Beitrag:

  • Illustrator to HTML5 Canvas Plug-In Updated for CS6 – Mike Swanson’s Blog
  • AI -> Canvas V1 – Mix-Labs
  • Kurze Video-Einführung zum Plugin – Mix-Labs

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

2 Kommentare auf "AI -> Canvas: HTML5 Canvas direkt aus Adobe Illustrator bestücken"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Falk-Peter Garcia-Greno
Gast

Hallo
Ich habe die Datei in folgendes Verzeichnis gelegt,
\Program Files\Adobe\ Adobe Illustrator CS6\Zusatzmodule\erweiterungen \Ai2Canvas64.aip
kann aber das Modul nicht öffnen.
Ich müßte es ja im AI unter Fenster, zusammen mit Kuhler finden.
Für einen Rat wäre ich dankbar.
Beste Grüße
Peter Garcia

Reiner
Gast

Sehr interessanter Artikel, vielen Dank dafür!

Hört sich für mich wie das Pedant zu Adobe Edge Animate an, dieses stellt die Animationen nicht als Canvas bereit sondern arbeitet mit reine html5,css3 und javascript ausgabe.

Man könnte es also als super Ergänzung zu EA nutzen an den Stellen wo dieses versagt.