Background blur?

[torkjellmidtgaard 4]

Any chance there will be background blur in Affinity apps?

[ronniemcbride 562]

Hello, torjjellmidtgaard!

 

Welcome to the forum.

 

What do you mean by background blur?

[torkjellmidtgaard 4]

The blur fx Apple uses. Sketch has this FX. You can create an an element with opacity, and then apply background blur, and the background is blured, not the element.

[A_B_C 2,029]

It’s this effect, right? I really wonder how to do that in AD …  :unsure:

BackgroundBlur.mov

[torkjellmidtgaard 4]

Yes, and Sketch can do it!

[A_B_C 2,029]

Ok, it is possible to achieve this effect in Affinity Designer, but it is a bit cumbersome … would love to see your ideas, folks … and an effect would be handy, for sure …   :)

[00Ghz 255]

+10

[RNKLN 171]

Would be very nice if this effect could be added. Right now, i need 5 layers in a simple case where 2 could suffice if the effect were available. It's non-destructive, but if you want to move objects you have to take a couple of steps (release maks, move, and re-apply mask). I've added a example.

Image with blurring rectangle 3.afphoto

[affinitydesignerfan 2]

Would be very useful!

[Netanel1244 5]

Will be happy to see that, too. Will help a lot with UI design. These days both Mac and Windows are using this effect.

Can any of the moderators reply?

[Dams 35]

Hi,

 

I agree with this request. iOS UI relies heavily on blurred background.

Affinity Designer needs this feature to be able to compete with other tools on the UI side.

[toltec 1,228]

You can blur anything with a layer effect, but Gaussian only.

 

Did you want a different type of blur ?

 

 

[Netanel1244 5]

On 2/23/2018 at 4:39 PM, toltec said:

You can blur anything with a layer effect, but Gaussian only.

 

Did you want a different type of blur ?

 

 

By BG blur we mean to blur just the part that's behind a certain object.

Here's an example from figma.com:

 

 

[toltec 1,228]

22 minutes ago, Netanel1244 said:

 

By BG blur we mean to blur just the part that's behind a certain object.

Here's an example from figma.com:

 

 

Ah I see, interesting.

 

Thanks

[carl123 2,159]

In the attached file

Select BOTH the top two layers (Rounded Rectangle & Gaussian Blur) and move them around the screen

 

backgroundblur2.afphoto

[RNKLN 171]

The above example doesn't look like a non-destructive edit. 

[AlainP 248]

Here is the closest I could get. 

Select the "Transparent Object" with the Move Toll and move it around. The original above looks like there is some programmation behind it.

tranparent-blur.afphoto

[R C-R 4,254]

6 hours ago, RNKLN said:

The above example doesn't look like a non-destructive edit. 

How so? You can drag both layers anywhere you want on the canvas, including back to where it was originally, or just delete them.

[h_d 278]

How about:

 

 

 

 

 

 

Movable blur.afphoto  

 

The original sharp image is at the bottom of the layer stack. A duplicate blurred version is at the top. 

 

The blurred image is masked by a rounded rectangle and then locked. Select the rounded rectangle with the Move tool, and drag it around.

Edited February 25, 2018 by h_d
Changed the screen grab.

[R C-R 4,254]

56 minutes ago, h_d said:

The blurred image is masked by a rounded rectangle and then locked. Select the rounded rectangle with the Move tool, and drag it around.

Probably obvious, but this could be generalized to use any kind of vector mask shape. The vector mask can be rotated, resized, skewed, & reshaped. 

[AlainP 248]

h_d, I can only move the background image, the blurred square can't be moved around.

[R C-R 4,254]

37 minutes ago, AlainP said:

h_d, I can only move the background image, the blurred square can't be moved around.

Try selecting it on the Layers panel with the Move Tool active.

[h_d 278]

2 hours ago, R C-R said:

Try selecting it on the Layers panel with the Move Tool active.

 

Like this...

 

moving rectangle-desktop.m4v

 

[AlainP 248]

When I first open the image it works. As soon as I have selected any layer just the background layer is movable. But the Blur layer is locked. When it's unlocked it works as intended.

[telemax 155]

Maybe that way: blur.mp4