Icons: raster vs vector
Each application has icons for buttons, statuses, toolbars, menus, and more. Of course, ideally, the team should have a dedicated person specializing in icons and knowing all the nuances of creating them.
But life is far from ideal, and there are usually no such people in teams (to be honest, it’s very hard to find good “icon-players” in principle).
Therefore, I would like to share with the public my experience with icons in WPF applications and, perhaps, learn something new from comments.
It would seem that everything is simple: we arm ourselves with our favorite graphic editor, draw what we need on a transparent background, save it in PNG and calmly use the image in our application.
But it was not there - suddenly it turns out that our picture in different places should be shown with different sizes.
Anyone who has ever tried to see the pimples on the face of his beloved photo model knows that when you enlarge a small picture, everything becomes “square”.
If we don’t want our application to look like an old eight-bit game, then increasing a small election is not an option.
')
A little thought, we exclaim: "Eureka!" After all, you can, on the contrary, reduce the large picture. ”. And having rolled up our sleeves, we redraw all our icons to the largest size (usually 64x64).
But here, physics is against us. The fact is that the manufacturers of monitors (most likely by agreement) can only make monitors with a fixed number of pixels and these pixels are also of fixed size.
Suppose we want to reduce the image 64x64 to size 32x32. This means that if you take a 2 by 2 square in the original image, then when decreasing, it should turn into one pixel (very roughly, but this is how it works).
With this transformation, the loss of information is inevitable. As a result, the image is either “blurred”, or some details disappear from it. The only image that is reduced correctly is a 64x64 single-color square.
What to do? Draw different icons for each size. No options. A very visual example is to launch Notepad (Win7) and compare the icon displayed on the taskbar and the icon in the window title.
So, we drew icons of all necessary sizes and it would seem we can sleep well. And no. There are two more points to remember:
Alas, there is no good solution to any of the above problems. It remains to relax andhave fun leaving everything as it is.
When I first tried WPF I was extremely happy to be able to create icons for buttons in Xaml. It would seem that it is the solution to all problems. But it was not there (oh, this damned physics).
Firstly, even though the picture is vector, it’s necessary to draw it on a raster screen (rasterization). Therefore, for vector icons the same problems are described as described above.
In general, you have to draw an icon for each size. Although it is often possible to achieve acceptable quality when scaling by setting SnapsToDevicePixels to true and simplifying the image itself.
Secondly, there is a problem of productivity in full growth. If your picture consists of several dozen elements, then drawing it becomes much more expensive than rendering a bitmap image of the same size.
Fortunately, the WPF developers have foreseen this and created the RenderOptions.CachingHint setting. Roughly speaking, we can tell WPF to keep the result in the bitmap and then use this bitmap when we first render our image.
In general, I recommend reading the documentation for RenderOptions and BitmapCacheBrush.
Finally a few words from the captain you-know-who. Usually icons draw with a transparent background, but in no case should we forget about the background on which your icon will eventually be rendered. Be sure to check how the icon looks on all possible backgrounds - Normal, Hovered, Clicked, Selected.
But life is far from ideal, and there are usually no such people in teams (to be honest, it’s very hard to find good “icon-players” in principle).
Therefore, I would like to share with the public my experience with icons in WPF applications and, perhaps, learn something new from comments.
Raster
It would seem that everything is simple: we arm ourselves with our favorite graphic editor, draw what we need on a transparent background, save it in PNG and calmly use the image in our application.
But it was not there - suddenly it turns out that our picture in different places should be shown with different sizes.
Anyone who has ever tried to see the pimples on the face of his beloved photo model knows that when you enlarge a small picture, everything becomes “square”.
If we don’t want our application to look like an old eight-bit game, then increasing a small election is not an option.
')
A little thought, we exclaim: "Eureka!" After all, you can, on the contrary, reduce the large picture. ”. And having rolled up our sleeves, we redraw all our icons to the largest size (usually 64x64).
But here, physics is against us. The fact is that the manufacturers of monitors (most likely by agreement) can only make monitors with a fixed number of pixels and these pixels are also of fixed size.
Suppose we want to reduce the image 64x64 to size 32x32. This means that if you take a 2 by 2 square in the original image, then when decreasing, it should turn into one pixel (very roughly, but this is how it works).
With this transformation, the loss of information is inevitable. As a result, the image is either “blurred”, or some details disappear from it. The only image that is reduced correctly is a 64x64 single-color square.
What to do? Draw different icons for each size. No options. A very visual example is to launch Notepad (Win7) and compare the icon displayed on the taskbar and the icon in the window title.
So, we drew icons of all necessary sizes and it would seem we can sleep well. And no. There are two more points to remember:
- Animations. For example, when you hover the mouse over the image is increased by 1.5 times.
- Monitors with non-standard DPI. Slowly (well, very slower, where is my monitor 24 "and 300DPI?) They start to appear. Mostly on mobile devices and netbooks.
Alas, there is no good solution to any of the above problems. It remains to relax and
Vector
When I first tried WPF I was extremely happy to be able to create icons for buttons in Xaml. It would seem that it is the solution to all problems. But it was not there (oh, this damned physics).
Firstly, even though the picture is vector, it’s necessary to draw it on a raster screen (rasterization). Therefore, for vector icons the same problems are described as described above.
In general, you have to draw an icon for each size. Although it is often possible to achieve acceptable quality when scaling by setting SnapsToDevicePixels to true and simplifying the image itself.
Secondly, there is a problem of productivity in full growth. If your picture consists of several dozen elements, then drawing it becomes much more expensive than rendering a bitmap image of the same size.
Fortunately, the WPF developers have foreseen this and created the RenderOptions.CachingHint setting. Roughly speaking, we can tell WPF to keep the result in the bitmap and then use this bitmap when we first render our image.
In general, I recommend reading the documentation for RenderOptions and BitmapCacheBrush.
Background
Finally a few words from the captain you-know-who. Usually icons draw with a transparent background, but in no case should we forget about the background on which your icon will eventually be rendered. Be sure to check how the icon looks on all possible backgrounds - Normal, Hovered, Clicked, Selected.
Source: https://habr.com/ru/post/137185/
All Articles