Ai to canvas est un plugin pour Illustrator développé par Mikes Wanson, permettant d’exporter des tracés vectoriels dans le caneva HTML5.
Qu’est-ce que le Canva HTML ?
Canva est une balise HTML5. Elle s’utilise conjointement avec le langage JavaScript pour créer des tracés vectoriels statiques ou animer.
Le code source des tracés et des animations est en JavaScript. La balise <canvas></canvas> est placée là où les tracés vectoriels et leurs animations devront figurer.
Installer Ai to Canevas
1. Télécharger le plugin sur le blog officiel de l’éditeur.
Nota: Choisissez bien le plugin en fonction de votre version d’Illustrator, CSS3, CS4, CS5, CS6 ou CC. Les versions CS6 et CC sont disponibles en version 32bits et 64btis. Là encore il ne faut pas se tromper.
Pour connaitre votre version d’Illustrator allez dans le menu Aide -> A propos d’Illustrator…
2. Une fois téléchargé, dézippez le fichier, puis placer le dans le dossier des modules.
Pour les versions:
-
- Windows 32bits: C:Program Files(x86)AdobeAdobe Illustrator CSxPlug-ins
- Pour les versions Windows 64bits: C:Program FilesAdobeAdobe Illustrator CSx (64 Bit)Plug-ins
- Mac: /Applications/Adobe Illustrator CSx/Plug-ins
Comment utiliser Ai to canevas ?
L’utilisation de Ai to canevas est très simple. Créez un nouveau document Illustrator, puis réaliser un tracé votre vectoriel.
Une fois votre tracé vectoriel achevé, allez dans Fichier -> Exporter…. Dans type sélectionnez canevas (*.HTML)., puis Enregistrer.
Un fichier au format .html sera alors créé, et votre navigateur Web par défaut ouvrira ce dernier permettant ainsi de visualiser le résultat.
Le canvas dans WordPress
Le fichier HTML créé par Ai to canvas ne peut pas être utilisé tel quel sur votre site. Il va falloir ouvrir le fichier avec un éditeur de texte pour en extraire les parties importantes. A savoir, le contenu dans des balises <script></script> et <canvas></canvas>.
Dans WordPress, créez une nouvelle page, puis copiez/collez la balise <canvas></canvas> et sont contenu. Cliquez sur Publier pour enregistrer votre travail.
Quant au script JavaScript, copiez/collez le (sans les balises <script></script> ) dans un nouveau fichier, puis enregistrez-le avec l’extension .js. Pour notre exemple ce sera: canvas.js.
A la racine de votre thème, créez un sous-dossier js si il n’est pas déjà présent, puis placez-y votre fichier.js à l’intérieur.
Ouvrez à présent, le fichier header.php situé dans le dossier racine de votre thème. Localiser la balise fermante </head> et ajouter le code HTML suivant juste au-dessus de cette dernière:
[html] …<script type=’text/javascript’ src= »js/canvas.js »></script>
</head>
[/html]
Pour aller plus loin
Bien que l’image soit de type vectorielle elle n’en est pas pour autant responsive. Pour remédier à cela, ajoutez dans votre fichier CSS.
[css] canvas#canvas {width: 100%;
}
[/css]
Cet article a pour but de présenter le plugin AI to canvas ou plutôt une introduction à celui-ci afin de permettre au plus grand nombre de créer simplement des tracés vectoriels et de les exploiter au sein d’un page WordPress..
C’est pourquoi la fonction animation ne sera pas décrite dans cet article, car trop difficile pour ceux qui ne maitrisent pas JavaScript.
Pour les plus courageux, rendez-vous sur le site officiel, pour y trouver des tutoriels, des exemples ainsi que des vidéos faites par Mikes Wanson en personne.
