Drawing

Stroke

You can apply one or multiple strokes to a path using the Appearance panel. For a complete description of the panel's interface, refer to the Appearance Panel section.

To open or hide the Appearance panel, To open the panel, tap on the corresponding icon in the main window.

1 - Strokes are listed in the Appearance panel among other properties.

2 - Add stroke.

3 - Stroke width.

4 - Open stroke properties.

5 - Stroke color. Tapping on this button opens the Color panel.

The Opacity and Blend Mode parameters are the same as you can find in the Layers panel.

Add and Delete a Stroke

Before adding or deleting a stroke, you should select a path in your design.

To add a stroke, tap on the ring icon in the bottom bar of the Appearance panel.

To delete a stroke, select it in the Appearance panel. Then slide over its name to the left. Then tap on the trash bin icon.

It is possible to hide a stroke without actually removing it. To do this, use the respective eye icon in the Appearance panel.

Edit Stroke Width

The Path Width tool lets you customize the Stroke width.

The path that you are going to edit must have a Stroke applied. Its original width doesn't matter, but you can decrease the amount of work to do in the following way. If the most part of the path should have a certain width, let's say 20 px, you can start from the Stroke width set to 20 px.

To modify the width, select a path, and then activate the Path Width tool. Press with your finger and hold at a point where the width should be changed.

Drag the finger off the path to set a new width at the selected point. This point will have three handles. If you drag the handle in the middle, the point that defines the width will move along the path. If you drag any of the handles on the sides, you will adjust the stroke width.

While holding down two fingers on free space, you can move a handle on only one side. This lets you create non-symmetrical strokes.

If you deactivate the tool, the handles will disappear until you activate the tool again.

The Path Width tool lets you manipulate only the stroke width handles. For other operations like selecting, moving or resizing objects, you should activate an appropriate tool.

Modifier Keys and Shortcut Summary

With an external keyboard, you can use the following shortcut and modifier keys.

Shortcut:

• W activates the Path Width tool.

Path Width tool modifier keys:

• Space switches to the Pan mode.
• Command switches to either Move or Selection tool depending on which of them was active most recently.
• Option lets you move a handle on one side keeping the position of the opposite handle unchanged. This makes the stroke asymmetrical in relation to the path.

Properties of a Stroke

The Appearance panel gives you direct access to the width and color of strokes. The Color panel is described in the Color Panel section. To access all available properties, tap on the gear icon.

The Width parameter is the same as the width you can set in the Appearance panel.

The Cap options define whether the stroke should end where the path ends, or it should go a half-width farther. In the second case, you can choose if the stroke should be rounded. The option applies to a solid line as well as to individual elements of dashed or dotted lines.

The Corner options let you select how the stroke looks at corners. You can make it sharp, rounded or clipped.

The Limit parameter lets you set up the miter limit. It defines the appearance of thick strokes in sharp corners. This parameter has no effect with rounded or clipped corners, as well as when Align is set to the right option.

Notice that, by setting certain limits, we can either clip spikes or let them be as long as they can at the given angle and thickness.

Let's take a closer look at one of the spikes. The path was selected to be able to see its location in relation to the stroke.

With higher limits, spikes at corners can go far beyond the area outlined by the path (compare images above). This is one of the reasons you might want to set some limits.

Clipping takes into account the stroke width and the angle. The wider the stroke or the smaller the angle, the quicker the corner will be clipped at the same level of Limit. In the zoomed in image, the angle of the outer corner is smaller than the inner one. This is why the outer corner was clipped, but the inner one wasn't.

The Align options let you align a stroke to the center of the path, or outside or inside of the shape. Notice that the alignment options can work only with closed paths.

The following set of controls lets you create dashed and dotted lines.

At the top, there are patterns that have different combinations of dots and dashes. You can start the creation of that kind of line by choosing the appropriate pattern.

Any dashed line can be described as a sequence of dashes and gaps of a particular length. So, in order to create your own pattern, you can fill in the Dash and Gap fields at the top. For example, to create a pattern like "long dash - gap - dot - gap", you can type in 10 - 5 - 1 - 5 starting from the leftmost dash field.

The Phase parameter moves the pattern along the path. With this slider, you can place dashes at corners of your shape or align the pattern to other features of the path.

The two pairs of identical controls let you add arrowheads and other elements to path ends. Each set of controls relates to one of the path ends.

To add an arrowhead to a path, choose one using the pattern picker. In order to adjust the arrowhead's size, change the numeric value below the pattern.

You can change the profile of a Stroke using the Profile button in the Appearance panel. It defines how the stroke width changes along the path.

By default, strokes have the Uniform profile that creates lines with constant width. However, there are other options as well. For example, the stroke width can gradually change from max to min value along the path.

You can add your own profile to the list if you wish to reuse it. To do this, you create a new profile using the Path Width tool. Keep an object with the customized profile selected. Bring up the list of profiles. Tap on the menu icon to the right from the panel's title and choose Add. To delete a custom profile from the list, select this profile and tap on Remove in the menu.