Da Adobe Illustrator a Canvas con un click grazie ad Ai -> Canvas

Come ormai è risaputo il tag è stata una delle più grandi rivoluzioni di HTML 5…detto anche Flash Killer…ma questa è un’altra storia…

Grazie a  è possibile avere una tela sulla quale disegnare, animare, giocare e tanto altro…ma uno dei problemi maggiori (o meglio per la maggior parte dei web designer) è la semplicità d’utilizzo del tag stesso. Per interagire con  è infatti necessario conoscere Javascript (ovvero il linguaggio di scripting per il web per eccellenza) e magari poter velocizzare il lavoro con uno dei vari framework ormai disponibili come EaselJS, Processing, etc…

Quindi spesso ci si trova con un divario di conoscenze tra il designer (che magari desidera creare un banner come avrebbe fatto con Adobe Flash) ed il programmatore (che dovrebbe implementare il codice)…

questo problema può essere facilmente risolto con un click grazie ad Ai⇒Canvas, un ottimo plugin per Adobe Illustrator (a partire dalla CS3) creato dalla comunità di MIX Online, sia per Windows che per OSX.

Adobe Illustrator è ormai da tempo uno degli strumenti preferiti da web designer di svariata caratura, ed è quindi un’ottima strada da seguire per migrare il contenuto dei propri files .AI direttamente dentro una pagina HTML 5!

Il plugin (installabile come un comunissimo plugin per Adobe Illustrator) consente difatti  l’esportazione di:

Illustrazioni:
Quasi tutte le illustrazioni possono essere esportate su  mantenendo la distinzione dei livelli! Nei casi in cui l’esportazione non fosse corretta (o fosse necessario) è possibile comunicare al plugin che si desidera rasterizzare il contenuto di uno o più livelli prima dell’esportazione.

Animazioni:
E’ possibile aggiungere facilmente animazioni alle vostre illustrazioni di Adobe Illustrator. Ai⇒Canvas difatti consente di gestire la rotazione, lo scaling, l’opacità ed il movimento lungo un percorso. Per gli utenti più avanzati, è possibile gestire dei trigger tra le animazioni in modo da creare animazioni complesse.

Codice:
Una volta esportato il contenuto del vostro file .AI per mezzo di Ai⇒Canvas è possibile editare il contenuto del file html prodotto, in modo da implementarlo nelle proprie web application.

Per molti questo plugin potrebbe essere la manna dal cielo, dato tra l’altro il funzionamento davvero semplice ma efficare…e quindi eccovi i links utili:

Il Sito Ufficiale del Plugin

http://visitmix.com/labs/ai2canvas/

Documentazione del Plugin

http://visitmix.com/labs/ai2canvas/documentation.html

Documentazione Estesa del Plugin

http://visitmix.com/labs/ai2canvas/common/tutorials/ai2canvas_extended_documentation.pdf

p.s. Se avete trovato utile questo post, condividete e commentate , grazie! 😉