Format, style et couleur généraux

Une fois que les éléments de design – pochoirs, modèles, images et icônes – sont ajoutés à la page, ils sont appelés des Objets.

Tous les objets – Pochoirs, Icônes et Images – peuvent être stylisés et personnalisés dans le Panneau de format – et ils partagent bon nombre des mêmes contrôles de formatage.

Les images disposent également d'outils d'édition supplémentaires comme le recadrage, la suppression d'arrière-plan et le retouche, que vous pouvez lire dans Formater, modifier et remplacer des images.

Dans cet article, nous vous présenterons le Panneau de format et vous montrerons comment personnaliser des pochoirs en utilisant les contrôles de formatage général qui s'appliquent à tous les objets. Nous vous montrerons également comment enregistrer un style personnalisé pour un pochoir particulier.

Certains pochoirs ont leurs propres contrôles de formatage supplémentaires spécifiques à leur utilisation : Notes et Annotations, Formes Intelligentes, Graphiques, Tableaux et tous les pochoirs Diagramme et Texte. Nous couvrirons chacun de ces cas spécifiques dans les articles suivants de cette section.

Panneau de format

Accédez à la Barre latérale droite et cliquez sur l'Onglet Format. L'onglet deviendra bleu, et ouvrira le Panneau de format. Le Panneau de format s'ouvre également automatiquement lorsque vous double-cliquez sur un pochoir non textuel (tandis que double-cliquer sur un pochoir textuel ouvrira la Fenêtre de formatage rapide du texte).

Le Panneau de format est divisé en Sections avec des contrôles de formatage spécifiques. Les sections sont réductibles, donc cliquer sur le nom d'une section masquera ou révélera cette section.

Le panneau affichera toujours les sections par défaut communes à tous les pochoirs : Taille et position, Remplissages et traits, Opacité, Ombre portée et Flou.

Si un pochoir dispose de capacités de style supplémentaires spécifiques à son utilisation, le panneau affichera une section dédiée avec ces options. Nous couvrons chacun de ces cas dans les articles suivants.

Sélectionner, dimensionner, positionner, faire pivoter et retourner

Lorsque vous sélectionnez un seul objet, le nom de cet objet est affiché en haut du panneau, juste au-dessus de ses coordonnées. Cela facilite la localisation et l'identification de cet objet dans le Panneau de contour.

Lorsque vous sélectionnez plusieurs objets, le panneau affiche le nombre d'objets dans ce groupe, afin de vous aider à confirmer votre sélection avant d'appliquer des changements de style ou des transformations.

Les contrôles de Taille, Position, Rotation et Retournement sont regroupés sous les coordonnées, et chacune de ces actions peut être effectuée à la fois dans le panneau ou sur la page.

Taille

Sur la page, utilisez les poignées de redimensionnement pour modifier la taille de l'objet.

Dans le Panneau de format, utilisez les champs Largeur et Hauteur pour des valeurs précises et un réglage fin, et utilisez les touches fléchées du clavier si vous souhaitez modifier ces valeurs de manière incrémentielle.

Verrouillez les proportions d'un objet avec le bouton Verrouiller le format. Une fois qu'un objet est verrouillé, vous devrez déverrouiller le format si vous souhaitez le redimensionner sur l'axe horizontal ou vertical.

Position

Sur la page, sélectionnez un objet et faites-le glisser vers la position souhaitée.

Dans le Panneau de format, définissez la position de l'objet en entrant les coordonnées exactes dans les champs de saisie. La position de votre objet est mesurée en distance en pixels par rapport aux marges gauche et supérieure. Vous pouvez utiliser les touches fléchées de votre clavier pour modifier ces valeurs de manière incrémentielle.

Rotation

Sur la page, cliquez sur la poignée de rotation en haut de l'objet et faites glisser pour faire pivoter.

Dans le Panneau de format, entrez la valeur en degrés dans le Champ de saisie Rotation. Vous pouvez modifier la valeur à l'aide des touches fléchées du clavier.

Double-cliquer sur la poignée de rotation réinitialise rapidement l'angle de rotation à « 0 ».

Retournement

Vous pouvez retourner un objet horizontalement et verticalement.

Sur la page, sélectionnez une Poignée de redimensionnement et faites-la glisser au-delà de la ligne centrale de cet objet pour redimensionner et retourner simultanément.

Dans le Panneau de format, les Boutons de retournement vertical et horizontal retournent l'objet tout en maintenant sa taille et son format.

Transformation en masse

L'outil Transformation en masse vous permet de formater plusieurs objets simultanément. Cette fonctionnalité est activée par défaut et basée sur l'utilisateur (c'est-à-dire que lorsque vous l'activez ou la désactivez, cette préférence est appliquée à tous vos projets).

Une fois que vous avez sélectionné les objets que vous souhaitez transformer, vous pouvez appliquer le même dimensionnement (largeur et/ou hauteur) ou les mêmes coordonnées X ou Y. Vous pouvez également effectuer une rotation en masse ou les retourner, horizontalement ou verticalement.

Cela aide à garder les choses bien organisées – que vous travailliez sur des maquettes fonctionnelles, des diagrammes ou des tableaux blancs. Un dimensionnement et un positionnement cohérents rendent n'importe quelle mise en page plus facile à lire en un coup d'œil.

Pour utiliser l'outil Transformation en masse :

1. Vérifiez le Panneau de format et assurez-vous que le bouton Transformation en masse est activé.
2. Sélectionnez plusieurs objets en faisant glisser la souris sur des éléments ou en utilisant Shift + Clic pour les sélectionner individuellement
3. Entrez de nouvelles dimensions dans les champs Largeur/Hauteur, ou de nouvelles coordonnées dans les champs X/Y.
4. Si vous souhaitez désactiver la fonctionnalité de transformation en masse, cliquez simplement à nouveau sur le bouton.

Vous pouvez également appliquer la taille ou les coordonnées d'un objet au reste des objets dans la sélection :

1. Cliquez sur n'importe quel objet dans une sélection pour le désigner comme objet de référence.
2. L'objet de référence sera mis en surbrillance avec un cadre bleu épais.
3. Les dimensions et coordonnées de l'objet de référence s'afficheront en gris clair dans les champs de saisie.
4. Pour appliquer l'une de ces valeurs à chaque objet de la sélection, il vous suffit de saisir ces mêmes chiffres par-dessus les gris, et d'appuyer sur la touche Entrée/Retour.

Remplissages et traits de couleur, et dégradés

Vous pouvez appliquer des changements de couleur aux Remplissages et Traits des objets en utilisant le Sélecteur de couleur dans la section Remplissages et traits du Panneau de format. Au fur et à mesure que vous ajoutez des couleurs, la liste des couleurs du projet en bas du sélecteur regroupera ces nuanciers.

Remplissages

Pour remplir un objet avec une couleur, accédez à la section Remplissages et traits et cliquez sur Couleur de remplissage pour ouvrir le Sélecteur de couleur.

Le Champ de saisie de couleur accepte les formats de couleur suivants : HEX à 8, 6 et 3 chiffres, RGB, RGBA, HSL, HSLA, LAB, LCH, ainsi que les couleurs nommées HTML (c'est-à-dire red, green, blue, tomato, etc.).

• Sélectionnez l'Onglet Nuanciers pour choisir un jeu de couleurs parmi Moqups Classic, Material Design, Bootstrap, iOS, HTML, TailwindCSS ou IBM Carbon Design. Cet onglet affiche également les couleurs que vous avez déjà utilisées dans votre projet.

  ou

• Sélectionnez l'Onglet Sélecteur pour créer vos propres couleurs personnalisées.

Dans les deux onglets, vous pouvez…

1. Entrer un code de format de couleur
2. Ajuster l'opacité de la couleur de remplissage
3. Utiliser la pipette pour correspondre à une couleur ; pour activer la pipette, utilisez notre extension Chrome ou Firefox.

Traits

Le Trait désigne la ligne de l'objet lui-même.

Pour ajuster la couleur du trait, accédez au Panneau de format, et dans la section Remplissages et traits, cliquez sur Couleur de trait. Ici, vous pouvez également définir l'opacité du trait.

Sous les paramètres de couleur, vous pouvez choisir la Largeur du trait et définir le Style du trait sur Uni, En pointillés ou Tirets.

Dégradés

Les Dégradés créent des fondus de couleurs progressifs entre deux couleurs ou plus. Ils peuvent être appliqués aux Remplissages et aux Traits.

Pour appliquer un dégradé…

1. Cliquez sur la Couleur de remplissage ou la Couleur de trait
2. En haut du Sélecteur de couleur, vous pouvez choisir parmi trois Types de remplissage : Uni, Dégradé linéaire et Dégradé radial.
3. Pour les dégradés, sélectionnez Linéaire ou Radial.
4. Le Curseur de dégradé comporte deux Points d'arrêt par défaut qui peuvent être déplacés pour ajuster le point de départ et d'arrivée du dégradé.
5. Cliquez sur un Point d'arrêt pour appliquer une couleur depuis le Champ de couleur. Le Point d'arrêt restera bleu tant qu'il est actif. Vous pouvez effectuer d'autres ajustements de couleur ci-dessous en utilisant les curseurs Teinte ou Opacité, ou en sélectionnant parmi une gamme de nuanciers dérivés de la couleur actuellement active.
6. Pour ajouter d'autres points d'arrêt, survolez n'importe quel endroit du Curseur de dégradé jusqu'à voir l'icône '+' ; cliquez sur le curseur pour ajouter un nouveau point d'arrêt.
7. Pour supprimer un point d'arrêt, faites-le glisser vers le bas jusqu'à ce qu'il disparaisse.
8. Utilisez l'icône Retournement à droite du Curseur de dégradé pour inverser l'ordre des couleurs.

Les contrôles dans le coin supérieur gauche vous permettent d'ajuster l'Angle du dégradé (pour Linéaire) ou le Centre (pour Radial). Pour encore plus de précision, vous pouvez définir l'Angle linéaire en degrés, ou le Centre radial par coordonnées X/Y dans les champs de saisie correspondants.

Le dégradé Radial dispose également d'une option Étirement qui étend le dégradé radial jusqu'aux marges de l'objet.

Remplacer les couleurs

Cette fonctionnalité permet de mettre rapidement à jour votre palette de couleurs au fur et à mesure que vous passez des maquettes fonctionnelles basse fidélité aux maquettes haute fidélité – et enfin aux designs et prototypes raffinés.

Vous pouvez choisir de remplacer une couleur dans un Projet entier, sur la Page actuelle, ou dans une Sélection spécifique d'objets.

Pour remplacer une couleur dans le Projet entier ou sur votre Page actuelle :

1. Désélectionnez tous les objets sur la page

2. Développez la section Remplacer les couleurs dans le Panneau de format

3. Sélectionnez Page actuelle ou Projet entier

4. Cochez les cases pour choisir Remplissages, Traits ou Couleur de texte

5. Cliquez sur la couleur du projet que vous souhaitez remplacer

6. Sélectionnez la couleur de remplacement parmi

   • Les couleurs du projet
   • Les nuanciers
   • Le sélecteur
   • En entrant un code hexadécimal

Pour remplacer une couleur dans une Sélection d'objets :

1. Sélectionnez un ou plusieurs objets

2. Développez la section Remplacer les couleurs dans le Panneau de format

3. Sélectionnez Page actuelle ou Projet entier

4. Cochez les cases pour choisir Remplissages, Traits ou Couleur de texte

5. Cliquez sur la couleur du projet que vous souhaitez remplacer

6. Sélectionnez la couleur de remplacement parmi

   • Les couleurs du projet
   • Les nuanciers
   • Le sélecteur
   • En entrant un code hexadécimal

Opacité, ombres et flou

Opacité

Le curseur d'Opacité ajuste l'opacité globale d'un objet entier, ou d'un groupe d'objets. Si vous souhaitez personnaliser l'opacité plus précisément, vous pouvez également ajuster l'opacité du Trait (voir ci-dessus), en combinaison avec l'Opacité globale, pour un résultat visuel combiné.

Ombre

Pour ajouter une Ombre à un objet, accédez au Panneau de format et ouvrez la section Ombre portée.

Activez l'ombre pour définir la couleur, l'opacité, l'angle, la distance et la taille de l'ombre.

Flou

Pour ajouter un Flou à un objet, accédez au Panneau de format, ouvrez la section Flou et activez le curseur Flou. La fonctionnalité Flou est particulièrement utile lors de la création de maquettes de fenêtres contextuelles ou modales.

Coins arrondis

Vous pouvez arrondir les coins d'un objet à la fois depuis le Panneau de format, dans la section Coins arrondis, et directement sur la page, en utilisant les poignées personnalisées de l'objet.

Pour arrondir les coins depuis le Panneau de format :

• Utilisez la section Coins arrondis et entrez des valeurs dans les champs de saisie. Par défaut, les quatre champs de saisie sont synchronisés. Entrer une valeur dans un champ propagera cette valeur aux autres coins.
• Pour entrer des valeurs différentes pour chaque coin, désélectionnez l'icône Synchroniser tous les coins située entre les quatre champs de saisie.
• Activez Mise à l'échelle des rayons si vous souhaitez que les coins arrondis s'adaptent proportionnellement lorsque vous redimensionnez un objet.

Pour arrondir les coins directement sur la Page :

• Pour arrondir tous les coins simultanément, faites glisser l'une des poignées personnalisées bleu clair vers le centre de l'objet.
• Pour arrondir un coin spécifique (pochoir Rectangle uniquement), maintenez Option/Alt et faites glisser la poignée correspondante vers le centre.

Copier et coller des styles

Une fois que vous avez personnalisé un objet, vous pouvez appliquer cette personnalisation à un autre objet ou groupe d'objets.

Pour copier et coller des styles :

1. Sélectionnez l'objet dont vous souhaitez copier les styles
2. Faites un clic droit et choisissez Copier les styles ou appuyez sur Alt/Option + C
3. Sélectionnez l'objet sur lequel vous souhaitez appliquer ces styles
4. Faites un clic droit et choisissez Coller des styles ou appuyez sur Alt/Option + V

Copier des propriétés

Si vous souhaitez copier des aspects spécifiques du formatage d'un objet, vous pouvez utiliser l'outil Copier les propriétés.

Pour chacune des sections de style dans le Panneau de format, vous trouverez un bouton dans le coin supérieur droit qui copie les paramètres pour cette option de formatage particulière (c'est-à-dire Texte, Opacité, Remplissage, Ombre portée, etc.).

Pour copier les propriétés d'un objet :

1. Sélectionnez l'objet dont vous souhaitez copier les propriétés
2. Ouvrez le Panneau de format et trouvez la section de formatage que vous souhaitez copier
3. Cliquez sur le bouton Copier les propriétés
4. Sélectionnez l'objet sur lequel vous souhaitez appliquer ces styles
5. Faites un clic droit et choisissez Coller des styles ou appuyez sur Alt/Option + V

Enregistrer des styles personnalisés pour les pochoirs

Lorsque vous enregistrez un style personnalisé pour un pochoir, chaque fois que vous ajoutez un type de pochoir particulier à la page, cet objet adoptera votre style personnalisé.

Pour enregistrer un style personnalisé pour un type de pochoir :

1. Stylisez un objet pochoir sur la page en utilisant le Panneau de format
2. Sélectionnez cet objet
3. Faites un clic droit pour ouvrir le Menu contextuel
4. Choisissez Enregistrer le style personnalisé pour ce type de pochoir
5. Tous les objets suivants de ce type refléteront désormais ce style

Pour supprimer un style personnalisé d'un type de pochoir :

1. Sélectionnez l'objet pochoir sur la page
2. Faites un clic droit pour ouvrir le Menu contextuel
3. Choisissez Supprimer le style personnalisé pour ce type de pochoir

Pour supprimer les styles personnalisés de tous vos types de pochoirs :

1. Sélectionnez l'objet pochoir sur la page
2. Faites un clic droit pour ouvrir le Menu contextuel
3. Choisissez Supprimer tous les styles enregistrés

Questions et réponses

Comment puis-je voir des exemples de pochoirs déjà formatés – sur une page ou dans un projet ?

Notre site web dispose d'une section entière dédiée aux Modèles prêts à l'emploi. Vous y trouverez des exemples et des cas d'utilisation conçus professionnellement dans quatre catégories : Maquettes fonctionnelles, Cartographie et Diagrammes, Graphiques et Infographies, et Planification et Idéation. Cliquer sur l'un de ces modèles les ouvrira dans l'application Moqups et vous permettra d'expérimenter, de personnaliser et de les enregistrer.