Buttons from a pure graphical perspective - use buttons as graphical elements

Applies to:
Working with BrowserBob

Buttons can be used as graphical elements, without button functionality. This enables you to achieve some nice graphical effects.
 

 

 

Example 1: The Hovering Effect
By overlapping graphical elements - here Lara overlaps parts of the addressbar - the hovering effect is achieved by positioning a seperate button which is made from parts of the body.

 

 

 

 

 

Approach:

 

 

 

 

 

  • Preparing the background graphic
    Design the background image exactly like you want to see the interface later on your screen (using your favourite graphics editor). You may use a box as placeholder for the addressbar.

    Now cut out the region of the picture which is overlapping the addressbar and save it as a separate graphic.

 

 

 

Below the cut out and seperately saved region:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Preparing the Main Dialog
    Assign your background picture to the background of the main dialog.

    Add an edit object and define it as the main web's addressbar. Then position it like foreseen.

    Since the edit object overlaps the background, it now covers the region we have cut out before.

 

 

 

 

 

 

 

 

 

 

  • The Overlap-Button
    Add a button to the main dialog. Choose the cut out and separately saved graphic as button image for all 4 states. Enter Main Dialog as Target and Move as Action to let the button behave like the background. Now give it the correct alignment and alpha color and drag it to its place overlapping the addressbar.

 

 

 

 

 

 

 

 

Example 2: Web window with rounded corners
Web objects as well as the main web are rectangular by definition. In order to achieve a more appealing design we are going to create some rounded corners with the same technique introduced in example 1.

The difference is shown in the illustration below:

 

 

  • rectangular corners:

 

 

 

 

 

  • rounded corners:

 

 

Approach:

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Preparing the Main Dialog
    Design the background image using your graphics program exactly like you want to see the browser later on your screen. Paint a rounded rectangle as placeholder for the main web.
    Save the image, start BrowserBob and use it as background picture for the main dialog. Then adjust the puzzle helper lines.

    The main web should fit to the extends of the rounded rect you have painted before. That makes the main web overlapping the corners of the rounded rectangle.

 

  • The Corner Images
    Go back to your paint program, cut out the four regions of the picture which are overlapped by the main web and save them seperately
    .

 

 

Cut out corner images:

 

 

  • The Overlap-Buttons
    Add four buttons to the main dialog. Choose the cut out and seperately saved graphics as button images each for all four states. Enter Main Dialog as Targets and Move as Actions to let the buttons behave like the background. Then drag them to their intended places.
    Adjust their alignment to be in accordance with the corners, i.e. the button in the bottom-right corner should be aligned to the bottom and to the right and so on.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Assigning Alpha Color
    Don't forget to determine alpha colors for the buttons. The effect does not work until you've done this.

 

 

 

 

 

Related topics:
BrowserBob objects overview

Properties by object