Skip to content

Arrière-plans, motifs et dégradés

Lorsque rien n'est sélectionné, le panneau Background définit le fond de l'élément en cours. La même zone construit des superpositions décoratives et un dégradé multi-arrêts que vous pouvez appliquer à un arrière-plan ou au remplissage de n'importe quel objet.

Vue d'ensemble

  1. Désélectionnez tout, puis ouvrez l'onglet Background (Alt+3), ou la section Background du panneau des propriétés.
  2. Choisissez solid, gradient ou image pour le fond de la page.
  3. Ouvrez Patterns (Alt+7) pour poser un motif géométrique, de texte, d'icône ou d'image sur le canevas.
  4. Ouvrez la carte Gradient, ou l'onglet dégradé d'un échantillon de remplissage, pour construire un dégradé multi-arrêts destiné à un arrière-plan ou à un objet.
  5. Ajustez les commandes propres à chaque fonction (couleur, opacité, espacement) jusqu'à obtenir le bon rendu.

Référence détaillée

Arrière-plan de page

ModeNotes
SolidUne seule couleur unie
GradientLe même éditeur de dégradé multi-arrêts que pour les remplissages d'objet, voir plus bas
ImageImportez ou choisissez depuis votre bibliothèque, avec un mode d'ajustement et, pour les ajustements recadrés, un point d'ancrage

Modes d'ajustement pour un arrière-plan en image :

ModeComportement
FillMet l'image à l'échelle pour couvrir le canevas, en rognant le débordement
FitMet l'image à l'échelle pour l'insérer entièrement dans le canevas, sans rognage
CropRemplit le canevas depuis un point d'ancrage choisi : haut-gauche, haut-centre, haut-droite, centre, bas-gauche, bas-centre ou bas-droite
TileRépète l'image à sa taille native

Les arrière-plans en image proposent aussi des curseurs de luminosité, de contraste et de saturation, une valeur de flou, un préréglage niveaux de gris, sépia ou inversion, ainsi qu'une superposition de couleur avec sa propre opacité.

Motifs géométriques

Douze motifs en mosaïque se superposent au canevas comme un calque décoratif :

Motifs
Lignes diagonales, grille, points, losanges, vagues, étoiles, hachures croisées, damier, triangles, hexagones, cercles, demi-fondu
CommandePlageDéfaut
CouleurToute couleurBlanc
Opacité5-100 %30 %
Espacement0.5x-5x1x
Flou0-20 px0

Un motif géométrique est ajouté comme une unique superposition verrouillée qui remplit la page derrière votre contenu. Cliquer sur une autre carte de motif remplace la superposition en cours au lieu d'en empiler une seconde, et les commandes de couleur, d'opacité et d'espacement recomposent la mosaïque en direct à mesure que vous les déplacez.

Superpositions en mosaïque

Au-delà des 12 motifs géométriques, la section Patterns peut aussi disposer du texte, des icônes ou des images en mosaïque comme superposition répétée :

TypeCe qui est répétéCommandes supplémentaires
Motif de texteUn mot ou une phrase répétés, dans n'importe quelle policeLignes, colonnes, écart, angle, espacement des lettres
Motif d'icônesJusqu'à 8 icônes de la bibliothèque, en mode simple, double ou mixteRotation, flou et échelle par icône
Motif d'imagesJusqu'à 8 images importées ou de la bibliothèqueRotation, flou, échelle et décalage de position aléatoires pour un rendu éparpillé

Les trois partagent la couleur (le cas échéant), l'opacité, le nombre de lignes et de colonnes, l'écart et l'angle de rotation, et chacun s'insère comme un seul objet groupé que vous pouvez retirer et réappliquer. Chaque type possède aussi son propre bouton Remove, et une nouvelle application reconstruit le groupe à partir des réglages actuels.

Grille

Une carte Grid distincte construit une grille de cellules d'espace réservé, utile comme point de départ pour une mise en page de collage plutôt que comme texture :

CommandePlageDéfaut
Colonnes1-123
Lignes1-122
Écart0-40 px4 px
Rayon de bordure0-50 px0
Opacité des cellules0-100 %100 %

Six préréglages rapides couvrent les mises en page courantes, du 2x1 jusqu'au 4x4.

Dégradés

Un seul éditeur de dégradé multi-arrêts est partagé par les arrière-plans de page et le remplissage de n'importe quel objet :

CommandeOptions
TypeLinéaire, radial, angulaire, losange
Arrêts2 ou plus, chacun avec sa propre position, couleur et opacité ; faites-les glisser sur la piste, ou ajoutez et retirez des arrêts
FlipInverse l'ordre des arrêts
RotateFait pivoter le dégradé de 90 degrés à la fois
PréréglagesUn jeu soigné de paires et trios de couleurs prêts à l'emploi
PipettePrélève une couleur n'importe où à l'écran, là où le navigateur le permet

Ouvrez l'éditeur de dégradé depuis l'onglet dégradé d'un échantillon de remplissage lorsqu'un objet est sélectionné, ou depuis la carte Gradient du panneau Background lorsque rien n'est sélectionné. La carte Gradient du panneau Background est une commande légère : elle affiche un aperçu en direct ainsi que les boutons Apply et Remove, et reflète le dégradé chargé dans le sélecteur de couleur du panneau de droite.

Étape par étape

Un arrière-plan d'affiche en dégradé

  1. Cliquez sur une zone vide du canevas pour tout désélectionner, puis ouvrez l'onglet Background (Alt+3).
  2. Ouvrez la carte Gradient. Elle affiche un aperçu en direct aux côtés d'un bouton Apply et d'un bouton Remove.
  3. Construisez le dégradé dans l'onglet dégradé du sélecteur de couleur du panneau de droite : définissez le type (linéaire, radial, angulaire ou losange), faites glisser les arrêts sur la piste et donnez à chaque arrêt sa propre couleur et opacité. Utilisez Rotate pour faire pivoter un dégradé linéaire, ou Flip pour inverser l'ordre des arrêts.
  4. De retour dans la carte Gradient, cliquez sur Apply. Le dégradé remplit l'arrière-plan de la page et l'aperçu de la carte se met à jour pour correspondre.
  5. Pour revenir en arrière, cliquez sur Remove (le X à côté d'Apply). L'arrière-plan revient à la dernière couleur unie.

Un motif discret derrière du texte

  1. Rien n'étant sélectionné, ouvrez Patterns (Alt+7).
  2. Cliquez sur une carte de motif comme Dots ou Grid. Elle se répète en mosaïque sur toute la page comme une superposition verrouillée placée derrière votre contenu.
  3. Réglez Color proche de la couleur d'arrière-plan pour que la texture reste discrète.
  4. Baissez Opacity à environ 10-20 % pour que le texte et les photos restent lisibles.
  5. Utilisez Spacing (0.5x à 5x) pour resserrer ou desserrer la mosaïque. Cliquer sur une autre carte de motif remplace la superposition en cours au lieu d'en empiler une seconde.

Un filigrane de texte répété

  1. Ouvrez l'onglet Background (Alt+3) et repérez les commandes Text pattern.
  2. Saisissez le mot ou la phrase (la valeur par défaut est BRAND), puis choisissez une font, une size et un weight.
  3. Définissez les rows et les columns de la grille, un gap et un angle (l'inclinaison par défaut est de -45 degrés pour un filigrane en diagonale).
  4. Réglez la color et abaissez fortement l'opacity (la valeur par défaut est 20 %).
  5. Cliquez sur Apply. Le filigrane s'insère comme un seul groupe sélectionnable que vous pouvez déplacer ou supprimer, et Remove l'efface.

Une mosaïque d'images éparpillée

  1. Dans l'onglet Background, ouvrez les commandes Image pattern.
  2. Ajoutez jusqu'à 8 images depuis l'onglet Gallery, ou faites glisser des fichiers sur l'onglet Upload.
  3. Définissez la size de la tuile, les rows, les columns et le gap.
  4. Activez Randomize pour éparpiller les tuiles : cela ajoute une rotation aléatoire (plus ou moins une plage choisie), un flou aléatoire, une réduction d'échelle aléatoire jusqu'à 0.5x et un décalage de position, pour que les images ne s'alignent pas sur une grille rigide.
  5. Cliquez sur Apply pour déposer le motif comme un seul groupe. Remove l'efface.

Tâches courantes

ObjectifComment
Couleur de page unieDésélectionnez, ouvrez Background, choisissez une couleur unie
Remplissage en dégradé sur un objetSélectionnez l'objet, ouvrez l'onglet dégradé de son échantillon de remplissage, construisez-y le dégradé
Réutiliser un dégradé comme arrière-plan de pageConstruisez-le dans le sélecteur de couleur, puis Background > carte Gradient > Apply
Texture de marque discrètePatterns, faible opacité, une couleur proche de l'arrière-plan, espacement plus large
Filigrane en diagonaleMotif de texte avec un angle d'inclinaison et une faible opacité
Grille de départ pour un collage photoCarte Grid, réglez colonnes et lignes, puis déposez des images dans les cellules

Dépannage

Le dégradé présente des bandes

Un dégradé large à deux arrêts sur une grande surface peut faire apparaître des paliers visibles entre les couleurs. Ajoutez un arrêt intermédiaire, ou rapprochez les deux couleurs d'extrémité en teinte, pour lisser la transition.

Un motif rend un petit design chargé

Une tuile qui fonctionne bien en pleine taille peut se transformer en bruit une fois le design réduit. Augmentez l'Spacing pour que le motif soit plus grand et plus clairsemé, baissez l'opacité, ou choisissez un motif plus simple (points ou lignes diagonales plutôt qu'étoiles ou hexagones).

Le motif s'est estompé quand j'ai augmenté le flou

La commande de flou du motif géométrique adoucit la superposition en réduisant progressivement son opacité à mesure que la valeur monte, et non en ajoutant un vrai flou. Si le motif disparaît, baissez le flou et utilisez plutôt directement le curseur d'opacité.

Appliquez le dégradé après l'avoir modifié

La carte Gradient reflète le dégradé actuellement chargé dans le sélecteur de couleur du panneau de droite. Si une modification ne s'affiche pas sur la page, cliquez de nouveau sur Apply pour pousser les derniers arrêts vers l'arrière-plan.

Raccourcis clavier

RaccourciAction
Alt+3Ouvre le panneau Background
Alt+7Ouvre le panneau Patterns

Astuces

Gardez l'opacité des motifs basse

Les motifs se placent au-dessus de l'arrière-plan mais derrière votre contenu. Une faible opacité et une couleur proche de l'arrière-plan les empêchent de rivaliser avec le texte et les photos.

Partez d'un préréglage pour un dégradé

Choisissez un préréglage, puis remplacez ses couleurs d'arrêt par les vôtres. C'est plus rapide que de construire un dégradé arrêt par arrêt, et la direction ainsi que le nombre d'arrêts sont déjà pertinents.

Voir aussi

  • Formes pour les remplissages uni et en dégradé sur des objets individuels
  • Icônes pour le jeu d'icônes utilisé par les motifs d'icônes
  • Panneau des propriétés pour le remplissage d'objet et la section Background de la page
  • Pages puisque chaque page conserve son propre arrière-plan