Retoucher/Modifier vos images

Mettez en évidence vos images et rehaussez leur apparence grâce à l'éditeur d'images. Avec cet outil, il vous sera possible, entre autres, de recadrer ou redimensionner vos images, d'y ajouter des formes variées ou d'y inscrire des slogans accrocheurs. Vous pourrez même y faire des montages plus complexes en y combinant d'autres images et en superposant plusieurs éléments grâce à un système de calques.

Avant

Après

Découvrir l'éditeur d'images

• Comment accéder à l’éditeur d’images pour retoucher une image
• Que retrouve-t-on dans l'éditeur d'images ?

Comment accéder à l’éditeur d’images pour retoucher une image

Vous pouvez accéder à l’éditeur d’images à partir de n’importe quel bloc image des modèles prédessinés ou de base.

Pour retoucher une image qui se trouve dans un bloc d’image :

1. Ouvrez le modèle où se trouve l’image à modifier. Pour savoir comment créer un modèle, cliquez ici.
   
   Note : L’éditeur d’images n’est disponible que dans les modèles ou brouillons issus de modèles prédessinés ou de base.
    
2. Cliquez sur votre image pour la sélectionner. Si votre image n’a pas encore été ajoutée à votre modèle, cliquez ici pour savoir comment l’ajouter.
    
3. Dans le panneau latéral à la droite de l’éditeur, allez dans le volet “Propriétés de l’image”.
    
4. Sous la vignette de votre image, cliquez sur le bouton “Retoucher l’image”.
   
   Voilà ! Bienvenue dans l’éditeur d’images !
    

Que retrouve-t-on dans l'éditeur d'images

Zone image

Au centre de l’éditeur se trouve la “Zone image”. Complètement en haut à gauche, vous trouverez ses dimensions et des outils pour la recadrer.

Outils

À la droite de la zone image, se trouvent les outils disponibles : forme, texte, séparateur et image.

• Formes : permet d'ajouter des formes de différents thèmes et couleurs pour agrémenter votre image.
• Zone de texte : permet d'ajouter du texte stylisé sur votre image ou des formes.
• Séparateurs : permet d'ajouter des lignes de toutes sortes de motifs à votre image.
• Images : permet d'incorporer d’autres photos à votre image initiale pour créer des compositions époustouflantes. Vous pouvez puiser dans vos images, en téléverser de nouvelles ou fouiller directement dans notre banque d'images libres de droits.
• Pipette : permet de connaître et copier le code couleur d'un élément précis dans votre image afin de bien harmoniser vos agencements.

Calques

Chaque ajout d’élément via les outils disponibles crée un calque qui apparaîtra complètement à la droite de l’éditeur d’images sous “Ordre des éléments”. Glissez les calques pour modifier l’ordre de présentation des éléments. Le calque de fond est le seul élément que vous ne pouvez pas supprimer. Ce calque définit l'arrière-plan de votre image. Il peut être transparent ou rempli par une couleur.

Annuler, rétablir, sauvegarder et quitter

Tout en haut à droite de l’éditeur, vous retrouvez les options pour “Annuler” et “Rétablir” les dernières actions effectuées ainsi que pour “Sauvegarder” l’image avec ses modifications.

Cliquez sur le bouton "Quitter l'éditeur" pour sortir de l'éditeur d'images. N'oubliez d'enregistrer d'abord vos modifications avec le bouton "Sauvegarder".

Comment utiliser les outils de l'éditeur d'images

• Comment modifier un élément image
• Comment ajouter une forme
• Comment ajouter du texte sur une image
• Comment ajouter une ligne/séparateur dans une image 
• Comment ajouter une image dans sa composition
• Comment obtenir le code d'une couleur

Comment modifier un élément image

• Modifier l'opacité
• Faire pivoter une image
• Modifier les dimensions d’une image ou son échelle
• Disposer une image dans la zone image
• Rogner ou recadrer une image
• Appliquer un filtre sur l’image
• Arrondir les coins d'une image

Pour modifier une image, vous devez d’abord la sélectionner. Pour ce faire, cliquez sur l’image dans la zone image ou sur son calque dans la liste de droite. 

Modifier l’opacité

Modifier l’opacité de votre image pour la rendre transparente.

Pour modifier l’opacité, cliquez d’abord sur votre image pour la sélectionner (ou sur son calque). Cliquez ensuite dans la zone de % d’opacité pour entrer manuellement un pourcentage ou déplacez le curseur.

Faire pivoter une image

Pour effectuer une rotation de votre image, sélectionnez-la, puis bougez la poignée de rotation au haut de l’image pour la faire pivoter dans un sens ou dans l’autre. Il est également possible d’entrer le nombre de degrés exact dans le champ “Rotation”.

Vous pouvez aussi faire pivoter horizontalement ou verticalement une image en sélectionnant l’option “Retournement” et en choisissant l’option désirée.

Modifier les dimensions d’une image ou son échelle

Pour redimensionner proportionnellement à sa taille originale une image, sélectionnez votre image et entrez un pourcentage dans la zone “Échelle” ou déplacez le curseur. Vous pouvez également cliquer sur votre image et déplacer l’un des 4 coins colorés pour l’agrandir ou la rapetisser proportionnellement. 

Si vous utilisez les autres poignées (et non les coins), vous modifierez seulement la largeur ou la hauteur de votre image.

En appuyant sur la touche MAJ de votre clavier et en déplaçant l’un des 4 coins de l’image, vous changerez les dimensions de l’image non proportionnellement.

Disposer une image dans la zone image

L’option “Disposition” permet de modifier l’alignement de votre image par rapport à la zone image, de la même manière que l’on aligne un paragraphe dans un document. Pour ce faire, sélectionnez votre image puis cliquez sur l’option “Disposition”. Choisissez l’une des options dans le menu.

Disposer un élément dans la zone image

Disposer plusieurs éléments ensemble

Rogner ou recadrer une image

Pour rogner un élément image :

1. Sélectionnez votre image.
2. Cliquez sur "Rogner".
3. Déplacez votre curseur sur l’image.
4. Avec le curseur en forme de 4 flèches entrecroisées, appuyez à l’endroit où débute la partie de l’image que vous souhaitez conserver.
5. Maintenez enfoncé le bouton gauche de votre souris tout en la déplaçant pour dessiner la zone de rognage.
6. Si la zone vous convient, cliquez sur l'icône "Appliquer (le crochet)" à la droite de l’option “Rogner”. Sinon, cliquez sur l’icône “Annuler (cercle barré)” (ou désélectionnez l’image en cliquant à l'extérieur), puis recommencez à l’étape 2.

FAQ

1. Est-ce que mon texte sera recadré aussi ?
   
   Non, seule l’image sera recadrée. 
    
2. J’ai recadré mon image, mais je n’aime pas le résultat. Que puis-je faire ?
   
   Utilisez le bouton “Annuler” dans le menu en haut à droite de l'éditeur d'images.
    
3. Puis-je modifier la zone de rognage que j’ai dessinée ?
   
   Non, mais vous pouvez l’annuler et la redessiner.
    
4. Ma zone image n’a pas été rognée avec mon image. Comment puis-je modifier ma zone image pour qu’elle suive les nouvelles dimensions de mon image ?
   
   Effectivement, lorsque vous rognez votre image, cela va recadrer que cet élément. Vous pouvez cependant redimensionner votre zone image. Cliquez ici pour savoir comment faire.
   
   

Appliquer un filtre sur l’image

Avec votre image sélectionnée, cliquez sur le menu “Filtres photo” dans les options de l’élément pour afficher la fenêtre suivante.

Filtres

Dans la partie du haut, vous pouvez voir les aperçus des différents filtres prédéfinis. Utilisez les flèches pour les faire dérouler et cliquez sur un filtre pour l’appliquer à votre image. Les filtres prédéfinis ne sont pas cumulatifs : seul le dernier choisi sera appliqué.

Effets

Les curseurs dans la partie inférieure de la fenêtre vous permettent de modifier chacun des réglages séparément. Vous pouvez les utiliser pour ajuster un filtre prédéfini ou pour créer vos propres effets.

Note : Les filtres et les effets ne sont pas permanents : vous pouvez à n’importe quel moment cliquer sur le premier filtre préprogrammé “Aucun” pour retirer tous les effets appliqués à votre image.

Arrondir les coins d'une image

Pour arrondir les coins d'une image, sélectionnez son calque. Ensuite, entrez un nombre dans le champ ou glissez le curseur de l'outil Rayon pour ajuster les coins de votre image.

Comment ajouter des formes

Cliquez sur l’outil "Forme" pour ouvrir le menu. Parcourez la liste déroulante pour filtrer les formes selon vos besoins. Cliquez simplement sur la forme désirée pour l’ajouter dans la zone image. 

Options de l’élément Forme

Il est possible de modifier l’opacité, de faire pivoter et de modifier la disposition ainsi que la taille des formes de la même manière que les images. Cliquez ici pour en savoir plus sur l’utilisation de ces options.

Modifier la couleur des formes et leur bordure
 

Différents styles, couleurs et thèmes de forme sont proposés. Cependant, si les couleurs proposées ne vous conviennent pas, sachez que vous pouvez personnaliser cet élément pour toutes les formes disponibles. 

Pour modifier la couleur d’une forme et/ou de sa bordure, cliquez dessus dans la zone image ou cliquez sur son calque pour la sélectionner. Ensuite, cliquez sur le triangle à la droite du carré de couleur. Pour sélectionner une couleur, vous pouvez soit :

• naviguer dans les différentes teintes disponibles et cliquez dans son dégradé pour choisir une couleur;
• entrer directement le code hexadécimal ou rgb de la couleur désirée;
• sélectionner une couleur rapide au bas de l’encadré.

Pour modifier la taille de la bordure, entrez un nombre entier de pixels ou faites glisser le curseur.

Comment ajouter du texte sur une image

Ajouter et modifier un texte

Cliquez sur l’outil "Texte" pour ajouter un texte à la zone image. Pour modifier le texte, double-cliquez sur l’élément. Vous pourrez alors le sélectionner ou le supprimer pour entrer votre propre texte. 

Options de l’élément texte

Comme pour les images, il vous est possible de modifier l’opacité du texte, de lui appliquer une rotation ou de le replacer à l’aide de l’outil “Disposition”. Cliquez ici pour en savoir plus.

Certaines options peuvent s’appliquer à l’élément texte en entier ou à une sélection :

• Police de caractère
• Taille du texte
• Gras, Italique
• Couleur

Modifier la hauteur de ligne

Entrez une valeur entière (1, 2, ...) ou décimale (1.5) dans le champ prévu à cet effet pour contrôler l’espacement des lignes. Notez que cela ne sera visible que sur un texte sur plusieurs lignes!

Comment ajouter une ligne/séparateur dans une image

Cliquez sur l’outil “Séparateur” dans le menu des outils. Un panneau s’ouvrira. Cliquez sur la ligne de votre choix pour l’insérer dans votre image.

FAQ

J’ai de la difficulté à cliquer sur ma ligne, c’est toujours mon image de fond qui est sélectionnée.

Cliquez sur le calque qui représente votre ligne dans le panneau latéral ou encore, utilisez le cadenas pour verrouiller votre image de fond : elle ne pourra ainsi plus être modifiée par accident.

Comment ajouter une image dans sa composition

Cliquez sur l’outil “Image” dans le menu des outils. À partir de là, vous pouvez :

• téléverser une nouvelle image directement dans votre composition (formats acceptés : JPG, PNG, GIF, SVG)
   Les images SVG vous offrent de multiples possibilités de personnalisation puisque ce format vous donne accès à des outils supplémentaires vous permettant de modifier leur couleur de fond et d'ajouter une bordure. 
• accéder aux images sauvegardées dans votre compte
• parcourir notre banque d'images libres de droits à la recherche de nouvelles inspirations

L'image choisie sera ajoutée à votre composition dans un calque indépendant. Cliquez ici pour savoir comment éditer une image.

Comment obtenir le code d'une couleur

Utilisez l'outil pipette pour obtenir le code hexadécimal précis d'une couleur.

Pour ce faire, appuyez sur l'icône de la pipette située dans la barre d'outils, puis cliquez sur la couleur à extraire dans la zone image. Le code couleur apparaîtra alors à l'écran. Copiez ensuite les 6 chiffres ou lettres suivant le #. Pour utiliser la couleur, collez son code dans le champ Hex de n'importe quel sélecteur de couleur.

Comment utiliser et modifier les calques (éléments)

• Comment sélectionner un ou plusieurs éléments
• Comment changer l’ordre des éléments
• Comment grouper ou dégrouper des éléments
• Comment protéger des éléments
• Comment supprimer des éléments
• Comment dupliquer un élément

Comment sélectionner un élément ?

Sélectionnez un élément en cliquant directement sur celui-ci dans la zone image ou sur son calque dans la liste de droite.

Pour sélectionner plusieurs éléments, vous pouvez faire une sélection avec la souris (cliquez et déplacez en maintenant le bouton de gauche enfoncé pour dessiner une zone qui englobe tous les éléments à sélectionner) ou bien appuyer sur la touche MAJ et cliquer sur chacun des éléments dans la zone image. Vous pouvez désélectionner en cliquant à n’importe quel endroit à l’extérieur de l’image. Si vous avez de la difficulté à sélectionner des éléments qui se trouvent au-dessus d'un autre élément, protégez l'élément du dessous en verrouillant le cadenas sur son calque. Cela vous empêchera de le déplacer par accident en essayant de sélectionner les éléments au-dessus.

Comment changer l’ordre des éléments

Vous pouvez réordonner les éléments en déplaçant les calques dans la liste du panneau latéral de droite. Pour ce faire, cliquez sur un calque, maintenez le bouton gauche de la souris enfoncé et déplacez le calque dans la liste. 

Veuillez noter :

• Plus l’élément est en haut de la liste, plus il sera à l’avant dans l’image.
• Il n’est pas possible de réordonner le fond.

Comment grouper ou dégrouper des éléments

Sélectionnez plusieurs éléments en les sélectionnant avec la souris (cliquez et déplacez en maintenant le bouton de gauche enfoncé pour dessiner une zone qui englobe tous les éléments à sélectionner) ou bien appuyez sur la touche MAJ et cliquez sur chacun des éléments dans la zone image. L’option de “Grouper” sera maintenant disponible dans le menu en haut à droite de la zone image. 

Une fois groupés, les éléments peuvent être déplacés comme un seul, mais vous n’aurez plus accès à modifier les propriétés de chacun des éléments qu’il contient. Vous pouvez à tout moment défaire le groupe en cliquant sur l’option “Dégrouper”.

Comment protéger des éléments

Dans la liste des calques du panneau latéral de droite, cliquez sur l’icône de cadenas du calque que vous souhaitez protéger. Il ne sera plus modifiable ni même sélectionnable jusqu’à ce que vous cliquiez de nouveau sur le cadenas pour le déverrouiller.

Comment supprimer des éléments

Sélectionnez l'élément à supprimer en cliquant directement dessus dans la zone image ou en cliquant sur son calque dans le panneau latéral droit et appuyez ensuite sur la touche RETOUR ARRIÈRE ou SUPPRIMER de votre clavier. Vous pouvez également cliquer directement sur l'icône de poubelle de son calque pour le supprimer.

Si des éléments sont verrouillés (cadenas fermé), vous devrez d'abord les déverrouiller afin de pouvoir les supprimer.

Note : le calque de fond est le seul élément qui ne peut être supprimé. Vous pouvez cependant le rendre transparent en suivant les instructions ici.

Comment dupliquer un élément

Cliquez sur l'icône des deux feuilles de papier superposées sur le calque de l'élément à dupliquer.

Vous pouvez également utiliser les raccourcis clavier usuels. Pour ce faire, cliquez sur l'élément dans la zone image ou cliquez sur son calque dans le panneau latéral droit pour le sélectionner. Appuyez ensuite sur les touches CTRL + c (ou COMMAND + c) pour le copier, puis sur CTRL + v (ou COMMAND + v) pour le coller.

Comment modifier la couleur de fond de l’image

Le fond de l’image finale peut être d’une couleur solide ou transparente.

Pour changer la couleur, cliquez sur le calque du fond dans le panneau latéral de droite. Le menu des options apparaîtra et vous pourrez sélectionner la couleur voulue.

Pour rendre le fond transparent, cliquez sur l’icône du carré barré qui se trouve à droite sur le calque du fond. Si le fond de votre image est visible, il devrait maintenant afficher un motif quadrillé gris et blanc. Ce motif n’apparaîtra pas dans votre image finale.

Comment créer un dégradé de couleurs

Il est possible d'appliquer un dégradé de couleurs sur des formes, du texte, des séparateurs et sur le fond de votre image.

Comment faire

1. Sélectionnez ou ajoutez l'élement auquel vous souhaitez appliquer le dégradé.
2. Ouvrez la liste déroulante de l'option Couleur de cet élément.
   
   
3. Dans le menuType, choisissez Dégradé linéaire.
   
   
4. Réglez la direction du dégradé en entrant une valeur dans le champ Angle.
   
   
5. Pour modifier une couleur, sélectionnez d'abord son curseur dans la barre de dégradé. Puis, cliquez sur la teinte désirée dans le sélecteur de couleurs ou entrez directement son code hexadécimal ou RGB.
   
   Pour ajouter des variations de couleurs à votre dégradé, cliquez sur la barre pour y insérer des curseurs. Déplacez-les, au besoin, pour modifier l'effet. 
   
   Pour supprimer une couleur, appuyez simplement sur le X situé sous celle-ci. 
   
   

Comment modifier les dimensions ou recadrer votre image

En haut à gauche de l'éditeur, vous trouverez les options d’édition de la zone image. 

Largeur et hauteur

Vous pouvez y entrer les dimensions (en pixels) souhaitées, il s'agit de la taille réelle de votre image. Pour vous assurer de garder les proportions de votre image intactes en modifiant sa largeur ou sa hauteur, verrouillez le cadenas qui est situé entre les deux champs. Notez que si la largeur réelle de votre image est supérieure à celle du bloc image choisi, il n'y a pas de problème, l'éditeur de courriel se chargera de la redimensionner automatiquement pour qu'elle respecte l'espace réservé au bloc image dans votre modèle. 

Appliquer un ratio

Lorsque vous avez plusieurs images de tailles différentes qui s'affichent sur la même ligne ou colonne, cela peut créer un déséquilibre dans le visuel de votre courriel. Pour aller chercher un look plus uniforme, vous pouvez les recadrer en utilisant le même ratio. Cela vous évitera de vous casser la tête et d'avoir à effectuer des calculs pour qu'elles aillent les mêmes proportions. 

Rognage

Cet outil vous permet de recadrer manuellement votre image. À partir des poignées bleues, délimitez la zone que vous souhaitez conserver. Quand vous avez terminé, appuyez sur Appliquer pour confirmer le changement.

Comment sauvegarder son image et ses modifications

Cliquez sur “Sauvegarder” dans le menu en haut à droite de l’éditeur créera un enregistrement de votre image avec ses modifications dans votre dossier d’images dans le sous-dossier nommé “modif”. La copie originale de votre image ne sera pas écrasée. Chaque enregistrement crée une nouvelle image.

Comment utiliser une image modifiée dans un modèle

Après avoir sauvegardé votre image, cliquez sur “Quitter l’éditeur” dans le menu en haut à droite et votre image sera insérée à l’endroit où vous étiez dans votre courriel. 

Peut-on utiliser des raccourcis clavier dans l’éditeur d’images ?

Oui, voici la liste des raccourcis supportés :

• CTRL + c = copier
• CTRL + v = coller
• CTRL + z = annuler la dernière action
• CTRL + y = rétablir la dernière action
• CTRL + g = grouper les éléments sélectionnés
• CTRL + MAJ + g = défaire le groupe sélectionné
• Flèches du clavier = déplacer l’élément sélectionné
• Flèches du clavier + MAJ = déplacer l’élément sélectionné (plus rapide)
• MAJ + déplacer la poignée de rotation de l’élément = effectuer des rotations plus précises de 15 degrés à la fois
• MAJ + déplacer le coin d’un élément = modifier les dimensions d’un élément non proportionnellement
• DELETE ou BACKSPACE = supprimer l’élément sélectionné

Ces raccourcis fonctionnent aussi sur Mac (avec la touche CTRL ou COMMAND).