6

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!

Dexter
  • 5,666
  • 6
  • 33
  • 45

3 Answers3

11

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/

nielspl
  • 181
  • 3
  • This is a great thing to know! Thanks. – Dexter Aug 29 '11 at 19:25
  • 1
    One caveat: This only works when you get the image from `imageNamed:`. Instantiating an image directly with one of the initializers does not automatically set its template status (or, at least, is not documented as doing so). – Peter Hosey Aug 30 '11 at 04:26
10

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.

Peter Hosey
  • 95,783
  • 15
  • 211
  • 370
  • Could we have more details? In the interface builder, I added a toolbar to my window, added a toolbar item to that, then set its image to a black and transparent image I made with the name "LeftTemplate". It doesn't render with the inner gray gradient. It also doesn't change to any sort of blue when I click on it. – ArtOfWarfare Dec 29 '13 at 21:11
  • It is linked to an IBAction, if that makes any difference. Autovalidates is on and Selectable is off. It has a Label and Palette Label. The image is stored in my Images.xcassets folder that Xcode 5 automatically generates. – ArtOfWarfare Dec 29 '13 at 21:15
  • @ArtOfWarfare: I think you should ask a separate question. – Peter Hosey Dec 29 '13 at 21:56
  • I started a new question over here: http://stackoverflow.com/questions/20852239/toggle-nstoolbaritem-between-black-and-blue – ArtOfWarfare Dec 31 '13 at 05:29
2

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.

iii
  • 1,594
  • 1
  • 9
  • 8