This guide is for sites built in the new version of Drupal (Study and Scholarships).
If you're working on a Drupal 7 (UQ Standard) site, see hero banners on Drupal 7.

Understanding hero banners

A hero banner is a large image that:

  • captures the user's attention and sets the tone for the page
  • displays alongside the page's H1 heading (and lead text where relevant).

Together, the image and text should help users understand what the page is about and whether it's relevant to what they're trying to do.

The standard hero banner can be used on the following content types:

  • articles
  • events
  • landing pages
  • basic pages

See examples

At left, white heading text on a purple background, which transitions via a gradient to an image on the right
Example hero banner display on desktop
At the top, an image partially overlaid by a gradient, which transitions to a purple panel underneath with white heading text
Example hero banner display on mobile
Top of page

Creating a new hero banner

On Scholarships, you must select from the pre-loaded approved hero banners. To request a new hero banner, contact ugscholarships@uq.edu.au

Step 1: Select your base image

Select an image to feature in your hero banner.

It must be at least 1080px wide x 540px high (this section will display on mobile view)

Step 2: Use the template to create your hero banner

Using the template will ensure the banner displays correctly across various screen resolutions.

  1. Download the standard hero template (staff login required) from the DAM. If you don't get taken directly to the template, make sure you're logged in to the DAM and try the link again.
  2. Open both the template and your image in Photoshop.
  3. Copy and paste your image into a new layer on the template.
  4. Ensure the 'Mask layer' is at the top of the 'Layers' panel.
  5. Select 'Edit '> 'Free transform' to resize your image proportionally.
  6. Ensure the base image remains a minimum of 1080px wide (refer to Guide 2 in template guidelines below).
  7. Ensure the main content (such as faces) sits within the guidelines (refer to template guidelines below).
  8. Hide the 'Mask layer' by clicking the eye icon to the left of the layer name.
  9. If the base image isn't at least 1400px wide (refer to Guide 1 in template guidelines below) turn on the purple 'Gradient' layer and drag the 'Gradient' layer above your image layer. If your image is at least 1400px wide, you don't need to add the gradient layer. See when to use the purple gradient.

Template guidelines

Use the guidelines to position your image correctly, with the main content (such as faces) inside the indicated guidelines.

An example hero banner overlaid with guidelines indicating how to position an image within the banner template
Click to enlarge template guidelines image

Step 3: Save your hero banner

  1. When you are happy with your hero banner, in the 'Layers' panel, go to the top-right menu and select 'Flatten image'. (If you are asked to discard hidden layers select 'OK'.)
  2. Go to 'File' > 'Export as'.
  3. Set the 'Format' as JPG and 'Quality' as 70%.
  4. Click the 'Export' button and then save. Follow the UQ file naming conventions when saving your image.

Your image will be saved at the correct specifications:

  • Image size: 2160px x 540px
  • Resolution: 72 DPI
Top of page

When to use the purple gradient

Whether you need to use the purple gradient layer depends on the width of your base image. Only turn on the gradient if necessary.

If base image is less than 1400px wide

Turn on the purple gradient layer if your base image is less than 1400px wide.

Don't move the gradient layer further to the right into the 1080px area.

On desktop, the image is positioned at the right of the banner. Its left edge is overlaid by a purple gradient, which transitions to a purple background that covers the rest of the banner. On mobile the image is cropped from the left and sits above the purple background
The base image is at least the minimum width of 1080px but less than 1400px

If base image is 1400px wide or larger

Don't turn on the purple gradient layer if your base image is 1400px wide or larger. It's OK if it doesn't extend the full width of the banner.

On desktop, the image is positioned at the right of the banner and a purple background fills the remaining space at left. On mobile the image is cropped from the left and sits above the purple background
The base image is at least 1400px wide, but doesn't extend the full width of the banner
On desktop, the image fills the entire space of the banner. On mobile the image is cropped from the left and sits above the purple background
The base image extends the full width of the banner
Top of page