Préparer des graphiques

Conseil:  Si vous souhaitez intégrer un simple compteur – sans graphique ou photo – dans votre message, vous pouvez ignorer la présente rubrique et vous rendre directement au chapitre suivant : Créer un compte à rebours.

Prérequis

Pour élaborer et préparer un compte à rebours avec graphique ou photo d’arrière-plan, les éléments suivants sont requis :

• un programme d’édition d’image, par exemple Adobe Photoshop
• une image du produit ou un visuel clé

Exemple

Pour créer un compte à rebours avec graphique ou photo d’arrière-plan, vous devez préparer deux éléments (voir rubrique suivante Fonctionnement) :

• l’image du produit ou le visuel clé
• la zone graphique dans laquelle se trouvera le compteur

Suivez les étapes suivantes pour ces deux parties :

1. Ouvrez votre image du produit ou votre visuel clé dans un programme d’édition d’image.
2. Vérifiez que la largeur de votre image du produit ou visuel clé ne soit pas supérieure à 800 pixels ni inférieure à 100 pixels. Dans notre exemple, la largeur d’image s’élève à 776 pixels.

   Remarque:  Par défaut, la largeur maximale est limitée à 800 pixels. Si votre modèle de message ou votre paragraphe est limité à une largeur plus petite, ne dépassez pas cette valeur. Par la suite, le compte à rebours créé ne sera pas automatiquement mis à l’échelle de la valeur maximale de votre modèle de message ou de votre paragraphe.

   —Image—

   

3. Facultatif : ajoutez d’autres éléments graphiques à votre image.

   Remarque:  N'utilisez pas les éléments graphiques avec transparence, car ils seront mal affichés.

   —Image—

   

   Dans notre exemple, nous avons ajouté une bannière bleue et un titre.

4. Lorsque vous avez terminé d’organiser votre image de produit ou votre visuel clé, exportez l’image au format JPEG ou PNG.
5. Dans l’étape suivante, créez la zone pour le compte à rebours (soit le deuxième élément du graphique de votre offre) qui servira ultérieurement de GIF animé pour décompter en temps réel les jours, heures, minutes et secondes. Pour cette zone, vous pouvez utiliser un nouveau fichier graphique ou poursuivre avec votre image de produit/visuel clé préparé(e) dans le fichier de votre programme d’édition d’image (pas dans le fichier JPEG ou PNG exporté) et ensuite exporter uniquement la zone du compte à rebours.

   Remarque:  N'utilisez pas les éléments graphiques avec transparence, car ils seront mal affichés.

   Conseil:  Nous vous recommandons de poursuivre avec le fichier de l’image du produit/visuel clé. Vous pourrez ainsi mieux gérer le résultat ultérieur et voir comment les deux éléments peuvent être réunis dans votre message en fin de procédure.

   —Image—

   

   Dans notre exemple, nous travaillons dans Adobe Photoshop sur le fichier PSD et insérons une bannière bleue à l’arrière du visuel clé.

   Remarque:  Lorsque vous créez un compte à rebours animé : évitez de réaliser un arrière-plan graphique élaboré pour la zone du compte à rebours, par exemple un modèle, un motif photo, de nombreuses couleurs, des dégradés de couleurs, etc.
   Explication : votre fichier JPEG ou PNG sera ultérieurement converti par Episerver Campaign en animation GIF composée de 60 images individuelles. Cette animation GIF ne doit pas dépasser 1,5 Mo. Même si vous utilisez un fichier JPEG fortement compressé qui ne pèse que quelques Ko mais qui contient beaucoup de couleurs, l’animation GIF générée par la suite peut dépasser la taille maximale de 1,5 Mo.
   Lorsque vous créez un compte à rebours statique non animé : la taille de fichier maximale pour la zone du compte à rebours s’élève à 500 Ko.

6. Créez un compte à rebours test à l’aide de l’outil texte de votre programme d’édition d’image afin de tester la position du futur compte à rebours.
   —Image—

   

   Dans notre exemple, nous avons retenu la police Arial dans la couleur Blanc (code hexadécimal #FFFFFF).

   Vous pouvez choisir l’un des formats suivants :

   Compte à rebours statique

   • Jours, heures, minutes, secondes (au format JJ:hh:mm:ss)
   • Heures, minutes, secondes (au format hh:mm:ss)
   • Jours, heures, minutes (au format JJ:hh:mm)
   • Heures, minutes (au format hh:mm)
   • Jours uniquement (au format JJ)

   Compte à rebours animé

   • Jours, heures, minutes, secondes (au format JJ:hh:mm:ss)
   • Heures, minutes, secondes (au format hh:mm:ss)

   Les polices et fontes de caractères suivantes sont disponibles :

   Police/fonte de caractères
   Arial	Arial gras	Arial italique	Arial Black	Arial Unicode MS
   Comic Sans MS	Comic Sans MS gras
   Courier New	Courier New gras	Courier New italique	Courier New gras et italique
   Times New Roman	Times New Roman gras	Times New Roman italique	Times New Roman gras et italique
   Trebuchet MS	Trebuchet MS gras	Trebuchet MS italique	Trebuchet MS gras et italique
   Verdana	Verdana gras	Verdana italique	Verdana gras et italique

   Conseil:  Notez la police et le code hexadécimal de la couleur de police que vous voulez utiliser. Vous aurez besoin de ces informations à un stade ultérieur.

7. Facultatif : insérez d’autres éléments graphiques dans votre compte à rebours.

   Remarque:  N'utilisez pas les éléments graphiques avec transparence, car ils seront mal affichés.

   —Image—

   

   Dans notre exemple, nous avons défini un cadre autour du compte à rebours et choisi d’indiquer "Jours", "Minutes", "Heures" et "Secondes" et le texte "L’offre prend fin dans :".

8. Lorsque vous êtes satisfait de votre présentation, supprimez votre visuel clé de votre graphique, de sorte que seule la zone du compte à rebours reste – par exemple, dans Adobe Photoshop avec l’outil de rognage.
   —Image—

   

   

   Dans notre exemple, nous avons réduit le graphique dans la zone avec compte à rebours à l’aide de l’outil de rognage.

9. Supprimez le compteur test en désactivant ou en supprimant le niveau correspondant. Ne désactivez pas les autres éléments graphiques que vous avez ajoutés le cas échéant.
   —Image—

   

   Dans notre exemple, nous avons désactivé dans Adobe Photoshop le niveau avec le compteur test. Le cadre, les inscriptions du compteur et les lignes de texte sont restés activés.

   Conseil:  Vous insérerez ultérieurement le compteur final dans Episerver Campaign à l’aide des informations que vous avez notées quant à la police de caractères et à la couleur. La présentation graphique de la zone que vous avez créée servira ultérieurement d’arrière-plan au compteur final.

10. Exportez la zone ou l’arrière-plan du compteur au format JPEG ou PNG. Veillez à ce que la taille du fichier ne soit pas supérieure à 20 Ko (valeur de référence approximative). Si vous souhaitez créer un compte à rebours statique non animé, la taille de fichier maximale s’élève à 500 Ko.

    Vous avez à ce stade correctement préparé les deux éléments pour le compte à rebours. Dans Créer un compte à rebours, vous découvrirez comment créer le compteur final dans Episerver Campaign et le placer devant votre graphique d’arrière-plan.