Dit document bevat tips en richtlijnen voor het personaliseren van de Canvas-gebruikersinterface voor een instelling via de thema-editor.
Dit document is bedoeld voor beheerders die hun Canvas-gebruikersinterface willen personaliseren met behulp van de thema-editor. Het beschrijft de verschillende mogelijkheden voor het uploaden van bestanden in de thema-editor met behulp van het logo van een instelling. Deze richtlijnen geven de optimale afmetingen voor elke afbeelding in de thema-editor weer, samen met handige tips voor het maken van afbeeldingen, zodat u uw Canvas-installatie in een mum van tijd een fantastische uitstraling kunt geven.
Als uw instelling het geluk heeft een marketing- of brandingteam te hebben met een grafisch of webdesigner in dienst, raden we u ten zeerste aan om met die persoon samen te werken voor de branding van Canvas. U krijgt geweldige resultaten en hoeft minder werk te verrichten – hoera! Een professionele ontwerper zorgt er bovendien voor dat u geen merkrichtlijnen overtreedt.
De sjabloonbestanden in dit document zijn gemaakt in Photoshop.Als je geen toegang hebt tot Photoshop, kun je elk ander beeldbewerkingsprogramma gebruiken om je eigen bestanden te maken op basis van de ideale afmetingen die in elke stap worden vermeld.
Vector- versus bitmapafbeeldingen
Voordat u het logo van uw instelling kunt uploaden, moet u een exemplaar met hoge resolutie verkrijgen om te gebruiken in de thema-editor. Idealiter gebruikt u eenvectorlogoafbeelding in plaats van eenbitmaplogo afbeelding.
- Vectorafbeeldingen eindigen meestal in.ai,.eps, of .svgOmdat vectorafbeeldingen gebaseerd zijn op paden en niet op pixels, kunnen ze scherp worden aangepast aan elk formaat. Vectorafbeeldingen kunnen worden gesleept of geplakt in beeldbewerkingssoftware zoals Illustrator, Photoshop en Sketch. Vervolgens kunnen ze worden aangepast zonder verlies van scherpte. Om de beeldverhouding te behouden, opent u de afbeelding in een geschikt programma en houdt u de Shift-toets ingedrukt. Voor gebruik in de Thema-editor moeten vectorbestanden worden opgeslagen in de.svgformaat.
- Bitmapafbeeldingen eindigen meestal in.jpg,.png, of .gifZe bestaan uit een vast aantal pixels. Als je ze verkleint of vergroot (vooral als je ze vergroot), zien ze er vaak wazig uit.
Als het niet mogelijk is om een vectorversie van het logo van uw instelling te verkrijgen, probeer dan de grootst mogelijke bitmapversie te vinden – alles boven de 1000 pixels breed zou prima moeten werken. Het meest optimale bitmapbestandstype is een PNG-bestand..png), omdat ze ontworpen zijn voor het web en de beste kwaliteit behouden. Ze schalen ook goed mee en ondersteunen transparante achtergronden.
Afbeeldingen uploaden
Zodra je je afbeelding hebt, kun je het bestand uploaden naar verschillende onderdelen van de thema-editor.
Nav-logo
Watermerk
| Een lichte achtergrondafbeelding die achter de pagina-inhoud verschijnt; de weergavegrootte is subjectief en afhankelijk van de grootte van het geüploade bestand. Aanbevolen maat:400 x 400 pixels Aanbevolen bestandstype voor export:PNG Handige tips:
- Net als een watermerk op schrijfpapier, is onze watermerk-afbeelding bedoeld als eensubtielEen brandingelement (we raden aan dat uw afbeelding niet te veel contrasteert met de witte achtergrond van Canvas) dat vaak wordt bedekt door andere Canvas-elementen.
- Het watermerk is volledig optioneel. Je hoeft het niet te gebruiken als je geen geschikte afbeelding hebt.
Download een voorbeeldbestand van het watermerk Download een Photoshop-sjabloon voor watermerken |
|---|
Favicon
Mobiel startschermpictogram
Windows Tegel Vierkant
| Afbeelding voor de vierkante versie van de Windows-tegel. Vereiste afmetingen:558 x 558 pixels Aanbevolen bestandstype voor export:PNG Handige tips: - Om echt aan te sluiten bij de look-and-feel van Windows 8, maak je je afbeelding volledig wit en kies je een levendige achtergrondkleur uit je huisstijlrichtlijnen.
- Windows vereist exacte afmetingen voor een afbeelding die als Windows-tegel wordt gebruikt. De afbeelding die u uploadt voor een Windows-tegel moet voldoen aan de opgegeven afmetingen.
Download het voorbeeldbestand voor Windows Tile Square Download de Photoshop-sjabloon Windows Tile Square. |
|---|
Windows Tegel Breed
| Afbeelding voor de brede versie van de Windows-tegel. Vereiste afmetingen:558 x 270 pixels Aanbevolen bestandstype voor export:PNG Handige tips: - Om echt aan te sluiten bij de look-and-feel van Windows 8, maak je je afbeelding volledig wit en kies je een levendige achtergrondkleur uit je huisstijlrichtlijnen.
- Windows vereist exacte afmetingen voor een afbeelding die als Windows-tegel wordt gebruikt. De afbeelding die u uploadt voor een Windows-tegel moet voldoen aan de opgegeven afmetingen.
Download het voorbeeldbestand voor Windows Tile Wide. Download de Windows Tile Wide Photoshop-sjabloon. |
|---|
Rechter zijbalklogo
Achtergrondafbeelding
| Afbeelding voor de inlogachtergrond Aanbevolen maat:2800 x 2000 pixels Aanbevolen bestandstype voor export:JPG (30-40% van de kwaliteitsbestanden werkt) Handige tips:
- De achtergrondafbeelding die het hele scherm vult, is volledig optioneel. U kunt bijvoorbeeld kiezen voor een eenvoudige achtergrondkleur zonder afbeelding (dit zorgt er zeker voor dat het laden sneller gaat).
- Als uw afbeelding kleiner is dan het aanbevolen formaat, zal Canvas deze vergroten; het resultaat kan er dan wel iets korrelig uitzien.
Download een voorbeeld van een achtergrondafbeelding Download een Photoshop-sjabloon voor een achtergrondafbeelding |
|---|
Inloglogo
| Logo bovenaan de inlogpagina Aanbevolen maat:380 x 150 pixels Aanbevolen bestandstype voor export:PNG (SVG kan ook worden gebruikt voor gevorderde gebruikers) Handige tips: - Het logo op uw inlogpagina wordt automatisch verkleind tot een breedte van 190 pixels, ongeacht de grootte van het scherm.
- De ideale afmeting wordt nog steeds aanbevolen om een goede beeldresolutie te behouden voor Retina- en/of grote monitorschermen. Een kleinere afmeting kan er wazig uitzien.
Download voorbeeldbestand van het inloglogo Download de Photoshop-sjabloon voor het inloglogo |
|---|
Deze bron is ook toegankelijk via de volgende Canvas-handleidingen:
