Creating a simple banner

To create a simple banner such as the above example:

1. Click File, New banner.

2. The Banner details dialog box is displayed.

3. Enter the following values or settings:

• Banner width = 468
• Banner height = 60
• Banner colour style = Blended colours
• Banner colour effect = Vertical blend
• Enter the following colours into the Banner colour values:
  • FF0000
  • FF00FF
  • 0000FF

To enter colours, either enter the colour value into the Banner colour entry edit box directly, or click the Colour selection button to select the colour using the Colour picker options. Then press Enter to add the entered colour to the Banner Colour Values list.

If the Banner colour style selected is Solid colour, the Banner Colour Values list will not be displayed as there is only a single colour for the banner.

In the sample dialog box displayed above, you will note that there is already a colour FFFFFF at the top of the Banner Colour Values list. This is the default colour which was used when the dialog box was first entered. To delete this colour, click on it in the list, and press the Delete key.

4. When all the banner details have been entered, click OK. The banner background will now be displayed.

To alter any details for the banner background image at any time, right click on the banner background and the Banner details dialog box will be redisplayed with the current settings. Alter the required settings and click OK when finished entering the changes. If another component is covering the background so that you cannot access the background, right click on that component and select the Hide image option from the popup menu. This will hide the front component to allow access to components behind it. Use the Restore hidden menu option to make hidden components visible again.

5. Click the Text button. Move the cursor to any point on the banner background, and click again. The Text dialog box will be displayed.

6. Enter the following details for the font:

• Click on Comic Sans MS in the Font name list.
• Click on Bold in the Font sytle list.
• Key 30 into the font size edit box.
• Set the Text colour value to FFCC00. This can either be done by keying the value directly into the edit box, or by clicking the Text colour selection button and selecting the colour in the Colour picker options.
• Type Flowers into the Text to be displayed on banner edit box.
• Click OK.

The text will now be positioned on the banner background at the point where the cursor was when clicked. To reposition the text, left click on the text, and whilst holding the left mouse button down, drag the text to the required location. Release the mouse button when the text is positioned correctly. Note that some components, such as text, have transparent backgrounds. This may cause some confusion at times where components overlap others, as it may appear that the required component cannot be moved. To overcome such problems, use the Hide image option mentioned earlier.

To display a grid overlay to help positioning any components, click Show/hide grid. If the grid is currently not visible, it will make it visible. If it currently visible, it will clear the grid.

Right clicking on any component will display a menu allowing the component to be changed, deleted or hidden.

7. To add an image to the banner, click the Image button. Now move the cursor to the banner background image, and click. A file dialog box will be opened to enable the image file to be selected, in this case flower.bmp which is supplied. Once the file has been selected, an Image dialog box will be opened.

Because the original image is higher than the banner background, the image dimensions have been automatically resized to enable it to fit onto the banner, retaining the proportions of width to height of the source image. If a new width is entered for the image, and the Retain proportions check box is ticked, the new height will be automatically calculated. Similarly if a new height is entered, the width will be calculated. To prevent the automatic calculation, clear the Retain proportions check box.

If the Transparent background checkbox is ticked, the background of the image will be made transparent. The transparent colour is set by the bottom left pixel of the image. All pixels matching that colour will be treated as transparent.

Click OK.

Now move the image to the correct position by left clicking and dragging, as was done with the text.

8. And finally, to add the shape, click on the Circle button and move the cursor to the banner background image. Left click on the banner background, hold the left button down, and drag until the image is around the required size. When the mouse button is released, the Shape dialog box will be displayed.

9. Enter the following details for the shape:

• Enter Width as 54. Note that for square, circle and rounded square shapes, only either the width or height need be entered, as the other dimension will be set equal to it automatically.
• Enter Border colour value as 00FF7F either by entering the value directly into the Border colour value edit box, or by clicking the Border colour selection button to use the Colour picker options.
• Enter Fill colour value as 00008B.
• Set Border width to 2.
• Clear the Transparent fill check box.
• Click OK

As with the earlier components, left click on the shape to drag it to the desired location. The shape will probably be the top component, partly hiding the text and/or image. To bring a component to the front, either left click on the component, or select the component in the Bring to front menu.

The banner has now been created, and the image can be saved to file by clicking File, Save.

Clicking File, Save banner components saves the individual component details of the banner so that it can be reloaded at some other time for modification. To reload it, use the File, Open existing banner option.