I couldn't find a document or hint which dimensions a statusbar or menubar icon in OSX should have. I found out that such an icon has 18x18 pixel for normal displays, but how to do that for retina displays? Is it 36x36 and are the usually naming coventions ...#2 working in this case?
The official apple docs covers informations of all other icon sizes, but nothing about a status bar icon.
From the docs:
When you create an icon to put inside a toolbar control in PDF format,
OS X will automatically scale your icon for high-resolution display.
You do not need to provide a high-resolution version.
there is no #2X version.
For freestanding icons in a toolbar, create inviting images that are
easy to identify. Because freestanding toolbar icons do not need to
fit within a toolbar control, you have a little more room to express
them. As you design a freestanding icon for your toolbar, follow these
guidelines:
Use a straight-on perspective. Make the outline sharp and clear. Use
anti-aliasing. Use color judiciously to add meaning. Create icons for
standard- and high-resolution displays. You need to supply two
resources: 32x32 and 32x32#2x. See Table 5-1 for the corresponding
canvas sizes. Use the PNG format.
For reference
Related
I have a windows application with toast notifications (using Windows.UI.Notifications.ToastNotification). The problem is that when the application has a dark icon and the dark windows theme is applied, the application icon is getting inverted colors in notifications (in popups and in action center). I'm talking about the icon in the attribution area according to this description. Is there any way to forbid the system to invert icon colors?
It looks like windows takes the decision to invert the icon or not according to the colors of the pixels on the border of the image. A little enlightening of border pixels do the trick and the system stops inverting the colors.
I'm trying to create Finder toolbar icons that match the look and feel of Monterey, but they seem to be jagged as if there are issues with anti-aliasing.
Here are the retina icons I'm trying to convert (two on the right):
And here is how they look on my non-retina display:
At first, I thought this was simply a problem with automatic anti-aliasing. However, when I manually resize the icons to 32x32, this is how they're supposed to look:
But when I use those icons in Finder, they look jagged all over again. I have no idea what is happening.
Update
Steps to reproduce:
Take icon_terminal_light.icns from this icon pack
If you already have a custom Finder toolbar icon, skip to step 6
Right-click on your Finder toolbar and choose "Customize Toolbar"
Click-and-drag any application onto the toolbar
Click "Done"
Right-click on your application and choose "Get Info"
Click-and-drag icon_terminal_light.icns onto the icon in the upper-left
Notice:
If you move the Finder toolbar to a non-retina screen, the icon will look thin and the edges will be jagged.
You can even open icon_terminal_light.icns in Preview, resize it to 32x32, and then export it to a new icns file. The icns file will look smooth on a non-retina monitor, but if you try putting it into the toolbar, it'll be jagged once again.
Finder has a quirk whereby the alpha layers of toolbar icons get multiplied by two when the window is active. If the Finder window is in the background, however, the icons probably look how'd you expect.
If your icons have any thin graphical element, the anti-aliased pixels will have low alpha values. When those alpha values are doubled, the pixels practically disappear, which is what looks like is happening.
I solved this issue when trying to resize the icons provided in OpenInTerminal-Light. My solution is a bit of a hack:
To fix the rendering, I manually resized the icons and added 89% gray behind the anti-aliased pixels. Every pixel has either 0% or 100% alpha now.
You can see more detailed notes in the issue I opened on GitHub.
I'm trying to emulate Xcode's toolbar controls to show/hide the Navigator and Inspector:
...but without the bottom pane (only left and right: two segments)
I screen-captured the icons from Xcode's UI and traced them in an image editing application. The resources for the left pane are:
#1x:
(20x20 #72 dpi)
#2x:
(40x40 #72 dpi, although using 20x20 #144 dpi seems to make no difference)
The right-pane counterparts are identical, but flipped horizontally.
All rhe resources are stored in the asset catalogue, as follows:
I dropped a segmented control on the toolbar, to create a toolbar item with a segmented control inside it, and set the image attribute for each segment (0 and 1).
Image Scaling for both segments is set to "Proportionally Down". The segment control has segment width "Fixed" checked, with a width of 48 for both segments. The toolbar item has Minimum Size of (83 x 25) and Maximum Size of (100 x 28).
The icons display correctly on the storyboard (Interface Builder).
However, when I run the app, I can not get the icon images to display appropriately.
If I launch my app on a retina monitor, no icon is displayed on either segment.
If I move the window to the external, non-retina monitor, both icons are displayed.
If I remove the one of the two image sets from thew catalogue and run the app, the other icon is correctly displayed! (on either monitor)
If I further set the same, remaining image for both segments, they display correctly!
If I leave both image sets in the project, but reset the Image field in one of the segments to empty, the other icon isn't displayed eihter!
What on Earth is going on??
I have put a sample project on GitHub that reproduces the issue.
Edit: Just to make sure, I extracted the resources from the compiled app binary using the cartool command line utility (as explained in this answer), and all 4 images are there at the right sizes...
Solution: As suggested by Ivan's answer below, I switched to using vector graphics (PDF) for the icons. I downloaded the trial version of Acorn and recreated my icons at 1x size, then exported as PDF.
To avoid blurring at the scaled up size of #2x at runtime, I had to make sure all coordinates in the editor were integers, and also check the box for "Snap to pixels" in the Vector Shapes inspector for each shape layer:
(Happy Ending)
$ git commit -m "Fix toolbar icons for good (PDF)"
According to my experience, using of bitmaps in toolbar is troublesome. You can try to target exactly recommended resolutions to possibly avoid some problems: https://developer.apple.com/macos/human-interface-guidelines/icons-and-images/custom-icons/
However, the cleanest way would be to use vector (pdf) icons, as they simply work as intended.
I'd like to make an icon for my NSToolbar that has the same system stylings applied to it as the template icons in IB. How do you do this? I can't get the toolbar to apply system stylings like it says it will in the HIG.
Thanks!
In Mac OS X v10.5 or later, images whose name ends in the word "Template" are automatically marked as template images. NSImage Class Reference
NSImage *image = [NSImage imageNamed:#"MyImageTemplate"];
This also works for Interface Builder.
More information: http://www.proppe.org/blog/2007/12/01/nsimage-templates/
If you mean for a monochromatic icon, make sure you set it as a template image. That's what tells the system to render it with the inner gray or blue gradient.
The toolbar doesn't do that automatically. You have to create the graphics yourself. The Lion-style icons are usually mid-gray with a subtle inner shadow and a 1px whitish drop shadow. Here's an example done in Photoshop:
And here's all the layer styling done to it:
The specific numbers and colors may vary depending on the icon's shape and size.
On a side note, the HIG was saying that icons may change depending on the control. For example, when you disable a button, its icon will be displayed semi-transparently.
What size, in pixels, should a custom Firefox toolbar button icon be?
I've seen quite a variety. Most commonly I've come across 32x32, 24x24 and 16x16 but also 10x10, 15x15, 16x14, etc. I cannot find a definitive reference.
Also see: How big should an Internet Explorer icon be?
Not sure how I found it, but the Creating toolbar buttons article at the Mozilla Developer Center defines Firefox big icon size as 24x24 and small icon size as 16x16.
There is no definitive size given.
The size of icon will depend on whether the user has large/small icons enabled. 32x32 is generally a good mid-point.