Using vector brushes in Adobe Animate CC

When Adobe released Animate CC, one of the new features we briefly mentioned was vector brushes, which add a whole new dimension to your graphics and animation design workflow.

In the previous version of the app, brushes were essentially brushes. What they’ve done is essentially set up colored pixels that can be set in motion with a little extra work on your part. That’s a thing of the past, and in many ways Adobe has accelerated your workflow. Multiple steps have been reduced to a few mouse clicks.

  1. Using the new vector brushes in Adobe Animate CC
  2. Choosing a brush set in Adobe Animate CC
  3. How to use the new Animate CC Vector Paint Brush Tool?
  4. Using the art brush options panel in Animate CC
  5. Apply Creative Cloud Shared Library Brush in Animate CC
  6. Animate a shape created with an Animate CC vector brush

Using the new vector brushes in Adobe Animate CC

Another aspect of the brushes that we always found a little frustrating was that the brush selection was somewhat restrictive. You have received the brushes in the app, or the brushes created manually in the app. That all changed with the release of Animate CC and the inclusion of your CreativeCloud library in the app. The Brushes feature in Adobe Capture lets you turn photos taken with your smartphone or sketches created on your tablet into a brush that can be used directly in Animate CC.

Let’s see how it works.

Choosing a brush set in Adobe Animate CC

In this example, created by one of the best digital animators, Chis Georgenes, we used the pencil tool to create a small clump of grass in the foreground. Obviously a series of lines is not a natural representation of grass.

To give the grass a more natural look, we have lines and pressed brush library button – it looks like a coffee cup with tassels sticking out – in the properties window. This opened the Brush Library panel.

From there we go chose Artistic > Ink > Calligraphy2 and double-clicking the brush immediately applied it to the selection. If you click on one of the stocks you will see that it is a vector object. This means you can edit any object to get the look you want.

How to use the new Animate CC Vector Paint Brush Tool?

The great thing about the new Paintbrush tool – the Line Brush in the Tools panel – is that it draws vectors. You can draw a shape, in this case a new tuft of grass, and the stroke is a series of vector dots.

This gives you a lot of flexibility. For example, in the Fill & Stroke panel, we used the slider to increase the stroke width to about 20px.

Keeping the previous brush style, this increase in width turned the grass into shrub leaves. We also opened the Width popup in the panel and chose a slightly different stroke width treatment to give the leaves a “more wavy” look.

Using the art brush options panel in Animate CC

Another great benefit of using the Paintbrush tool is the ability to look at your work and decide you can change it. This can be done by selecting the object with the stroke and clicking the pencil in the style area. The Art Brush options panel opens.

This panel is quite easy to understand. You’ll see the current brush and the shape is between two red guides. The first two options speak for themselves. Select one of these and the style will scale along the vector or extend the length of the vector stroke.

The third option – Stretch Between Guides – is where you can really change the “appearance”. When you place the cursor on a guide, it changes to Splitter cursor. If you drag the guide along the preview, you’ll see how it changes shape across the width. If you notice the numbers below the selection, they change as you drag the guideline. Once you are done, click the Add button and your changes will be applied.

Apply Creative Cloud Shared Library Brush in Animate CC

As we noted a few months ago, Adobe Capture CC has become home to a number of one-off mobile apps, including the now-defunct Adobe Brush CC. A great feature of the Brushes section in Capture CC is that you can create brushes from photos. Don’t worry about it. When it comes to Animate CC, not all brushes are created equal. These can be vector brushes for Illustrator CC or bitmap brushes for Photoshop CC. When it comes to Animate CC, only Illustrator brushes can be used.

When you select an object in Animate CC and open the Creative Cloud library, you need to find the brushes. When you do this, you are note that only Illustrator/Vector brushes that can be used in Animate CC are marked .If you turn over one of the “darkened” brushes, you will be told that the brush cannot be used. To apply the brush – in this case we selected the Vector Brush in my library – you can see it applied to the selection immediately.

Animate a shape created with an Animate CC vector brush

Moving a cleaned object is actually quite easy. You just need to understand that there are two types of motion in Animate CC: Objects and Shapes . In this example, the grass will sway in the wind. To do this, we just need to change the shape of the object.

The first step in this process is to add a keyframe where the animation ends…in this case frame 30. To create a keyframe, right click on frame and select “Insert keyframe” /strong> from the context menu.

The next step is to right-click between the two keyframes and select “Create Shape Animation” from the drop-down menu. The span turns green.

Switch to the Subselection tool and click on the shape at frame 30. Select a point or path and move it to a new location to create a shape change. Press the return/enter key to preview the animation.

Leave a Reply

Your email address will not be published. Required fields are marked *