Ce document présente des conseils et des directives à suivre lors de la personnalisation de l'interface utilisateur Canvas pour un établissement via l'éditeur de thèmes.
Ce document s'adresse aux administrateurs qui souhaitent personnaliser l'interface utilisateur de Canvas à l'aide de l'éditeur de thèmes. Il présente les différentes options de téléchargement de fichiers disponibles dans l'éditeur de thèmes, notamment le logo de l'établissement. Ces instructions indiquent la taille optimale pour chaque image dans l'éditeur de thèmes, et fournissent des informations utiles sur la création d'images, afin que votre installation Canvas puisse être impeccable en un rien de temps.
Si votre établissement a la chance de disposer d'une équipe marketing ou de communication avec un graphiste ou un webdesigner interne, nous vous recommandons vivement de collaborer avec cette personne pour la création de votre identité visuelle sur Canvas. Vous obtiendrez d'excellents résultats et vous aurez moins de travail à fournir ! Un professionnel du design veillera également à ce que vous respectiez scrupuleusement les directives de la marque.
Les fichiers modèles fournis dans ce document ont été créés dans Photoshop.Si vous n'avez pas accès à Photoshop, vous pouvez utiliser n'importe quel logiciel de traitement d'images pour créer vos propres fichiers en fonction des dimensions d'image idéales indiquées à chaque étape.
Graphiques vectoriels vs graphiques bitmap
Avant de pouvoir importer le logo de votre établissement, vous devrez vous procurer une copie haute résolution à utiliser dans l'éditeur de thème. Idéalement, vous devriez utiliser unvecteurimage de logo plutôt qu'unebitmapImage du logo.
- Vecteurles images se terminent généralement par.ai, .eps, ou .svgComme elles sont basées sur des tracés et non sur des pixels, les images vectorielles se redimensionnent avec une netteté impeccable. Vous pouvez les glisser-déposer dans des logiciels de retouche d'images tels qu'Illustrator, Photoshop et Sketch, puis les redimensionner sans perte de netteté. Pour conserver les proportions, ouvrez l'image dans un programme adapté et maintenez la touche Maj enfoncée. Pour être utilisées dans l'éditeur de thèmes, les fichiers vectoriels doivent être enregistrés au format ..svgformat.
- Bitmaples images se terminent généralement par.jpg, .png, ou .gifElles sont composées d'un nombre fixe de pixels. Si vous les redimensionnez (surtout lorsqu'elles sont agrandies), elles finissent souvent par paraître floues.
S’il vous est impossible d’obtenir une version vectorielle du logo de votre institution, essayez simplement d’obtenir la plus grande version bitmap possible ; une largeur supérieure à 1 000 pixels devrait convenir. Le format de fichier bitmap optimal est le PNG (.png), car elles sont conçues pour le web et conservent une qualité optimale. Elles s'adaptent également parfaitement à la taille des fichiers et prennent en charge les fonds transparents.
Téléchargement d'images
Une fois votre image obtenue, vous pouvez télécharger votre fichier dans différentes zones de l'éditeur de thème.
Logo de navigation
| Logo en haut du menu de navigation global (compatible avec les fichiers svg, png et jpg) Taille recommandée :200 x 200 pixels Type de fichier d'exportation recommandé :PNG Conseils pratiques :
- Lors de la création du fichier, veillez à laisser un espace (au moins 10 à 20 pixels) autour du logo. Sinon, il semblera comprimé contre les côtés de la barre de navigation principale.
Télécharger le fichier d'exemple du logo Nav Télécharger le modèle Photoshop du logo Nav |
|---|
Filigrane
| Image de fond claire apparaissant derrière le contenu de la page ; sa taille d'affichage est subjective et dépend de la taille du fichier téléchargé. Taille recommandée :400 x 400 pixels Type de fichier d'exportation recommandé :PNG Conseils pratiques :
- Tout comme un filigrane sur du papier à lettres, notre image en filigrane est conçue pour être unsubtilélément de marque (nous vous recommandons de ne pas trop contraster avec le fond blanc de Canvas) qui est souvent recouvert par d'autres éléments Canvas.
- Le filigrane est entièrement facultatif. N'hésitez pas à ne pas l'utiliser si vous ne disposez pas d'une image appropriée.
Télécharger un exemple de filigrane Télécharger le modèle de filigrane Photoshop |
|---|
Favicon
Icône de l'écran d'accueil mobile
Carré de tuiles Windows
| Image pour la version carrée de la tuile Windows Taille requise :558 x 558 pixels Type de fichier d'exportation recommandé :PNG Conseils pratiques : - Pour une intégration parfaite à l'esthétique de Windows 8, créez votre image entièrement blanche et choisissez une couleur de fond vive conforme à votre charte graphique.
- Windows exige des dimensions exactes pour une image utilisée comme vignette. L'image que vous téléchargez pour une vignette Windows doit respecter les dimensions exactes spécifiées.
Télécharger le fichier d'exemple Windows Tile Square Télécharger le modèle Photoshop Windows Tile Square |
|---|
Fenêtres à carreaux larges
| Image pour la version large de la vignette Windows Taille requise :558 x 270 pixels Type de fichier d'exportation recommandé :PNG Conseils pratiques : - Pour une intégration parfaite à l'esthétique de Windows 8, créez votre image entièrement blanche et choisissez une couleur de fond vive conforme à votre charte graphique.
- Windows exige des dimensions exactes pour une image utilisée comme vignette. L'image que vous téléchargez pour une vignette Windows doit respecter les dimensions exactes spécifiées.
Télécharger le fichier d'exemple Windows Tile Wide Télécharger le modèle Photoshop Windows Tile Wide |
|---|
Logo de la barre latérale droite
Image de fond
| Image pour l'arrière-plan de connexion Taille recommandée :2800 x 2000 pixels Type de fichier d'exportation recommandé :JPG (30 à 40 % de travaux de qualité) Conseils pratiques :
- L'image de fond en plein écran est totalement facultative. Vous pouvez préférer une couleur de fond unie, sans image (et le chargement sera certainement plus rapide).
- Si votre image est plus petite que la taille recommandée, Canvas l'agrandira ; elle risque simplement d'apparaître légèrement pixélisée.
Télécharger un exemple d'image d'arrière-plan Télécharger le modèle Photoshop d'image de fond |
|---|
Logo de connexion
| Logo affiché en haut de la page de connexion Taille recommandée :380 x 150 pixels Type de fichier d'exportation recommandé :PNG (le format SVG peut également être utilisé par les utilisateurs avancés) Conseils pratiques: - Le logo de votre page de connexion sera redimensionné à 190 pixels de large, quelle que soit sa taille.
- La taille idéale reste recommandée pour une résolution d'image optimale sur les écrans Retina et/ou les grands moniteurs. Une taille plus petite peut donner un rendu flou.
Télécharger un exemple de logo de connexion Télécharger le modèle Photoshop de logo de connexion |
|---|
Cette ressource est également accessible depuis les guides Canvas suivants :
