Icon Buttons

I’m interested in the best way to create and display button icons like those in the Toolbar control. I’m using a canvas control backdrop to display the icon and a second picture of the same icon with a 50% black opaque mask overlay to be displayed when the user clicks on the icon.

This method works ok but I feel certain there’s a way to accomplish this using just one picture. After all, a Toolbar icon only requires one picture and it somehow creates the opaque mask. BTW, it’s odd that Xojo didn’t think to make this control available to the rest of the interface… not just the toolbar control.

Also would like to know what is you favorite picture format when saving icon pictures?

PNG for your masked icon pictures.

As to reducing from 2 to 1 icon for the highlight state. The tradeoff for a nice look is drawing time and temporary memory to hold that highlighted icon each time you draw it. Frankly, I’d just go with two distinct icons for the two visual states unless applying the effect in code needs to be consistent across a bunch of icons and is likely to change. Even then, I’d just keep the highlighted icons around so you don’t have to redraw each time.

Good, all my icons are PNG.

Photoshop creates the mask in a second layer quite easily and I’ve been experimenting all morning trying to extract the mask layer via code with no success. Picture.mask just yields a white background to the icon. I’ll take your advice to use two pictures but I would sure like to know what the code is for either extracting a mask layer or for creating a mask for a single layer picture.

Thank you for responding.

Did you try Brad Rhine’s Mask Extractor? You just drag a .png onto it and click a button and it produces the mask for the png.

Picture.mask is old style pictures, not new alpha-channel pictures. You might read the LR documentation about pictures and develop an understanding of them (ask away here) before getting too deep into this particular problem.

Dennis, Photoshop creates the mask for me. Then it’s just a matter of saving the picture and mask in separate files. Nonetheless I’ll check it out.

Brad, been to LR but only looked at the picture object and graphics… Guess I should check out the other links offered.

Dennis, Brad Rhine’s Mask Extractor for Mac and it’s a Windows.exe file. I changed the extension to .app but my Mac then sees it as a classic App. So no go on that one.

All I have is a Windows version as well. But it was written in Real Basic, so there is at least the possibility that a Mac version is floating around somewhere as well.

I have just updated my AutoButton class for Xojo. It works well with most images. I have only tested it on a Mac. You can get it for free at http://www.ttpsoftware.com/AutoButton.zip

Thank you Terrence, that’s exactly what I need.

I learn best by example, so you can be sure I’ll be going through your code with a fine tooth comb.

I know this thread is a bit older but can someone share the example again or give me
a tip how to mask an icon/image with 50% black so that it looks like a clicked toolbar image ?

If you are talking about OS X images, be aware that now they have 144 dpi (1,024 x 1,024 x 144), under Mavericks.

[quote=104947:@Rob Egal]I know this thread is a bit older but can someone share the example again or give me
a tip how to mask an icon/image with 50% black so that it looks like a clicked toolbar image ?[/quote]

Which platform ? On Mac I use Photoshop, and on PC Paint. Net. I use the adjust Contrast/Light and set it darker until it looks good.

Sorry for the previous answer. Do you have the need for one project (once) or you need to do it many times ?

One shot only, follow Michel advice or use The GIMP (available for all platforms).

In all cases, you load a copy or your icon (the greater the better), use the magic wand, select the parts you want a mask.
Then use the paintbuck to change the colors to black.
Then, in one of the menus (the one near Edit I think), use “Invert selection” (I think it is there / the english name), press ctrl-del.
Export as (png) the mask and you are done.