How do I make edges "noisey"?

[bobdobbs]

So it's pretty easy to make and manipulate shapes in Designer.
I can also turn them into curves and manipulate those curves to create the shapes that I want.

But how do I make object edges "noisey" or "distressed"?

For example, the aesthetics of this cartoon illustration have been augmented by making the edges glitchy and uneven.
The effect is that the object is aged or created by an unsteady hand.
This is great for giving a sense of "roughness" or an unpolished vibe.

 

Another example is the rough edging of the letters of this font:

https://www.fontspace.com/hansel-rough-font-f54863
 

Personally I can think of two ways: 

1) After creating an object, add many nodes use them to distort the edge area.
This sounds highly labour-intensive, so not always ideal

2) Convert the image to raster and use brushes, images or other objects to erase parts of the edge.
This will be fine for many situations. But won't work if I want to keep the object as a vector image.

What other techniques can be used for this effect?

[thomaso]

How about assigning an unsteady brush stroke?

[StuartRc]

There are a lots of simple ways to achieve this with vectors :

A. Pencil tool and sculpt
You can use the Pencil tool to distress a vector edge. 
1. Convert shape to curve
2. Select Pencil Tool 
3. Turn on Sculpt on context bar
4. Redraw your shape

B Add additional irregular shapes to edges using Boolean options
1. Draw some shapes
2. Position over edge and 'weld' with Boolean

C. Use the new Knife Tool to cut out shapes from the edges of a regular shape
D. Draw additional shapes and join using the new Shape Builder tool
 

[sfriedberg]

Even in applications, such as CorelDRAW, which have an explicit curve roughening tool, you seldom get what you want.

I think I would employ Affinity Photo in the subtle roughening of those shapes.  Bring the Designer vectors into Photo and convert them to raster.  Then add/subtract some noise of appropriate size/frequencies with appropriate masks, then threshold or make a levels adjustment on the result.  The result will be raster rather than vector, but you can quickly process an arbitrary amount of curve this way.

If you insist on a vector result, you will need lots and lots of nodes, and if you don't want to put them in by hand, you probably need an automated trace program, which the Affinity suite currently does not have.  CorelDRAW does have a trace tool.  IIRC it used to be a standalone application, but some years ago it was integrated into the main app of the Corel Graphics suite.

[laurent32]

Yes, I like this one :

[G13RL]

@bobdobbs, 

If the effect applied on my screenshot suits you, you can try the "Afans Filters" assets that @Belot kindly shared in the resources, the whole thing is still vector-based.
Here is the link to these assets:
https://forum.affinity.serif.com/index.php?/topic/82517-the-coolest-filters-for-ad/#comment-434378
My example is made with "Diffuse" from the "Noise" category, with the intensity at 0.3px. 
I hope this will help you.

[François R]

On 1/6/2023 at 2:06 AM, bobdobbs said:

So it's pretty easy to make and manipulate shapes in Designer.
I can also turn them into curves and manipulate those curves to create the shapes that I want.

But how do I make object edges "noisey" or "distressed"?

For example, the aesthetics of this cartoon illustration have been augmented by making the edges glitchy and uneven.
The effect is that the object is aged or created by an unsteady hand.
This is great for giving a sense of "roughness" or an unpolished vibe.

 

Another example is the rough edging of the letters of this font:

https://www.fontspace.com/hansel-rough-font-f54863
 

Personally I can think of two ways: 

1) After creating an object, add many nodes use them to distort the edge area.
This sounds highly labour-intensive, so not always ideal

2) Convert the image to raster and use brushes, images or other objects to erase parts of the edge.
This will be fine for many situations. But won't work if I want to keep the object as a vector image.

What other techniques can be used for this effect?

 

Hi @bobdobbs

Unfortunately, Affinity Designer is severely limited as a vector tool, and we're even in the process of retiring it completely. Precisely before April 2023, when we'll put all Affinity software in the grave here along with other programs that disappointed in one way or another. 

But as @sfriedberg says, it is not easy to find algorithms in other programs that do what you want as 100% vector as you want it. Many programs have algorithms that are designed to really twist strokes and curves and shapes, and it looks like the application scenarios are best suited to the advertising industry. I've had a lot of trouble using them for restrained effects.

I myself need subtle effects smoothly over curves, or conversely soft wave-like effects that go over long distances, giving my work a more organic look. I avoid in many types of my illustrations and works that they appear with perfect mathematical curves or lines, because my clients notice it and they comment on it! The brain is used to looking at natural curves and deviations, and anything vector that looks unnatural e.g. straight or perfectly circular the brain notices as unnatural. If you want something to appear natural, then it needs to be manipulated to not look perfect. For me, this is an unsustainably large task to perform manually with the node tool.

The best bet for a feature-rich vector distortion program is the excellent Vectorstyler, which has many features that can be configured in extremely many ways, and you can even save these configurations as REAL styles or presets. But not too many either. The year is 2023, software and hardware can easily, easily handle it, it's exactly the number of nodes needed, and it's peanuts by the way compared to the complexity of posters and full page works I do.

Vectorstyler is the program I have used that has given me the best options for such things, but even this program has not really hit the sweet spot. It is the noise wave distortion I have tried to customize:

https://www.vectorstyler.com/documentation/shapeeffects/distortion/

Vectorstyler (trial available) is worth checking out (and the company is very open to feature/improvement requests), but probably not a direct solution for you either. But just to say you're using the wrong program if you're looking to work seriously in vector and are after output in vector.

[loukash]

On 1/6/2023 at 2:06 AM, bobdobbs said:

how do I make object edges "noisey" or "distressed"?

Yeah… my #1 missing Illustrator feature is the live Roughen vector filter. 

On 1/6/2023 at 2:06 AM, bobdobbs said:

What other techniques can be used for this effect?

Stroke pressure. The more nodes your shape has the better, because the pressure profile is "node-to-node".

Here a couple of examples I have posted in 2021:

Also works with a dash stroke:

Edited January 7, 2023 by loukash
uh, strike that…

[loukash]

7 minutes ago, loukash said:

The more nodes your shape has the better, because the pressure profile is "node-to-node".

Actually I was wrong here: The pressure profiles goes from the curve beginning to the curve end, regardless the node count. So if you need a more roughen effect, you may need to break the curve into pieces. And merge it into a single vector object afterwards.

[lacerto]

On 1/6/2023 at 3:06 AM, bobdobbs said:

Another example is the rough edging of the letters of this font:

https://www.fontspace.com/hansel-rough-font-f54863

As for roughening edges of text, there is some promise in Affinity apps, as using pressure stroke, as shown by @loukash above, and possibly using bitmap fill on the stroke of the letters might work, even if pretty tedious to apply.

a) When using bitmap noise, care must be taken to apply the "Nearest" option to avoid blurring, and at export time downsampling should be disabled to avoid  mid tones in PDF output:

b) When using pressure, the biggest problem seems to be to produce a kind of a stroke that will not produce artifacts when exported:

roughened_text_ad.pdf

The benefit of Affinity applied effects is that text is retained as text when exported to PDF, and that the effect can be applied as per character. Pressure profiles can also be saved (at least temporarily).

In Illustrator, where Roughen filter can be applied to text frames (but not to selected text), the effect in PDF exports stays so working is very predictable:

 

roughened text_ai.pdf

...but the exported PDF does not retain text as text (but does retain editability as text in Illustrator, if that export option is used when PDF was exported).

It seems that roughening effects in VectorStyler can only be applied on artistic text; export predictability seems to be pretty good but it is difficult to produce consistently roughened shapes, partly because effects are applied directionally, so lots of experimenting is required, and possibly applying the same effect with different parameters multiple times. But as mentioned, the parameters can be saved as styles. In CorelDRAW noise and distort filters can be applied on artistic text but are not applied as per character which makes them pretty useless in text content. Roughener shaping tool can be used selectively but that would be quite a tedious job.

As for applying roughening to shapes (like triangles), Illustrator is rather limited but there is no match to its consistency and general behavior, but if the kind of diffused results are wanted, applying raster-based effects would probably be more appropriate.

[BTW. The referred "Afans Filters" are nothing but APhoto Live Filters exported to assets. They do not work properly (not all effects actually produce an effect), and when applied, will rasterize everything on the page (even vector objects placed above the filter), unlike when applied as live filters as per object in APhoto or Publisher (via Photo Persona). So if live filters are wanted to be smuggled into Designer, it is best to just edit the .afdesign file in Photo, apply the filter there and then continue editing the file in Designer.]

[loukash]

20 minutes ago, lacerto said:

When using pressure, the biggest problem seems to be to produce a kind of a stroke that will not produce artifacts when exported

It's a bug: 

Don't know if it's been fixed in v2.

Hence the dashed stroke outline is more reliable on export. To make it appear more random and rough, use a tight decimal <1 dash sequence, e.g. 0.4 0.2 0.5 0.3.
If you use rounded dash, then the first dash can be 0 to display as a circle, the gaps should be at least 1 to give the full half-width.

[François R]

3 hours ago, lacerto said:

It seems that roughening effects in VectorStyler can only be applied on artistic text; export predictability seems to be pretty good but it is difficult to produce consistently roughened shapes, partly because effects are applied directionally, so lots of experimenting is required, and possibly applying the same effect with different parameters multiple times. But as mentioned, the parameters can be saved as styles. In CorelDRAW noise and distort filters can be applied on artistic text but are not applied as per character which makes them pretty useless in text content. Roughener shaping tool can be used selectively but that would be quite a tedious job.

You can also convert text to curves.

[lacerto]

1 hour ago, François R said:

You can also convert text to curves.

Yes, shape effects can naturally always be applied on curves. I was primarily looking for ways to do equivalent to what was asked by OP (when using a special font with rough edges) that would retain at least editability of the text (even if the effect itself is rasterized, as it is when using a bitmap fill in character strokes) but could ideally also be exported as text (searchable if possible, or editable as an embedded native feature).

[lacerto]

4 hours ago, loukash said:

Don't know if it's been fixed in v2.

No, it is still there. Using different pressure curves gives different artifacts. E.g., the one shown in my screenshot has filled inner shapes (which might be useful to produce kind of broken typewriter effects), but having a bit different curve might keep inner shapes open but produce odd ray-like artifacts extending far beyond the character shapes. I'll check if dashed lines could fix this. If the kinds of shapes that are shown on canvas could be produced, this would be a great feature. I have not tried this with true pressure so the curves that I have tried have all been mouse-drawn curves.

[loukash]

Just now, lacerto said:

the one shown in my screenshot has filled inner shapes

Oh, I think that's even a new v2 bug. I remember some reports on that. 

[Old Bruce]

Note: You will have to reload the Displacement map after making changes to the amount of noise. Bit of a pain.

If you have access to Affinity Photo you can use the Displace filter layer to act on a Pixel layer with Noise to get this sort of thing

I include the file. rough 01.afdesign   I used a Pixel layer with a white fill, you could use a File with a texture of Paper or Sand instead of using the Layers Below in the Displacement Map. After turning off the Pixel layer the roughening remains.