1/10

How to use the panel editor to add t it les and graphics to presentations

Open and explore a sample project _________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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 Sample Projects tab, then on Green Bui ld ing 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. Creat ing a new panel _________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Select the UI Elements 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 Navigat ing the panel editor _________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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. Main Menu and display opt ions From left to right: the Main Menu lets you create a New Image, or open, import or export an image. Edit Source lets you edit the source code of your presentation. Wireframe Mode toggles wireframe layout view. Show/Hide Grid 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 icate Element and Delete Element Duplicate the element currently selected in the editor's central display area, or delete it entirely.

D. Layer organizat ion and hyperl ink opt ions The Bring to 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 ink icon lets you add a hyperlink to the panel.

E. ID, angle and blur opt ions The next three fields let you edit the id of an element, rotate it, or apply Gaussian blur.

F. Al ignment and posit ioning controls 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 edit ing controls 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. Graphics tools 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 palette Arrange panel elements in layers, using a workflow similar to desktop publishing software.

J. F i l l , stroke and opacity controls Edit the fill color, stroke style or opacity of interface elements.

K. Color swatches Select fill or stroke colors from a set of predefined swatches.

  4/10 Import ing panels as graphics _________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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 Image from the Main 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

Edit ing panel text _________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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 ign Element to Page drop-down. We've chosen Al ign Left 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.

Apply ing f i l l colors 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 color 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 selected item opacity field.

  9/10

Adjust ing panel propert ies _________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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 Vis ib le drop-down turns the panel On or Off.

You can resize the panel by entering numerical values in the X and Y fields of the Vector Size setting.

The Vert ical Al ign drop-down in the UI POSITION rollout controls where the panel will be placed vertically on the screen.

  10/10 The Horizontal Al ign 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 Offset setting.

Note that the panel's Posit ioning 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.