Questo documento illustra suggerimenti e linee guida da seguire quando si crea un marchio per l'interfaccia utente di Canvas per un istituto tramite l'editor di temi.
Questo documento è destinato agli amministratori che devono personalizzare l'interfaccia utente di Canvas utilizzando l'Editor dei Temi e illustra i vari caricamenti di file disponibili nell'Editor dei Temi utilizzando il logo di un istituto. Queste linee guida illustreranno le dimensioni ottimali per ogni immagine nell'Editor dei Temi, insieme ad alcuni utili dettagli sulla creazione delle immagini, in modo da ottenere un'installazione Canvas impeccabile in pochissimo tempo.
Se il tuo istituto ha la fortuna di avere un team di marketing o branding con un grafico o un web designer interno, ti consigliamo vivamente di collaborare con quella persona per il branding su Canvas. Otterrai ottimi risultati e dovrai lavorare meno: evviva! Un professionista del design ti assicurerà anche di non violare alcuna linea guida del brand.
I file modello forniti in questo documento sono stati creati in PhotoshopSe non hai accesso a Photoshop, puoi utilizzare qualsiasi programma software per creare immagini personalizzate in base alle dimensioni ideali delle immagini incluse in ogni passaggio.
Grafica vettoriale vs bitmap
Prima di poter caricare il logo della tua istituzione, dovrai procurarti una copia ad alta risoluzione da utilizzare nell'editor dei temi. Idealmente, dovresti utilizzare unvettoreimmagine del logo piuttosto che unmappa di bitimmagine del logo.
- Vettorele immagini di solito terminano in.ai,.eps, O .svgPoiché si basano su tracciati, non su pixel, le immagini vettoriali si ridimensionano in modo nitido a qualsiasi dimensione. Le immagini vettoriali possono essere trascinate o incollate in software di editing di immagini come Illustrator, Photoshop e Sketch. Possono quindi essere ridimensionate senza perdita di nitidezza. Per mantenere le proporzioni, apri l'immagine in un programma appropriato e tieni premuto il tasto Maiusc. Per l'utilizzo nell'Editor dei Temi, i file vettoriali devono essere salvati in formato.svgformato.
- Bitmaple immagini di solito terminano in.jpg,.png, O .gifSono composti da un numero fisso di pixel. Se li si ridimensiona (soprattutto se ingranditi), spesso finiscono per apparire sfocati.
Se non riesci a ottenere una versione vettoriale del logo della tua istituzione, prova a ottenere la versione bitmap più grande possibile: qualsiasi formato largo più di 1.000 pixel dovrebbe andare bene. Il tipo di file bitmap più ottimale è un file PNG (.png), poiché sono progettati per il web e mantengono la migliore qualità. Inoltre, si ridimensionano bene e supportano gli sfondi trasparenti.
Caricamento delle immagini
Una volta ottenuta l'immagine, puoi caricare il file in varie aree dell'editor dei temi.
Logo di navigazione
| Logo nella parte superiore del menu di navigazione globale (supporta file svg, png e jpg) Dimensioni consigliate:200 x 200 pixel Tipo di esportazione file consigliato:PNG Consigli utili:
- Quando crei il file, lascia un po' di spazio libero (almeno 10-20 px) attorno all'immagine del logo. Altrimenti, sembrerà schiacciato contro i lati della barra di navigazione principale.
Scarica il file di esempio del logo Nav Scarica il modello Photoshop del logo Nav |
|---|
Filigrana
| Immagine di sfondo chiara che appare dietro il contenuto della pagina; la dimensione di visualizzazione è soggettiva e si basa sulla dimensione del file caricato Dimensioni consigliate:400 x 400 pixel Tipo di esportazione file consigliato:PNG Consigli utili:
- Proprio come una filigrana sulla carta da lettere, la nostra immagine della filigrana è pensata per essere unimpercettibileelemento di branding (consigliamo che l'immagine non contrasti troppo con lo sfondo bianco di Canvas) che spesso è coperto da altri elementi di Canvas.
- La filigrana è completamente facoltativa. Non sentirti obbligato a usarla se non hai accesso a un'immagine adatta.
Scarica il file di esempio della filigrana Scarica il modello Photoshop per filigrana |
|---|
Favicon
Icona della schermata iniziale del dispositivo mobile
Piastrelle di Windows quadrate
| Immagine per la versione quadrata del riquadro di Windows Dimensioni richieste:558 x 558 pixel Tipo di esportazione file consigliato:PNG Suggerimenti utili: - Per adattarti davvero all'aspetto di Windows 8, crea la tua immagine completamente bianca e scegli un colore di sfondo vivace dalle linee guida del tuo marchio.
- Windows richiede le dimensioni esatte per un'immagine utilizzata come riquadro di Windows. L'immagine caricata per un riquadro di Windows deve rispettare esattamente le dimensioni specificate.
Scarica il file di esempio di Windows Tile Square Scarica il modello Windows Tile Square Photoshop |
|---|
Finestre a mosaico larghe
| Immagine per la versione ampia del riquadro di Windows Dimensioni richieste:558 x 270 pixel Tipo di esportazione file consigliato:PNG Suggerimenti utili: - Per adattarti davvero all'aspetto di Windows 8, crea la tua immagine completamente bianca e scegli un colore di sfondo vivace dalle linee guida del tuo marchio.
- Windows richiede le dimensioni esatte per un'immagine utilizzata come riquadro di Windows. L'immagine caricata per un riquadro di Windows deve rispettare esattamente le dimensioni specificate.
Scarica il file di esempio di Windows Tile Wide Scarica il modello Windows Tile Wide Photoshop |
|---|
Logo della barra laterale destra
Immagine di sfondo
| Immagine per lo sfondo di accesso Dimensioni consigliate:2800 x 2000 pixel Tipo di esportazione file consigliato:JPG (qualità delle opere 30-40%) Consigli utili:
- L'immagine di sfondo a schermo intero è totalmente facoltativa. Potresti preferire uno sfondo semplice, senza immagini (e sicuramente impiegherà meno tempo a caricarsi).
- Se l'immagine è più piccola delle dimensioni consigliate, Canvas la ingrandirà; potrebbe solo apparire leggermente pixelata.
Scarica il file di esempio dell'immagine di sfondo Scarica il modello di immagine di sfondo di Photoshop |
|---|
Logo di accesso
| Logo mostrato nella parte superiore della pagina di accesso Dimensioni consigliate:380 x 150 pixel Tipo di esportazione file consigliato:PNG (SVG può essere utilizzato anche da utenti avanzati) Consigli utili: - Il logo nella tua pagina di accesso verrà ridimensionato a 190 pixel di larghezza, indipendentemente dalle dimensioni.
- Si consiglia comunque di mantenere una risoluzione ottimale per schermi retina e/o monitor di grandi dimensioni. Dimensioni inferiori potrebbero risultare sfocate.
Scarica il file di esempio del logo di accesso Scarica il modello Photoshop per il logo di accesso |
|---|
È possibile accedere a questa risorsa anche dalle seguenti Guide Canvas:
