1/10

How to use the panel edi tor to add ti tl es and graphi cs to presentati ons




Open and expl ore a sampl e proj ect
_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

The project shown in the screenshots for this tutorial is the Green Building Tour. To open it, log in to
your Cl3VER account. Click on the Sampl e Proj ects tab, then on Green Bui l di ng Tour. In the
dialog that appears, click Create.
Once the project opens, zoom out in the viewport so that you can see most of the city.



Creati ng a new panel
_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Select the UI El ement s tab from the left of the screen. A list of the interface elements present in the
scene appears in the item list panel to its immediate right. We've hidden all of the existing elements
in the project for clarity. You can do this by clicking on the eye icons to the left of each entry in the
list.

The NEW UI ELEMENTS rollout has appeared to the right of the item list panel. We'll look at what
each of the icons does in another tutorial. For now, we're only interested in the Panel option.
Click the Panel icon, and drag it anywhere in the viewport.







2/10


The panel editor opens at the foot of the screen, while the new panel itself appears in the bottom left
of the viewport.

If you need, you can expand the panel editor by clicking anywhere on the horizontal bar between it
and the viewport and dragging upwards. You should see the cursor change to a double arrow.









3/10

Navi gati ng the panel edi tor
_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

The panel editor lets you add graphics and simple text-based titles to your presentations. The tools
are similar to image-editing and word-processing software, so we won't explore them in detail here.
Instead, let's look briefly at how the editor is laid out.



A. Mai n Menu and di spl ay opti ons
From left to right: the Mai n Menu lets you create a New I mage, or open, import or export
an image. Edi t Source lets you edit the source code of your presentation. Wi ref rame
Mode toggles wireframe layout view. Show/Hi de Gri d toggles the layout grid.
B. Undo/Redo
Undo the last edit you made to the panel, or Redo it. You can also do this by pressing [Ctrl]
+ [Z] or [Ctrl] + [Y] on the keyboard.
C. Dupl i cat e El ement and Del et e El ement
Duplicate the element currently selected in the editor's central display area, or delete it
entirely.
D. Layer organi zat i on and hyperl i nk opt i ons
The Bri ng t o Front and Send to Back icons move the element currently selected to the
top and bottom layers of your presentation. You can also do this using the Layers palette on
the right of the screen (J). The Make ( hyper) l i nk icon lets you add a hyperlink to the panel.
E. I D, angl e and bl ur opt i ons
The next three fields let you edit the id of an element, rotate it, or apply Gaussian blur.
F. Al i gnment and posi ti oni ng control s
The drop-down to the right of the blur control lets you set the vertical and horizontal
alignment of an element within the panel. The x and y fields let you position it by entering
numerical coordinates.
G. Text edi t i ng cont rol s
The remaining controls at the top of the editor let you make text bold or italic, apply one of
five font styles, or set its size in points.
H. Graphi cs t ool s
From top to bottom, the tools down the right-hand side of the editor let you draw freehand
pencil strokes or straight lines; draw rectangles, ellipses and freehand paths; add other
shapes from a library of presets; add text or images from file; zoom the view in or out; add
polygons or star shapes; pan the view; or select element properties with a Photoshop-style
Eye Dropper Tool .
You can also adjust the zoom level using the drop-down at the bottom left of the editor.
I . Layers pal et t e
Arrange panel elements in layers, using a workflow similar to desktop publishing software.
J. Fi l l , st roke and opaci t y cont rol s
Edit the fill color, stroke style or opacity of interface elements.
K. Col or swatches
Select fill or stroke colors from a set of predefined swatches.


4/10

I mport i ng panel s as graphi cs
_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

The simplest way to create a new panel is to import an image you have already created. You will
need to save it in SVG format in an application like Adobe Illustrator first. Select Open I mage from
the Mai n Menu drop-down.

The Open dialog appears. Browse to your saved image file and click Open.

Another dialog will appear, warning you that you are about to erase your undo history. Click OK.

Your image should appear in the panel editor. The preview of the panel in the viewport will also
update.

5/10





Edi t i ng panel t ext
_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

The panel editor also lets you create simple text-based titles for your presentations. When you
create a new panel, dummy text is created with it. To edit it, select the Text Tool from the left of
the editor.

Click and drag over the title text in the panel to select it.




6/10

Enter your own text. This may cause the text to overrun the panel, as shown below.

To fix this, you can resize the text by entering a new point size in the field at the top of the editor.

You can also realign the text within the panel via the Al i gn El ement to Page drop-down. We've
chosen Al i gn Lef t here.





7/10

Alternatively, you can reposition an element by entering numerical coordinates in the x and y fields.

Or you can simply click on an element in the central display area and drag to reposition it. By holding
down [Shift] on the keyboard you can select and move several elements at once.




Appl yi ng f i l l col ors and strokes
_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

To change the background color of the panel, click on the background element in the central display
area to select it. Choose a fill color from the swatches at the bottom right of the editor.


8/10



You can apply a stroke to the outside of the panel by entering a value into the field shown at the
bottom left of the editor. We've applied a border two pixels wide here.

To change the color of the border, click on the Change stroke col or swatch and click in the color
picker window to select a new color.

You can also make the background of the panel semi-transparent by entering a new value in the
Change sel ect ed i t em opaci t y field.




9/10


Adj usti ng panel properti es
_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Once you are happy with the layout of your panel, you can choose how it will be displayed in your
presentation by adjusting the settings in the properties panel on the right of the screen. As usual, the
Vi si bl e drop-down turns the panel On or Of f .

You can resize the panel by entering numerical values in the X and Y fields of the Vect or Si ze
setting.

The Verti cal Al i gn drop-down in the UI POSI TI ON rollout controls where the panel will be placed
vertically on the screen.


10/10

The Hori zontal Al i gn drop-down does the same for its horizontal placement.

You can also move the panel inwards from the edges of the screen by entering numerical values in
the X and Y fields of the Of f set setting.

Note that the panel's Posi ti oni ng drop-down is set to 2D Screen. This means that the panel will
always display in the same position on the screen, no matter how the viewer rotates the 3D objects
behind it. We'll look at how to position interface elements in 3D space in another tutorial.