search

RapidFingers / Translator

Translator for Elementary OS
16 stars 12 forks source link

Properly size and hint icons #48

Open cassidyjames opened 5 years ago

cassidyjames commented 5 years ago

Just providing the same icon at different size names is not the same as hinting for the pixel sizes. I recommend checking out Developer Tips: Shipping Application Icons, especially the "Scale (Not Stretch) to Appropriate Sizes" section.

Grabli66 commented 5 years ago

I don't understand what's the problem, icons are vector graphics, and can scale without the loss of quality. What i must to do? I really tired of that quest.

cassidyjames commented 5 years ago

@Grabli66 icons are vectors and can scale, yes. However, the intended display size still matters. An icon designed at 128px will have 1px strokes so that it looks very crisp at 128px, but if you scale that down to 16px, there is no way that 1px stroke will be drawn cleanly; it turns into a blurry mess. Instead, icons must be designed for each pixel size, using crisp 1px strokes and being aligned to the pixel grid.

We use all SVG icons in elementary OS, but we follow this for our own apps. For example, see the Terminal icons from that linked article:

Terminal icons

The strokes as well as the size of the glyph are tweaked for each size to ensure it's as crisp and pixel-aligned as possible. You can also see the Human Interface Guidelines section on this: https://elementary.io/docs/human-interface-guidelines#size

Grabli66 commented 5 years ago

Ok. I'll try to fix icons.

Grabli66 commented 5 years ago

I think i fixed it :)

cassidyjames commented 5 years ago

@Grabli66 hm, I think your 128px icon before was correct; now it looks too big for the canvas.

Grabli66 commented 5 years ago

I returned the icon back

Grabli66 commented 5 years ago

I think it fixed. Again :)

h2ash commented 5 years ago

Grabli66, yes, your icon became looks bigger than another one on Plank. Before: https://drive.google.com/open?id=1mTb6THNyz1L2IF6SDmSoo11lWVt9Icka After: https://drive.google.com/open?id=1yf5vHQVWA0NqhJncfhDJkkzBoaU59McG

Fix this to look beautiful, please. :)