32
Créer une template mail spéciale fête de Noël
En pleine période de Noël j’ai décidé d’écrire un tutoriel qui pourra vous aider à être original et qui fera plaisir à toute votre famille, voir à tous vos collègues dans le cas où votre entreprise est un lieu où il fait bon vivre 
Bref grâce à ce tutoriel vous allez pouvoir créer une template mail pour envoyer vos vœux ou vos souhaits de bonnes fêtes.
Dans ce tutoriel j’explique la méthode de création graphique, la partie découpe et intégration CSS sera à votre charge.
Si vous n’êtes pas à l’aise avec le langage de programmation informatique CSS / HTML, vous pourrez toujours exporter une image globale et l’envoyer telle quelle dans votre email.
Et comme c’est Noël, je donne encore une fois un petit cadeau, le fichier source Photoshop pour pouvoir copier les différents styles utilisés dans l’exemple.
ETAPE 1
J’ouvre Photoshop puis je crée un nouveau document de 700 pixels de large sur 700 de haut.
Je crée un nouveau calque que je remplis de noir (en utilisant le pot de peinture) puis je vais appliquer une incrustation de dégradé (afin de créer l’arrière plan de mon template). Pour cela je vais dans le menu calque > style de calque > incrustation de dégradé.
Voici la configuration de ce dégradé :
ETAPE 2
Je crée un nouveau calque, je crée un rectangle en utilisant l’outil sélection, je remplis cette sélection en utilisant l’outil pot de peinture. Ce rectangle blanc va servir de base à ma template.
ETAPE 3
Je sélectionne l’outil sélection et je change l’option contour progressif à 10 (vous trouvez cette option en haut de la page).
Ensuite avec la sélection je crée un rectangle partant tout à fait en haut jusqu’à tout en fait en bas qui colle la partie droite de mon rectangle blanc (voir ci-dessous) puis j’appuie sur la touche Suppr.
Cette manipulation a pour effet de créer une sorte de lueur interne (voir ci-dessous)
ETAPE 4
Même chose pour les côtés gauche et haut. Ensuite je crée un nouveau calque et à l’aide d’un petit pinceau diffus (et à la diffusion aléatoire) je crée une sorte de nuage de flocons sur la partie haute de ma template. Pour information j’utilise des flocons blancs proche du bord haut, puis plus je remonte plus je diminue l’opacité de mes flocons.
ETAPE 5
Je vais devoir télécharger des formes de flocons que je placerai ensuite sur ma composition. Voici quelques Urls intéressantes pour trouver des vectos de flocons ou des brushs en formes de flocons.
- http://coolvectors.com/cool-vector-art-1/Winter-Christmas-Santa-Claus-Reindeer-Vectors.html
- http://roxita.info/fr/snowflakes-patterns-design/
- http://www.downtr.net/30200-vector-snowflakes.html
- http://www.techtreak.com/2007/12/12/yg-studio-vector-snowflakes/
Tutoriel pour créer votre propre flocon de neige :
http://www.room122.com/illustrator/illustrator-tutorial-creating-vector-snowflakes/
Je crée un nouveau calque et je place sur celui-ci mes premiers vrais flocons de neige.
ETAPE 6
Puis sur d’autres nouveaux calques, je place une multitude de flocons, histoire de créer une véritable ambiance de Noël !
ETAPE 7
Je crée un nouveau calque que je place juste au dessus de mon arrière plan (celui avec le dégradé). Avec un très très large pinceau diffus je crée une lueur derrière mes flocons.
Configuration (exemple) pour le pinceau :
ETAPE 8 : Facultative
Tout en haut je crée un rectangle arrondi noir et j’y place, grâce à l’outil texte, le lien qui permettra à l’utilisateur de cliquez si le mail ne s’affiche pas correctement.
ETAPE 9
Et avec l’outil texte j’ajoute mon message. Les polices utilisées sont : Journal et Verdana.
Et voila ma template de Noël terminée ! N’est ce pas magnifique ? Il ne me reste plus qu’à la couper, la coder avec CSS et l’envoyer la semaine de Noël à tous mes amis et collègues de bureaux
ETAPE 10
Bien entendu je peux faire varier les couleurs pour créer une autre ambiance.
Voila, c’est la fin de ce tutoriel. Pour tout ceux qui auront réussi toutes les étapes, je vous rappelle que vous pouvez publier vos créations graphiques en utilisant le liens se trouvant tout en haut de page.
Pour ceux qui ont un petit problème avec l’une des étapes, vous pouvez utiliser les commentaires ci-dessous pour poser vos questions.
Merci à tous d’avoir lu ce nouveau tutoriel.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 20 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
10 décembre 2008 07:35, par Asti
Super sympa ça comme tuto !! On se croirait déjà à Noel !!
Répondre -
10 décembre 2008 12:39, par Galithiel
Sympa, mais je trouve dommage qu’on voie les flocons à travers le flou
Répondre
Sinon, bravo, bien éxpliqué toussa toussa 
-
10 décembre 2008 13:45, par Wonka
Ah bah non alors
Répondre nan sérieux tu as pas l’impression que sa donne un effet de givre comme sur les fenètres en hiver ?
-
-
-
-
10 décembre 2008 19:25, par Shean
Mdr. Très beau tuto comme toujours, continu comme ca Wonka.
Sa fait un peu pret un an que je connais se site et il m’apporte beaucoup d’aide. Les tutos sont bien expliqués (en général. Bref pas grand chose a dire à par que c’est super
Répondre -
10 décembre 2008 19:38, par Wonka
Ah oui j’avais vraiment pas fait attention, l’habitude d’écrire 2008
Répondre-
-
12 décembre 2008 11:54, par Wonka
De toute manière noël n’est ce pas une fête un peu kitsch ?
Répondre
-
-
-
-
17 décembre 2008 00:26, par moins bete que toi
c’est un tuto donc la date on s’en tape,c’est un exemple ,pas possible de bete a ce point
Répondre
-
-
11 décembre 2008 14:40, par MD-5100
STP, est-ce que tu peux expliquer comment insérer un truc comme ça dans un mail pck si le type de messagerie du destinataire transforme ça en pièce jointe, ça va pas...
Répondre -
11 décembre 2008 18:52, par Air’
Un magnifique template, qui s’accorde parfaitement bien avec l’esprit des fêtes. Bravo Wonka !
Répondre-
15 décembre 2008 08:09
Merci bien et aussi le tuto pour le codage me parait pas mal si c’était possible d’essayer de le faire ce serait gentil.
Merci
Répondre
-
-
15 décembre 2008 09:49, par kom1dune
Bonjour Wonka,
Je pense que nous sommes plusieurs à avoir envie d’utiliser ce template pour envoyer nos voeux et comme tu le dis dans le tutoriel, on peut l’insérer dans le corps d’un email avec du html et css.
Pourrais-tu me dire si c’est le même style de code que quand tu insères l’image de « One inspiration perday » dans le mail que tu envoies en newsletter ? Et dans ce cas-là comment faire pour que les personnes reçoivent l’email des voeux sans avoir à s’inscrire comme pour une newsletter traditionnelle ?
Merci pour la réponse ^^
Répondre-
15 décembre 2008 14:50, par Wonka
Il faut que je vois si j’ai le temps de le faire, mais franchement je doute fort, cette semaine puis jusque la fin de l’année se sera franchement short sur mon emploi du temps
Répondre
-
15 décembre 2008 15:38, par kom1dune
Je comprends... Fiesta oblige ^^
J’ai trouvé une manière d’insérer une page html dans un email (via Outlook ou Thunderbird) donc je peux me débrouiller. Me reste plus que les CSS à faire...
Bon courage à toi d’ici la fin de l’année
Répondre-
15 décembre 2008 18:06, par kom1dune
En fait en se débrouillant seul on apprend aussi pas mal... Voici ce que donne l’image
Et voici le lien que j’en ai fait sur mon site (en mettant d’abord la page html dans un email)
Voir en ligne : lien vers mon site
Répondre
-
-
-
-
17 janvier 2010 19:29, par Jayjay
Bonjour avant toute chose merci pour ce tuto pour créer sous photoshop. maintenant j’ai un pb c’est que je n’y connais absolument rien en code, et du coup j’ai bien créer mon fichier sous photoshop en suivant votre tuto, mais près si je veux en faire un template email qui s’ouvre sur n’importe quel soft je fais comment ? Un grand merci d’avance. jérôme
Répondre -
10 décembre 2010 10:12, par hibou28
Sympa le rendu, mais ton tutoriel manque de précisions sur certains points comme (couleurs utilisées pour le dégradé, comment utiliser la règle,toutes les étapes des flocons sur plusieurs calques...)
Répondre
