I am using width over path to create two directions thick to thin with a rectangle. This is the first time I have tried this method. The path has very jagged lines - with the source repeating over the stroke. How can I smooth out and get flat lines? Is is possible?
iMac (Retina 5K, 27-inch, Late 2015), macOS Sierra (10.12), 8gig ram, amd R9 M390, core 1%
If you're actually using an image, then all the rules apply: enlarging the image to a size larger that its native resolution will introduce artifacts.
The shape you're showing is easily made in Motion using Shapes. You can actually apply "vector" shapes (or a group containing vector shapes) as an Image "source". Vector shapes have "infinite" smoothness.
If you're actually using vector shapes as the image source for the stroke, then set the Render menu > Quality to Best.
Anything less is likely to display artifacts because the canvas resolution is reduced to increase rendering speed.
Yes - they were done with the rectangle tool, then I used Convert to Points (making them the "old-fashioned" shapes). I used one as the "master" and the other as a mask cutting the hole inside the larger square. They are not so much "linked together" as they are the "brush" for the Paint Stroke (curved Bezier line in red).
To keep lines smooth - draw large -- scale down (never up; although with shape lines [vector graphics] that should not be an issue).
The fastest way to draw this shape is to hold down the Option and Shift keys and drag out a rectangle shape from near the center of the canvas. Change its fill color. Draw a second one inside the first the same way. Select both rectangles (individually) and from the Object menu, select Convert To Points... Take the smaller rectangle (select in the layers list) and drag it onto the larger rectangle. Hold it there for a couple seconds and you will be presented with two choices. Select Add Mask to Shape, then in the Mask inspector, click Invert Mask checkbox. Select one of the rectangles (so that the object outline shows) and right click and select Edit Points from the popup menu. You can click and drag on the round points to change the shape. Do the same for the Mask shape.
Draw a "line" (Pen Tool) on the canvas. Hit the Return key to complete the line shape without closing it. In the Shape Style inspector, turn off Fill if it's on. For the Outline, set the Brush Type to Image. Drop the masked shape into the Brush Source drop well. Increase the Width (a lot) and increase the Spacing until you get the relationships of the rectangle shapes the way you want it to look. [I expect you know all this so far - you've already been into the Stroke inspector].
In the Stroke inspector, there is an option to Align Brush Angle which will automatically align the "Image" source to the tangent of the line. You can also offset the Brush Angle to offset the orientation to the tangent (creating that "interlinked" look in the image I posted.)
HTH
Are you trying to do this by controlling the width of the rectangle stroke/outline? ... okay. The slider for the Spacing only goes down to 5% (therefore, always aliased -- adjust the Brush Profile gradient to soften the line). However, if you click on the Spacing value itself, and drag down, you can get it down to 1% (smoother line -- but still not perfect).
Ah, yes - setting the render quality to best does smooth it out a little, but still noticeably ridges along the path.
Hi Fox-M, I really appreciate your time.
I kind of understand the advice you are giving, but not completely.
The shape I posted in the question is done in Motion, using the rectangle tool, and the image source is another rectangle - made in motion.
I didn't import any vector graphic, because I want to be able to publish the size, width etc of the square to FCPX.
I made a square with the rectangle tool. I made smaller square. I set the big square path to 'Image' and used the small square as the source for the image.
Then I used width over stroke to adjust the widths to get two directions of thick to thin.
For my project, I am need to reproduce the exact likeness of an AI reference design, and then animate it with publishable parameters.
My problem is that the method of using image brush with an image source - produces the jagged lines. Is there are a way to smooth out and get flat strokes - using the image brush method with width over stroke applied?
The smooth examples you provided there, all linked together, are they done by importing a vector graphic, or are they done in Motion with native tools? if I could make just 1 of those with native tools in Motion I can move forward. I need to be able to publish size and width. Sorry, I am a little frantic and desperate for a solution at the moment, hence my erratic replies.
Hi Fox_M
The method of masking/cutting 1 shape into another to create an irregular width is something I would usually do. But with that method, there is no width parameter that can be published to FCPX. So I was trying to get the same irregular widths with the width over stroke instead.
If the thick to thin runs in just 1 direction, the stroke stays smooth and flat, but it there are two lines of thick to thin - the jagged edges come up.
I tried doing just two right angle bezier and flipping them over and combining them within a group - but I have discovered that width link and stroke scale link between objects with image paths - appears to be broken...so i am left with using just the one path.
I've taken up too much of your time today, I want to thank you and Karsten for helping out.
How to smooth out edges of an image brush when width over path is applied
