I seem to be getting this error when I click ok.
I restarted gimp and it didn’t give any error but the transparent parts are still black for me.
Huh. I didn’t have this issue. You may have mixed versions of gimp installed, may want to uninstall and reinstall.
This has saved me
I wrote a javascript app that automates this process. It uses the same algorithm as the alpha-bleeding program I posted a while back, but is more accessible since you don’t have compile it yourself. Most importantly, you can run it entirely from your browser!
You can access it at
Online Javascript Editor (right side of the page)
or
https://pastebin.com/raw/81QpWtsv (save this as an .html and run it in your web browser)
How to run:
- Open the page.
- Click choose file and select the file you want to bleed.
- An image should appear in a black box at the bottom of your page. Save this image.
Love it. Does it just do alpha bleeding but does it also double the size of the image?
It just bleeds. Any reason why you’d have to double the size, though?
The second part of the tutorial is showing that if you want a 50x50 image to be clearer, you should double its size. It said something about aligning it to a grid and that you can’t just simply resize it, though, so it makes sense that your tool doesn’t have that feature.
hmm.
I’ve been using your article to make my UI’s look nicer, but recently I’ve encountered a problem which is if I use offset the whole time to make my images crispier then they will not scale on all devices. I assume there’s no way to make image look crisp while using scale?
Sadly not :^(
To add on to this topic, I would strongly consider using these same methods mentioned in the OP for MeshParts. Consider this example:
For Photoshop users:
Don’t download any plugins, photoshop has it built-in.
Layer > Matting > Defringe.
I usually enter betweeen 2-10 pixels to be safe, doesn’t really matter most of the times.
Black outlines? Vanished!
This is going to help so many new UI designers out there! Amazing tutorial, Quenty!
I’d still recommend the original solution, because after trying that for a few minutes:
- The bleeding can clobber the color of visible pixels.
- The edges can get “chipped”.
- Sometimes it flat doesn’t work – note that in the first image, the outermost edges of the corner bits pretty much did not bleed outwards at all.
True! Forgot to mention that it doesn’t handle stuff with opacity very well. The most common example would be drop shadows or any type of glow.
I’ve never noticed a major change around thin strokes though. Thanks!
Very sorry for the bump, but the GIMP solution isn’t working for this one image.
After importing it into GIMP, resizing the canvas and then doing the fix, I get this result.