I am creating custom UI for the ESP32-S3 Display that supports LVGL.
I have already figured out how to do the basics and how to make some animations (moving water) inside the water droplet in my previous forum post:
I want to understand how can I make some parts of the image more transparent than the others. For example I use the following image:
The bottom of the droplet has something to it (as you can see from the image above, it apperas to be a white droplet with a little grey on the bottom). That white part of the water droplet is completely transparent whereas the greyish part on the bottom is not 100% transparent.
What have you tried so far?
I use paint 3D eraser tool to erase the parts that I want to be transparent.
Please suggest user friendly tool to achieve this effect.
However, there does not seem to be available option to choose whether I want to completely remove the color or I want to make it lets say 90% transparent.
Since I cannot put more than 1 embedded image, I have to reply to show this image. This is what happens when I place a simple blue color rectangle over the droplet.
What you are looking for is named alpha channel. This channel determines the transparancy within an image. If you create an gradient inside your picture from black to white the transparancy will follow this gradient.
Within the studio you can set the alpha channel mix. With this you can adjust the transparency to your needs.
I have painted a curved line in red color. This is the part of the image that I want to have 50% transparency. The rest of the droplet (white) should be 100% transparent. How woud I do that?
You can’t to this with Square Line at all. The Alpha channel is an part of some specific graphic types like PNG or TIFF.
As for your question. Black means 100 % transparent. White 100 % opaque. Gray anything in between. Important is that this color is saved as a transparancy information.
Square Line can use this information and render the picture accordingly. This PNG should have a matching alpha channel for what you want to archive. Haven’t checked it yet though.
This is what my picture editing program shows based on the alpha channel information. checkered is the background of the program. The white line has 50% transparancy.
