Home Tutoriels Une jolie signature pour vos emails

Une jolie signature pour vos emails

by boris

Aujourd’hui un petit tutoriel pour vous expliquer comment ajouter une chouette signature à vos e-mails à partir de l’application Apple Mail.

Comme vous le savez sûrement, il est déjà possible d’ajouter une signature automatiquement à votre e-mail, mais celle-ci se limite à un format texte assez austère et simpliste ! Mais on peut faire beaucoup mieux !

Le Blog du Mac vous propose aujourd’hui de faire quelque chose de plus poussé graphiquement et surtout plus pro, en ajoutant une image et en travaillant un petit peu la typographie.
Je tiens tout de même à vous prévenir que quelques connaissances informatique sont tout de même nécessaires pour réaliser ce petit tutoriel !

signature apple mail

La mise en page proposée est bien sûr donnée à titre d’exemple, vous pouvez, si vous en avez les capacités, modifier celle-ci à volonté !

Commençons d’abord par créer un fichier html qui servira de base à notre signature.
Pour cela vous devez possédez un éditeur web pour créer le code approprié. De nombreux éditeur gratuits existent comme Smultron par exemple, libre à vous de trouver celui qui vous conviendra.

Après avoir installé votre éditeur Web, téléchargez le code en cliquant sur l’icône ci-dessous :

download-code

Décompressez l’archive code-signature.zip et récupérez le fichier code-signature.html.

Ouvrez ce dernier à l’aide de votre éditeur web (smultron par exemple).

Afin de personnaliser la signature vous aurez besoin de modifier quelque peu le code fourni :

  • Nous vous conseillons de créer une image avec votre logo pas trop grande (179 X 92px pour celle de bdm) que vous hébergerez sur un serveur distant (méthode conseillée, ainsi vous n’aurez pas d’image jointe à votre email), puis remplacez l’adresse http://www.votresiteinternet.com/votre_image.jpg présente dans le code pour celle permettant d’atteindre votre image !
  • Ensuite remplacez les mentions Nom, Prénom, Fonction,  Adresse, Code Postal, Ville, Numéro de téléphone, votremail@votremail.com par vos éléments personnels.
  • Remplacez aussi les deux adresses web pour Facebook et Twitter par les vôtres et enfin l’adresse de www.votresiteinternet.com.

Votre fichier ainsi modifié, enregistrez-le puis fermez le !

À présent il va nous falloir créer une signature dans l’application Apple Mail, ouvrez donc Apple Mail, ouvrez les préférences de l’application, choisissez l’onglet “Signatures” puis créez une signature en cliquant sur le petit “+” en bas de la colonne centrale.

sig-bdm

Entrez le nom de votre choix et un texte bidon pour la signature, puis fermez les préférences et Apple Mail !
Rendez-vous ensuite à la racine de votre disque dur, puis entrez dans les dossiers Utilisateurs > Votre nom d’utilisateur > Bibliothèque > Mail > Signatures

Vous devriez voir un fichier xxxxxx.webarchive, dans le cas ou vous n’aviez aucune autre signatures avant, sinon classez les fichiers du dossier par date création afin de repérer celle que vous venez créer à l’instant via Apple Mail.

Repérez bien le nom de cette signature si vous en aviez plusieurs, à la limite, copiez le pour être certain, ensuite ouvrez votre fichier signature.html crée plus tôt à l’aide de “Safari” (important pas d’autres navigateurs) puis faites Fichier > Enregistrer-sous et parcourez l’arborescence jusqu’à atteindre à nouveau le dossier cité plus haut contenant vos signatures.

Choisissez alors le nom de la fameuse signature identifiée tantôt, puis le format “webarchive” et décochez en bas de la fenêtre “Masquer l’extension“.
Ensuite cliquez sur “enregistrer” !

sig-bdm2b

Vous pouvez maintenant ré-ouvrir Apple Mail et vous rendre dans les préférences > signatures pour voir votre nouvelle signature apparaître !!
Petite précision, si l’image de votre signature n’apparaît pas dans cette fenêtre cela est normal, ne vous fiez pas à cet affichage mais fiez vous plutôt à celui de votre signature dans le contenu du mail !!

sig-bdm3

sig-bdm4

Voilà, j’espère que ce petit tutoriel vous aura aider à améliorer un peu la qualité de vos signatures, n’hésitez pas à nous envoyer un petit screenshot de vos créations, nous pourrions les publier ici même à titre d’exemple 😉 !!

 

Mise à Jour importante suite sortie de Mac OS X Lion

Suite à l’arrivée de Mac OS X Lion, le dossier Bibliothèque (ou Library) contenu dans le dossier utilisateur n’apparait plus, pour des raisons de sécurité et pour éviter les mauvaises manipulations.
Voici une astuce toute simple pour réussir à y accéder à nouveau :

Ouvrez d’abord une nouvelle fenêtre de Finder pour commencer, cliquez ensuite sur “Aller” et enfin appuyez sur la touche “alt” du clavier pour faire apparaître le menu “Bibliothèque”, puis cliquez sur ce dernier pour l’ouvrir !!

Les signatures se trouvent ensuite dans le Dossier “Mail > V2 > MailData > Signatures”

Allez bonne création à tous 😉

0 / 5 Moyenne 0 Votes 0

Your page rank:

You may also like

222 comments

Artek 15 mars 2010 - 22:24

Merci beaucoup pour ce super tuto ( super utile !!! je suis graphiste et je passe mon temps a chercher du travail… )

Reply
FGRibreau 15 mars 2010 - 22:34

Sinon, pour ceux qui utilisent GMail il y a ça pour les signatures HTML : http://projets.geekfg.net/?/2-comment+ajouter+une+signature+html+sous+gmail.htm

Reply
floflo 15 mars 2010 - 23:08

Excellent mais le code fourni ne marche pas tel quel chez moi (les guillemets ne sont pas corrects)

Le code n’apparaissant pas, je me suis permis de modifier votre commentaire !

Et voila le résultat :
http://www.inpeople.fr/images/stories/signature_applemail_webarchive.jpg

Reply
Seb 15 mars 2010 - 23:49

Note au rédacteur : je me sens a peine concerné par cet article … MDR !!! 🙂

Reply
Antho 16 mars 2010 - 0:13

Excellent tuto !

J’en avais une mais assez médicre a mon goût …

voici la nouvelle du coup :
http://b.antho.free.fr/Exemple_signature_mail.png

N’hésitez pas les autres :p

Reply
tidamencatalogne 16 mars 2010 - 7:12

j’ai un problème avec les accents , ils apparaissent bizarrement
comment faire ?

Reply
JB 16 mars 2010 - 7:21

@Artek > Si on peux t’aider dans cette tâche cela nous fait très plaisir, bonne chance dans tes recherches.
@FGRibreau > Merci pour ce complément d’information
@floflo > Chouette résultat, bravo !
@Seb > Je te prépare la tienne bientôt, promis !
@Antho > Ah ouais très sympa, j’aime bien votre logo 😉
@tidamencatalogne > un petit screen peut-être ?

Reply
burningHat 16 mars 2010 - 8:31

Pour ma part, je préfère largement une signature simple et texte “non-polluante” et joindre mes coordonnées sous forme de vCard. Ce qui permet d’être bien plus facile et rapide à récupérer depuis n’importe quel client mail (même sur un iphone par exemple, où copier/coller les données d’une signature telle que présentée ici serait juste un enfer) et sans surcharger inutilement mon mail. Ceci n’est que mon avis personnel, pour le reste et surtout le point de vue technique, sympathique tuto 😉

Depuis que je suis passé à ce modèle, on me demande bien moins fréquement mes coordonnées “malgré leur présence” tout en étant toujours autant contacté. J’en déduis une meilleure utilisabilité/visibilité de cette méthode. Voili voilou…

Reply
Artek 16 mars 2010 - 12:12

Désolé mais j’ai beau essayer tout ce que je peux j’arrive pas à faire afficher l’image. Quel hébergeur utilisez vous, ou peut on utiliser. Que ce soit avec Casimages ou autres, soit ca n’affiche rien, soit ca affiche une tonne de merde qui est surement du au fait qu’ils essayent de placer leur pub..

Reply
Artek 16 mars 2010 - 12:44

En progression.. \o/

L’image s’affiche. il à fallu que je nettoie le code tout plein de pub et de trucs inutiles de casimages.

Maintenant, toujours à l’aveuglette j’ai viré le twitter et facebook.
voila ce que ça donne.

http://www.casimages.com/img.php?i=100316010505230095640290.jpg

comment puis je faire pour que ce soit aligné ? ( soit tout le texte à droite tout en dessous )

voici mon code html :

Samuel F. | Graphiste

06 45 64 96 36
samuel.fichet@gmail.com
http://www.samuelfdesign.com

Reply
Artek 16 mars 2010 - 12:45

ah bah oui forcemment… que je suis con… ca n’allait pas afficher ” le code” mais le résultat…

Reply
Artek 16 mars 2010 - 16:11

Hourra \o/
http://www.casimages.com/img.php?i=100316043039230095641544.jpg

Pourrais-je vous suggerer un autre tuto ( pas trouvé ) ?

Transphormer un mot en lien HyperTexte comme ici :

http://www.casimages.com/img.php?i=100316043158230095641568.jpg

Merci encore.

Reply
tidamencatalogne 16 mars 2010 - 18:06

voila ce que j’obtiens pour mon problème d’accent

http://www.constructionboisduvallespir.fr/capture.tiff

Reply
JB 16 mars 2010 - 18:32

@tidamencatalogne Avez-vous pensé à remplacer ces caractères spéciaux dans “préférences > signature” par les caractères accentués directement ?

@burningHat > je respect ton point de vue, nous souhaitions simplement montrer qu’il est possible pour tout un chacun de personnaliser sa signature assez simplement ! Nous ne comprenons pas trop bien d’ailleurs pourquoi Apple n’intègrent pas encore la gestion des signatures Html ! bref…

@Artek > Cool tu t’en est finalement sorti avec cette signature, chouette résultat finalement avec une image ronde !!
Pour le tuto “comment transformer un mot en lien”, nous préférons laisser cela aux site de développement web 😉

Reply
Antho 16 mars 2010 - 18:55

@ JB : Merci pour le compliment ^_^

Reply
Burninghat 16 mars 2010 - 18:59

@JB yep j’entends bien et me suis aussi déjà la question technique. D’ailleurs j’ai bien souligné le fait que le tuto était cool et bien fait 😉

Reply
Bobmagwa 16 mars 2010 - 21:18

@Artek > dis moi comment tu as fait pour remettre le texte à côté de l’image, je n’y arrive pas 🙁

Reply
Artek 16 mars 2010 - 21:51

Ah oui pour le texte à coté de l’image voila mon procédé.

Copier la totalité de votre texte de code.
Coller le dans un éditeur html qui gère les tableaux. (par exemple dreamweaver)
passer en mode graphique/visuel
insérer un tableau
déplacer le texte et l’image l’un a coté de l’autre dans deux cases d’un tableau.
faire jouer les préférences d’ajustement.
et voilà ! on enregistre au format html et paf tout aligné !

Seul hic ! ( gros hic )

les liens ne sont pas actifs chez moi ( il ne se passe rien si je clique dessus quand j’ai recu la signature dans un mail )

j’y travaille. si je trouve une solution je poste la réponse ici.

Reply
Bobmagwa 16 mars 2010 - 22:42

super merci pour l’idée du tableau, mais pas besoin de passer par un autre éditeur… en ajoutant juste quelques ” ” j’ai créé un petit tableau!

Reply
Bobmagwa 16 mars 2010 - 22:46

ah oui je ne peux pas mettre de code html dans mes com’ 😉
donc il faut ajouter des TR TD et autres balises pour faire le tableau…

Reply
Artek 16 mars 2010 - 22:46

Super !

moi je ne m’y connais pas assez pour ça ! ( je recherche d’ailleurs un employeur pour un contrat de professionnalisation en web design : mon site et mon contact : http://www.samuelfdesign.com )

Reply
Artek 17 mars 2010 - 16:52

Pour ceux qui commen moi ont une signature qui marche mais ne semble pas faire fonctionner les liens hypertexte. ( en gros on clique sur les lien mais ca donne rien ) vérifiez vos guillemets et remplacez tous les « » par des ” ”

Voila ! merci encore a BDM

Reply
JB 17 mars 2010 - 18:31

@Artek > Merci à toi d’avoir donné un coup de main aux commentateurs 😉 > chouette portfolio !!

Reply
Artek 17 mars 2010 - 18:35

Merci beaucoup !

A très bientôt !

Reply
tidamencatalogne 17 mars 2010 - 18:50

merci JB, j’ai toujours un problème avec l’image qui ne s’affiche pas
pourtant l’url est correcte et est celle ci :
http://www.constructionboisduvallespir.fr/logo.jpg
une idée

Reply
Artek 17 mars 2010 - 18:57

je suis pas JB, mais vu que j’ai eu pas mal de mal afficher l’image, je me permet de répondre.

J’ai pas de réponse toute faite, mais vérifie ton code HTML. Tout particulièrement la partie qui concerne cette image, son code. que tous les guillemets soient la. Je sais que dans Flash on peut faire une vérification automatique de code action script. y’ a surement un moyen de faire ça avec du html. Effectivement ton image s’affiche, donc pour moi l’erreur ne peux venir que la..

Reply
Bobmagwa 19 mars 2010 - 15:21

Pour moi les liens hypertexte ne marche pas non plus. j’ai vérifié mes guillemets mais rien n’a faire… 🙁

Reply
Robin 23 mars 2010 - 11:11

C’est bizarre, je connais pas grand chose au html mais il a fallu que je remplace tout les »…» par des “…” sinon rien ne marchait.

Reply
Robin 23 mars 2010 - 11:23

ouai bon, même dans le commentaire ça a buggé. en fait j’ai remplacé les »…» par des guillemets haut (la touche 3)

Reply
Charles_S 25 mars 2010 - 9:58

Salut à tous !
J’ai le même problème : les liens ne fonctionnent pas. Quelqu’un a-t-il réussi? J’avoue que je suis un plus que novice en la matière!

Reply
David 25 mars 2010 - 20:51

Merci ! Ça rocks du poney

Reply
Bobmagwa 26 mars 2010 - 7:43

çà marche pour moi en enlevant tous les guillemets quel qu’ils soient!

Reply
[MAC] – signature | Blog UWL-Communication 15 avril 2010 - 10:10

[…] : blogdumac.com var addthis_language = 'fr';var addthis_options = 'email, favorites, digg, delicious, myspace, […]

Reply
maisons de retraite 31 mai 2010 - 17:24

Merci pour ce tuto ! très pratique et facile

Reply
Yo 11 juin 2010 - 15:40

Bou-ouh ça marche pô.
Plus précisément mon image ne s’affiche pas. Je mets la signature – là – tout est ok, et quand je vérifie en m’envoyant un mail : plus d’image.

– a quoi sert le “id” sig ?

– mon code à cette adresse : http://www.yoann-vermeulen.com/mail.html

– j’ai mis l’image en bg de ma div ? (c’est grâve docteur ?)

Merci !!

Reply
gluzy 2 juillet 2010 - 15:45

Moi, c’est l’image qui ne s’affiche pas, j’ai essayer plusieurs fois en choisissant toujours l’adresse direct mais sa ne marche pas :(.

Si quelqu’un pouvais m’aide –> olivier.dosseh@wanadoo.fr

Merci D’avance ; )

Reply
gluzy 2 juillet 2010 - 21:25

Voici mon code :

Olivier DOSSEH | MisterO
12 bis rue paul payenneville – 91530 SaintCheron
T. 06 12 24 84 03
olivier.dosseh@hotmail.fr
Facebook | Twitter | http://www.votresiteinternet.com

Reply
gluzy 2 juillet 2010 - 21:27

[quote]

Olivier DOSSEH | MisterO
12 bis rue paul payenneville – 91530 SaintCheron
T. 06 12 24 84 03
olivier.dosseh@hotmail.fr
Facebook | Twitter | http://www.votresiteinternet.com
[/quote]

Reply
Thierry 7 juillet 2010 - 14:58

Bonjour,

Très utile tutoriel. L’effet est très sympa.

Malheureusement, je ne peux pas non plus afficher l’image après de multiples tentatives.

Quelqu’un a-t-il une précision au tuto qui pourrait faire la différence ?

Merci d’avance

Reply
ed 26 septembre 2010 - 20:28

merci pour tous ces contributions en particulier Yo

Reply
SaRaH 25 octobre 2010 - 18:59

Bonjour,
ça a l’air si simple…
mais je n’y arrive pas!
Je suis hébergée par Free, Cyberduck pour le FTP et Smultron pour le code HTML.
Mais j’ai ni l’image ni les liens….

Reply
Yo 25 octobre 2010 - 19:02

C’est quoi ton code html ?

Reply
SaRaH 26 octobre 2010 - 23:15

Bon maintenant j’ai tous les liens qui marchent très bien mais pas l’image

img src=”http://www.22hvingt-deux.fr/signaturemailarchi.png” alt=”signature” width=”261″ height=”177″ style=”float: left; padding: 0 10px 0 0;”

avec tout à la fin.

Reply
SaRaH 26 octobre 2010 - 23:16

ma dernière phrase ne c’est pas mise en entier, je voulais dire que j’ai mis le signe “inférieur à” au tout début ” supérieur à ” toute à la fin…

Reply
Yo 26 octobre 2010 - 23:26

Bonsoir,

Il ne manquerait pas l’anti-slash à la fin ?
</
code>

Reply
Yo 26 octobre 2010 - 23:28

Flute ça n’a pas fonctionné.
En gros :
…padding: 0 10px 0 0;” />

c’est “/” qui manquerait.

Reply
SaRaH 27 octobre 2010 - 9:26

Merci Yo, mais rajouter un / ne change rien.
En consultant tout un tas de forum et parce que j’ai le même problème pour ajouter un favicon…cela viendrait de la redirection de mon adresse web. J’ai acheté mon adresse .fr sur Gandi que j’ai redirectionné vers celle .free.fr. “n’ouvrirait pas toutes les sous-pages”
J’ai envoyé un mail d’aide aux deux services.
Je te tiens au courant.

Reply
bcbgch 11 novembre 2010 - 1:36

Cela ne fonctionne pas cher moi… pourtant il me semble avoir suivit la démarche dans les moindres détails !!!

Reply
bcbgch 11 novembre 2010 - 1:54

Ah j’ai réussi.. j’ai juste quitté l’application mail et réouverte et cela fonctionnait…

Reply
macnaute 11 novembre 2010 - 9:33

Joli tuto…mais je n’y arrive pas:
– copier le code OK
– coller en mode CODE, pas OK, le fichier reste en txt. Quelle extension?
– ouvrir avec Safari pas OK, ouvre une page blanche et en même temps une fenêtre du Finder
– test en ajoutant l’extension html au fichier “smultron”, OK pour ouverture avec Safari (reste le problème des accents)
– enregistrement en webarchive à la place de la signature OK
– signature dans Mail, pas OK, car l’image ne s’affiche pas dans le contenu du mail (image stockée sur mon site web dans le dossier www)

Un petit conseil serait apprécié. Merci

Reply
1 2 3 5

Leave a Comment