Adobe Express: Creating a Module Banner for Blackboard Ultra

  • Created:

*NOTE This guide was updated on 13 March 2025. Please note that due to regular SaaS updates, some features or instructions may differ slightly from the current version.

This Learning Support Guide explains creating a module banner for your Blackboard Ultra module using Adobe Express. While you can search for or generate any image within Blackboard, this method allows staff to add text and have greater control over the image’s formatting and configuration. The process is straightforward and requires minimal time investment to set up and create the module banner.

Contents

  1. Step-by-step instructions to develop a module banner image for Blackboard
  2. Module banner design considerations
  3. Image manipulation and configuration options
  4. Video tutorial: At the end of this guide, we have included a video demonstration using Adobe Express to create a Blackboard Ultra module banner.

Once you have created the banner, you can use the following guide to add the banner to your Blackboard Ultra site.

1. Step-by-step instructions to develop a banner image that can be used in Blackboard Ultra

To create a new banner image, open your default web browser and the Adobe Express website using the following address (https://new.express.adobe.com/). You will need to sign in with your Teesside University credentials to gain access to the premium features of the tool.  On the homepage of Adobe Express, select the coloured ‘Plus’ button located in the top left corner of the main menu, then select the ‘Custom Size’ option from the default menu.

Image show how to start a new blank project in Adobe Express by selecting the coloured plus button located in the top left of the screen and then selecting the Custom Size canvas option from the 'Get started' dialogue window that appears.

You will need to set the dimensions of the banner so that Blackboard Ultra will be able to accept and utilise the image once it is complete. The size that the new Blackboard Ultra Banner accepts is 1200 x 240 pixels.

Make sure that the unit measurement is set to ‘px’ and click on the padlock, as this will lock the banner size, which is quite useful to stop you from accidentally changing the dimensions later.  Once the options have been set, click the ‘Create new file’ option.

Image shows the setting dimensions options that need to be entered when creating a new blank custom size canvas. In this example, the BBU module banner needs to be 1200 x 240 pixels. These values and unit type have been entered. Click the Create new file button once the values have been entered.

*Note Depending upon the device and screen used to view the Blackboard module and therefore banner (even with the image set to the correct 1200 x 240 dimensions as recommended by Blackboard) the image can still present as incorrect.  It is for this reason that it is recommended that any text added to the banner is placed in the centre so that if the banner is not properly displayed it is not omitted.

Back to top

2. Designing your module banner

Several options are available to consider when designing a Blackboard module banner.

Explore banner ideas and inspiration:  Click on the Elements menu item and select Backgrounds to view the library of background images that are organised by category, each category will show a sample of images which can be expanded by clicking on the View All link.  There is also a search facility if you are looking for a specific type of image.

In this example, Elements > Backgrounds > Featured Free > (View All)

The image shows the how to add design elements to the newly set up blank canvas

*Note Think of the intention behind your banner and choose a background that fits with your intended audience and purpose.

Some images will only be available to premium members and are marked with black crowns, however, as Teesside University is an Adobe Creative Campus, you will have access to all premium features such as this.

Once an image has been inserted, you may need to apply additional configurations to the image, for example, to occupy the correct dimensions of the banner or move the focus point of the image.  Click on the image to access this and various other configuration options.

Image showing that once an image has been selected and inserted onto the canvas, additional options are available to apply configurations to the image, for example, to occupy the correct dimensions of the banner or move the focus point of the image. Click on the image to access this and various other configuration options.

Back to top

3 Image manipulation options

  • Edit options include: Erase specific areas of content, Remove objects from within the image, Insert Objects in the image, Set background & Generate variation of the current image.
  • Adjust: Light, colour, Detail
  • Corners: Corner Roundness
  • Position: Flip H or Flip V
  • Opacity: Adjust the percentage (%) opacity of the image & Blend to apply a blend to affect how the various layers of your banner interact with each other (If you have added more than one layer)
  • Effects: Basic & Duotone
  • Animation: Animate all, ‘In, Loop & Out’ options, Move, Scale & Appearance
*Note Be mindful of the choice of image as some may create accessibility issues when adding text.

Image showing an example of how a poor choice of image selection can negatively impact accessibility and inclusivity.

There is also an option to add a specific photo as a background image.

Click on the Media menu item and ensure the Photos tab is selected.  You can search via category (each category will show a sample of images which can be expanded by clicking on the View all link) or use the Search Photos feature.   Insert the chosen image, then select it and click Set as page background.  This will resize the image to cover the dimensions of the custom canvas size (1200x240px).

Image shows that if a photo has been added to the canvas, it can be set as a background image by clicking on the Background option in the context window.

Another option is to upload local images as this might give a more personalised feel to the banner and your module in Blackboard Ultra. To upload photos, click on the ‘Upload from device’ button. Using this option to set the image as the background will automatically resize the image to fill the canvas area.

Image shows how to upload an image or other asset to the current project by clicking the 'Upload from device' button.

It is also possible to generate an image using the GenAI feature. Click the ‘Generate image’ button, select the image aspect ratio and then use the ‘Describe what you’d like to see’ option along with the association Reference image, Content-Type and Styles options.  This is done using the Text to image generative AI feature as both could give a more personalised feel to the banner and your module in Blackboard Ultra.  Once generated,  either add the generated image as an additional image to the banner or use the same ‘Set Background’ option to set the generated image as the new background.

Once you are satisfied with the background and/or other images that make up the banner, you will need to add text.

To add text to your banner, select the Text menu option.

Image showing how to add text to the project by clicking the 'T+ Add your Text' button.

You can click on the ‘T+ Add your text’ button and start typing into the Edit text menu to the right of the screen.  A recently added feature called ‘Rewrite’ uses GenAI to suggest how the text entered could be modified to change the tone of the message.

Within this editor, you can control most standard font configurations including:

  • Edit menu: Standard font edit options such as Font, Style, Size, Bullets etc.
  • Effects menu: Generate text effects, Shadow & Shape
  • Animation menu: Animate all, ‘In, Loop & Out’ options, Visibility, Move & Scale.

Image shows that as well as applying formatting to text using standard text formatting options there is also a 'Recommended' qoption that allows Adobe Express to suggest a font and its formatting that matches aspects of the content currently on the canvas such as colour and size

Another option is to review the ‘Recommended’ options that will suggest text formatting options to best display your text based on the location on the canvas and any other content (such as the background image(s) also included.

Once you have added your text, you can move the inserted text within your banner, altering the size of the text box will reshape the text over additional lines or one single line.

Remember that although there is no right or wrong when creating your banner colours and image usage, keep in mind the impact our design may have on the accessibility of the Ultra site. For more information please review the following inclusive learning guide.

Many further options can be explored to produce a higher-quality product (too many to cover in this brief guide).

Publish and share your banner:  Once you are happy with the banner that you have created, you can instantly download the banner design to your device and share it with your audience.  You can also revisit your project in the future to make updated versions.

To download the banner as an image, click on the Download button located in the top right of the screen, select which image format you prefer (Blackboard supports banner image formats of .PNG and .JPG.) and then click the Download button.

Image showing that a completed project can be downloaded by clicking the Download button and selecting a format to download in.

For guidance on how to add your newly created banner to your Blackboard module, please review the following help guide located here.

Back to top

4. Video Tutorial 

The following video guide has been created to complement the above instructions.

Click here to open this guide in the Panopto video format.

Back to top

For more information please get in touch with the Digital Learning Specialist team.

*NOTE This guide was updated on the 13th of March 2025. Please note that due to regular SaaS updates, some features or instructions may differ slightly from the current version.

 

Tagged: