How can I make a translucent layer/image?

[The Creator]

I'm trying to make a translucent layer/image. Notice I said translucent not transparent, there is a difference. I know how to simply adjust the transparency of a layer, but I want to make something translucent, like certain elements of the Windows 10 GUI. For example, the left side of the settings menu or the standard calculator app.

As you can see in the image below I just created some rectangles and lowered the opacity of their layer, and it is now transparent. In the images above, you can still see through it, but there is also a blur, that is what I mean by translucent. How would I achieve this effect on the rectangles in the 3rd picture? I've tried adjust/blur/blur and adjust/blur/gaussian blur and all that really does is softens the edges.

[migf1]

Right off the top my head, try:
1. Select the area you want to cover and promote it as a new layer
2. Blur that layer (Guassian or other)
3. Drop the layer opacity
4. Apply Hue/Saturation/Lightness to mute the colors to the degree you want, and also increase the lightness

That should do the trick.

If you care for non-destructive, you can group togetehr the layer along with an HSL adjustment layer, then adjust the opacity of the Group instead. Blur is a destructive operation, so you may want to duplicate (backup) the promoted layer before blurring it and hide it.

EDIT. Blur algorithms need something to work on, so the layer must contain something other than solid color (in this case the area to be covered). If you are after a general translucent frame, the 1st thing I can think of is adding noise before blurring it (or use a generic pattern or something).

Just tried it: http://prntscr.com/10vy0vd

[Jean-Luc]

Do the following:

and add
Adjust/Brightness and Contrast/Brightness-Contrast/Brightness: select a positive value

(Excerpt from the book indicated in my signature)

[migf1]

Um...Jean-Luc! That's a "crippled" destructive version of the exact same thing I suggested (lol)

PS. "Crippled" (I quoted it on purpose) in that it doesn't give control over the saturation and the lightness of the blurred frame.

[The Creator]

EDIT. Blur algorithms need something to work on, so the layer must contain something other than solid color (in this case the area to be covered). If you are after a general translucent frame, the 1st thing I can think of is adding noise before blurring it (or use a generic pattern or something).

Thanks for the reply. Unfortunately the method you suggested would not really work for what I am trying to achieve. I am looking for a general translucent frame, that would act like a filter that i can drop over any image and blur that image. Just like in the example i gave with the windows 10 settings menu. If I were to drag that window to a different spot on the screen in would blur whatever is behind it in real time. First I applied a gaussian blur to a solid colored rectangle and that didn't work. So I created a single pixel checkerboard pattern, and applied a gaussian blur to that, it ended up looking just like a solid color with the opacity turned down.

[migf1]

Yeah, for real-time you would need a script, and I'm not sure how easy it would be for doing exactly what you described (if Levi steps in, he'll tell if it's hard or easy to do).

In the meantime, you can try the one I just recorded (attached). It's actually doing the non-destructive process I described in my previous post.

1. Select the area you want to cover
2. Run the script

It will mask, backup, gaussian-blur and HSL the layer that contains your initial selection. I left the Gaussian step interactive so you can adjust it differently for different images (if you find a value that suits you for all pics, edit it in the script using any text-editor and change the Gaussian step from Interactive to Silent).

The script leaves you with a "Blurred Frame" group, where you can re-adjust the HSL dynamically and the Gaussian blur destructively (by deleting the Blurred layer, duplicating the original and applying Gaussian to the duplicate) . From there you can adjust the opacity of the group if need be and merge the group.

To "frame" another area, delete the group, select a new area and run the script again, it wil create a new group for that area (or leave both areas/groups live if you want to).

Screenshot: http://prntscr.com/10w80bo

[Jean-Luc]

PS. "Crippled" (I quoted it on purpose) in that it doesn't give control over the saturation and the lightness of the blurred frame.

I agree. It describes a simple effect, not a sophisticated one like yours.

[migf1]

Fair enough Jean-Luc!

PS. Your Brightness/Contrast suggestion is a good one (could replace or added to my HSL adjustment layer suggestion)

[LeviFiction]

No PSP script can do real-time blurring of the background. We would need a blur adjustment layer to do that. In Windows the OS is sampling the screen under the window and applying the effect dynamically. Luckily Migf1's script is almost perfect for what you need. It simulates active blurring which is good enough.

Two small changes to your script @migf1 will make it work closer to what the original poster wants.

1) Duplicate the layer, don't promote the selection. This will result in an entire layer that's blurred as much as you want it to be. And when you move the mask around using the move tool it'll reveal the blurred image anywhere. Prevents needing to delete the frame and starting over.

2) When creating the group, make sure that "Link Group Layers" is turned off.

Now if you grab the move tool and then select the mask layer in the frame, you can move the frame anywhere and it'll look like it's blurring the image dynamically. To change the blur you still have to delete the blurred layer, duplicate the "original" layer and apply a new blur, but it's still non-destructive. With a few more tweaks it's possible to make it work without needing a selection at all to begin with, the mask can then be edited manually to target a specific area just like a regular adjustment layer.

Here is a quick demo of how those changes work: https://drive.google.com/file/d/1jotcOZ ... sp=sharing

in the video I show two methods of working with the edited script.
1) Create a selection first, then run the script. Then you can use the Move or Pick tool on the mask layer to move the mask. As the blurred layer it's masking is the full image it looks like it's actively blurring the background.

After deleting the blurred frame

2) I run the script before creating a selection. So it applies to the whole layer. I select the mask layer, make a selection, fill it with black. I then invert the mask so that the previously un-selected area is now selected. I can then use the Move or Pick tool to move it around. I also demonstrate using the pick tool to dynamically edit the mask. You can edit the mask any way you want and it'll blur the area appropriately.

[migf1]

Brilliant, thanks Levi!

Not promoting but duplicating was they key

[The Creator]

Thanks everyone for the help. Judging by this:

In Windows the OS is sampling the screen under the window and applying the effect dynamically.

What I want to do is simply not possible, at least not without some other software that may or may not even exist, or some advanced programing skills to modify windows, which is way beyond me. For what I wanted to do, I would need to be able to save the end result as a .png and have it still work as a "blur filter" outside of the PSP environment.

[LeviFiction]

Where were you hoping to use it?

[The Creator]

Where were you hoping to use it?

I am creating a custom theme for Windows GUI. I'm using Stardock Curtains to achieve this. Notice the windows explorer in the first picture. The background/body of the explorer window as well as the navigation pane are blurred. However, the title bar of the explorer window is completely transparent with no blur.

Notice the task bar does have blur. The taskbar in this image is unmodified. The blur is already achieved with the default windows 10 GUI. However, its TOO blurred. The blur in the windows explorer background is the perfect amount that I'm looking for.

The start menu also has blur with the default windows 10 GUI, but it is even more blurred than the taskbar. It also looks like a different color, but it might just appear that way because the significant increase in blur.

What I wanted to achieve is to have the windows explorer background, the windows explorer title bar, the task bar, and the start menu all have the same look as the windows explorer background in the first picture. Curtains renders most GUI elements by sampling an image file. To turn the windows explorer title bar transparent, I used the image below. As you can see it's a simple square in the color i wanted with the opacity set at 75%. For the explorer background, I used the same image below BUT with the opacity set at 100%. The transparent blur effect is achieved with a setting within the Curtains program and this setting is ONLY applicable to the explorer background and not any other GUI element. I could turn off the "blur" setting in Curtains program and use the image below to render all elements, and then they'd all match, but they'd all be completely transparent, which i don't want because its too hard to read text/labels when everything is completely transparent. In order to get everything matching with blur, I'd have to be able to add a blur effect to the image below, and save it as a .png or other type of image file and retain the blur effect, so Curtains could sample it and apply it the GUI elements.

Window Filll.png (2.41 KiB) Viewed 1778 times

[migf1]

[snip]
In order to get everything matching with blur, I'd have to be able to add a blur effect to the image below, and save it as a .png or other type of image file and retain the blur effect, so Curtains could sample it and apply it the GUI elements.

AFAIK, that's not possible. As Levi already mentioned, the dynamic blurring is done by Windows, so unless their theming-engine provides a blur setting for the element of interest, I think there is not much you can do.

From what you said, I guess Windows do provide such a setting for the explorer, but not for other elements. It could also be that the Windows theming-engine provides a blur setting for other elements too, but Curtains does not support them. If the latter, you can try editing directly the Windows style you are working on (I think "styles" is the Windows term for themes) or look for a Curtains alternative that supports blurring for more elements.