one more note because this is currently not very clear in BTT:
BTT only resizes images if they don't already match the specified px*2 size (because of retina). Probably the correct term is points so I should rename px to pt in BTT.
The default value in BTT is 22pt width and 22pt height. This means the image will only be resized if it's not already 44px wide or 44px high. Such a resize CAN result in antialiasing artifacts in some cases.
I will add (right before you go to sleep lol) that the current alpha of BTT seems to resize icons even if they are 44x44px. As part of the above exercise with @andrewchidden I made a version of his icon that was exactly 44x44px, similar to his follow-up post. However, on my version of BTT the anti-aliasing artifacts were still present, showing an identical output to using a larger source icon.
Yes of course it’s not an assignment. I’m sorry if I gave you that impression. The intention was to show you first-hand what the issue was as I’ve found that’s a more effective means of conveying an idea (clearly not so much in this case).
Anyway, there’s a few issues that I’ve discovered as part of this investigation @Andreas_Hegenberg:
I’m not entirely clear on when images are being scaled by BTT, but:
Importing correctly-sized icons into BTT v2.6xx and v2.5xx via drag-and-drop doesn’t seem to preserve pixel alignment. This is one of the problems that @GoldenChaos was seeing above. Speculation: it could be a problem with base64 encoding the images which seems wonky.
Icons that are downscaled by BTT v2.6xx and v2.5xx (looks like bicubic or something) result in some anti-aliasing. However, this might not be trivial to fix.
This is how I imported my pixel-aligned test icon which works around the above resizing issues in BTT:
Resize to 42px. You may need to use a program that doesn’t perform interpolation when downsampling (Preview unfortunately does this).
Ah! That's just a stupid bug, not related to base64 though. (when dragging onto the image box, BTT always resizes if the image is bigger than 70px, this is ancient behavior from BTT Remote, and I never adapted it for the Touchbar apparently :-))
Was it a BTT issue or an issue with the icon pack?
If it's the Icon pack then please let me know and i'll attempt to fix it up. I guess you should guide me through that too because you to clearly have a better understanding of aliasing and image rendering than me
Anyway, i'm off to school now so I'll check back later today,
cya!
Most of the original PDFs appear to be pixel aligned but of varying dimensions, as you noted earlier. I personally use Adobe Illustrator for iconography, but Inkscape (or some other free software) should be able to both open and export the PDF assets. Basically:
Export the asset as a PNG with a 1x scaling factor. This will usually preserve pixel alignment for these specific icons.
If you want the bounding box for icons to be consistent, you can use an image editor (e.g. Photoshop, GIMP) to pad the canvas size for each exported PNG.
For example, an exported pixel aligned magic wand from Photos (44px/44px):
You might notice that some of the system Touch Bar icons aren’t actually pixel aligned. These were probably old assets that Apple didn’t intend to be displayed at Touch Bar dimensions. For example, the Photos crop/rotate icon is clearly designed for twice the size (72px/90px) that it gets rendered in the Touch Bar:
In those cases, you’d need to manually re-create the system icons in a vector graphics editor like Illustrator. This is my 10 min version of the crop/rotate icon. (I’m just an engineer and don’t usually do graphics work. Some of the designers I’ve worked with would probably take half that time and do a better job. )
I'm new here, please, after I download the icons package where do I install it so it can be used in BTT?
Is there a proper folder to install? Will it appear like the other icons already in BTT?
Welcome!
Nope, these are "just" icons @yuuiko got out of the macOS System. You can use them as the icons you want to see in your TouchBar triggers.
You can save them wherever you want, and when you create a new trigger, just drag and drop the desired icon into this box I marked.