Une signature bien faite de A à Z

Je viens de finir ma petite signature d’email que je concocte depuis quelques temps.
C’est l’occasion pour moi de vous faire par de cette palpitante aventure…

Premièrement il faut faire le choix d’un logiciel d’édition d’image.
La plupart penseront en premier lieu à PhotoShop. Ce choix n’est pas forcement le plus judicieux car ce dernier est réservé aux professionnels de l’image. Cela le rend lourd, difficile d’accès et aussi très cher. Une petite création n’utilisera même pas 2% des capacités du logiciel. Autant acheter un iPad pour faire du piano ^^
Le même raisonnement s’applique à Gimp mis à part le prix, ce dernier étant libre et gratuit.

Le bon choix

Le choix le plus resonable selon moi est Paint.net
Ce logiciel qui comme son nom l’indique est développé en dotnet, gère toutes les fonctions nécessaires à des créations graphiques simples.
Les calques, la transparence, les dégradés et différents flous permettent de faire quelque chose de très sympa assez rapidement.
Il permet donc de faire des créations assez poussées tout en restant beaucoup plus léger que ses collègues poids lourds (3.5mo contre plusieurs centaines de mo pour Photoshop). L’espace disque s’en ressent, le temps de chargement aussi

Ajouter les liens

Maintenant que l’apparence est fin prête il faut pouvoir placer quelques liens sur cette image.
Pour cela il existe deux solutions, la plus simple (quoi que …) consiste à découper l’image en fonction des zones que l’on veut rendre clicable. Les différentes zones peuvent donc correspondre à plusieurs liens puisqu’il s’agit en fait de plusieurs images.

La deuxième solution, moins connue mais néanmoins plus pratique est d’utiliser l’attribut html « map »
Cet attribut permet de délimiter des zones sur une image et ainsi placer plusieurs liens exactement de la forme que l’on veut là où l’on veut grâce à des coordonnées de points dans le code html. Un zone cliquable rectangulaire contiendra donc quatre coordonnées en pixel, mais il est tout à fait possible de faire des zone de la forme que l’on veut avec plus de points.
Cette dernière existe pourtant depuis très longtemps mais  reste extrêmement peu utilisée bien quelle soit très pratique puisque l’intégralité de l’image reste dans le même fichier.

Exemple

<img border='0' src='http://mynameisthomas.com/sign2.png' usemap='#map' >
<map name='map'>
<area shape='rect' coords='6,152,376,176' href='http://www.mynameisthomas.com'/>
<img border='0' src='http://mynameisthomas.com/sign2.png' usemap='#map' >
</map>

Des liens vers quoi ?

J’ai choisis d’integrer plusieurs liens à cette signature. Il appartient a chacun de choisir ses moyens de communication privilégiés. Pour ma part j’utilise beaucoup Skype et Windows Live Messenger, j’ai donc intégré à l’image les liens suivants:

skype:mynameisthomas.com?call
msnim:chat?contact=ttw_thomas@hotmail.com

Les premiers élements « skype: » et « msnim: » définissent le logiciel qui va prendre en charge le lien. Les secondes partie contienne l’adresse et l’action à effectuer avec. Le premier lien permet donc de passer directement un appel a mynameisthomas.com (qui est mon identifiant skype), et le deuxième ouvre directement une conversation avec ttw_thomas@hotmail.com qui est mon adresse WLM.

Comme je n’avais pas spécialement le temps de compter les pixel de mon image j’ai utiliser X-map (http://www.carlosag.net/Tools/XMap/)
Ce logiciel n’est pas forcement très intuitif mais il est léger et surtout il fonctionne

Il y a toutefois un bémol a ce type de liens, il ne sont supporté que par internet explorer. Les utilisateurs d’autres navigateur comme chrome ou firefox devront ajouter l’adresse manuellement.
Au passage,  j’ai aussi ajouté un lien vers mon twitter et mon blog, d’autres y place leur lien facebook, linkedin ou mailto: (pas forcément très pertinent pour une signature d’email) voir même googlemap qui eux, fonctionnent partout

Ajouter la signature au bas de ses email

Là dernière étape consiste à placer l’image accompagné de son code html, chose qui n’est pas forcement aisée sur OWA, tellement compliqué que je n’ai toujours pas trouvé comment insérer du code html.

Si j’y parvient un jour je mettrais a jour cet article donc si vous connaissez la manip’ faite moi signe
Heureusement c’est beaucoup plus simple sur tous les autres client mail web ou lourds.

D’ici là, voici le code que j’utilise :

<img border='0' src='http://mynameisthomas.com/sign2.png' usemap='#map' >

<map name='map'>

<area shape='rect' coords='6,152,376,176' href='http://www.mynameisthomas.com'/>

<area shape='rect' coords='6,145,227,166' href='http://www.mynameisthomas.com' />

<area shape='rect' coords='7,170,84,183' href='http://www.mynameisthomas.com' />

<area shape='rect' coords='169,200,285,254' href='skype:mynameisthomas.com?call' />

<area shape='rect' coords='5,202,156,251' href='http://twitter.com/mynameis_thomas' />

<area shape='rect' coords='289,178,377,258' href='msnim:chat?contact=ttw_thomas@hotmail.com' />

</map>

Pour les fégnants

On m’a récemment fait découvrir un petit service de carte de visite en ligne, il s’agit de card.ly
Même s’ il reste quelques bugs, ce service fonctionne très bien, il permet de créer une page contenant une petite description, une photo ainsi que des liens vers vos moyens de contact et vos réseaux sociaux.
Pour vous donner une petite idée :

http://card.ly/mynameisthomas