Website pattern library

Homepage

Homepage banner images

Create your own banners by starting with one of the Photoshop template files. You can insert your own photographs into the templates.

See some Homepage banner image examplesLink opens in a new window

Example duotone banner including fade to solid colour:

Banner Image - Welcome to Brighton & Hove

Example photographic banner:

Banner Image - Welcome to Brighton & Hove

Before uploading a banner to the website

1) Define a background colour - Enables a fade into solid colour on wide screens.

2) Prepare and upload the banner image
Try starting with the Photoshop Banner TemplateDownload icon which already includes options for colour fades and duotone effects.

3) Colour fades
You can apply additional colour fades in the content management system (Drupal).

Duotone effects

Download photoshop templateDownload icon 1880px x 430px

The photoshop template contains:

  • Burgundy duotone: background colour: #9b0064
  • Green duotone: background colour: #99cc33
  • Cyan duotone: background colour: #3399ff
  • Black: background colour: #000000
  • Photo (no fade): background colour: #FAFAFA

See colour palette extended for more colour options