This document outlines the best practices and guidelines to follow when creating a branding Canvas UI for an institution using Canvas Theme Editor Image Templates.
This document is aimed at administrators who want to customize their Canvas’s UI with the Theme Editor. It walks you through the different upload options accessible within the Theme Editor using the logo of an institution. These guidelines will help you determine the best size for each image within the Theme Editor, along with helpful information on image creation, so you can have your Canvas project looking fantastic within a matter of minutes.
If your institution is fortunate that it has a branding or marketing team that has an on-staff graphic designer or web developer, then we highly recommend you work with that person to develop Canvas branding. You’ll be able to achieve amazing results and perform less work, which is great! Design professionals will also ensure that you’re not breaking the guidelines of any brand.
The Canvas Theme Editor Image Templates included files were designed using Photoshop. If you don’t own Photoshop, you may use any image program software in order to make your own images that are based on the optimal image sizes provided within each of the steps.
Vector vs Bitmap Graphics
Before you upload your logo for your institution it is necessary to get an image of high-resolution for use in Theme Editor. The ideal choice is to utilize a vector logo instead of a bitmap image.
- Vector images are usually referred to as .ai, .eps, or .svg. Since they’re based on paths and instead of pixels, these images can be resized quickly and can be resized to almost any. They can also be drag or copied in image-editing software such as Illustrator, Photoshop, and Sketch. Then, they can be resized without affecting clarity. To keep the aspect ratio you need to open the image in a suitable application and hold your Shift button. To use it in Canvas Theme Editor Image Templates, vector files should be saved in .svg format.
- Bitmap images are usually referred to as .jpg, .png, or .gif. Canvas Theme Editor Image Templates made up of a specific amount of pixels. If you alter their size (especially when they’re magnified) the result will often appear blurry.
If you can obtain an image that is vectorized of your logo’s design Try to find the biggest bitmap possible. Anything larger than 1,000 pixels will suffice. The most ideal bitmap type of file is PNG files (.png) because they’re specifically designed for use on the internet and maintain the highest quality. They are also flexible and can be used with transparent backgrounds.
Image Uploads
After you have gotten the image from Canvas Theme Editor Image Templates, you are able to upload it to different areas of Theme Editor.
Nav Logo
The logo is on the upper left on the Global Navigation Menu (supports svg as well as png, jpg, and svg files)
The recommended size is 200 pixels x 200 pixels
The preferred type of file export is PNG
Hot tips:
- When you are creating the file, you should leave a little space (at at least 10-20px) or something similar to the logo. If not, it appears as if it’s squeezed in the corners of the main navigation.
Watermark
A light background image appears behind page content the size of the display is based on the size of uploaded files
Sizes recommended: 400 800 pixels
The preferred type of file export is PNG
Hot tips:
- Similar to a watermark placed on a writing paper the watermark image we use is designed to function as an unobtrusive branding element in Canvas theme editor image templates (we suggest that your image does not be too stark in contrast to Canvas the white background) which is usually obscured in different Canvas elements.
- The watermark is entirely optional. Do not feel that you are required to apply it in the event that you don’t have access an image that meets the criteria.
Favicon
Small icon that appears in the tab for browsers
The recommended size is 48×48 pixels
Recommended file export type: Export from Photoshop as a PNG, then visit a site like http://www.favicon-generator.org to create the .ICO file.
Mobile Home Screen Icon
Icon displayed when Canvas is being bookmarked by the browser of the mobile device
Recommended size Recommended size
Type of file export that is recommended: PNG
Hot tip: Do not worry about rounding corners of the image The tablet or smartphone will do it automatically.
Windows Tile Square
Images for a square-shaped version of Windows tile
The size that is required is 558 pixels x 558 pixels
Type of file export that is recommended: PNG
Hot tips:
- To truly fit into to be a part of Windows 8 look and feel Create your photo in all-white. Then, choose an appealing background color based on your guidelines for branding.
- Windows requires precise dimensions for images that is used for an Windows tile. Your image uploaded to the Windows tile should be of the exact dimensions required by.
Windows Tile Wide
Image for the larger variation of Windows tile
Size required: 558 x 558 pixels
Type of file export that is recommended: PNG
Hot tips:
- To truly fit into to be a part of Windows 8 look and feel make sure to create your image all-white. Then, choose an appealing background color that matches your guidelines for branding.
- Windows requires exact dimensions to create images used for Windows tile. Images you submit to the Windows tile must be of the exact dimensions required by.
Right Sidebar Logo
Logo is displayed above the right-hand sidebar on the Canvas Dashboard
The recommended size is Resolution: 720 x 280 pixels
Type of file export that is recommended: PNG
Hot tips:
- To get the best results, don’t add any padding to the logo image or the borders of the image
- If your organization is a company with a rectangular logo that doesn’t work with the square design of the navigation logo it’s a good spot to showcase the logo.
Background Image
Background image for login
The recommended size is 2800 by 2000 pixels
The preferred type of export for files is JPG (30-40 percent of quality work)
Hot tips:
- The background image that is full-screen is entirely optional. It is possible to choose a simpler background color, without image (and it will definitely require less effort to download).
- If your photo is smaller than the suggested size, Canvas will increase the size but it will appear slightly blurred in Canvas Theme Editor Image Templates.
Login Logo
Logo is displayed on the upper right hand corner of login page.
Sizes recommended: 300 x 150 pixels
The preferred type of file export is PNG (SVG is also a good option to assist advanced users)
Hot tips:
- The logo displayed on the log-in page will be adjusted to 190 pixels wide regardless of size.
- The optimal size is advised to ensure a strong image resolution on retina or large monitors. Smaller sizes may appear blurry.