I recently decided to create a higher quality graphic for an application I develop. The original, and lower quality, graphic is 48x48 pixels, and the new one is 256x256 pixels. When I run the older version of the application, with its lower resolution icon, the icon displays properly.
However, when running the new application the higher resolution icon the icon is distorted (square with sharp edges rather than rounded ones, and the icon is off at an angle).
Looks like a poor sampling function is used to rescale the icon.
While there are more elegant solutions, 256 px to 48 px is a pretty drastic resize. Why not simply make a second, smaller resolution icon, and use that for the tray?
I played around with your image a bit, and this is the best I could do:
You can copy and paste it into a 16px 24 bit icon in your resource manager (don't forget to "Clean" your solution rebuild as it may still use the old one), instead of the big one you are using. I made it by shrinking your icon to 16x16 and then hand-editing the pixels until it looked right:
If you need a high-res icon somewhere else, I think you should have one high-res and one lo-res icon and use whichever is appropriate.
Simply having one icon and rescaling it to different sizes sounds like a clever thing to do, but in practice you can't simply rescale icons and expect it to work: http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
Related
I have created a WinForm desktop application.
I have installed it on 2 different client PCs.
On 1 PC the captions fit with their controls.
On the other the label does not resize properly.
I went to check the resolution on each Client PC expecting differences but on the resolution 1920x1080 it did not fit and on the resolution 1680x1050 it did fit.
To make things more weird on my development PC the resolution is 1920x1080 and yes the labels do fit.
AutoSize on Form and label is 'true'.
What am I missing?
On the other the label does not resize properly
No, it is the exact opposite. It did resize properly, leaving enough space for the text. Problem is, the text is too wide.
There is more than one problem going on here. Starting point is that the other machine is operating at a different DPI setting. Dots-per-inch, it determines how a font size of, say, 10 points is mapped to pixels on the screen. You have a nice monitor, a high resolution one at 1920 x 1080 pixels. To keep text readable, you wanted 10 points to take more pixels. So you increased the DPI setting. Very easy to do on later Windows versions, you probably moved to slider to 125%. Effective DPI is 120 dots per inch.
Your program however is running on an older machine, one that still has the legacy setting (100% = 96 dpi). This tends to cause accidents, you avoided the most common ones given that the form properly rescaled itself. It shrunk itself to match the lower DPI setting. The layout is still correct, the labels and textboxes have the correct size and location.
But you can see a mishap with the bitmap, it is now too big too fit the space. Not the most obnoxious side-effect here. Otherwise not that easy to fix, to see the entire bitmap it has to be shrunk as well and that causes it to get fuzzy and lose detail. The only perfectly clean fix is to have two bitmaps, each drawn to match the dpi of the target machine. Unfun and often skipped.
Moving to the problem you are complaining about, text rendering at different dpi setting can be a problem as well. At issue is that the height of text scales quite well, but the width does not. The technical term for that is that text rendering is not resolution independent. The chief issue is pixel-grid fitting, a technique used to make text more readable at low monitor resolutions. Aided by TrueType hinting, the shape of a letter is stretched so that stems of a character fall exactly on a monitor pixel. Which greatly improves readability, but of course the side effect is that text will be wider on such low resolution monitors.
But your text is off so much that another explanation is needed. The most likely mishap here is that you used a font that is not available on the old machine. The operating system now must fallback to a substitute font and it has a very different pitch from your original font. I can't see your code but I'd roughly guess at a mapping from Segoe to Microsoft Sans Serif.
There are no simple solutions to these kind of problems, it is just something you need to be aware of. A basic guideline is that it is almost never a problem to scale up, scaling down is a lot more troublesome. So running your dev machine at 96 dpi is in general a good idea, other than the inconvenience of course. Testing on older operating systems, or putting your foot down with a strongly stated prerequisite (like XP not supported), is required. Demanding a higher resolution than 96 dpi is however still unreasonable, lots of machines are still at that legacy setting. Not in the least because changing it causes so many programs to misbehave. 96 dpi has been the default setting for way too long, those days are however over and done with.
Following this guide: http://www.hhhh.org/cloister/csharp/icons/ I was able to get my NotifyIcon to look the way it should because Windows decides to use the 32x32 icon and scale it to a 16x16 instead of just using the 16x16 icon.
That being said, I have an .ico file with the following resolutions:
256x256x32
64x64x32
48x48x32
32x32x32
16x16x32
48x48x8
32x32x8
16x16x8
32x32x4
16x16x4
However, when I increase the DPI settings on my display, the icon displayed in the NotifyIcon is a higher resolution version, with more embellishments that end up looking terrible scaled to the size of the NotifyIcon. What size icon is it taking and scaling now? Would I be better off just creating a simple icon of every size specifically for the NotifyIcon?
The icons displayed in the notification area are small icons. That is their size is given by the SM_CXSMICON system metric. Find out that size and supply an icon of the exact dimensions to avoid aliasing. If you have not got one the exact size to hand, probably the best you can do is to draw the closest smaller sized icon onto the middle of an empty transparent canvas, and use that.
You may not be able to do this using the managed NotifyIcon wrapper. I expect that you don't get enough control. The procedure I describe really requires you to be able to call Shell_NotifyIcon, the native API, and pass an HICON.
This page http://msdn.microsoft.com/en-us/library/bb773352(VS.85).aspx gives an example of how to pass the correct icon for the correct DPI. It uses LoadIconMetric, which probably isn't directly available in c#, but it would be simple to marshal one.
Check my answer here: notifyicon image looks terrible once image ends up in system tray
Basically, you need to explicitly declare which size to use at runtime, and to declare your app as DPI-Aware.
this may seem like an odd question, and I don't know the formats of images so I'll just go ahead and ask...
I'm making a minesweeper game (relevant to different things too) which utilizes a grid of buttons, then I'm adding a sprite to the buttons using backgroundImage. If the grid is 9x9 it's fine. 15x15 it slows down and 30x30 you can visibly see each button being loaded.
That raises me to my question: Which image format would load fastest? Obviously, file size takes a part in the loading speed, however, I am enquiring as to if, say, a jpeg - with the same filesize as a gif - will load faster. or a bmp, png, etc.
I'm asking this as to see if I can get my grid to load faster using a different format.
Thanks!
You want an image format that paints faster. There's only one, the one whose pixel format directly matches the video adapter's setting so that the pixel data can be directly copied without needing format adjustments.
On most any modern machine, that's PixelFormat.Format32bppPArgb. It draws ten times faster than all the other ones.
You won't get that format when loading an image from a resource or a file, you have to create it.
Do note that this still won't give you stellar paint speed if every cell in the grid is a control. Particularly if it is a button, they are very expensive to draw since they support transparency effects. You'll only get ahead here if you draw the entire grid in one Paint event handler. Like the form's.
A completely different approach is to cover up the visible delays with this hack.
use the 8-bit PNG or GIF format and reduce the number of colors in the palette. Some image programs such as PhotoShop allow you to save the image for the web and fine-tune the image settings. By reducing the color palette from 256 to something like 32, you greatly reduce the size of the file. The less colors that the image has, the smaller the file size is going to be.
PNG has a similar feature called "Interlaced". You may want to turn this feature off so that the full image downloads quicker.
Because the 8-bit PNG and GIF formats have the potential to result in much smaller image files, try to keep this in mind when creating graphics and illustrations for your application. Try to keep the amount of colors to a minimum and use flat graphics instead of photographs. This way you can create images with palettes of 16 colors, keeping the file size extremely small and fast to load.
Best Regards
Are you reloading the image every time you paint a button? If so, there's your problem - solve it with a cache.
Are you painting the image at its native size? Runtime resampling can create a performance hit.
use PNG or GIF it's faster types of images
There are different dimensions for taskbar(big icons, small), desktop, start menu, etc. What are all dimensions one needs for a Windows application? And is there a way to put them all into a single file?
I have already designed the icon in Photoshop.
Well, the desktop alone can use almost any standard (Joey named most, if not all, of them) size.
I find it works well to combine 16x16, 32x32, 48x48, and 256x256 (and maybe more sizes) into one .ico file. I use IcoFx, and it is super easy to create multi-size icons from one 256x256 image.
Icon files (.ico) can contain variaous sizes. Common sizes for icons on Windows are:
16×16 (e.g. in the notification area of the taskbar or in default settings for the system menu of an application). This often shows a different icon than the other sizes due to the small area, e.g. perspective is often left out (which is in the recommendations for icons as well, if I remember correctly).
24×24
32×32 (e.g. in the taskbar unless small icons are configured for it)
48×48
64×64
128×128
256×256
If a size is missing then a larger one will be used to downsample the image or, if no larger one is present, a smaller one will be upsampled (with quality loss). The different sizes are thus not particular important except to provide the artist some control over the icon in standard sizes (it's not uncommon to have the icon in a vector format and edit the rasterised version in various sizes so they look good in all of them).
The uses mentioned above are approximate and depend on various things, e.g. the user's DPI setting.
I'm trying to create an application icon. I took a bunch of created *.ico files (one for each size) and combined them into a single *.ico file. I can see them all fine. I have 16x16, 32x32, 48x48, 64x64, and 128x128 icons (all 32bit w/ transparency).
However, when I build my app (a standard Windows Forms app written in C#) and look at the icon in Windows explorer, it looks fine at the first few sizes (up to 48x48 I think.. "Medium"), but if I use the "Large" or "Extra Large" display modes in Windows Explorer, I just see the 48x48 (I think) icon in an ever larger box.
How can I get Windows Explorer to recognize the larger icons? What am I doing wrong? Has anyone seen this issue before, and point me in the correct direction? I'm assuming there's a problem with the way the *.ico file is built, or the formats... but I can't find any hints anywhere.
As far as I understand it, once you get above a certain size (and it may well be 48x48), Explorer will go looking for a 256x256 icon, and scale it to the desired size.
128x128 is not a standard icon size, and Explorer may not bother looking for it. You can show icons at up to 256x256 in Explorer ("Extra Large icons"), though you can do sizes in between. If you size your icons to, say, 192x192, then it's going to look better to take a large image and scale it down, rather than to take a small image and scale it up -- so you're better off adding a 256x256 image anyway, rather than a 128x128.