Jump to content
You must now use your email address to sign in [click for more info] ×
Our response time is longer than usual currently. We're working to answer users as quickly as possible and thank you for your continued patience.

How do I make edges "noisey"?


Recommended Posts

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.

iqfgssN.png

 

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?

Link to comment
Share on other sites

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
 

 

Affinity Version 1 (10.6) Affinity Version 2.5.2  All (Designer | Photo | Publisher)   Beta; 2.5 3.2516
OS:Windows 10 Pro 22H2 OS Build 19045.4412+ Windows Feature Experience Pack 1000.19056.1000.0
Rig:AMD FX 8350 and AMD Radeon (R9 380 Series) Settings Version 21.04.01 
Radeon Settings Version 2020
20.1.03) + Wacom Intuous 4M with driver 6.3.41-1

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Yes, I like this one :

image.jpeg.5059e751535195973c177753accd6d2f.jpeg

MacBook Pro 16 pouces (3456 × 2234), 2021 / Apple M1 Pro / 16 Go / macOS Ventura Version 13.4.1 (22F82)
+ 31,5 pouces (2560 × 1440) + 27 pouces (1080 × 1920) + iPad (8th generation) / iPadOS 17.2 + Apple Pencil + 

Macmini6,2 Quad-Core Intel Core i7 16 Go / macOS Catalina version 10.15.7 (19H2026)
MacBookAir6,2 Intel Core i5 double cœur 4 Go / macOS Big Sur version 11.7.7 (20G1345)

Licence Universelle Affinity V2 updated to 2.3.0

Link to comment
Share on other sites

@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.

2023-01-06_111638.jpg

Link to comment
Share on other sites

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.

iqfgssN.png

 

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.

 1) You have completely wrecked the layers panel, Serif.

2) I recommend Reddit groups instead of this forum. Not the same few bot-like users replying to everything, a wider representation of users, fewer fanboys, more qualified users. In short, better!

3) I was here to report bugs and submit improvement requests for professional work professionally in a large setup and to bring a lot of knowledge from the world, i.e. professional product development, web- and software development, usability, user experience design and accessibility. I actually know what I am talking about!

BUT! We are phasing out Designer and Affinity in 2022 Q1 - and replacing it with feature complete and algorithmically competent alternatives.
Publisher is unsuitable for serious use, and was never adopted.

Link to comment
Share on other sites

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. :86_crying_cat_face:

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:

apu_roughen_typeface_stroke_pressure.thumb.png.8ebdba6c4119407f73dadda57a846f2d.png

ade_roughen_stroke_pressure.png.71c5a49e750946d4f79e2b32f91d4885.png

Also works with a dash stroke:

apu_roughen_typeface_stroke_dashed.thumb.png.e1b405e7084f05eee59899cc3b6df208.png

Edited by loukash
uh, strike that…

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

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.

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

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:

roughened_text_ad_bitmap.thumb.png.5ff12cbd40741d9d55933a4ea6b008ea.png

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_pressure.thumb.png.6f682ccb06c19d438da7d443421ba057.png

roughened_text_ad_exported.thumb.png.91324fc4f01ad6b126fe5cce4ee10861.png

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.thumb.png.95c157574d57bdc0a3573a1904c6514e.png 

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.]

Link to comment
Share on other sites

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.

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

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.

 1) You have completely wrecked the layers panel, Serif.

2) I recommend Reddit groups instead of this forum. Not the same few bot-like users replying to everything, a wider representation of users, fewer fanboys, more qualified users. In short, better!

3) I was here to report bugs and submit improvement requests for professional work professionally in a large setup and to bring a lot of knowledge from the world, i.e. professional product development, web- and software development, usability, user experience design and accessibility. I actually know what I am talking about!

BUT! We are phasing out Designer and Affinity in 2022 Q1 - and replacing it with feature complete and algorithmically competent alternatives.
Publisher is unsuitable for serious use, and was never adopted.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :S

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

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

1377195320_ScreenShot2023-01-08at8_57_14AM.png.99da1ca137b6a12fd073ee6c558efd2d.png

198221662_ScreenShot2023-01-08at8_55_22AM.png.8b472b21246ced08b151c456cc7f7794.png

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.

Mac Pro (Late 2013) Mac OS 12.7.5 
Affinity Designer 2.5.3 | Affinity Photo 2.5.3 | Affinity Publisher 2.5.3 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.