so all icons will be 1:1 ratio / square? great to hear! no more adjustments needed on my end now haha
1 Like
Any chance of getting pixel aligned (vector) recreations instead of resized rasters? Arbitrarily resizing the PDFs can cause pixel misalignment and blurriness.
There are PDFs in the download. But you should actually use the resized rasters because they are the correct sizes and will have the highest quality output when set to display at the right size in BTT. The raw images shouldn't be 60px height though, they should be trimmed to fit the icon per my instructions above, otherwise they won't fit in BTT at all.
Edited above. Note that most sizes might not produce pixel aligned rasters. Example: 12 vertical lines with width 1pt and spaced 1pt apart. Rasterizing to 60px wide will cause each line to occupy 2.5 pixels and become blurry.
Because of the way BTT handles icon sizing, that's not possible for every icon. The default icon size in BTT is 22x22px, meaning to have pixel-aligned images the maximum size an image could be is 44x44px. We know from Apple's documentation that this is only the minimum size for a Touch Bar icon, so that means for icons greater than 44x44px in size there will always have to be some manual adjustment.
That said, icons smaller than that can totally be fit within a 44x44px bounding box and be pixel-accurate without changing the default icon size setting.
Manual adjustment isn’t the issue here, but rather picking the correct scale factor to resize icons larger than the max bounding box. There isn’t a one-size-fits-all algorithm for this as it’s highly dependent on the icon itself.
Here’s a resource I found that could be helpful (for Adobe Illustrator): http://iconutopia.com/how-to-design-pixel-perfect-icons/
That seems like far more work than is necessary for how BTT handles icons. It resizes images to fit within the defined bounding box, so I'm unsure how a "scale factor" would make a difference since it's defined by the default size - in which case, if you're going through the trouble of setting image sizes, why not skip the math and just enter its proper size and trim the icon accordingly?
I think you're overthinking this 
Ok, if you’d like, can we try a quick example to illustrate the issue?
Below is a trivial “icon” I’ve prepared that’s similar to my previous comment: 11 white vertical lines, each 1pt and spaced 1pt apart, exported @4x as a PNG.
Your task is to use the icon within BTT while keeping it pixel aligned (no blurriness / anti-aliasing). Please take a screenshot of the Touch Bar once done and post it back here, along with your process and whether or not you resized the icon prior to adding it to BTT.
I would just drop the icon into BTT as-is and set the "icon size" attribute to 21x21. Now I'll go do it and see if that works 
EDIT: It indeed did exactly what I expected it to do. Screenshot:
Of course, your hypothetical icon is 21x21pt, which is within BTT's default 22x22pt bounds. So if you wanted to avoid editing the BTT attributes and keep your widget's icon size at the default 22x22pt, an alternative option would be to resize the canvas of the source image to 88x88px like so:
You get the exact same result using this in BTT with the default icon size (22x22pt):
I'm not really sure what the "issue" you're trying to point out is, but I think this exercise pretty clearly illustrates how BTT resizes all icons to 22x22pt by default. As long as your icon has been rendered with any integer scale factor of 22x22pt, it will appear @2x on the Touch Bar.
What I was trying to say earlier about Apple's assets is that they are already pre-rendered at the correct size, and in fact are the assets used by the system itself, so you should NOT use the PDF versions if you want the most pixel-accurate rendering possible. Instead, fit all icons 22x22pt and under within a 22x22pt bounding box. For icons over 22x22pt, fit to a square of the same size as the icon and then adjust the size in BTT manually to the correct larger size (like 24x24pt). There is no way around that manual editing step if you want an icon larger than 22x22pt.
I feel like this gives a pretty comprehensive overview of icon sizing actually, haha. So someone could use this info to prepare the assets in this thread. Most of them are 22x22pt and under, so can be used in default BTT buttons without any editing so long as they are set in a 22x22pt bounding box.
EDIT2: To be even more clear, any anti-aliasing artifacts you see are not caused by improper sizing, but by the way the Touch Bar itself renders images:
You can clearly see that the icon has some anti-aliasing, even though it is the correct 42x42px size it needs to be to render properly. Is that the issue you're talking about? If so, it seems like the native Touch Bar UI does the same thing. @Andreas_Hegenberg is there a story here?
This is an issue i had not thought about since i’m quite a newbie, but I think this is caused both by incorrect scale in the image AND BTT?
If any of you would like to, you can edit the preset and sent it to me to post. The icons in there are directly from the system, unedited and are what apple uses.
Exclusion: the icons that came from PDFs. In this case the PDFs were the raw files but BTT does not handle pdfs very well so I (i guess sloppily) squared them up to PNGs
Using these 60px icons at @2x into BTT with an icon height setting of 30px should produce the same results as native apple because 30px is the max width that btt takes for icon heights? (which is the full touchbar height)
Take a look at: Touchbar Custom Icon Bug (since 2.605)
Here’s my reference solution, using BTT v2.536:
- First icon was manually resized to 21pt (42px). It is pixel aligned and shows no anti-aliasing.
- Second icon was auto-resized by BTT (not manually resized prior to import and simply uses the original image). It shows some anti-aliasing.
Zoomed in:
Hopefully this demonstrates the need to manually resize icons to specific dimensions that reduce or eliminate anti-aliasing. Pulling arbitrarily-sized system icons and resizing them to match BetterTouchTool’s 44px/44px bounding box results in blurry icons.
@GoldenChaos Would you like to re-attempt, or should I post the complete solution?
Just a quick note (I can look into this tomorrow if needed): the image drawing stuff in BTT has switched to a completely different method in ~2.600, so comparing it to older versions may not be helpful.
1 Like
I'm sorry - attempt? I didn't realize this was an assignment with an "answer" - and I still don't understand what you're trying to say that's different from what I'm saying. It sounds like we're saying the same thing. Maybe I'm not communicating effectively here.
This might be it: you know that the system icons are not arbitrarily sized, right? They are designed specifically to fit on the Touch Bar. They are the correct sizes, out of the box, just with the wrong bounding boxes.
1 Like
I think the raw PNGs are fine since they are raw from apple.
The main issue here is the resizing of the PDFs, which are the correct ratio but are somewhat arbitary (between different apps or all together).
The apps I got these from used the PDFs, but they didn’t work in BTT so some image processing may occur.
We should talk about the same thing. Is @andrewchidden talking abt PDF processing and @GoldenChaos talking abt the raw PNGs?
Again, these raw PDFs are provided in the pack, unedited.
My reply to @yuuiko (which started this thread) was in regards to resized system icons:
The result of the above process creates icons that, while system derived, are not pixel aligned and have anti-aliasing artifacts.
3 Likes
Yes, I agree that they where not resized ‘professionally’ and I would like to learn more.
Ahhhh, there it is. I did not realize that these were generated that way, I thought they were just extracted from the .car file.
@yuuiko Apple provides pre-rendered @2x png assets inside of the .car file - you do NOT need to generate these from the PDF assets.
Some apps do not have this. Most of the core system does.
Photos is one example, it does not have @2x png, only oneparts.
It uses the PDFs as their icons.
GarageBand has a mix of the two. but PDFs are still in use.
If I saw a good set of PNGs, I’d take those. But in some apps there wasn’t any - or i’ve missed them.
If you see a PDF folder in the pack, that means a conversion. Reminder that the raw PDFs are included for experimentation
1 Like
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.
Going to sleep now!
1 Like
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.