Adobe Express: Creating a Module Banner for Blackboard Ultra

  • Created:
How to make a module banner in Adobe Creative Cloud Express

This guide will demonstrate how to create a banner using Adobe Express that can be added to your Blackboard Ultra module.

To access Adobe Express, open your default web browser and open the Adobe Express website (https://new.express.adobe.com/). You will need to sign in with your university credentials to gain access to the premium features.

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

Once you are logged into the Adobe Express website, select the Custom Size button.

Image showing the Adobe Express User interface that highlights the "custom size" button that should be clicked to initialise the creation of a new custom project and blank canvas.

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 ‘Create new file’ option.

Image showing the inputting of the Width and Height dimensions of the new canvas, including unit type and showing the option to lock the canvas size.

*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.
Designing your module banner

There are several options that are available to consider when designing your 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 > Seasonal > (View All)

Image showing the Background digital assets that can be found via the Elements option.

*Note Think of the intention behind your banner, then 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.

Image showing a premium digital asset as identified by the crown logo in the bottom right of any of the Adobe digital asset library.

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 the various configuration options associated with images in Adobe Express.

Configuration options include:

  • Generative Fill: Insert, remove or replace parts of the image.
  • Erase: Erase specific areas of content.
  • Reframe: Resize and move to refocus within the viewable area.
  • Opacity: Adjust the percentage (%) opacity of the image.
  • Blend: Apply a blend to affect how the various layers of your banner interact with each other (If you have added more than one layer)
  • Flip: Flip the image vertically or horizontally
  • Additional Effects: Grayscale, Tint, Darken & Duotone etc.
  • Additional Adjustments: Light, Colour & Detail levels
  • Apply basic Animation: Available effects include In, Loping & Out
*Note When using any of the AI-related features you will need to agree to Adobe’s user guidelines.  To view these guidelines, click here.

Image showing the new Adobe AI guidelines agreement that needs to be Agreed with before being able to use the new features.

*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.

Image showing how an photo can be used instead of an mage and how to set that image as a background.

Another option is to upload your own images as this might give a more personalised feel to the banner and your module in Blackboard Ultra. To upload your own photos, click on the Upload Photo button.

Using this option to set the image as the background will automatically resize the image to fill the canvas area.

Image showing the inserted image and no it has been resized to fil the complete blank canvas area.

Another option is to either Upload from device your own images or use the Text to image generative AI feature as both could give a more personalised feel to the banner and your module in Blackboard Ultra.

To upload your own photos, click on the Upload Photo button and have Adobe’s AI generate an image select Text to Image.

Image showing how to either upload or generate an image using Ai to add to the banner background.

Once you are happy with the background and/or other images on your 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 banner.

You can click on the T+ Add your text button and start typing into the Edit text menu to the right of the screen.  Within this editor, you can control most standard font configurations including Type, Effect, Size, Alignment, Bullets and Spacing.

There are also additional effects that can be configured including:

  • Text Layout: Default, Dynamic, Circle, Arch and Bow
  • Fill & Outline
  • Outline thickness
  • Opacity
  • Text effects
  • Shadow
  • Shape
  • Animation

Image showing the text configuration options.

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 resource.

There are many further options that 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 audiences.  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 the download file format options. Image showing how to download the completed banner.

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

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

Tagged: