Buttons and Components

Let us complete our thermostat design by adding the final two elements: the knob and the temperature buttons. We will learn how to work efficiently by transforming these elements into a single component.

Step 1 : Button Knob Creation

Start with the base.

• Create an ellipse with dimensions of 44x44, apply an extrusion value of 4, duplicate it, and adjust the duplicate to 36x36.
• Select both ellipses, navigate to the "Boolean" operations menu, and perform a "Subtraction" to form a single ring-shaped object.
• Adjust the smaller ellipse's position forward along the Z-axis to introduce depth.
• Copy the smaller ellipse outside the Boolean group, resize it to 34x34, and adjust its Z-axis position for a depth effect.
• Group all ellipses and rename the group to "knob".

Add materials to our knob base.

• Apply a blue color to the boolean group and add a new material named 'rainbow' and position it below the 'lighting' layer. Then, change the blending mode to 'Screen'.
• Add a fourth material and choose 'Depth' as its type. Set both color to cyan, with the first one at 0% and the second at 100%. Arrange the color stops as follows.
• Switch the gradient type to 'Linear.' Adjust the Y value of the direction to minus 21. Then, set the near and far values to minus 29 and 26, respectively.
• Incorporate the final material and select 'Matcap' to project a texture onto the shape. select the first option on the top left and Change the blending mode to 'Screen'.

Add materials to our knob button.

• Copy effects from the boolean group to the single ellipse, make slight modifications for contrast.
• Remove the 'rainbow' layer, then adjust the 'lighting' layer's opacity to 80% and change its blending mode to 'Overlay'.
• On the 'depth' layer, arrange the color stops as follows. Reset the Y value of the direction to 0. Adjust the near and far values to minus 20 and 7, respectively. Change the blending mode to 'Overlay'.
• Add a new 'outline' material and set the outline color to white with a width of 1. Adjust the layer's opacity to 50% and change its blending mode to 'Overlay'.
• Position the 'matcap' layer at the forefront and make sure its blending mode is set to 'Screen.'
• Place your knob button on the thermostat, ensuring it is accurately positioned near the large progress ring along the Z-axis.

Step 2 : Temperature Button

Adding a 'Plus' Button

• Start by replicating the 'Knob' group, rename it to 'Plus Button,' and position it at the thermostat's base.
• Within the 'Boolean' group, adjust the larger ellipse to 56x56 with an extrusion of 10.
• Modify the smaller ellipse to 46x46, maintaining an extrusion depth of 10.
• Resize the final ellipse to 44x44 with a reduced extrusion depth of 5 and pull the Z-axis forward to achieve the desired extrusion effect.

Applying Materials

• Copy materials from the base layer and paste them onto the Boolean group.
• Detach the Boolean group before making exclusive adjustments to its materials to avoid simultaneous changes with the base layer.
• For the 'Depth' layer within the Boolean group, adjust the 'Origin' values (X to 0.21, Y to 49, Z to -23), the 'Near' value to 1.80, and the 'Far' value to 84.
• Apply an 'Outline' material with the outline color set to white, width to 1, and blending mode to 'Overlay'.
• Copy the materials from the Boolean group and apply them to the individual ellipse, making necessary adjustments to the 'Depth' layer by adjusting the 'Origin' values: set x to minus 7, y to 16, and z to minus 7. Update the 'Far' value to 37 and arrange the color stops accordingly.

Creating the Plus Sign

• Use the Path Tool to create two dots, set the path's extrusion size to 3, and adjust the path size to 15 for x, and 0 for both y and z.
• Ensure proper alignment of the paths within the 'Plus Button' group, select both the path and the individual ellipse. In the 'Alignment' options, set both the x and y axes to 'Center’.
• Duplicate one path and rotate it by 90 degrees on the Z-axis for the plus sign, ensuring a center alignment.
• Select both paths, change the cap style to 'Round', and apply a cyan color, deactivating the 'Lighting Material'.

Component Transformation and Duplication

Now, let's transform our 'Plus Button' into a component, indicated by four dots. Next, duplicate it to generate an instance of the component. Remember, any modifications made to the master component will be mirrored across all its instances. Rename the duplicated group to 'Minus Button' and hide the 'Path 2' layer.

Conclusion

You've now created a sophisticated thermostat interface using basic geometric shapes, materials, and turning elements into reusable components. Next, we will add animations to our thermostat.