How to create Retina Ready Icons?

If we want to create Icons which look good on Retina Screens, do we just make Icons 32x32 Pixels wide oder do we need to raise the DPI from 72dpi to 144dpi?

You create tiffs with 16x16 and 32x32 images in them. You can use tiffutil to merge two icons together into one tiff.

See the Iconaholic Loud icons for examples.

1 Like

Does not work here.

I took these 2 images:
The first is named KM Circle@2x.tiff and the smaller one KM Circle.tiff

Then i combined them by using the command:
tiffutil -cat KM\ Circle.tiff KM\ Circle@2x.tiff -out KM_Circle.tiff

The file is created but not used if i do the same with multiple images and put them in an archive, like i did in my Radar Icon Project. I even reversed the order of the two images combined with tiffutil. And i tried it with lzw compressed images too.

Is there a minimum number of images needed for an animated Status Icon?

Use

tiffutil -cathidpicheck myimage.png myimage@2x.png -out myimage.tiff

In general i think, there is currently to less information regarding creating your own System Menu Icons.
I did as you say, but it still does not work.

Recap:

  1. Created 32x32 Pixel 72dpi Image and saved it as uncompressed Name@2x.tiff
  2. Created 16x16 Pixel 72dpi Image and saved it as uncompressed Name@.tiff
  3. Created 4 more (2 x @2x and 2 x standard) Images
  4. Combined a 32x32px image and it's scaled down to 16x16px copy, with tiffutil -cathidpicheck file1.tiff file2.tiff -out outfile.tiff
  5. Used the naming scheme: file.tiff, file1.tiff, file2.tiff
  6. Repeated step 4 for 2 more images (so we have 3 frames in our animation now?)
  7. Saved all 3 "dual" tiff's into 1 ZIP Archive.

I can't see my issue :smile:

Here is the "not working" result: KM Circle.zip (13.6 KB)

Email me the component files and the files you are building and I’ll take a look.

Actually, you can try sending it to me by private message :wink:
Peter.

No, i can't. This Forum does not show up any kind of "Send a private message" option. :wink:

I have made the default initial trust level 1 for all new users, and updated everyone to level 1, which enables the private messages.

Hopefully there wont be enough of a problem with bogus spam users down the track.

1 Like

The files must be named StatusItem.tiff, StatusItem1.tiff, StatusItem2.tiff (or optionally, they can be Template icons if they are named StatusItemTemplate.tiff, StatusItem1Template.tiff, StatusItem2Template.tiff.

If I change your icon file names and rebuild the zip, it works and gets retina results on a (fake) retina display.

Then we have a problem, because i did as you said and it still does not work here.

Please try my ZIP: KM Circle.zip (14.5 KB)

The OS X Log show only:

06.06.14 18:08:51,023 Keyboard Maestro[3070]: Keyboard Maestro: ERROR: Imported status menu item invalid

I found (my) Issue!

The xyzStatusItem.tiff Files need to be in a Folder within the Archive. :wink:

Now it works on my iMac but not on my MacBook Retina late 2013 with this one here f.e.: KM Circle