How to make a website banner with our banner maker

The banner maker facility can look daunting on first impression, but you can quickly get to grips with it and create high-end, professional banners ready for your website. Click on the links below to get straight to the help you need for your banner.

Banner Background
Text
Foreground Image
Size and Scaling

Banner Background

You can use one of the many backgrounds we have in our library of images, or upload your own. You can apply MANY effects to your background, of which many can be combined to create unique compounded effects. See below:-

Coloring

Borders

Dithering

Blur

Blurring the background can give your banner some depth:-

Spray

Spraying the background creates an effect like this:-

Background Opacity

You can lighten the opacity of the background to 25%, 50%, or 75%. The following example is 50% opacity:-

Text

You can add two lines of text - a banner line, and a strap line. You can edit font size and colour independently for each line, and the font-family for both lines. You can also control the vertical positioning of the text lines too.

Sometimes when you choose a font, and a large font size - the text can appear to go off the banner like this:-

Well, with some adjustment to the vertical positioning of text here:-

.....you can get the result you want:-

You can also apply glow or drop shadow to text, as well as give it any colour you like. It's better to use text colours that contrast well with the background.

Foreground Image

You can use an image from our image library, or upload your own images. You can upload a .jpg, .gif or .png. Maximum size is 512k. The foreground image is layered on top of the background, but behind the text. Using a foreground image will give your banner more depth.

If you upload an image, bear in mind that the image will be resized to fit inside the banner's dimensions:-

PNG Files Are Great!

PNG files allow your foreground image to "float" over your background image like this without an ugly background colour:-

Shapes

Shapes are silhouettes we've added to our foreground image library (under "Shapes"). These are different from other forground images in that you can re-colour these:-

Blur

You can blur the foreground image like this:-

Spray

You can spray the foreground image like this:-

Glow

You can glow the foreground image like this:-

Drop Shadow

You can add a drop shadow to the foreground image like this:-

Foreground Image Opacity

You can lighten the opacity of the foreground to 25%, 50%, or 75%. The following example is 25% opacity:-

Foreground Image Positioning

You can position the foreground image by controlling its vertical and horizontal positions, for example:-

"Don't Scale Image"

Foreground images are automatically scaled to fit your banner like this:-

...but you can choose to NOT have the foreground image scaled (tick box next to "Don't Scale Image") - then you can get nice effects like this:-

Size and Scaling

You can adjust the height and width of your banner and the background and foreground images will adjust automatically. Let's see what happens when we change the size of the above banner to different banner sizes:-