Adobe Creative Cloud Express: Creating a module banner for Blackboard Ultra

This guide has been produced to inform staff on how to create and embed a module banner in Blackboard Ultra using Adobe Creative Cloud Express.  As well as the comprehensive guide there is also an embedded video showing how the process is achieved.

Open your default web browser and open the Adobe Creative Cloud Express website (https://express.adobe.com/). You will need to sign in with your university credentials or register a new account if you have not yet signed up with the Adobe Creative Cloud.

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, you can select the Custom Size.

Image showing setting up a new Adobe Creative Cloud Express project and choosing to create a custom size project

 You will need to set the dimensions of the banner so that Blackboard Ultra will be able to accept and utilise the image once complete. The size that the new Blackboard Ultra Banner accepts is 1200 x 240 pixels.  If you click on the padlock this will lock the banner size so you can’t change it once created.

*Note Depending upon the screen resolution set on the monitor being used to view the module banner, even with the image set to the correct dimensions as recommended by Blackboard (1200 x 240) the image can still show incorrectly.  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.

This is quite useful to stop you from accidentally changing the dimensions later.  Once the options have been set click Next.

Image showing setting the image size for a new Adobe Creative Cloud project being created

You are now ready to design your Blackboard Ultra banner!  There are now several options that are available to you to think about how you will design and create your banner.

Explore banner ideas and inspiration:  Click on the Backgrounds button 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 More link.  There is also a search facility if you are looking for a specific type of image.

Image showing the choosing of a new background image

Think of the intention behind your banner, then choose a template that resonates with your vision and start customising.

Image showing how to identify a premium asset in Adobe Creative Cloud Express

Some images within this section will only be available to premium members so cannot be used, these are marked with a yellow shield as shown below.

Once an image has been inserted you may need to resize the image to fit the dimensions of your custom banner, use the image handles in the corners of the image to drag out the required size (to either fill the whole 1200 x 240 banner or fit part if you intend to include multiple images), this might also mean that parts of the image are no longer visible.

Image showing how to edit an image in Adobe Creative Cloud Express

Be mindful of the choice of image as some may create accessibility issues when adding text (covered in a later part of this tutorial).

Image showing considerations for image choice in Adobe Creative Cloud Express regarding accessibility

There is also an option to add a specific photo as a background image.  Click on the Add to background slider to set this.

Image showing how to set a specific image as a background image in Adobe Creative Cloud Express

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.

There are also several other options here that you might want to explore including:

  • Adobe stock photos
  • Upload photo
  • More options
    • My Adobe Stock photos
    • Lightroom
    • Dropbox
    • Google Drive
    • Google Photos

Like above once the image has been inserted you might need to resize to fill the banner

Image showing various image upload options in Adobe Creative Cloud Express 

Bring your banner to life with imagery and typography:  Once you are happy with the images on your banner, you can customize your banner with fonts and text. Strike a perfect balance of text and images to communicate your messaging based on where you plan to share your banner.

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

Image showing a banner being setup in Adobe Creative Cloud Express

 You can click on the + Add your text button and start typing the required text into the Edit text menu to the right of the screen.  Within this editor you can control:

  • Font type
  • Font Colour
  • Font Alignment
  • Effects
    • Shape
    • Shadow
    • Outline

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.

Image showing how to resize text on an image in Adobe Creative Cloud Express

 Remember that although there is no right or wrong with creating your banner colours and image usage, it should keep in mind the impact our design may have on the accessibility of the Ultra site.

There are many further options that can be explored to produce a higher quality product, too many to cover in this brief guide.

Why not explore the functionality that is available within Creative Cloud Express?

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 option located in the top right of the screen and select which image format you prefer.  Blackboard supports banner image formats of .PNG and .JPG.

Image showing a new Adobe Creative Cloud project being saved and exported in various formats

Video Tutorial

Click here to open guide in the Panopto video format

More videos on Creative Cloud Express can be found here: Creative Cloud Express – YouTube