Shapes and Elements

Dans cet article, nous allons explorer toutes les options pour créer et ajouter des Formes et des Éléments dans Designer.

• Ajout de Formes et d'Éléments
• Options des Formes et Éléments
  • Couleurs
  • Arrière-plan
  • Lien
  • Paramètres
  • Effets
  • Animer
  • Position
  • Verrouiller et Copier le Style

Ajouter des formes et des éléments à un design est très simple, mais avec Designer, il existe de nombreuses options pour faire vraiment ressortir vos créations.

Pour en savoir plus sur les éléments de base de Designer, consultez notre guide Démarrer avec Designer.

Ajout de Formes et d'Éléments

L'option Formes vous permet d'ajouter des formes ou des éléments prédéfinis au design.

En choisissant Formes dans le Menu Supérieur, l'onglet Éléments s'ouvrira dans le Menu Latéral :

Ici, vous pouvez choisir entre Formes et Éléments à ajouter au design. Il en existe un grand nombre, alors choisissez ceux qui correspondent à vos besoins.

Cliquer sur une Forme ou un Élément l'ajoutera au design :

Les Formes sont réactives et peuvent être redimensionnées ou pivotées à volonté :

Options des Formes et Éléments

La Forme ou l'Élément lui-même dispose d'un ensemble complet d'options :

• Dupliquer - Crée une copie exacte de la forme ou de l'élément sélectionné
• Supprimer - Supprime la forme ou l'élément sélectionné du design
• Plus
  • Copier - Copie la forme ou l'élément sélectionné pour être collé ultérieurement
  • Copier le Style - Copie le style de la forme ou de l'élément sélectionné pour le transférer à une autre forme ou élément
  • Coller - Colle l'élément du presse-papiers sur la forme ou l'élément sélectionné
  • Dupliquer - Crée une copie exacte de la forme ou de l'élément sélectionné
  • Ajouter un Composant -
  • Supprimer - Supprime la forme ou l'élément sélectionné du design
  • Calque - Options pour modifier le calque de la forme ou de l'élément sélectionné
    • Avancer - Fait monter la forme ou l'élément sélectionné d'un calque
    • Mettre au Premier Plan - Amène la forme ou l'élément sélectionné au calque supérieur
    • Reculer - Fait descendre la forme ou l'élément sélectionné d'un calque
    • Mettre à l'Arrière-Plan - Amène la forme ou l'élément sélectionné au calque inférieur
  • Aligner les Éléments - Options pour modifier l'alignement de la forme ou de l'élément sélectionné
    • Gauche
    • Centre
    • Droite
    • Haut
    • Milieu
    • Bas
  • Lien - Ajouter une URL à la forme ou à l'élément sélectionné.
  • Animer - Ajouter une animation à la forme ou à l'élément sélectionné.

Cliquer sur la Forme ou l'Élément modifiera le Menu Supérieur et s'appliquera directement à la sélection :

Couleurs

En sélectionnant l'option Couleurs, la section Couleurs s'ouvrira dans le Menu Latéral. La sélection de l'une de ces couleurs l'appliquera à la forme ou à l'élément sélectionné :

Ici, choisissez entre des couleurs prédéfinies, des couleurs déjà utilisées dans ce design, ou via l'option Sélecteur de Couleurs.

Sélecteur de Couleurs

1. Sélecteur de Couleur
2. Couleur Actuellement Sélectionnée
3. Curseur de Couleur
4. Curseur d'Opacité/Transparence
5. Champ de Code Couleur
6. Commutateur de Code - Basculer entre les codes couleur hexadécimal, RVB, et HSLA
7. Couleurs Précédemment Utilisées

L'Outil Pipette vous permet de choisir facilement n'importe quelle couleur.

Arrière-plan

En sélectionnant l'option Arrière-plan, la section Arrière-plan s'ouvrira dans le Menu Latéral. La sélection de l'une de ces couleurs les appliquera à l'arrière-plan de votre forme ou élément :

Ici, choisissez entre des couleurs prédéfinies, des couleurs déjà utilisées dans ce design, ou via l'option Sélecteur de Couleurs.

Lien

En sélectionnant l'option Lien, vous pouvez transformer votre forme ou élément en hyperlien. La section Options de Lien s'ouvrira dans le Menu Latéral :

Cliquer sur Ajouter un Lien vous invitera à entrer une URL ou à sélectionner un actif :

Une fois qu'un lien ou un actif a été choisi, plus d'options apparaîtront dans la section Options de Lien :

En développant la section Échelle, cette option apparaîtra pour votre actif :

Ici, choisissez comment l'image sera mise à l'échelle. Il existe trois options :

• Ajuster (par défaut) - Ajuste l'image à l'écran.
• Étirer - Étire l'image pour remplir tout l'écran.
• Zoom - Fait un zoom sur l'image pour remplir tout l'écran. Non recommandé pour les petites images sur de grands écrans, car cela créera du flou.

En développant la section Paramètres, ces options apparaîtront pour votre URL ou Actif :

• Durée (secondes) - Lorsque le lien est cliqué ou touché, combien de temps le lien ou l'actif s'affichera avant de revenir au design principal.
• Précharger - Lorsque cette case est cochée, le site web ou l'image se chargera en même temps que le design. Cela réduit le temps nécessaire pour que le site web s'affiche lorsque le lien est cliqué. Cependant, avoir de nombreux liens nécessitant un chargement peut causer des ralentissements.

En développant la section Style de la Barre de Fermeture et de Navigation, ces options apparaîtront pour votre URL ou Actif :

Cette section concerne le bouton qui apparaîtra sur vos écrans lorsqu'il sera poussé vers eux. Cliquer ou toucher ce bouton vous ramènera au design original.

• Position de l'Icône - Indique où cette icône apparaîtra. Par défaut au Centre Bas, mais peut être placée n'importe où le long du haut ou du bas, ou désactivée entièrement.
• Style de l'Icône - Permet de définir le style de l'icône. Choisissez entre Étiquette, Solide, Rond, ou Par défaut (voir ci-dessus)
• Taille de l'Icône - Permet de modifier la taille de l'icône. Choisissez entre Petit, Moyen, Grand, ou Par défaut (voir ci-dessus)
• Couleur de l'Icône - Changez la couleur HTML hexadécimale de l'icône pour mieux s'adapter à votre design.
• Couleur d'Arrière-plan - Changez la couleur HTML hexadécimale de l'arrière-plan de l'icône pour mieux s'adapter à votre design.
• Opacité - Le curseur vous permet de modifier l'opacité ou la transparence de l'arrière-plan de l'icône.
• Afficher la Barre de Navigation - Lorsque cette case est cochée, ajoute de petites flèches de navigation à l'icône. Permet de naviguer rapidement entre plusieurs liens. Ressemble à ceci :

Paramètres

En sélectionnant le bouton Paramètres, la section Mapping de Données s'ouvrira dans le Menu Latéral :

Cliquer sur Créer un Mapping de Données vous permet de rendre la forme ou l'élément sélectionné dynamique, mappé à l'une de vos Sources de Données existantes. Consultez notre article sur les Sources de Données Dynamiques avec OptiSync pour plus d'informations.

Effets

En sélectionnant l'option Effets, vous pouvez modifier plusieurs aspects différents de votre forme ou élément. La section Effets s'ouvrira dans le Menu Latéral :

Ici, vous avez de nombreuses options. Nous allons les passer en revue une par une.

En développant la section Couleur, vous pouvez ajouter de la couleur à la forme ou à l'élément.

C'est fonctionnellement identique à l'option Couleurs dans le Menu Supérieur des Formes et Éléments. Ici, choisissez entre des couleurs prédéfinies, des couleurs déjà utilisées dans ce design, ou via l'option Sélecteur de Couleurs.

En développant la section Arrière-plan, vous pouvez définir une couleur d'arrière-plan spécifique sur laquelle la Forme ou l'Élément reposera.

Ceci est également fonctionnellement identique à l'option Arrière-plan dans le Menu Supérieur des Formes et Éléments. Ici, choisissez entre des couleurs prédéfinies, des couleurs déjà utilisées dans ce design, ou via l'option Sélecteur de Couleurs :

En développant la section Opacité, vous pouvez faire varier l'opacité de la zone sélectionnée - arrière-plan et forme/élément.

Cela peut être ajusté avec un curseur. Voici une demi-opacité :

En développant la section Contour, vous pouvez ajouter un contour à la forme ou à l'élément, mais pas à l'arrière-plan.

Vous pouvez sélectionner une couleur dans une liste déroulante ou utiliser le code HTML hexadécimal, et utiliser le curseur pour modifier son épaisseur :

En développant la section Ombre, vous pouvez créer une ombre sur votre forme ou élément. Par défaut, tous les curseurs seront blancs.

Appliquer une couleur créera une ombre :

Modifier les curseurs vous permet de changer le flou et de décaler l'ombre le long de l'axe X ou Y.

Avec un arrière-plan transparent, l'ombre s'applique uniquement à la forme ou à l'élément lui-même :

En développant la section Dégradé, plusieurs options de dégradé seront présentées pour votre forme ou élément. Cliquer sur l'une de ces options de Dégradé l'appliquera à votre forme ou élément.

En développant la section Texture, plusieurs options de texture seront présentées pour votre forme ou élément. Cliquer sur l'une de ces options de texture les appliquera à votre forme ou élément.

Animer

Cliquer sur le bouton Animer ouvrira la section Animer du Menu Latéral :

Pour plus d'informations sur les capacités d'Animation de Designer, consultez notre article sur l'Animation.

Position

En sélectionnant le bouton Position, la section Position s'ouvrira dans le Menu Latéral.

• Mettre au Premier Plan - Amène la forme ou l'élément sélectionné au calque supérieur
• Avancer - Fait monter la forme ou l'élément sélectionné d'un calque
• Envoyer à l'Arrière - Amène la forme ou l'élément sélectionné au calque inférieur
• Envoyer vers l'Arrière - Fait descendre la forme ou l'élément sélectionné d'un calque
• Aligner sur la Page - Options pour modifier l'alignement de la forme ou de l'élément sélectionné
  • Gauche
  • Centre
  • Droite
  • Haut
  • Milieu
  • Bas
• Espacer Uniformément - Aligne la forme ou l'élément dans la boîte plus grande
  • Verticalement
  • Horizontalement
• Retourner - Retourne la forme ou l'élément sélectionné
  • Horizontal
  • Vertical
• Position - Permet le placement précis de la forme ou de l'élément dans le design
• Redimensionner - Permet le redimensionnement précis de la forme ou de l'élément sélectionné

Verrouiller et Copier le Style

Appuyer sur le bouton Verrouiller verrouillera la forme ou l'élément sélectionné en place, empêchant toute modification.

C'est utile lorsque vous travaillez avec de nombreux éléments après avoir placé la forme ou l'élément exactement où vous le souhaitez.

Le bouton Copier le Style vous permet d'appliquer rapidement le style de la forme ou de l'élément sélectionné à un autre.

C'est utile pour formater rapidement de nombreux éléments.

C'est tout !

OptiSigns est le leader des logiciels d'affichage dynamique. Si vous avez des questions supplémentaires, des préoccupations ou des commentaires sur OptiSigns, n'hésitez pas à contacter notre équipe de support à support@optisigns.com.