How to convert an image into an overlay or border shader background

Can I still add that reflection/scan line/shader effect now that I have the overlay image all sorted out?

1 Like

Nope. The overlay will cover the reflection.

The shader has a background image layer it uses to display the graphic.

You can use a scanline shader, as I did, but no reflection.

Oooh I see. OK. I was Not aware that they were both two separate things. So are you telling me that the reflection effect from the game is 100% impossible with a custom-made overlay image like mine?


No, I am telling you it is not only possible, but easier than setting up[ an overlay. :grin:

I will set it up and post a tutorial in a few minutes.


Oh thank heavens, that’s a relief.


OK, here we go. This will be a long post. :grin:

Make sure you have the Mega Bezel installed, following the instructions on HSM’s thread, and that you can load a base preset.

Note I have my UI background set to 0% opacity to make this kind of thing easier.

Let’s start by loading some content.

Then load a base preset. (shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp in this example.)

Save the preset. (I am again using OldTV as a name.)

The shader will be saved at RetroArch\shaders\OldTV.slangp

Open that file in a text editor.


#reference "shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp"

Copy your overlay to the “shaders” folder and edit the OldTV.slangp with the following.


#reference "shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp"

BackgroundImage = "OldTV.png"

Paths can be manually changed later, we’ll keep it simple for now.

Next, open the OldTV.png in an image editor and use the color picker to pick a color near the bezel.

Write down the H, S & B numbers. (H, S , & V in some editors.)

Now load the content again, and the OldTV.slangp.

As you can see, we have the image as a background but we need to fit the bezel to it.

First go to the Bezel Color parameters and change them to the values we just wrote down.

Next let’s eliminate the frame. (By lowering it’s opacity to 0%.)

Then we’ll resize the bezel until it looks pretty close.

Now we use X & Y position to place it where we need it.

We are pretty close now.

We need to increase the bezel width.

And eliminate the inner frame edge.

While I was at it I increased the Bezel Outer Corner radius.

Here is where we end up.

Save the preset using the same name. (OldTV)

If you look at it in a text editor now you can see all the new parameters.


#reference "shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp"
HSM_SCREEN_POSITION_X = "-40.000000"
HSM_BZL_WIDTH = "167.000000"
HSM_BZL_COLOR_HUE = "23.000000"
HSM_BZL_COLOR_VALUE = "15.999995"
HSM_FRM_OPACITY = "0.000000"
BackgroundImage = "OldTV.png"

That is the easy way. :grin:

If you want to get more adventurous you can lower the opacity of the bezel to 0% (Leaving only the reflection) and adjust the width, height, inner corner radius, aspect ratio, and non-integer scale. This will let you use the bezel in the graphic and still have a reflection.

It gets easier with practice. :grin:


That looks amaaaazing. That’s exactly what I want. That last image with the opacity of the bezel set to 0% while still having a reflection on the overlay image is EXACTLY what I want the end result to be. I can’t wait to get to work on this.


Just take your time. You will need to adjust the long and short curvature as well as the other parameters I mentioned.

When using this method I also tend to raise the Global Reflection parameter so it shows a bit more.

Since you won’t need the transparent section you could also flatten the image. (Or a copy of it so you can still use the overlay.) This will create a white space in the middle that may make it easier to bullseye the parameters.


Ok that sounds a bit complicated. I will reread it as many times as I need to in order to get this done correctly.

1 Like

There are a lot of parameters, and I have had years of experience, learning new parameters as they were added to the old.

Just concentrate on the scale, aspect, and position first.

You can change the menu driver while you work on it if you are using one that makes seeing the changes difficult. I use glui.

I seem to be having trouble with this. I downloaded the files and extracted them from zip, but I dont know how to install them. I dont see any kind of primary “.exe” file anywhere. How do I do this?

1 Like

Oh my. :astonished:

The fact that you had to ask means two things.

  1. You didn’t read the instructions on the shader thread.

  2. You aren’t at all familiar with shaders.

The shader thread is here.

The installation instruction are near the top of the first post.

That will take care of #1.

#2 is beyond the scope of this thread.

The Retroarch .com section on shaders has a lot of info.


Yeah I actually said in that thread when I first created an account here that I didn’t understand it…

“I have been reading and re-reading this whole thread over and over for DAYS, but I am just not comprehending it due to how complicated it is (from my perspective/skill level)…”

At which point I was directed to this thread.


I am going to private message you.

1 Like

Where can I find these Overlays for Xmen vs Street Fighter?

They are AWESOME!

I think the are part of the Bezel Project overlays.

this one is a personal creation


Following @Duimon advice, I post this here: I’ve seen several overlays posted as .jpg images in this forums. AFAIK, Retroarch needs a .png so I those images won’t work “as is”. So my question are: Why do they post them as .jpg instead of .png. And the second question would be: Is there any easy way to convert them to .png withou using pro tools like Photoshop and stuff?

IrfanView or GIMP should have you covered or even Microsoft Paint.

It is most likely the forum engine converting them due to size.

Simply converting them to PNG won’t get back any transparency that is lost in the conversion.

It is my assumption that they are posted only as a screenshot and need to be downloaded in their original form via a link. (If you are using them as a regular overlay.)

The Mega Bezel can draw the bezel and screen on top of either a PNG or JPG but for some intended uses, can be drawn behind. In this case a transparent PNG would still be needed.

Technically, there is a “cutout” feature in the Mega Bezel, so if only a simple rectangle is needed, it would still be possible with a JPG.