Improve image quality of menu button highlights?

AlanMintaka wrote on 6/6/2019, 6:02 PM

Hello Everyone,

I've been working on menu button highlights in DVD Architect 7 (build 100). The menu video was authored in Vegas Pro 16.

I can get the button highlights to function OK in terms of appearing when a button is selected and changing color to anti-alias settings when buttons are clicked. I've also been able to use custom images for the highlight masks.

The problem I'm having is with the low quality of the highlight images when they're displayed. They're grainy, pixelated, and look very lo-res compared to the source graphics. I've tried using different image editors, different graphic resolutions, different image file types, etc, to no avail. No matter what I do, the highlight images look terrible in the menu display.

Here are caps from DVDA showing the menu, buttons, and button properties:

1. Menu frame. Buttons are in lower right, "Q5" labels on first button are the highlight image. There's no button image or text. "Play" is in the menu graphic.

2. Buttons closeup with highlight source image. Here you can see the low quality of the "Q5" highlight image compared to the "Play" text, the menu background, and the original source image for the "Q5" highlight.

3. These are caps of the button properties: media, highlight, color sets

Anyone have any idea how to produce better-looking highlight images? In particular, if there's any other additional info about what I'm doing that should appear here, please let me know.

Thanks for your time and patience,

Alan Mintaka

Comments

john-baker wrote on 6/7/2019, 5:23 AM

@AlanMintaka

This is likely to be a scaling issue from the original image resolution to the final resolution of the menu - eg if the original image for the highlights are, for example 1920x1080, and they are being rescaled to 100x56, the pixel scaling is not exact and there is a significant loss of detail - they are going to become more pixellated.

Have you tried creating an overlay at the finished size as seen in the menu.

HTH

John EB

AlanMintaka wrote on 6/10/2019, 5:35 PM

@AlanMintaka

This is likely to be a scaling issue .. eg if the original image for the highlights are, for example 1920x1080, and they are being rescaled to 100x56, the pixel scaling is not exact and there is a significant loss of detail - they are going to become more pixellated.
Have you tried creating an overlay at the finished size as seen in the menu.

Hi John-Baker,

Thanks for the suggestions and sorry for the delay in this response.

In my first post I forgot to say that the preview video quality was set to "Best" in DVDA, if that matters.

Now, RE the scaling:

The "Q5" highlight image was generated in Corel Photo-Paint. Original size was 651 X 192 pixels, 96 dpi. This was added to the highlight properties of the "Play" menu button in DVDA, then resized to fit the button. You're right, I had to scale it down with the sizing handles.

To get the scaled-down size of the mask image, I capped a still from the menu video into Photo-Paint. Size was 1920 X 1080.

I then selected the "Q5" highlight and looked at the size. It was 255 X 78 pixels, 96 dpi. You were definitely in the ballpark with 100 X 56.

I resized the original source image from 651 X 192 to 255 X 78, 96 dpi.

Here's a composite image of the "Q5" mask in the menu video and the source image, both at 255 X 788, 96 dpi:

Even with the same scaling, the source image doesn't look nearly as bad as the mask in the menu. This is the problem I'm trying to resolve and have no idea how to do it. I've played with higher resolutions for the source image to no avail. No matter what I do to rev the quality of the source image, the highlight winds up looking lousy.

There is another example of this highlight image problem in one of the Vegas DVDA tutorials on Youtube: "Anatomy of a Button":

08:20 -> 8:30 - selection of source image for highlight. Note quality of image thumbnail when it's selected in the DVDA highlight mask properties selection menu.

09:17 -> 09:30 - highlight image appearing as either visible button overlay or with transparent button.

Just by inspection in this video, you can see that the image quality of the highlight has degraded significantly from source to menu. The video author doesn't mention this change, at least I don't remember him saying anything about it.

That's about it. I still have no idea how to design highlight images for transparent backgrounds in the menu video.

RE "overlay at the finished size as seen in the menu": I'm not sure what you mean here. Do you mean showing the "Q5" graphic as part of the button image when it's not selected, then overlaying that with the "Q5" highlight when it's selected? Assuming I don't have that wrong, I'd really not like to have "Q5" appearing in the unselected button. Let me know if I've misunderstood what you mean here.

Thanks again for the scaling suggestion, that was something that needed a closer look.

Alan Mintaka

john-baker wrote on 6/14/2019, 2:24 PM

@AlanMintaka

Thanks for the second example that helped.

. . . . you can see that the image quality of the highlight has degraded significantly from source to menu . . . .

In the video linked to I suspect that is a result of the screen capture program used.

. . . . 255 X 788, 96 dpi . . . .

I think the problem is with the dpi of the image - testing with a similar text highlight to yours at 96 dpi the highlight is pixellated in both the preview and final disc, however if I create the highlight image at 300 dpi it looks fine in the Preview window (on Best), and on disc.

HTH

John EB

AlanMintaka wrote on 6/20/2019, 3:06 PM

@AlanMintaka
In the video linked to I suspect that is a result of the screen capture program used.
. . . . 255 X 788, 96 dpi . . . .
I think the problem is with the dpi of the image - testing with a similar text highlight to yours at 96 dpi the highlight is pixellated in both the preview and final disc, however if I create the highlight image at 300 dpi it looks fine in the Preview window (on Best), and on disc.

HI John EB,

I wound up using 1200 dpi highlight images created in Photo-Paint from scratch. I didn't use any kind of screen captures as sources.

Button properties are Text and Image, with no Thumbnail or Frame media. Highlight properties are Custom, media files are the Photo-Paint images, mapping is Transparency. The buttons function as desired, that is the highlight images do not display unless they're selected. HIghlight colors are as defined in Color Set 1.

The highlights still look terrible in DVDA "Best" preview - the higher dpi seems to have done nothing to fix that. However they don't look bad at all, or at least "good enough", in disc playback, so I'm just going to stick with that method for now.

Thanks for your help,
Alan Mintaka

john-baker wrote on 6/21/2019, 3:42 AM

@AlanMintaka

Thanks for letting us know.

Happy editing

John EB