Design Effects

Qt Design Studio provides a set of effects in the Properties view that you can apply to the components.

The available set of Design Effects applies to the Qt Design Studio components:

• Layer Blur
• Background Blur
• Drop Shadow
• Inner Shadow

Applying Layer Blur on a Component

Use Layer Blur to make a component blurry. To apply Layer Blur to a component, follow these steps:

1. Select the component in the 2D or Navigator view.
2. Go to the Properties view > Effects and select Add Effects.
3. Go to Layer Blur and enter the level of blurring you need in Blur.

   

Applying Background Blur on a Component

Apply Background Blur to a component when you want to blur a selected component behind it. There are a few essential conditions you should consider.

• Make the component partially transparent. With solid color, the background component is not visible.
• Use a solid color on the background component. On a transparent background component the Background Blur does not function properly.

  Note: Currently, the Background Blur functions on top of only one selected background component. All the other components ignore the blurring.

After fulfilling the above conditions, follow the next steps to apply the Background Blur on a component.

1. Select the component in the 2D or Navigator view.
2. Go to the Properties view > Effects and select Add Effects.
3. Go to Background Blur and enter the level of blurring you need in Blur.
4. In the Background dropdown menu, select another components as the background component.
5. Drag the component on top of the background component. The area from the component covering the component selected as Background gets blurred. However, any other component behind the component doesn't blur.

Applying Drop Shadow on a Component

Shadows can either fall outside or inside the component. The shadow that falls outside is a drop shadow. To apply a Drop Shadow to a component, follow the instructions below.

1. Select the component in the 2D or Navigator view.
2. Go to the Properties view > Effects and select Add Effects.

This adds the default drop shadow to the component. To adjust this shadow, follow these instructions.

1. Select the component and go to the Properties view > Effects. Then, select next to the shadow type selector dropdown menu.
2. Adjust Blur, Offset, Spread, and Color to shape the shadow.

The Show behind feature in Drop Shadow only works when the component is transparent. To use it:

1. Select the component with a drop shadow.
2. Go to the Properties view > Effects. Then, select next to the shadow type selector dropdown menu.
3. Select Show Behind.

   

Applying Inner Shadow on a Component

Inner shadow works inside a component. To apply Inner Shadow, do the following:

1. Select the component in the 2D or Navigator view.
2. Go to the Properties view > Effects and select Add Effects.
3. From the dropdown menu, select Inner Shadow.
4. Adjust Blur, Offset, Spread, and Color to shape the shadow.