I have designed a set of icons in B&W designed to be used on a white background so they are antialiased with different gray pixels. They are very nice so now I would like to use them on a green background but I am not able to "correct" the antialias for the green background. I am quite familiar using paint.net and gimp so I would like to learn how "correct" my icons using one of them.
This is 2022...
In the previous millennium all we had was GIF where pixels were completely opaque or completely transparent, while real edge anti-aliasing requires partial opacity. So you would typically create the image normally with partially opaque anti-aliasing pixels, and then "semi-flatten" it by replacing these partially opaque pixels with fully opaque ones holding the adequate color blend between the object and the intended background. But with modern image formats (PNG and WebP) that support partial opacity this is no longer needed
So:
Open your icon image in Gimp
Make sure it is in RGB mode (Image > Mode > RGB)
Set the Bucket-fill tool to Color erase mode
Bucket-fill the image with the color used for the semi-flattening (white, in your case). Your "gray" pixels should be replaced with the equivalent partially opaque pixels.
So this:
Becomes this:
At that point, if you export your image as a PNG it will be anti-aliased for any background color (and gradients, and patterns...).
If you insist in doing it the old way, you can still use Layer > Transparency > Semi-flatten on that universal image to make sure your image only works on one background:
Related
I'm using background-blend-mode: multiply to display a texture image tinted in different colors. The problem is, until the texture loads, the element briefly shows a bright colored rectangle. How do I avoid this, preferably showing nothing at all until the image loads? The usual tricks of using fallback color (background: #000 url(image.png)) don't seem to work because of blend mode.
I would like to draw a cross over an image, with a different color for each pixel depending on the background color, so that the cross is always well visible. So I'm trying to change the Composition Mode of the QPainter, but I can't find an acceptable solution.
I have tried QPainter::CompositionMode_Difference, painting with white. This is quite good because it inverts the destination color, but it doesn't work well if the destination color is a middle gray or similar.
The best solution is to get white if the background is "dark" and black if the background is "light". Is there a way to get this effect using only composition modes of the painter?
What about running the Image Composition Example for yourself, and maybe modifying the source/destination images to better fit your scenario? Maybe QPainter::CompositionMode_Xor is what you want?
An alternative solution, which is even very simple, is to use a white cross with a rather thick black outline. In this case you can ensure the visibility of the cross even in case of rather dark or light background images.
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I have a site that uses images for buttons, and I have a few images with some white space in the background, they are rounded rectangle buttons like the app store icon. They look good when compared to a background with white space, but when I use anything other than white, the little white space shows up and it looks terrible. Is there any sort of way that I can set the transparency color so that white space will disappear?
You need to make them PNGs or GIFs. PNGs support transparency and are the most common, as they also support higher quality images.
You can use a free photo editing program like GIMP to 'select' the white and delete it out.
http://www.gimp.org/
Photoshop is also a popular tool.
Is it possible to have a transparent photoshop image render in CSS? I tried saving as jpg and gif with transparency selected but when I overlay it in css it shows the background color behind it and not the image which is under it. I played with the z-index and it didn't help.
Thanks
JPEG images do not support transparency.
You need to save the image as a PNG file, which does support transparency.
If you need to support IE6, you'll also need to use the filter proeprty.
You need to save it using an image format that supports the type of transparency that you want. The JPEG format doesn't support transparency at all.
There are two types of transparency, transparency index and alpha channel. The GIF and PNG-8 formats support transparency index, i.e. one of the 256 colors are chosen to represent transparency. That means that each pixel in the image can only be either 100% transparent or 100% solid.
The PNG-24 format support alpha channel. That is transparency value for each pixel, so that it can be anything from 100% transparent to 100% solid (in 256 levels).
If your image has mostly fully transparent or fully solid pixels, you can use transparency index, but if it has a lot of partly transparent pixels, you have to use alpha channel.
Note that older versions of IE has problems displaying the transparency in PNG-24 images correctly.
First, have a transparent background (as in no background) as the first layer of your photoshop file.
Be sure it has grey and white squares in the background, which means it is transparent.
When you're ready to save, go to the File Menu, and hit Save for Web
Select the PNG file format and be sure it has "Transparency" checked.
Just press SAVE and give it a name and that photoshop image will be saved into a transparent background PNG file which presents more colors, and it's smaller than a GIF file and is as good as a jpg.
As SLaks pointed out, use a PNG image file for this. JPEG won't do, I am not sure why GIF wouldn't work...
I took a look at a project I was doing involving some translucent background and its CSS, and this is what I found:
background-image: url(../images/translucent_white.png);
So it really is that simple. Just save your picture with transparency as a PNG.
You need to save it as a .png file as mentioned but this is tricky when it comes to IE6. It depends on if the image you have is using a gradient that transistition to the transparency. For instance a shadow.
If you have an image that has a shadow (or any gradient) than you are best off using a .png but this will now work for IE6 and you should follow the advice of SLaks. In my experience though I stay away from javascript fixes like this and just choose to save the image w/ the desired background.
If you do no have a gradient then the .gif is the way to go as it will be supported in all browsers.
I recommend using a .gif filetype; it supports transparent backgrounds and works in most cases. .jpgs don't support transparent backgrounds at all. .pngs support nice alpha-transparent backgrounds, but not in IE6. (Using the AlphaImageLoader filter can cause page slowdown and browser crashes.)
First off, make sure that your image has a transparent background in Photoshop - often a white and grey checkerboard. Then, choose "Save for Web" (or something close to that, it varies in different versions) from the File menu, choose whatever GIF preset works best, and be sure that "Transparency" is checked.