Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 22. Januar 2013

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

Mike Swanson war über 11 Jahre bei Microsoft beschäf­tigt und hat dort neben vie­len ande­ren Produkten ein Plugin für Adobe Illustrator erschaf­fen, das wie guter Wein ist. Je älter es wird, des­to bes­ser wird es. Vor knapp zwei Jahren, als Swanson die ers­te Version von AI -> Canvas noch für sei­nen dama­li­gen Arbeitgeber ver­öf­fent­lich­te, war Canvas zwar schon ein Thema, aber wer nutz­te das Element bereits pro­duk­tiv? Heutzutage sieht die Sache anders aus. In jeder Hinsicht…

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

Was hat sich geän­dert? Swanson ist nicht mehr bei Microsoft, son­dern stol­zer Besitzer eines eige­nen Startup. Microsoft hat das Plugin zwar wei­ter­hin im Angebot, pflegt es aber nahe­lie­gen­der­wei­se (?) nicht mehr. Mit Version CS6 kann AI -> Canvas nicht mehr genutzt wer­den. Jedenfalls gilt das für die Version, die auf den offi­zi­el­len Microsoft-Seiten zum Download bereit steht.

Swanson sah sich per­sön­lich in der Verantwortung, sei­nem Plugin ein Leben nach Microsoft und auch nach CS5 zu ermög­li­chen. Sprachs, ging hin und beschäf­tig­te sich mit den neu­en Erfordernissen des SDK zu CS6. Auf sei­nem pri­va­ten Blog stellt er seit­her die aktu­el­le Version 1.1 des Plugins zur frei­en Verfügung. Das kann nicht mehr und nicht weni­ger als die Version 1, die wei­ter­hin über Microsoft kos­ten­los bezo­gen wer­den kann. Aber, und das ist der ent­schei­den­de 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 sim­pel. Aus dem ein­zel­nen Zip-File, wel­ches alle Versionen ent­hält, sucht man sich die pas­sen­de her­aus und spei­chert 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 beach­ten ist, dass Version 1.1 die CS6 vor­aus­setzt. Alle Creative Suites dar­un­ter, nament­lich CS3, 4 und 5, kön­nen mit der bis­he­ri­gen Version des Plugin koope­rie­ren.

Was kann AI -> Canvas?

Das Canvas-Element ist nicht viel mehr als ein Container für kom­ple­xe­re gra­fi­sche Anwendungen und Abläufe. Programmiert wer­den Abläufe und Darstellungen unter Verwendung von JavaScript. Damit dürf­te schon deut­lich wer­den, dass Grafiker, Illustratoren und Zeichner eher nicht die Beschicker die­ses Elements sind, zumin­dest nicht ohne pro­gram­mie­ren­de Mittelsmänner.

Mit AI -> Canvas kann jeder Illustrator-Aficionado funk­tio­nie­ren­de gra­fi­sche Anwendungen für das Canvas-Element schrei­ben, ohne auch nur eine Zeile JavaScript schrei­ben zu müs­sen; was im Übrigen in der Regel schon an den ent­spre­chen­den Fähigkeiten schei­tern dürf­te. AI -> Canvas küm­mert sich über einen simp­len Export aus Adobe Illustrator her­aus um die Erstellung des gesam­ten erfor­der­li­chen Codes nebst sämt­li­cher, etwa erfor­der­li­cher zusätz­li­cher Dateien. Vektordarstellungen, die das Canvas-Element nicht kor­rekt umset­zen könn­te, wan­delt das Plugin auto­ma­tisch in Rastergrafik um und ver­linkt die ent­spre­chen­den Bilddateien an den kor­rek­ten Stellen. Sogar Animationen, wie Übergänge, Bewegungen, Easings, Verläufe und eini­ges mehr kön­nen direkt aus der ver­trau­ten Illustrator-Umgebung her­aus erzeugt wer­den.


Beispiele für unmo­di­fi­zier­te Export-Ergebnisse

Wie bereits ein­gangs erwähnt, ist AI -> Canvas, völ­lig soft­ware-aty­pisch, wie guter Wein. Zum Zeitpunkt sei­ner Entstehung war die Funktionalität schon beein­dru­ckend, wenn auch von gerin­gem prak­ti­schen Nutzwert. Die zuneh­men­den HTML5-Fähigkeiten gän­gi­ger Browser machen das zwei Jahre alte Plugin immer wert­vol­ler. Und Swansons Update für die aktu­el­le Illustrator-Version könn­te AI -> Canvas zu einem spä­ten Durchbruch ver­hel­fen.

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

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.

2 Kommentare

  1. Hallo
    Ich habe die Datei in fol­gen­des Verzeichnis gelegt,
    \Program Files\Adobe\ Adobe Illustrator CS6\Zusatzmodule\erweiterungen \Ai2Canvas64.aip
    kann aber das Modul nicht öff­nen.
    Ich müß­te es ja im AI unter Fenster, zusam­men mit Kuhler fin­den.
    Für einen Rat wäre ich dank­bar.
    Beste Grüße
    Peter Garcia

  2. Sehr inter­es­san­ter Artikel, vie­len Dank dafür!

    Hört sich für mich wie das Pedant zu Adobe Edge Animate an, die­ses stellt die Animationen nicht als Canvas bereit son­dern arbei­tet mit rei­ne html5,css3 und java­script aus­ga­be.

    Man könn­te es also als super Ergänzung zu EA nut­zen an den Stellen wo die­ses ver­sagt.

Schreibe einen Kommentar

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