Dark Lines Around Image

I know that images will have dark lines around them when they aren’t the same size as they’re “supposed” to be, but the problem is, my GUI buttons are using scale; however, unless the player’s screen just happens to make the buttons sixty pixels wide and tall, my buttons get that dark line around the pictures. Any suggestions?

image

Your issue is because of how completely transparent pixels and visible pixels are blended together when the size of the image changes from the original.

If you study the completely transparent pixels of your image, you will notice that their color is black.
You can fix this in a simple manner, however that might depend on which image editing software you’re using :slight_smile:
I’ll be going with one possible solution - if someone who uses another image editing software knows how to fix the issue in those programs, it might help you out more.

After you’ve found out if your invisible pixels are black, you want to fix them. In the image editing software I use, this case happens if you try resize your canvas or perform other operations like merging layers.

To fix it, select your invisible pixels

Now, hit the Delete key on your keyboard, and check the invisible pixels once again to verify that their RGB components are now white.

1 Like

Well, like you said, limit the size to 60px.

For things like buttons, it is often better to use offset anyway. If you need to handle different resolutions (e.g. multi-platform support), create assets for each of the sizes (ImageRect properties might be useful for ‘spritesheeting’ this).

Using better software (photoshop, affinity, etc.) will allow you to completely replace the color of the image. Usually in the effects section for a layer.

1 Like

Thank you, guys. I’m going to try that. :smiley:

1 Like

I converted everything to offset. Thanks for the tip, @EmeraldSlash. You know, I was actually thinking about directly asking you after seeing your wonderful tutorial. :3

1 Like

No problem :slight_smile:

1 Like

Yeah, I found this plugin today for it. :stuck_out_tongue:

Cool. You can also use the AbsoluteSize and AbsolutePosition properties of GUI objects to do the same (if you don’t want a plugin).

1 Like

I learned too much for my tiny brain to handle today. :drooling_face:

1 Like