Vos utilisateurs se connectent à l'application sur différents types d'appareils (mobiles, ordinateurs, tablettes...), il n'existe donc pas une taille standard de fond d'écran à intégrer dans l'application.
C'est pourquoi nous avons mis en place un système de composition de fonds d'écran constitué de calques permettant une parfaite adaption à toutes les tailles d'écrans.
Qu'est ce qu'un calque ? Pour simplifier : c'est une image, statique ou animée.
Ce système permet de composer un fond personnalisé avec plusieurs calques qui vont se superposer afin de créer votre nouveau fond optimal !
Vous avez même la possibilité d'y ajouter un fond vidéo !
Processus de création de fonds avec calques
1/ Depuis votre Studio, éditez les fonds calques pour :
- Votre page d'accueil ou Espace de partage, en cliquant sur Application > Design :
l
-
Pour un dossier en cliquant sur Application > Arborescence > L'icone
2/ Cliquez sur "Créer un nouveau fond"
Et par la suite "Ajouter un nouveau calque"
Nota : Cliquez sur "Créer un fond à partir de l'existant" si vous souhaitez conserver le fond actuel.
3/ Les calques se superposent et forment votre nouveau fond
|
📝 L’ordre à son importance !
|
Prévisualisation
Votre fond est aussitôt affiché ! Vous pouvez voir le résultat par type d’appareils en portrait ou en paysage. Vous ajustez et peaufinez dans la foulée vos éléments, c’est un gain de temps considérable !
Position
Sur chaque calque, vous pouvez choisir à quel emplacement sur l'écran l'image doit apparaitre (en bas à gauche ou droite, au milieu etc.):
Redimensionnement
Sur chaque calque, vous pouvez modifier l’apparence de l’image avec les options suivantes :
- Couvrir tout l’écran
L’image de ce calque prendra toute la taille de l’écran.
Si l’image est trop petite elle sera étirée afin de prendre toute la taille de l’écran.
Si l’image est plus grande que l’écran, des parties de l'image seront rognées.
- Contenir dans l’écran
Votre image est entièrement visible sur l'écran, sans être coupée ni déformée.
Si votre image est plus haute que large, en paysage sur votre application deux bandes blanches apparaîtront (à droite et à gauche).
Exemple :
- Largeur (33% / 50% / 66% / 100%)
L’image sera redimensionnée et apparaitra en fonction du % choisi sur la largeur de la taille de l'écran.
Pensez bien à choisir l'emplacement de ce calque sur l'image.
Exemple 33% :
- Hauteur (33% / 50% / 66% / 100%)
L’image est redimensionnée en fonction du pourcentage choisi de la hauteur de la taille de l'écran.
Pensez bien à choisir l'emplacement de ce calque sur l'image.
Exemple 66% : l'image s'affiche au milieu et sur 66% de la hauteur de l'écran
- Hauteur barre de navigation (x2 / x3)
L'image est aussi large que la barre de navigation de l'application.
En choisissant x2 ou x3 l’image sera grossie par rapport à la barre de navigation.
|
Nota : Utile pour insérer un logo ou un titre en haut de votre fond ! Cet élément ne sera jamais masqué par les boutons de la barre de navigation. |
Fonctionnalités additionnelles
- Comment supprimer un calque ? Cliquez sur la croix rouge
- Comment changer un calque tout en gardant les paramètres ? Utilisez le bouton "Remplacer"
Vous pouvez aussi sauvegarder le calque depuis le bouton "Télécharger".
Commentaires
0 commentaire
Vous devez vous connecter pour laisser un commentaire.