Éditeur d'image

L'éditeur d'image conçoit l'image composée qui peut accompagner chaque offre à la place de la photo telle quelle de la boutique : la photo du produit sur un fond de votre choix, avec le prix, l'ancien prix et la remise écrits par-dessus. Vous placez chaque élément sur un canevas et vous voyez le résultat aussitôt.

11 minutes de lecture

Sur cette page
Dès Solo

L'essentiel

  1. Activez Générer l'image, en haut des contrôles.
  2. Avec Canevas choisi dans Éléments, sélectionnez la Taille, Horizontal ou Carré, et le Fond.
  3. Placez chaque élément : faites-le glisser sur le canevas, ou saisissez sa position et sa taille.
  4. Appuyez sur Enregistrer.

Chaque canal a son modèle d'image

Le modèle d'image est propre à chaque canal : l'éditeur travaille sur le canal actif, celui que marque le sélecteur du menu latéral. La bibliothèque de fonds, en revanche, appartient à l'organisation : les fonds que vous téléversez servent pour tous vos canaux. Quand vous créez un canal, vous pouvez copier le modèle d'un autre avec Copier la configuration de.

Le forfait décide si elle arrive au canal

Le forfait gratuit ne publie pas l'image composée : vous pouvez la concevoir et la voir ici comme n'importe qui, mais les canaux reçoivent la photo d'origine du produit. Si c'est votre cas, un avis sous l'interrupteur le dit et renvoie vers Paramètres › Abonnement. L'aperçu de Créer une offre montre aussi l'image composée, ne vous y fiez donc pas pour savoir ce qui part : c'est le forfait qui en décide.

L'écran

  1. Aperçu : le canevas avec l'image telle qu'elle sortira, et dans son en-tête modèles prédéfinis, importer et exporter. Il reste visible pendant que vous faites défiler les contrôles.
  2. Générer l'image : active ou désactive l'image composée.
  3. Éléments : ce que contient l'image ; l'œil montre ou masque chacun.
  4. Les propriétés de ce que vous avez sélectionné ; ici, le Canevas, avec sa taille et son fond.
  5. Abandonner et Enregistrer, éteints tant que vous n'avez rien changé.

La première fois que vous ouvrez l'Éditeur d'image, une visite guidée en présente les éléments. Vous pouvez la passer, et la recommencer quand vous voulez depuis le bouton de l'en-tête, avec Refaire la visite.

Sur mobile ou dans une fenêtre étroite

Quand le contenu devient étroit — sur téléphone, ou dans une petite fenêtre avec le menu déployé — les deux colonnes s'empilent : d'abord les contrôles, et l'aperçu à la fin, qui dépasse collé au bord inférieur pendant que vous travaillez. La flèche de son en-tête (Voir l'aperçu) descend jusqu'à lui et la flèche (Revenir aux paramètres) vous ramène en haut.

Si, à l'ouverture de l'éditeur, vous voyez « Nous avons réparé votre modèle d'image »

Si le modèle enregistré d'un canal contient quelque chose qui ne peut pas être dessiné — une couleur mal écrite, un élément qui dépasse du canevas ou un élément qui manque —, l'ouverture de l'éditeur ne répare que cela — ce qui dépasse est remis à l'intérieur ; le reste est repris de Par défaut — et l'enregistre. En haut apparaît l'avis « Nous avons réparé votre modèle d'image », avec une ligne par modification ; le reste de votre mise en page reste tel quel. Ce qui est publié avant que quelqu'un ouvre l'éditeur part déjà avec cette même réparation.

Générer l'image

  • Désactivé (état de départ de chaque canal) : chaque offre part avec la photo d'origine du produit. Les cartes du dessous apparaissent atténuées et ne répondent pas, mais les boutons de modèles, d'import et d'export continuent de fonctionner.
  • Activé : chaque offre part avec l'image composée.

Changer l'interrupteur est une modification comme une autre : vous devez l'enregistrer.

Aperçu

Le canevas montre à tout moment l'image qui serait générée avec une offre d'exemple : un produit fictif à 1 200 avec un prix conseillé de 2 000, soit 40 % de remise. Les prix sont écrits avec la devise et les séparateurs de la région de votre organisation.

  • Il se met à jour tout seul peu après chaque modification ; pendant que la nouvelle est générée, l'ancienne reste à l'écran.
  • Le canevas est mis à l'échelle de la largeur disponible sans rien rogner ; en dessous, il indique sa taille réelle.
  • Si vous enchaînez beaucoup de changements, « Trop de demandes d'aperçu. Attendez quelques secondes et réessayez. » peut apparaître : attendez un instant et poursuivez.

Le canevas

Canevas est la première ligne de la liste des éléments. Quand vous la choisissez — ou que vous appuyez sur un espace vide du canevas —, la carte des propriétés affiche ce qui concerne l'image entière :

Taille

Option Résolution Pour quoi faire
Horizontal 1000 × 565 px Format paysage. Le plus courant pour un canal.
Carré 800 × 800 px Format carré. Donne plus de place au produit.

Quand vous changez de taille, les éléments ne sont pas redimensionnés : ils sont rognés aux nouvelles limites et repoussés à l'intérieur. Si vous passez d'horizontal à carré, ce qui était à droite se retrouve entassé : replacez-le.

Fond

Quand vous appuyez sur le sélecteur de fond, la galerie Fonds disponibles s'ouvre :

  • Choisir un fond : appuyez sur sa carte. Il est sélectionné aussitôt, mais pas enregistré.
  • Sans fond : l'image est composée sur du blanc.
  • Téléverser un fond : une image de votre appareil. Elle accepte les PNG, JPEG, WebP et GIF jusqu'à 10 Mo ; un GIF perd son animation. Le fond qui vient d'être téléversé est sélectionné, avec le nom du fichier.
  • Supprimer le fond : demande une confirmation, car il est retiré de toute l'organisation. Si le modèle d'un autre canal l'utilise, il n'est pas supprimé : un avis indique de quel canal il faut d'abord le retirer ou, s'il s'agit d'un canal que vous ne gérez pas, que la personne qui administre l'organisation peut le retirer. Si seul ce canal l'utilise, son modèle se retrouve sans fond à cet instant.

Le fond est rogné pour couvrir tout le canevas, centré, de sorte qu'une photo d'une autre proportion perd ses bords.

Ce qu'on fait du fond que vous téléversez, et s'il cesse d'être lisible

Au téléversement, l'image est enregistrée compressée et réduite à la taille dont l'image publiée a besoin, redressée même si la photo a été prise à la verticale, et sans les données cachées du fichier, comme le lieu de la prise de vue. Il n'y a pas de limite au nombre de fonds enregistrés.

Si l'image d'un fond ne peut plus être lue, l'aperçu le dit au lieu de s'afficher : choisissez-en un autre ou téléversez-le à nouveau. Avec ce fond, chaque offre est publiée avec la photo du produit.

Les éléments

Le modèle a toujours quatre éléments :

Élément Ce qu'il affiche
Image du produit La photo du produit, téléchargée depuis la boutique au moment de publier.
Prix actuel Le prix remisé.
Prix d'origine (prix conseillé) L'ancien prix, barré ; la ligne se règle dans son groupe Barré. Si l'offre n'a pas de prix conseillé, il n'est pas dessiné.
Remise Le pourcentage d'économie, « -40% », sans décimales. Sans prix conseillé, ou sans baisse de prix, il n'est pas dessiné.

Il n'y a pas d'élément logo ni de texte libre : si vous voulez le logo de votre canal ou un texte fixe sur toutes les offres, mettez-le dans l'image que vous importez comme fond.

Appuyez sur une ligne de Éléments pour sélectionner l'élément, ou appuyez directement dessus sur le canevas. Le de chaque ligne le masque dans l'image sans le retirer du modèle ; masqué, vous pouvez toujours le sélectionner et le déplacer.

Position et taille

Les champs X, Y, Largeur et Hauteur sont des pixels à partir du coin supérieur gauche du canevas. Vous obtenez la même chose à la main :

  • Faites glisser l'élément pour le déplacer.
  • Tirez les poignées pour changer sa taille. Il ne pivote pas.
  • Flèches du clavier pour déplacer l'élément sélectionné pixel par pixel (pas de raccourci pour les sauts plus grands ; elles ne fonctionnent pas avec le Canevas sélectionné ni pendant que vous écrivez dans un champ).
Faire glisser un élément du canevas et tirer sur son coin pour l'agrandir

Aucun élément ne peut sortir du canevas : en le faisant glisser, il s'arrête au bord, et une valeur saisie à la main qui le ferait sortir se corrige toute seule. Il n'y a pas d'annulation : ce qui s'en rapproche le plus est Abandonner, qui revient à ce qui est enregistré.

Image du produit ne porte pas de texte, elle n'a donc pas d'autres propriétés : la photo est ajustée entière dans son cadre, centrée et sans recadrage, en respectant sa proportion. Avant d'ajuster la photo du produit, on lui retire les marges blanches, et un PNG avec transparence la conserve sur le fond.

Limites et ce que le canevas ne fait pas
  • La taille minimale d'un élément est de 20 × 20 px.
  • Les éléments peuvent se superposer.
  • Il n'y a ni repères, ni sélection multiple, ni touche de suppression.

Texte

Les trois éléments de texte ont en plus :

Champ Ce qu'il fait
Taille La taille de la police en pixels. Si le texte ne tient pas dans le cadre, il se réduit tout seul, jusqu'à un minimum de 10 px.
Alignement Gauche, centre ou droite, avec trois icônes.
Police Sans, Serif ou Mono.
Graisse Normal ou Gras.
Couleur La couleur du texte : appuyez sur l'échantillon pour ouvrir le sélecteur, écrivez le code hexadécimal, ou utilisez la pipette pour prélever une couleur à l'écran. La pipette n'apparaît que dans les navigateurs qui l'ont, c'est-à-dire aujourd'hui Chrome et Edge sur ordinateur.
Libellé Un court texte dessiné au-dessus de la valeur, par exemple « Prix actuel » ou « Avant », aux deux tiers de la taille de la police.

Le cadre de l'élément (Hauteur comprise) est l'endroit où le texte est centré à la verticale ; avec un libellé, le libellé est en haut et la valeur en dessous, les deux centrés.

Fond du texte : chaque élément de texte peut avoir une pastille de couleur derrière lui, aux coins arrondis. L'interrupteur est dans le titre du groupe et en dessous on choisit sa couleur. Avec la pastille activée, le texte a moins de place, il se peut donc que vous deviez élargir le cadre.

Barré : le Prix d'origine (prix conseillé) a en plus un groupe pour la ligne qui le traverse. L'interrupteur du titre la retire ou la remet. En dessous, vous choisissez son Épaisseur, de 1 à 20 px ; sa forme, droite au milieu du prix ou en diagonale, du coin inférieur gauche au coin supérieur droit ; et sa couleur, qui ne change pas quand vous changez celle du texte. La ligne ne traverse que le prix, jamais le libellé.

Petits caractères : le texte
  • Avec la pastille activée, le texte perd 28 px de marge de chaque côté.
  • Si un fichier importé n'apporte pas la typographie d'un élément, celui-ci part de 48 px, Sans, gras, aligné à gauche, en blanc et sans pastille.
  • S'il n'apporte pas le barré du prix conseillé, celui-ci s'affiche comme toujours : droit, de 3 px et de la couleur du texte.

Enregistrer, abandonner et quitter

  • Enregistrer s'allume dès que vous touchez à quelque chose, même si vous le remettez ensuite comme avant.
  • Abandonner demande avant et remet le modèle tel qu'il était enregistré.
  • Si vous essayez de quitter l'écran avec des modifications en attente, on vous le demande : Partir sans enregistrer ou Continuer à modifier. Si vous fermez l'onglet ou rechargez la page, c'est le navigateur lui-même qui demande.
Si une autre personne ou un autre onglet enregistre en même temps

Toute personne de l'organisation ayant accès au canal peut modifier et enregistrer son modèle, et aussi téléverser et supprimer des fonds de la bibliothèque. Si quelqu'un — ou un autre de vos onglets — l'enregistre après que vous avez ouvert l'écran, ou si vous avez changé de canal dans un autre onglet, l'éditeur vous prévient quand vous appuyez sur Enregistrer, importez ou supprimez un fond qu'un modèle utilise, et rien n'est enregistré ni supprimé : rechargez pour voir ce qui a été enregistré et refaites votre modification.

Modèles prédéfinis

ouvre le panneau Modèles prédéfinis. Il y en a deux :

  • Par défaut : horizontal, avec la photo à gauche et les prix à droite, le prix sur une pastille verte et le prix conseillé sur une rouge, avec les libellés « Prix actuel » et « Avant ».
  • Carré : 800 × 800, avec la photo au centre et les prix en dessous, sans pastilles.

Un nouveau canal démarre avec la mise en page du modèle prédéfini Par défaut et sans fond.

Appuyez sur Charger et confirmez. Quand vous en chargez un :

  • les quatre éléments et la taille du canevas sont remplacés,
  • le fond est retiré (il reste Sans fond),
  • Générer l'image est activé,
  • et la sélection passe à Image du produit.

Charger n'est pas enregistrer

Le modèle prédéfini est appliqué à l'écran : regardez-le dans l'aperçu et, s'il ne vous convient pas, appuyez sur Abandonner pour revenir au vôtre. Ce n'est que lorsque vous appuyez sur Enregistrer que l'ancien est perdu.

Exporter et importer

  • Exporter le modèle télécharge le modèle enregistré sous le nom image_template.json : les quatre éléments, la taille du canevas, le fond choisi et l'état de l'interrupteur. Ce que vous n'avez pas enregistré ne figure pas dans le fichier : enregistrez d'abord.
  • Importer un modèle ouvre une fenêtre avec la zone JSON du modèle : collez-y le contenu d'un fichier exporté et appuyez sur Importer. Tout est remplacé, interrupteur compris, et, contrairement au reste de l'écran, c'est enregistré aussitôt. Si ce que vous collez n'est pas un modèle d'image, ou contient une erreur, la fenêtre dit pourquoi au-dessus de la zone de texte et rien n'est importé.

Cela sert à faire des sauvegardes et à emporter une mise en page d'un canal à un autre. Pour la passer à une autre organisation, retirez le fond (background_asset_id) du fichier avant de l'importer : les fonds appartiennent à chaque organisation et celui d'une autre est refusé.

Ce qui arrive au canal

L'image est composée au moment de publier, canal par canal et avec le modèle de chacun ; cela vaut aussi bien pour Créer une offre que pour la file et la publication automatique.

  • Avec le forfait gratuit, l'image composée n'est pas publiée : les canaux reçoivent la photo d'origine du produit.
  • La photo du produit est nécessaire : sans l'URL de l'image, rien n'est composé et le message part sans photo. La photo est téléchargée depuis la boutique au moment de publier.
  • Si l'image ne peut pas être composée, le message part avec la photo d'origine, sans prévenir. Si la photo ne peut pas être téléchargée ou si elle pèse plus de 8 Mo, la publication dans ce canal échoue avec « Impossible de télécharger l'image de l'offre. ».
  • Avec une image, composée ou d'origine, le texte du message a la limite de 1024 caractères de Telegram au lieu de 4096, comptés sur le texte visible, comme le fait Telegram. L'aperçu de Créer une offre les compte.
  • Masquer Image du produit compose l'image sans la photo, mais l'offre a toujours besoin de l'URL de l'image pour que quelque chose soit composé.
Installez Codingram S'ouvre comme une appli, sans passer par une boutique d'applications