Laying Out the Background Elements
ACA Objective 4.1
Now that you have layers for your frame and background assets, you can create these elements using the shape and drawing tools in Animate CC. You’ll be using some of the vector tools you’re already familiar with, but you’ll also be introduced to the concept of variable-width strokes and the super cool Paint Brush tool.
Drawing the background
VIDEO 4.3
Drawing the Background
To draw the background to the greeting card project, you’ll use the new Brush Library and the Paint Brush tool in Animate CC.
To begin, lock the Frame layer to ensure that you don’t draw anything in it by mistake.
Select the BG layer within the timeline and select either the Rectangle tool (
) with Object Drawing Mode enabled or the Rectangle Primitive tool (
).You’re now ready to draw the background.
Drag from the top left of the Stage to the bottom right to draw a shape exactly the same size as the Stage: 550x400.
You may need to make some adjustments to the size and position of your shape, depending on your snap settings and how steady a hand you have. Do this from the Properties panel with the object selected.
If you haven’t done so already, choose a background color for your shape. I’m using #FF9933 in the example shown in Figure 4.5, but you can choose whatever you like.
Figure 4.5 I’m using an orange-ish background for my shape.
You don’t need any stroke color for this project, so choose None for the Stroke color. It’s represented in the color picker as the white block with the red diagonal line running through it (Figure 4.6).
Figure 4.6 No stroke color as represented in the Properties panel
)
Decorating with the Paint Brush tool
VIDEO 4.4
Decorating with Art Brushes
Now for some freeform fun! The Paint Brush tool (
) lets you draw out strokes with vector art attached to them. This allows for massive creative possibilities, whether you’re using built-in brushes from the Brush Library or using custom brushes you created with the Adobe Capture CC mobile app and shared with Animate CC via the CC Libraries panel.
To begin, select the Paint Brush tool from the Tools panel. The Paint Brush tool Properties panel opens (Figure 4.7). You’ll be drawing these decorative assets in the BG layer.
Figure 4.7 The Properties panel with the Paint Brush tool selected
Choose Window > Brush Library to open the Brush Library.
In the Brush Library, you’ll see a number of categories, which contain a wide variety of prebuilt vector art brushes.
Find one you’d like to use and select it.
It should now show up in the Style area of your Properties panel. You can see in Figure 4.8 that I’ve chosen the brush named Chalk -Scribble from the Artistic > Chalk Charcoal category in the Brush Library.
Figure 4.8 The Brush Library
Now it’s time to get creative!
Using the Paint Brush tool, drag across the Stage to generate freeform vector artwork. Don’t make your art too busy, but don’t hold back too much either. Make it interesting.
NOTE
You can also access the Brush Library directly from the Properties panel by clicking the Brush Library icon (
).Select a Shape color. In Figure 4.9, I’ve chosen to use something a few steps darker than my background (#A35A12), but there’s no reason you couldn’t use a number of variations in color or even stroke width. You can control all these properties from the Properties panel with the Paint Brush tool selected.
Figure 4.9 An artistic background
Once you’re happy with the results, lock the BG layer and unlock the Frame layer for the next step in this project.
)
)
EDITING AND MANAGING VECTOR ART BRUSHES
You can also edit existing brushes by clicking the Edit Stroke Style icon (
) in the Properties panel with the Paint Brush Tool selected. This allows even greater variation in how the vector art is mapped to your strokes.
It is also possible to use the Paint Brush Options dialog box to convert vector art brushes into pattern brushes (and vice versa). Pattern brushes are great for things like frames and borders.
To manage all the brushes within your document—or even save custom brushes to your Brush Library—click the Manage Paint Brushes button in the Properties panel with the Paint Brush tool selected.
Drawing the frame with variable-width strokes
ACA Objective 2.6 ACA Objective 4.5
VIDEO 4.5
Making a Frame
Using variable-width strokes in your project is an easy way to impart a bit of controlled chaos to simple strokes. Animate CC will, in place of a linear stroke, impart a stroke whose width varies at certain points. The best way to grasp the concept is to use it. You’ll create a nice frame for this project and apply a variable-width profile to the frame stroke.
Select the Frame layer so that you can draw the object. You may want to ensure all other layers are locked before proceeding.
Choose the Rectangle or Rectangle Primitive tool and draw a vector object the exact size of your Stage: 550px by 400px. Use whatever color you like for the stroke (in Figure 4.10, I’m using #336600), and choose a transparent fill.
Figure 4.10 Drawing Object Properties
With the object selected, choose a profile from the Width menu in the Fill And Stroke section of the Properties panel. If something doesn’t look right, select the Width tool from the Tools panel and tweak existing width points or even create new ones.
For an additional creative flourish, apply a vector art brush to the variable-width stroke as well. In Figure 4.11, I’m using Artistic > Chalk Charcoal > Chalk - Round from the Brush Library and a stroke value of 26.
Figure 4.11 A little extra creative flourish added with a vector art brush
)
Grouping the Layers Within a Folder
ACA Objective 3.1
VIDEO 4.6
Grouping Layers
One of the best things you can do to keep things organized in your timeline is to group layers. You can accomplish this by creating a layer folder for specific sets of layers.
Click the New Folder button below the layer stack on the bottom left of the timeline to create a folder to contain your static background elements.
Double-click the folder name and change it to Background.
Drag both the BG and Frame layers into the layer folder you just created (Figure 4.12).
Figure 4.12 BG and Frame layers added to the new layer folder
)
){kind=link}
){kind=link}
){kind=link}
With the folder created, you can now control the lock status, visibility, and outline mode for all layers from the folder itself. You can also collapse and expand the folder by using the small triangle beside the folder icon.