Using the Effects Tab

Since version 2.5, Saola Animate has added some new features, including the introduction of the Effects tab. This tab contains sections for editing element’s shadow, filter and clip effects. And their appearances really contribute a huge effort to make the design visual more beautiful. In this tutorial, we will explore how do they work.

Drop Shadow

To begin with, most of our designs need to be created and used in two dimensions. Therefore, a solution that can help giving our 2D designs more realistic is adding elements of light and shadow into the design. From a design standpoint, drop shadow can make items or information stand out. For example, on this banner design, drop shadow helps make featured content more clickable:

On the design above, a drop shadow is a visual effect consisting of a drawing element which looks like the shadow of a pizza frame.  As a result, it gives the impression that the pizza picture is floating above the background surface. In order to create a shadow of any elements in Saola Animate, perform the following:

Step 1: Select a desired element.

Step 2: In the Properties pane > Effects tab > Shadow section > in Style combo box, choose Shadow to set the shadow.

Step 3: When Shadow is enabled, you can change the properties to customize the shadow. In this example, I have made the angle of 45 degrees between the shadow and the pizza picture in Saola Animate with another properties like this:

Above all, drop shadows are very common in design projects of all kinds, but also can be misused. A typical drop shadow faux pas is to make them too large, too dark, or too sharp. So, paying a bit more attention to the interplay of light and shadow in real life can give us some great inspiration for making our designs look more life-like.

Filter Section

When it comes to designing color, one of the most important elements helps to complete an effective visual design. Firstly, using color can gain interest and generate emotions. Further, color can create ideas or bring some kinds of messages. And color can also hold a special meaning, like, some studies underscored the fact that bright colors can express a positive mood. For instance, I chose the salmon color for the banner background because it is considered a signal of health and happiness. In addition, there is a fact that the warm hue also can stimulate energy and encourage actions. As regards the burger and pizza pictures, I used the filter effects in Saola Animate to get the better color of them. Since the original color of the burger was a bit pale, I have applied a yellow boost preset of filter effect to the burger picture, thereby making it fresher.

Moreover, I have used the filter, shadow effect and Auto-keyframe mode to make an animation express a chosen and unchosen meal, like this:

In this banner, I have changed the burger’s Saturate and added a bit Blur property when the mouse over the pizza. And of course, I have made a pizza pop up by shadow effect too. However, to apply filter effect to an element or a picture in Saola Animate, do the following:

Firstly, choose an element, then in the Properties pane > Effects tab > in the Filter section, change the properties as you want. When you change your mind and want to recover the original look of an element, just click Restore Defaults.

Clip Section

Finally, the last one in the Effects tab is the clipping effect. Basically, this effect allows you to cut and hide part of your element. To be more precise, after applying and adjusting the clipping effect to an object, the part of the object that is inside the clipping shape will show up, while the one outside will disappear. Overall, there are 3 styles of clipping shape that available in Saola Animate: Rectangle, Circle and Oval. 

Besides, you can do more with the clipping effect. For example, combining clipping effect with animation can create a transition effect. Specifically, when we apply that combination to the text, it will appear like this:

In order to apply the clipping effect to an element, follow steps:

Step 1: Select an element.

Step 2: In the Properties pane > Effects tab > Clip section > in the Style combo box, choose the shape you want to.

Step 3: After selecting a clipping shape style, adjust the properties and add a keyframe if needed.

For instance, if you want to make a text appear from left to right like the one above, you need to choose the Rectangle style. After that, set its Right property animate from 100% to 0%. Furthermore, there are many uses of the clipping effect as the entrance or exit transition that you can create.

To summarize, the Effects tab with its three sections may help designers as the best supports for designing their visual works. And that’s all about using the Effects tab in Saola Animate.