How to create Retina Ready Icons?

Status Menu Icons
1

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?

2

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
3

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?

5

Use

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

6

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)

7

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.

8

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

9

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
10

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.

11

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
12

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