Intégrateur recherche picto idéal

Vous l’igno­rez peut-être, mais chaque picto­gramme présent sur votre site ou votre appli­ca­tion est traduit en lignes de codes lors de l’in­té­gra­tion, le déve­lop­peur chargé de l’in­té­gra­tion spéci­fiera notam­ment sa taille, sa couleur, ses compor­te­ments etc.

La concep­tion des picto est souvent un point de fric­tion entre les webde­si­gners et les inté­gra­teurs : un picto mal conçu aura pour effet de néces­si­ter plus de temps en inté­gra­tion, et donc plus de frais. Voici donc quelques conseils à desti­na­tion des webde­si­gners, afin de créer le picto idéal : il simpli­fiera la vie de votre inté­gra­teur et vous évitera quelques allers-retours inutiles.

On passe à table !

Nous avons fait le choix de vous guider pour la créa­tion de picto­grammes sur la suite Adobe, et plus spéci­fique­ment illus­tra­tor, car c’est à ce jour le logi­ciel le plus utilisé, malgré l’émer­gence de l’ex­cellent Sketch !

Ouvrez Illus­tra­tor et char­gez un nouveau docu­ment de 40 × 40 pixels par exemple (inutile de rappe­ler les spéci­fi­ca­tions pour le Web : 72 dpi / RVB ).

Une fois votre docu­ment créé, placez les repères de manière à avoir des marges de 2 px tout autour de votre format (c’est la “No-go Zone”, qui vous permet­tra d’aé­rer le contenu de votre format).

Repé­rez le centre.

Vous y êtes ?

Simple comme bonjour

Il est main­te­nant temps de rentrer dans le vif du sujet, pour cela je vous conseil de faire au plus simple : commen­cez par sket­cher votre picto sur papier avant pour en faire ressor­tir les formes les plus simples, une fois satis­fait, vous pour­rez vous remettre sur illus­tra­tor.

Utili­sez les outils de formes : rectangles, ellipses, etc… ; l’ou­til plume lui n’est pas recom­mandé pour ce type de travail car il n’offre pas de courbes assez parfaites et votre picto risque­rait fort de ressem­bler à un Picasso terri­ble­ment mal imité.

Une fois vos formes en place, ajus­tez la largeur du tracé selon vos envies : des lignes plus fines donne­rons un rendu plus haut-de-gamme, tandis qu’un tracé épais appor­tera un côté enfan­tin.

Arron­dis­sez ensuite les angles selon le rendu désiré.

Fusionnnn !

Avant de commen­cer pensez à vecto­ri­ser votre tracé ( Objet > Tracé > Vecto­ri­ser le contour), véri­fiez bien que votre picto est terminé car une fois vecto­risé, il vous sera impos­sible de retour­ner en arrière et modi­fier le tracé (pour ma part, je vous conseille d’en­re­gis­trer votre tracé à part… juste au cas où le chef de projet ou le client vous fasse tour­ner en bour­rique).

L’ou­til Path­fin­der devien­dra ensuite votre meilleur allié : il va vous permettre de joindre les formes entre elles pour n’en former qu’une et suppri­mer par la même occa­sion les points d’an­crages intuiles. Ainsi, vous obtien­drez un picto consti­tué du nombre de tracés mini­mum, et non d’une série de points d’an­crage.

Main­te­nant que votre picto est terminé vous pouvez l’en­re­gis­trer, en .svg bien entendu.

Pit-Stop

Je vous vois venir, vous vous dites que c’est exac­te­ment ce que vous faites, et que donc vous ne voyez pas pourquoi vous conti­nuez à lire cet article.

Et bien sachez que non, ce n’est pas fini, l’ul­time étape consiste à opti­mi­ser ce .svg pour votre inté­gra­teur.

Pour cela rendez-vous sur SVGOMG, ce site offre des tas d’op­tions pour simpli­fier encore le code de votre picto une fois inté­gré.

Cliquez sur “Open SVG”, votre picto s’af­fiche au milieu de l’écran.

A droite de la fenêtre, s’ouvre un menu avec de nombreuses options : cochez toutes les options en dehors de “Remove View­box”, puis enre­gis­trez votre picto avec la flèche bleue en bas à gauche du menu.

Votre fichier est main­te­nant prêt, vous pouvez faire une dernière passe dessus avec ATOM pour voir si le code est bien propre avant envoi à votre inté­gra­teur.

À vous de jouer main­te­nant !