Odd one, this. The project I'm working on includes some small icons (.ico file type) in a Windows resource (.rc) file, all 10x10 black on transparent.
Opening these icons in Visual Studio 2010 correctly brings up the icon editor, showing the icon in salmon-pink on teal-green. The icon's properties in VS show it as "10x10, 4 bit, BMP". The app that includes the icons displays them fine.
However, I cannot view or edit them in external editors! Windows 7 explorer's thumbnail view is blank white; MS Paint also loads them as 10x10 blank white images. Paint.Net (with the .ico plugin) thinks they're 10x10 transparent images. Windows file properties reports them as 10x10, 32-bit icons.
What's going on?
An icon contains 3 distinct bitmaps. Two monochrome ones and, in your case, a 4bpp bitmap. The monochrome bitmaps determine how the pixels are displayed. One of them determines whether a pixel is transparent, it shows up as teal green in the icon editor. The other determines whether a pixel is actually the background pixel inverted, it shows up as pink salmon in the icon editor.
So if you only see teal and pink then your 4bpp bitmap does not contribute anything at all to the visible icon. Whatever other icon viewer you are using to look at the icon is tripped up by that. Which is not unusual, inverting background pixels made only sense in the early days of Windows, back when displays had a very limited number of colors. Like 4bpp.
Fix it by using real colors in the 4bpp bitmap. Or don't worry about it if you are always displaying the icon on a well known background. Which is not typical btw, the user can change the color scheme setting for the window title bar for example. Or change the wall paper image for the desktop. The resulting icon color will be pretty random.
Related
I've been trying to create icons without transparent backgrounds, but I keep getting strange results. For example, when I make icons with white backgrounds, their bottom rows will wind up with yellow pixels.
Steps to reproduce:
Create a square PNG file with solid white.
Right-click on any application and select Get Info.
Click-and-drag the PNG file to the application's icon in the upper-left.
Notice the icon has a strip of yellow pixels on the bottom.
I was having trouble creating Finder icons to match the macOS aesthetic, so as a test, I tried making icons without transparency. But then I ended up with a new problem.
It sounds like what you're talking about is a quirk with the Apple Icon Image format. If you read the Wikipedia entry on ICNS files there is this known issue: "if the last value is a repeating byte (see Compression). Potentially, up to 130 pixels can lack the blue channel value." So, in RGB, if you remove B, you get yellow, which is likely what you're seeing.
I have a number of dialogs with Picture Controls. On my Win10 desktop, the BMP correctly fills the entire picture control, but on my Win10 laptop the BMP only fills about 2/3 of the picture control.
If I change Windows 10 "Scale and layout" setting from say 100% to 125% on both my desktop and laptop, then the dialog and BMP both get bigger/smaller, but the same problem exists: the BMP is significantly smaller than the control on my laptop.
In the Picture Control properties, Image is set to an IDB bitmap resource, and Type=Bitmap.
Is there an easy fix for this?
If you look here:
https://msdn.microsoft.com/en-us/library/windows/desktop/bb760773(v=vs.85).aspx
You will see the following quote:
SS_REALSIZEIMAGE is always used in conjunction with SS_ICON.
You need to change your resource setting because yours is not an icon. That article also states:
SS_REALSIZECONTROL
Adjusts the bitmap to fit the size of the static control. For example, changing the locale can change the system font, and thus controls might be resized. If a static control had a bitmap, the bitmap would no longer fit the control. This style bit dictates automatic redimensioning of bitmaps to fit their controls.
If SS_CENTERIMAGE is specified, the bitmap or icon is centered (and clipped if needed). If SS_CENTERIMAGE is not specified, the bitmap or icon is stretched or shrunk.
Note that the redimensioning in the two axes are independent, and the result may have a changed aspect ratio.
I'm trying to emulate Xcode's toolbar controls to show/hide the Navigator and Inspector:
...but without the bottom pane (only left and right: two segments)
I screen-captured the icons from Xcode's UI and traced them in an image editing application. The resources for the left pane are:
#1x:
(20x20 #72 dpi)
#2x:
(40x40 #72 dpi, although using 20x20 #144 dpi seems to make no difference)
The right-pane counterparts are identical, but flipped horizontally.
All rhe resources are stored in the asset catalogue, as follows:
I dropped a segmented control on the toolbar, to create a toolbar item with a segmented control inside it, and set the image attribute for each segment (0 and 1).
Image Scaling for both segments is set to "Proportionally Down". The segment control has segment width "Fixed" checked, with a width of 48 for both segments. The toolbar item has Minimum Size of (83 x 25) and Maximum Size of (100 x 28).
The icons display correctly on the storyboard (Interface Builder).
However, when I run the app, I can not get the icon images to display appropriately.
If I launch my app on a retina monitor, no icon is displayed on either segment.
If I move the window to the external, non-retina monitor, both icons are displayed.
If I remove the one of the two image sets from thew catalogue and run the app, the other icon is correctly displayed! (on either monitor)
If I further set the same, remaining image for both segments, they display correctly!
If I leave both image sets in the project, but reset the Image field in one of the segments to empty, the other icon isn't displayed eihter!
What on Earth is going on??
I have put a sample project on GitHub that reproduces the issue.
Edit: Just to make sure, I extracted the resources from the compiled app binary using the cartool command line utility (as explained in this answer), and all 4 images are there at the right sizes...
Solution: As suggested by Ivan's answer below, I switched to using vector graphics (PDF) for the icons. I downloaded the trial version of Acorn and recreated my icons at 1x size, then exported as PDF.
To avoid blurring at the scaled up size of #2x at runtime, I had to make sure all coordinates in the editor were integers, and also check the box for "Snap to pixels" in the Vector Shapes inspector for each shape layer:
(Happy Ending)
$ git commit -m "Fix toolbar icons for good (PDF)"
According to my experience, using of bitmaps in toolbar is troublesome. You can try to target exactly recommended resolutions to possibly avoid some problems: https://developer.apple.com/macos/human-interface-guidelines/icons-and-images/custom-icons/
However, the cleanest way would be to use vector (pdf) icons, as they simply work as intended.
My graphic artist gave me a .PNG file, then the same file as a .GIF. When I save it, the transparent background pixels actually get set to white pixels. At one time I thought VS could do transparent colors with this little pink/salmon retro-tv looking icon in the color palette, but it's not showing up any more.
Anybody have any ideas?
Open the file gif/png with the Visual Studio Editor
In the properties window select a format that supports the alpha channel i.e. 32bpp BGRA
Using the eraser tool now will set those pixels to transparent.
In Visual Studio 2015 image editor, I found an easy way to do this with the eraser tool.
First fill the background which you want to make transparent with an adequately unique color(not really necessary I think, after some trials.. It's up to you to try) that is not in the picture.
Then select the tool used to 'select an area of similar color'.
Then click on the background you filled with new color. Only the area you need to make transparent will be selected.
Now use the eraser tool with as much size(erase width in properties) as you want to easily erase the opaque background. The eraser won't erase the picture you need.
Then click outside the picture to clear the selection and you get the picture with the transparent background! This method just takes seconds to finish, as compared to using just the eraser tool. Just sometimes, you may need to touch up the picture, as some minor part of required image may be cleared.
NOTE: You must set the format to '32bpp BGRA' to do this.
EDIT: I found that you don't even need an eraser tool. After step 3, press delete, and the background is gone!
In the VS 2013 image editor, the following works for me:
Select View-Toolbars-Image Editor so that you can see the toolbar
Select the eraser from the toolbar. Set the erase width in the property window to 1
Now clicking ("erasing") a pixel will set it to transparent
The VS eraser tool was working but taking way too long for my image. This tool automatically made my white background transparent when I uploaded the png version.
https://www.bonanza.com/background_burner
Drag and Drop image on page (then the page does some processing to
the image)
Click green download button on bottom right and select .png
(transparent background)
Pros:
Free
Super fast
Online tool so nothing to download
Con:
Image needs to be at least 100 x 100px
I'm just using it for an intranet web app so I didn't need to put much time in or make it great quality.
In the VS2019 image editor you can also use the "M" key on the keyboard to select an area of an image based on color, and then use the delete key.
If you have access to Microsoft Visio you can Import/Create the graphic object that you want to have some transparent pixels, make some or no changes to it and then Save As Type .png file.
After you hit Save As a PNG Output Options pop-up appears.
It gives you a Tick box to select the Transparency color (ie color you want to make transparent).
I'm writing a Windows application that displays its tray icon on the Windows system tray (next to the system clock). The problem is that my icon looks great on some backgrounds and looks horrible on others. One would solve this issue by creating a shadow or an outline around an icon, but the tray icon is just 16x16 pixels, which makes the former quite difficult to achieve.
So I was curious, is there a way to find out what system tray background is, that my icon is displayed on, as RGBA mean value, for instance? (I understand that it is now not a solid color, thus the word "mean".) And if so, I'm sure there's an algorithm to determine if it's a bright (gray, silver) vs. dark background (blue or black). This will let me load either dark or bright verson of my tray icon.
As you provide an icon only, you don't have an option to paint the area where the icon is supposed to be shown. With Aero off, the color is expected to be GetSysColor(COLOR_BTNFACE), otherwise things are more complicated and transparency involved so that windows underneath the appbar actually affect background color around system tray icon.