Desktop: Updated macOS icons with squircle outline and inner shadow

[elsiehupp]

The fill and glyph are identical to the pre-existing JoplinIcon.svg, scaled and cropped using a proper superellipse "squircle" outline (which is different from a rounded rectangle). The background drop shadow is unchanged, but the foreground drop shadow has been replaced with an inner shadow matching the style of the Apple Music icon, since the glyph is not based on a physical object. The background is un-beveled because the background is not based on a physical object. I included both SVG and PSD originals for maximum editability (since SVG doesn't support inner shadows).

For an explanation of the difference between a "squircle" and a rounded rectangle, see here: https://www.cocoanetics.com/2013/06/ios-7-icon-squircle/

[laurent22]

Thanks for the change, however I think that should be discussed in the forum first, with screenshots, etc. so that we can compare.

[laurent22]

I'm not sure what to do about this pull request because as you found out the icon has already been updated, and there haven't been any negative comments about it, nor it seems interest in changing it. Let's wait for a few more days if there's some feedback in the forum.

[elsiehupp]

Yes, there haven't been any negative responses to the new icon in the forum, but I did search for any discussion, and there hadn't been any since I last commented on that same thread back in October, which is to say that nobody really seems to have noticed, and that you seem to have introduced the bevel completely unilaterally.

As far as the design goes, I think the main priority is using the correct outline, that is, the superellipse. It would not be terribly difficult for me to create a version of the superellipse outline with the same bevel; one of the main reasons I didn't do so earlier was that the new icon only seemed to exist as a raster image with no vector source. And the 3D effect on the "J" glyph could really go either way; looking through Apple's first-party Big Sur icons, though, only foregrounds representing physical objects seem to have drop shadows. Whenever there are "embossed" glyphs they seem to appear sunken.

FWIW, Big Sur does have some interesting precedents for notebook-style icons, namely Contacts and Font Book:

(Though IMHO these look terrible close up.)

Apple aren't perfectly consistent about this, but the general rule seems to be that letter glyphs don't receive drop shadows, and, if they are presented as 3D, they are sunken. The only real exception I could find is the runes in Bluetooth File Exchange, though the speech bubble in Feedback Utility is similarly raised (but not 3D like the speech bubble in Messages):

The only place I could find a perimeter outline not representing a physical frame or bezel was Feedback Utility, but even then it's uniformly darkened relative to the background rather than shaded like a bevel.

Again, I could upload some additional variations of both the macOS and Linux icons on the forum.

[elsiehupp]

FWIW I've gotten 4 likes on the Linux icons and none on the macOS icons on the forum, but that may be because people are mistaking the two sequential posts as a single post. Without any actual comments it's hard to say.

[elsiehupp]

I added another icon variant borrowing the "notebook" metaphor from the GNOME icons.

[elsiehupp]

Hi @laurent22—I went ahead and made a version of the existing bevelled icon with the squircle outline and used it for the icns and the iconSet. I don't know if I got the bevel gradient quite right, but I used the eyedropper tool to match the colors and carefully lined up the "J" glyph. The PSD version of the file has editable curves, so you can fix it if you want. Here's the before and after (as you can see, they are almost identical aside from the squircle outline):

I'd be happy to fix the bevel gradient myself, too, if you tell me how you did the original (i.e. what "layer effects" settings you used, etc.). I can't borrow the settings from the your version because the PSD has been flattened (and is consequently uneditable).

[elsiehupp]

This image (from Wikipedia) shows the difference between a squircle (blue) and a rounded square (red):

[laurent22]

@elsiehupp, if you'd like to change the macOS icon, you can find the current PSD in https://github.com/laurent22/joplin/blob/dev/Assets/macOsIcon_2.psd Ideally you'd start from this one and make any necessary tweaks. Once that's done please update all the relevant icon assets and run generate-image

[elsiehupp]

I did try and start with the existing PSD image, but it's a "baked" raster image that isn't editable. I even looked at the commit history, and there just isn't anything else there. Hence why I basically had to recreate the icon from scratch just to edit it. It would be helpful if you had any additional "process" files locally on your computer. (Again, the only thing I wasn't able to do was match the bevel.)

FWIW the reason it's PSD rather than SVG is that SVG doesn't support particular types of drop shadows. I could try and figure out a compatible way of doing the shadows, though, just to maintain optimal editability for the "source" image. (The alternate versions of the icon with the embossed "J" glyph" have inner shadows, which don't seem to be supported by SVG at all, but I can see if I can work around that, too.)

I did run another application to generate the icns and iconSet exports, but I can use your script to see if it's any different.

[laurent22]

Indeed what did I do, it seems I've only kept a flatten version of it in the PDF, which is pointless.

In any case, I see the current version and I see your version and for me they are almost the same. I appreciate you made the border similar to other macOS icons but it's very subtle, so I feel in the end it's not worth going through the trouble of changing all the images and icons.

In fact, if we go down that roadI think there's no end to it. Even if we change it now, two months from now someone else will come with other small tweaks to make - some people will like it, others won't, it's all a matter of taste. So for now, and I know you're not going to like this, we'll settle on the existing icon. Thanks anyway for looking into this.