Dieses Dokument enthält Tipps und Richtlinien für die Anpassung der Canvas-Benutzeroberfläche an die Bedürfnisse einer Institution mithilfe des Design-Editors.
Dieses Dokument richtet sich an Administratoren, die ihre Canvas-Benutzeroberfläche mithilfe des Design-Editors individualisieren möchten. Es beschreibt die verschiedenen Dateiupload-Optionen im Design-Editor anhand des Logos einer Institution. Die Richtlinien zeigen die optimale Größe für jedes Bild im Design-Editor und geben hilfreiche Tipps zur Bilderstellung, damit Ihre Canvas-Installation im Handumdrehen professionell aussieht.
Wenn Ihre Einrichtung das Glück hat, über ein Marketing- oder Branding-Team mit einem angestellten Grafik- oder Webdesigner zu verfügen, empfehlen wir Ihnen dringend, für das Canvas-Branding mit dieser Person zusammenzuarbeiten. Sie erzielen hervorragende Ergebnisse und haben weniger Arbeit – super! Ein Designprofi stellt außerdem sicher, dass Sie keine Markenrichtlinien verletzen.
Die in diesem Dokument enthaltenen Vorlagendateien wurden in Photoshop erstellt.Falls Sie keinen Zugriff auf Photoshop haben, können Sie jedes beliebige Bildbearbeitungsprogramm verwenden, um Ihre eigenen Dateien anhand der in jedem Schritt angegebenen idealen Bildgrößen zu erstellen.
Vektor- vs. Bitmap-Grafiken
Bevor Sie das Logo Ihrer Institution hochladen können, benötigen Sie eine hochauflösende Kopie für den Theme-Editor. Idealerweise sollten Sie eineVektorLogobild statt einesBitmapLogobild.
- VektorBilder enden normalerweise mit.ai,.eps, oder .svgDa Vektorgrafiken auf Pfaden und nicht auf Pixeln basieren, lassen sie sich gestochen scharf auf jede beliebige Größe skalieren. Vektorgrafiken können per Drag & Drop in Bildbearbeitungsprogramme wie Illustrator, Photoshop und Sketch eingefügt werden. Anschließend können sie ohne Schärfeverlust skaliert werden. Um das Seitenverhältnis beizubehalten, öffnen Sie das Bild in einem entsprechenden Programm und halten Sie die Umschalttaste gedrückt. Für die Verwendung im Design-Editor müssen Vektordateien im entsprechenden Ordner gespeichert werden..svgFormat.
- BitmapBilder enden normalerweise mit.jpg,.png, oder .gifSie bestehen aus einer festgelegten Anzahl von Pixeln. Wenn man sie vergrößert oder verkleinert, sehen sie oft unscharf aus.
Falls Sie keine Vektorversion des Logos Ihrer Institution erhalten können, versuchen Sie einfach, die größtmögliche Bitmap-Version zu beschaffen – alles über 1000 Pixel Breite sollte problemlos funktionieren. Der optimale Bitmap-Dateityp ist eine PNG-Datei (.png), da sie für das Web konzipiert sind und die beste Qualität beibehalten. Sie lassen sich außerdem gut skalieren und unterstützen transparente Hintergründe.
Bild-Uploads
Sobald Sie Ihr Bild erhalten haben, können Sie Ihre Datei in verschiedenen Bereichen des Design-Editors hochladen.
Navigationslogo
Wasserzeichen
| Ein helles Hintergrundbild, das hinter dem Seiteninhalt erscheint; die Anzeigegröße ist abhängig von der Größe der hochgeladenen Datei. Empfohlene Größe:400 x 400 Pixel Empfohlener Dateiexporttyp:PNG Heiße Tipps:
- Genau wie ein Wasserzeichen auf Schreibpapier soll unser Wasserzeichenbild einsubtilBranding-Element (wir empfehlen, dass Ihr Bild nicht zu stark mit dem weißen Hintergrund von Canvas kontrastiert), das oft von anderen Canvas-Elementen verdeckt wird.
- Das Wasserzeichen ist völlig optional. Sie müssen es nicht verwenden, wenn Sie kein passendes Bild zur Verfügung haben.
Laden Sie die Beispieldatei für das Wasserzeichen herunter. Laden Sie die Photoshop-Vorlage für Wasserzeichen herunter |
|---|
Favicon
Symbol für den Startbildschirm des Mobiltelefons
Fensterfliesen Quadrat
| Abbildung für die quadratische Version der Windows-Kachel Erforderliche Größe:558 x 558 Pixel Empfohlener Dateiexporttyp:PNG Heiße Tipps: - Um wirklich zum Look & Feel von Windows 8 zu passen, erstellen Sie Ihr Bild in reinem Weiß und wählen Sie eine lebendige Hintergrundfarbe aus Ihren Markenrichtlinien.
- Windows erfordert exakte Abmessungen für ein Bild, das als Windows-Kachel verwendet wird. Das Bild, das Sie für eine Windows-Kachel hochladen, muss den vorgegebenen Abmessungen exakt entsprechen.
Laden Sie die Beispieldatei für Windows Tile Square herunter Laden Sie die Photoshop-Vorlage „Windows Tile Square“ herunter |
|---|
Windows Tile Wide
| Abbildung für die breite Version der Windows-Kachel Erforderliche Größe:558 x 270 Pixel Empfohlener Dateiexporttyp:PNG Heiße Tipps: - Um wirklich zum Look & Feel von Windows 8 zu passen, erstellen Sie Ihr Bild in reinem Weiß und wählen Sie eine lebendige Hintergrundfarbe aus Ihren Markenrichtlinien.
- Windows erfordert exakte Abmessungen für ein Bild, das als Windows-Kachel verwendet wird. Das Bild, das Sie für eine Windows-Kachel hochladen, muss den vorgegebenen Abmessungen exakt entsprechen.
Laden Sie die Windows Tile Wide-Beispieldatei herunter Laden Sie die Photoshop-Vorlage „Windows Tile Wide“ herunter |
|---|
Logo in der rechten Seitenleiste
Hintergrundbild
| Bild für den Anmeldehintergrund Empfohlene Größe:2800 x 2000 Pixel Empfohlener Dateiexporttyp:JPG (30–40 % der Werke sind von hoher Qualität) Heiße Tipps:
- Das Vollbild-Hintergrundbild ist völlig optional. Alternativ können Sie auch eine einfache Hintergrundfarbe ohne Bild verwenden (die Ladezeit verkürzt sich dadurch deutlich).
- Ist Ihr Bild kleiner als die empfohlene Größe, wird Canvas es vergrößern; es könnte dann nur etwas pixelig aussehen.
Hintergrundbild-Beispieldatei herunterladen Hintergrundbild-Photoshop-Vorlage herunterladen |
|---|
Anmeldelogo
| Logo, das oben auf der Anmeldeseite angezeigt wird Empfohlene Größe:380 x 150 Pixel Empfohlener Dateiexporttyp:PNG (SVG kann für fortgeschrittene Benutzer ebenfalls verwendet werden) Heiße Tipps: - Das Logo auf Ihrer Anmeldeseite wird unabhängig von der Größe auf eine Breite von 190 Pixeln skaliert.
- Die optimale Größe wird weiterhin empfohlen, um eine hohe Bildauflösung für Retina- und/oder große Monitore zu gewährleisten. Kleinere Formate können zu Unschärfe führen.
Beispieldatei für das Anmeldelogo herunterladen Photoshop-Vorlage für das Login-Logo herunterladen |
|---|
Diese Ressource kann auch über die folgenden Canvas-Anleitungen aufgerufen werden:
