Tutorial: Build a control panel

Build a polished control panel from plain shapes: a raised panel with a shadow, a pill button, a slider, a ring gauge and a row of round controls. The techniques are the ones used in the Welcome to Clate project.

The finished control panel.

Clate has no blur or drop-shadow effect. Instead, designs like the Welcome to Clate! project create depth from shapes: a darker copy of a shape sits behind it, a little lower and to the right. Once you know this idea, you can build buttons, sliders, and gauges from a few rectangles and ellipses.

tip

Open the Welcome to Clate! project from the Welcome page and look at the Components page while you work. Click a shape and compare its settings in the property editor with the values in this tutorial. See The Welcome to Clate example project.

You need a project with an empty page. Create one with New Project, or add a page with the + button in the Pages panel.

The palette

This tutorial uses the colors of the Welcome to Clate project:

Use	Color
Page background	1E1712
Raised surface	2A2018
Inset (a well sunk into the surface)	15100B
Shadow	0B0806
Outline of a raised surface	3D2F22
Track of a slider	3A3A3A
Accent	E66B00
Headline text	F5F6F7
Small label text	9A8F84

Set a color by clicking the color swatch in the Fill or Stroke section and typing the value in the Hex field. Every new shape has a thin black outline. Set the stroke Width to 0 wherever this tutorial does not ask for an outline.

1. The background

1. Press F and drag a frame. In Layout, set W to 640 and H to 420. In Fill, set 1E1712, and set the stroke Width to 0. Name it Background in the Layers panel.

The background.

2. The panel with a shadow

The shadow comes first, so that the panel sits on top of it.

1. Press R and drag a rectangle inside the background. Name it Panel Shadow. Set X 44, Y 48, W 560, H 320, Corner Radius 28, fill 0B0806, stroke Width 0.
2. Press F and drag a frame inside the background. Name it Panel. Set X 40, Y 40, W 560, H 320, Corner Radius 28, fill 2A2018. In Stroke, keep Width 1 and set the color to 3D2F22.
3. Check the Layers panel. Panel must be above Panel Shadow. If it is not, drag Panel above it.

The shadow is the same size as the panel, moved 4 px to the right and 8 px down, and darker. That offset is the one the Welcome to Clate project uses for its panels.

Everything you draw next goes inside Panel. Draw each object inside the panel frame, and the object becomes part of the frame.

The panel with its shadow.

3. A pill button

A pill is a rectangle whose corner radius is half its height.

1. Draw a rectangle inside Panel and name it Button Shadow. Set X 36, Y 64, W 150, H 44, Corner Radius 22, fill 0B0806, stroke Width 0.
2. Draw another rectangle and name it Button. Set X 32, Y 56, W 150, H 44, Corner Radius 22, fill E66B00, stroke Width 0. Make sure Button is above Button Shadow in the Layers panel.
3. Press T and click on the button. Name the text Button Label. In Typography, type START in the text field, set the size to 14, the Weight to 600, and the letter spacing to 2. In Position, set X 32 and Y 56, and in Layout, set W 150 and H 44. In Text Alignment, choose center and middle. In Fill, set 1E1712.

The pill button.

4. A slider

1. Draw a rectangle named Slider Track: X 32, Y 140, W 224, H 6, Corner Radius 3, fill 3A3A3A, stroke Width 0.
2. Draw a rectangle named Slider Fill: X 32, Y 140, W 150, H 6, Corner Radius 3, fill E66B00, stroke Width 0.
3. Choose Ellipse from the shape flyout and draw a circle named Slider Knob Shadow: X 170, Y 134, W 24, H 24. Set the fill to 000000 with an opacity of 40 % in the color picker, and the stroke Width to 0. This soft shadow is only 3 px lower than the knob.
4. Draw a circle named Slider Knob: X 170, Y 131, W 24, H 24, fill F5F6F7, stroke Width 0. Make sure it is above the shadow.

The slider.

5. A ring gauge

1. Draw an ellipse named Gauge Track: X 380, Y 48, W 120, H 120. Turn on Arc in the Appearance section and set Start to 90, End to -359, and Ratio to 84. This makes an almost closed, thin ring. Set the fill to 3A3A3A and the stroke Width to 0.
2. Draw a second ellipse named Gauge Arc with the same position and size. Turn on Arc and set Start to 90, End to -250, and Ratio to 84, so that it draws only part of the ring. Set the fill to E66B00 and the stroke Width to 0.
3. Make sure Gauge Arc is above Gauge Track.

Look at a gauge on the Components page of the Welcome to Clate! project. Select it and read the Arc settings to see how the Start, End, and Ratio values shape the ring.

The ring gauge.

6. Round controls in a row

1. Draw a circle named Round Control: X 32, Y 220, W 64, H 64, fill 15100B, stroke color 3D2F22 with Width 1. The darker fill makes the circle look sunk into the panel.
2. Draw two more circles inside the panel in the same way, with the same size, fill, and stroke. Set X to 150 for the second one and to 300 for the third, and Y to 220 for both.
3. Select the three circles. In the Alignment row of the Position section, click the last button to open the distribute menu, and choose Distribute horizontal spacing. The gaps between the circles become equal.

See Aligning and distributing.

Three round controls, selected.

After Distribute horizontal spacing the gaps are equal.

7. A label

Press T and click in the panel above the button. Name the text Panel Label. In Typography, type CONTROLS in the text field, set the size to 11, the Weight to 600, and the letter spacing to 2. In Position, set X 32 and Y 24, and in Layout, set W 200 and H 18. In Fill, set the text color to 9A8F84.

The label.

8. Add a gradient

Gradients add a metallic look. Select Button and open the color picker for its Fill. Choose the Gradient tab, then choose Linear, and experiment with the stops. The triangles at the top of Welcome to Clate! use a linear gradient from E66B00 to FBE3B8. See Fill and stroke.

9. Finish

• Choose Zoom to Fit to see the panel.
• Select Background and click Preview to see it as QML.
• Open the main menu and choose Export to QML... to export the project.

The finished panel.

What you learned

• A darker, offset copy behind a shape gives it depth.
• A small set of colors, radii, and text styles makes a design look consistent.
• Frames keep related parts together. Layer names make a long list easy to read.
• Distribute and Align keep rows of controls tidy.

Next steps

• Pages and layers
• Fill and stroke
• Export to QML