Banner tool user guide
This purpose-built tool provides an easy way for staff to create branded banners and cards for use in their Canvas subjects and communities.
The banner tool allows you generate a banner specific for your subject with an image of your choosing. The banner is to be uploaded into your subject at the top of the subject home page. The banner includes the subject name, subject code and a meaningful image.
The aim of having a banner in every subject is to provide a consistent experience for students accessing all their subjects. It provides a visual cue of the landing page for the subject and identifies clearly to the student which subject they are in.
Ensure you or the University owns the copyright of the image you upload to the banner tool or cite the source of the image below the banner, to meet the University Copyright requirements.
Subject card images appear in the Canvas Dashboard. When you download the banner, the tool will also generate a subject card image for your Canvas LMS subject, using the image you uploaded.
The dimensions of the banner and subject card files are scaled for use in Canvas. The generated images and colour options provided comply with and reflect University of Melbourne branding.
Tips for creating and editing your banner
The Banner Tool provides a range of options for creating and fine-tuning your banner:
- Text options
- Aperture chooser
- Image upload
- Pattern/texture options
- Shard palette options
- Focus mark options
- Icons
Text options
Enter Subject Code
Type in the full subject or community code in the format ABCD12345_2020_SM1 or COM_ABC_123456.
Enter Subject Title
Type in your full subject or community title.
Note that both of these fields allow a maximum of 32 characters.
There is an optional second field; use this if you have a long subject name or wish to provide additional context.
Aperture chooser
These options to allow you to change the way the crop is angled of the right-hand section holding your image.
For example, Aperture 0° will have a staight cut between the blue section and the image, while the other options will be angled down.
Image upload
It is your responsibility to ensure that you or the University owns the copyright of the image, or else include a citation to source the image below your banner to meet University copyright requirements.
Only JPG, PNG and GIF file types are supported.
Click Choose file to select to your image file to upload. The image will appear on the right-hand section of the banner.
Use the Move uploaded image buttons to move the image around in this section and find the best crop.
Use the Scale uploaded image slider to zoom in or out of the image. At some point the image will begin repeating to keep the area filled.
Pattern/texture options
The pattern and texture options provided are sourced from the Patternwork branding guidelines to "reflect physical and spiritual values that are part of the University of Melbourne".
These patterns sit diagonally over the right-hand corner of the banner.
Move the Opacity of pattern slider to change how dark or light the pattern is, or hide it completely.
Shard palette options
The 'shard' is the triangular element on the top edge of the banner.
The colour options provided reflect the Colour Palette branding and do not represent specific areas or activities.
Move the Opacity of shard gradient slider to adjust how dark or faded the colour is.
Focus mark options
Choose where to apply the focus marks and change their colour and opacity.
Banner corners places the focus marks on the top-left and bottom-right corners of the banner, while Image aperture places the focus marks on the cut in left corner of the image (if angled), or both top-left and bottom-right corners when straight.
Use the colour palette to change the colour of the focus marks.
Move the Opacity of focus marks slider to change how dark or light the focus marks are, or hide them completely.
Icon options
Choose an appropriate style from the Icon options dropdown.
Download the banner image file
Adjust the above settings in any order, until you are satisfied with your banner. When ready, download the image file:
- Under Upon completion click the Download subject banner button. A Generating banner download message will appear.
- The banner will be downloaded to your computer as a PNG image file. It will be titled in the format of banner-ABCDE_2020_SM1.png.
- Depending on your browser, the file may save directly to your Downloads folder, or give you the option to choose an appropriate location on your computer and click Save.
Download the subject card image file
If you have uploaded an image, you will be provided with a subject card file in addition to the banner. You will not be presented with this option if you have not uploaded an image.
The subject card image can be uploaded to your subject or community and appears on the Canvas Dashboard.
Options to edit your subject card
You may choose to apply the same Icon as above, or select No Icon to remove it.
Use the On or Off buttons to show or hide the focus marks. The colour of the focus marks will match your banner.
Use the Move image buttons to move the image around in this card and find the best crop.
Use the Scale image slider to zoom in or out of the image. At some point the image will begin repeating to keep the area filled.
When ready, click the DOWNLOAD CARD IMAGE button.
The subject card image will then download to your computer as a PNG file. It will be titled in the format of card-ABCD12345_2020_SM1.png
Choose an appropriate location on your computer and click Save.
Upload the banner to your subject
You can now upload your banner to your subject or community home page.
- From the Dashboard or Subjects link in Canvas Global Navigation, select the subject you wish to add the banner to
- Check you are on the Home page (point A shown) and click the Edit button in the top-right
- If a sample subject banner is still there, delete the sample subject banner by selecting the image then clicking Delete on your keyboard
- Banners should appear at the very top of the content page, so click into the text editor at the very top of the content (point B shown)
- Click the Images icon (point C shown) in the editor toolbar and select Upload Image.
- Follow the prompts to select your downloaded banner file and Submit
- The banner image will now embedded in your subject. You may need to tweak some settings to ensure it appears correctly. Select the image and click on the Options button that displays underneath (point A shown).
- An Image Options window that appears, select Decorative Image (point B shown)
- Choose Custom from the Size dropdown and enter 2000 into the width field (point C shown). The image will resize depending on the users screen. Click Done to finish.
- Click Save to update the page.
More information on embedding images is available in the Canvas Community guide: How do I embed images from Canvas into the Rich Content Editor as an instructor?
Upload the card image to your subject
Your subject card image has been generated by the banner tool using the recommended image dimensions.
- From the Dashboard or Subjects link in the Global Navigation bar, click on the subject you wish to add the subject card image to.
- Click Settings in the subject navigation menu.
- While in the Subject Details tab, click on the Choose Image button.
Note: If an image is displayed instead of the Choose Image button, click the three dots on the image to either change or remove the image.
- Follow the prompts to select your downloaded card file and Submit.
- Scroll to the bottom of Subject Details page and click the Update Subject Details button.
You can check how your subject card image looks by viewing the subject card in the Canvas Dashboard.
More information on updating your subject card image is available in the Canvas Community guide: How do I add an image to a subject card in the Dashboard?
This guide was last updated 09 Feb 2023.
Please report any errors or omissions in this guide by submitting an LMS support request.