Button Image Quality

[mat_hijs]

I have an Add-in with some custom buttons. Everything works fine, but for some reason I can't get some of the button images to look nice. Some of the images look pixelated even though the png that I use looks perfectly fine. Some of these png files are even exported from the existing buttons in Inventor so I don't understand this. This makes everything look very unprofessional. Most problems seem to come from white parts of the images.

@MjDeck Could you maybe shine a light on this? How does autodesk manage to get crisp images when we, or at least I, can't seem to get it?

[Michael.Navara · Accepted solution]

It depends on implementation. But in general:

• you should use different icon/image for small and large button and use appropriate image size. 
• For command buttons I usually use .ico files with two icons 16px and 32px and with transparent background and 32-bit color depth.

[mat_hijs]

I am aware of the different sizes for small and large buttons. When you use .ico files, do you not have the problems I described?

[Michael.Navara]

I have no issue with ICO files

Preview

Sample project where you can see, how it is implemented.

Inventor AddIn Debugger

[mat_hijs]

I tried looking at that but since I don't know any C# I didn't get that much wiser to be honest. So far I also haven't really found a way to create an ico file with multiple sizes from multiple png files. How do you make your icons?

[Curtis_Waguespack · Accepted solution]

@mat_hijs 

This might or might not help ( I'm not the best at creating nice looking buttons) .

When converting *.png using the PictureDispConverter,  the add-in will attempt to convert a white background and white voids to transparent, and as a result often leaves jagged outlines in the process.

If you're using the Inventor light mode, it's noticeable but maybe acceptable. If using dark mode the results are often really bad.

*.ico files typically contain multiple sizes and and handle the transparent areas differently/better.

What I do when using a *.png file these days.

I don't use white in the image, instead I use the inventor ribbon canvas colors, off white and dark gray as shown.

Example:

I would not use the one with the white background, I would set the backgrounds to pre-match the ribbon canvas for both dark and light mode.

white backgroundoff white ( inventor ribbon color)dark mode ribbon color

So typically, if working with a *.png it would be better to have a light and a dark mode, so that Inventor isn't removing the background, because it does so poorly... at least that is my experience.

Hope that helps,

Curtis

[mat_hijs]

I've already considered doing something like this too, but one issue I have with this is that I usually just want to use an existing icon from Inventor because it looks a lot more professional than when I would start something from scratch. If I open one of the existing icons that I exported to png and try to fill the background it already doesn't look great. I think this may have to do with semi transparent pixels. I'll have to try to convert the same images to ico and hope for the best.

[Curtis_Waguespack]

I'm not sure how you are getting the images from Inventor now, but you can use a utility called "BeCyIconGrabber"  to harvest *.ico files from Inventor *.dll files, and then save them out as *.ico files you can use. That might be something to look into. 

[mslosar]

I don't either. If i need both i tend to add an icon16.ico and icon32.ico into my resources.

I can tell you i've put some 64's and 128's in by accident and they, uh, do not scale 🙂 One, i couldn't figure out why my icon kept coming in as a blue square. Took me too long to realize i exported a 128x128 by accident and the top left 16x16 was simply blue 🙂

I haven't had the issues with transparency, but, i also tend to make my own icons in Photoshop. Get the ico plugin and voila 🙂

[mat_hijs]

Ok so first I tried to give the png files the same background as the Inventor ribbon. This gave a better quality, but when hovering over the button it looks weird because the icon doesn't change color like the rest of the button.

Then I tried to convert all my png files to ico files and this gives me a way better result.

I tried to find the code I used to get the png files from the controldefinitions, but I couldn't find it. I think I started off with a piece of code that @WCrihfield wrote and adapted it to export all of them, which is 3900 images (large, small, light theme and dark theme). I also couldn't find the piece of code I started from unfortunately.

[kresh.bell]

Hi all,

for custom made buttons i use this tool here. 
It is very simple and works ok for me. For all icons .png files