Dans cet article, nous verrons comment ajouter et modifier des photos, GIFs et codes QR dans Designer.
Avec Designer, vous pouvez utiliser une large gamme de photos stock, de GIFs provenant de GIPHY et de codes QR personnalisables pour rendre vos designs plus dynamiques.
Pour plus d'informations générales sur l'application Designer, consultez notre guide Commencer avec Designer .
Ces options sont accessibles depuis le menu latéral de Designer :
Photos
En sélectionnant l'option Photos, la section Photos du menu latéral s'affichera :
Ici, vous pouvez rechercher n'importe quelle photo stock que vous souhaitez utiliser. Une fois sélectionnée, elle sera placée dans le design.
Pour modifier la photo, sélectionnez-la. Les options du menu supérieur changeront :
Nous examinerons chacune de ces options tour à tour.
| NOTE |
| Les informations suivantes s'appliquent également aux images ajoutées via l'option Image, téléchargées depuis votre appareil ou en tant qu'élément. |
Arrière-plan
L'option Arrière-plan vous permet de modifier la couche d'arrière-plan de la photo.
Filtre
L'option Filtre ouvre le menu latéral, vous permettant de sélectionner différents filtres à ajouter à votre photo :
Recadrer
L'option Recadrer vous permet de recadrer la photo ou l'image sélectionnée.
La zone de recadrage peut être déplacée, agrandie et rétractée, avec des options de Rapport d'aspect et la possibilité de retourner et de faire pivoter l'image. Un aperçu de l'image recadrée est présent dans le coin supérieur droit de l'écran, et la taille de l'image est indiquée. Enfin, la zone de recadrage peut être changée en Rectangle ou Cercle.
Masque
En cliquant sur l'option Masque, l'option Masque s'ouvrira dans le Menu latéral.
La sélection d'une forme dans le menu Masque appliquera automatiquement un masque de cette forme à l'image. L'image peut toujours être déplacée une fois le masque appliqué.
En cliquant sur Modifier le masque, vous pourrez déplacer le masque lui-même autour de l'image. En cliquant sur Inverser, les zones masquées seront échangées. En cliquant sur Appliquer le masque, le masque sera réappliqué sur l'image.
Remplacer
L'option Remplacer vous permet de remplacer l'image ou la photo par une image de l'appareil actuel. Cette option est accessible via le menu supérieur ou la barre d'actions rapides :
Suppresseur d'arrière-plan
L'option Suppresseur d'arrière-plan détecte et supprime automatiquement les arrière-plans des images. Actuellement, elle ne prend en charge que la suppression automatique et il n'est pas possible d'effacer ou de restaurer l'arrière-plan de manière personnalisée.
Vous devrez attendre la fin du chargement :
Une fois terminé, cliquez sur Enregistrer, et l'arrière-plan aura disparu.
Lien
En sélectionnant l'option Lien, vous pouvez transformer votre photo ou image en élément interactif, principalement utilisé pour les kiosques. Cela ouvrira la section Options de lien dans la barre de navigation latérale :
En cliquant sur Ajouter un lien, vous serez invité à entrer une URL ou à sélectionner un élément :
Une fois qu'un lien ou un élément a été choisi, plus d'options apparaîtront dans la section Options de lien :
En développant la section Échelle, cette option s'affichera pour votre élément :
Ici, choisissez comment l'image sera mise à l'échelle. Il y a trois options :
- Ajuster (par défaut) - Ajuste l'image à l'écran.
- Étirer - Étire l'image pour remplir tout l'écran.
- Zoom - 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.
| NOTE |
| Si une URL est fournie, l'option Échelle n'apparaîtra pas. |
En développant la section Paramètres, ces options s'afficheront pour votre lien :
- Durée (secondes) - Lorsque le lien est cliqué ou touché, combien de temps le lien ou l'élément s'affichera avant de revenir au design principal. Cela commence à partir du dernier toucher sur l'écran ou du moment où le lien a été cliqué.
- Précharger - Lorsque cette case est cochée, le site web 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 à charger peut causer des ralentissements.
En développant la section Style de fermeture et barre de navigation, ces options s'afficheront pour votre lien :
Cette section fait référence au bouton qui apparaîtra sur vos écrans lorsqu'il y sera envoyé. En cliquant ou en touchant ce bouton, vous reviendrez 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 - Vous permet de définir le style de l'icône. Choisissez parmi Étiquette, Solide, Rond ou Par défaut (voir ci-dessus)
- Taille de l'icône - Vous permet de modifier la taille de l'icône. Choisissez parmi Petit, Moyen, Grand ou Par défaut (voir ci-dessus)
- Couleur de l'icône - Modifiez la couleur HTML hexadécimale de l'icône pour mieux s'adapter à votre design.
- Couleur d'arrière-plan - Modifiez 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. Vous permet de naviguer rapidement entre plusieurs liens. Ressemble à ceci :
Paramètres
En sélectionnant le bouton Paramètres, la section Mappage de données s'ouvrira dans le menu latéral :
En cliquant sur Créer un mappage de données, vous pouvez rendre le texte 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 texte. Cela ouvrira la section Effets dans le menu latéral :
Ici, vous avez de nombreuses options. Nous examinerons chacune d'entre elles tour à tour.
| NOTE |
| Beaucoup de ces options sont mieux utilisées avec un arrière-plan transparent, sinon vous ne verrez pas beaucoup de différence. |
En développant la section Couleur, vous pouvez ajouter de la couleur à la photo ou à l'image.
Sélectionnez parmi les couleurs prédéfinies, les couleurs utilisées dans ce design, ou via le 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 photo ou l'image reposera. C'est fonctionnellement identique à l'option Arrière-plan du menu supérieur.
En développant la section Opacité, vous pouvez faire varier l'opacité de la zone sélectionnée - arrière-plan et texte ensemble.
Cela peut être ajusté via le curseur. Ci-dessous est montré une demi-opacité :
En développant la section Contour, vous pouvez ajouter un contour à la photo ou à l'image. Vous pouvez sélectionner une couleur dans un menu déroulant ou utiliser le sélecteur de couleurs, et utiliser le curseur pour modifier son épaisseur.
En développant la section Ombre, vous pouvez créer une ombre sur la photo ou l'image. Par défaut, tous les curseurs seront blancs.
L'application d'une couleur créera une ombre, et le changement des curseurs vous permet de modifier le flou et de décaler l'ombre le long de l'axe X ou Y.
En développant la section Dégradé, plusieurs options de dégradé s'afficheront pour votre texte. En cliquant sur l'une de ces options de dégradé, elle s'appliquera à votre texte.
La section Texture est similaire à celle du Dégradé. Elle présentera plusieurs options de texture pour votre texte. En cliquant sur l'une de ces options de texture, elles s'appliqueront à votre texte.
Animer
En sélectionnant le bouton Animer, vous pourrez ajouter des animations à vos photos ou images. En cliquant dessus, la zone Animer s'ouvrira dans le menu latéral :
Il existe de nombreuses options pour ajouter des animations à votre design. Pour plus d'informations à ce sujet, consultez notre article sur les Animations.
Position
En sélectionnant l'option Position, la section Position du menu latéral s'ouvrira. Cela vous permet de placer précisément la photo ou l'image, ou de modifier sa superposition.
- Mettre au premier plan - Amène la photo ou l'image sélectionnée au niveau supérieur
- Avancer - Amène la photo ou l'image sélectionnée d'un niveau vers le haut
- Mettre à l'arrière-plan - Amène la photo ou l'image sélectionnée au niveau inférieur
- Reculer - Amène la photo ou l'image sélectionnée d'un niveau vers le bas
-
Aligner à la page - Options pour modifier l'alignement de la photo ou de l'image sélectionnée
- Gauche
- Centre
- Droite
- Haut
- Milieu
- Bas
-
Espacer uniformément - Aligne la photo ou l'image dans la sélection plus large
- Verticalement
- Horizontalement
-
Retourner - Retourne la photo ou l'image sélectionnée
- Horizontal
- Vertical
- Position - Permet le placement spécifique de la photo ou de l'image dans le design
- Redimensionner - Permet le redimensionnement précis de l'élément photo ou image sélectionné
- Maintenir le rapport d'aspect - Lorsque coché, maintient le rapport d'aspect lors du redimensionnement
Verrouiller / Copier le style
| NOTE |
| La fonctionnalité "Verrouiller" est disponible uniquement pour les utilisateurs du plan Pro Plus et supérieur. |
En cliquant sur le bouton Verrouiller, la photo ou l'image sélectionnée sera verrouillée en place, empêchant toute modification.
Ceci est utile lorsque vous travaillez avec de nombreux éléments dans un design.
Le bouton Copier le style vous permet d'appliquer rapidement le style de la photo sélectionnée à une autre.
Ceci est utile pour styliser rapidement de nombreuses photos.
GIPHY
L'option GIPHY dans le menu latéral vous permet de choisir parmi une variété de Stickers, GIFs, Emojis et options de texte animé à placer dans votre design.
La fonction Rechercher vous permet de trouver le GIF, Sticker, Emoji ou texte animé que vous souhaitez utiliser depuis GIPHY. Une fois sélectionnés, ils seront placés sur votre design et s'animeront automatiquement :
Ceux-ci peuvent être affinés davantage en utilisant le bouton Position.
En cliquant dessus alors que le GIF est sélectionné, l'onglet Position s'ouvrira dans le menu latéral :
- Mettre au premier plan - Amène le GIF sélectionné au niveau supérieur
- Avancer - Amène le GIF sélectionné d'un niveau vers le haut
- Mettre à l'arrière-plan - Amène le GIF sélectionné au niveau inférieur
- Reculer - Amène le GIF sélectionné d'un niveau vers le bas
-
Aligner à la page - Options pour modifier l'alignement du GIF sélectionné
- Gauche
- Centre
- Droite
- Haut
- Milieu
- Bas
-
Espacer uniformément - Aligne le GIF dans la boîte plus large
- Verticalement
- Horizontalement
-
Retourner - Retourne le GIF sélectionné
- Horizontal
- Vertical
- Position - Permet le placement spécifique du GIF dans le design
- Redimensionner - Permet le redimensionnement précis du GIF
Maintenir le rapport d'aspect - Lorsque coché, maintient automatiquement le rapport d'aspect lors du redimensionnement.
Utiliser comme arrière-plan - Lorsque coché, permet d'utiliser le GIF comme arrière-plan dans le design.
Code QR
L'option Code QR dans le menu latéral vous permet d'ajouter un code QR à n'importe quel design. En appuyant sur Ajouter un code QR, vous obtenez de nombreuses options :
Choisissez :
- URL de site web - Envoie l'utilisateur vers un site web lorsque le code QR est scanné
- E-mail - Envoie un e-mail à une adresse spécifiée lorsque le code QR est scanné.
- Texte - Affiche du texte lorsque l'utilisateur scanne le code QR
- Appeler - Effectue un appel téléphonique lorsque l'utilisateur scanne le code QR
- SMS - Envoie un SMS à un numéro spécifique lorsque le code QR est scanné
- App Store - Envoie l'utilisateur vers l'Apple Store ou le Google Play Store lorsque le code QR est scanné.
- Facebook - Envoie l'utilisateur vers une page Facebook lorsque le code QR est scanné.
- Instagram - Envoie l'utilisateur vers une page Instagram lorsque le code QR est scanné.
- X - Envoie l'utilisateur vers un profil X lorsque le code QR est scanné.
- WiFi - Donne à l'utilisateur accès à un réseau WiFi lorsque le code QR est scanné.
- WhatsApp - Envoie un message sur WhatsApp lorsque le code QR est scanné.
- Élément - Choisissez un élément OptiSigns que l'utilisateur verra lorsque le code QR est scanné.
En cliquant sur Mettre à jour le code QR, vous pouvez modifier le type de code QR ou mettre à jour toute information.
Enfin, de nombreux codes QR peuvent être ajoutés au design si désiré.
C'est tout !
OptiSigns est le leader en logiciel d'affichage numérique. 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.