I’m trying make the transparent fonts and numbers that have their color changed by taping a button.
What is the method everyone uses to make the font transparent?
I know you have to use the bitmap fonts, but do you have to edit them in another program to make them transparent? if so what is the preferred method?
When I prepared images for bitmap font with transparent digits, I also wanted them to be “fixed width”. I made the text in GWD, adjusted it to the right size, then made printscreen and I used gimp to make individual images of that size.
I also made me inversed (black squares with hollow glyphs) .ttf font using Fontstruct page, to avoid redoing the images, if I later decided to change the size. It was tedious, but fun, after I learned some key shortcuts and techniques.
WFS can change the size of bitmap font without changing the original images, so it should be easier.
Thanks @Peter I like your method of the screen capture.
When I make a font in gimp:
I do 1 number at a time,
select it,
invert it,
cut it to alpha transparency,
add a black box around and save as BMP.
but the black box i add around it does it need to be the same color as my watch face background or can it be masked to any color in wfs? I’m sorry if that sounds dumb im very new to all this and masks kind of confuse me right now.
It depends what are you trying to achieve. If you just want to change text colour, its easier to use themes and not bother with bitmap fonts. But if you make the bitmap font images white, they can be masked into any color. You can make a gradient text on gradient background with it.
If I make them the themes than they change with everything else I have themed right? it’s all or nothing with themes.
I was hoping to make a gradient text actually, so I can make them white and mask them?
Do you mind explaining that process? I tried last night with the default bitmap font but I couldn’t get it work like in your picture lol.
Thank you so much for your help so far @Peter I really appreciate it!
If you use theme color on different elements, the white become theme colored, those not white become some other shade of the theme color, but as you write, yes, its all at once or nothing.
With mask it is like projecting some image onto the masked object, be it text, time or progress bar. The projected image however can not be set to change with tap.
Select the text layer and the image layer, then right click the selection and pick mask from the pop-up menu. Et voila, magic happens.
As you can see in the screen shot, I have used same image for the mask and for the time with white bitmap font with hollow digits. Trough the transparent digits can be seen the changeable image hidden below the time and above the background.
awesome, thanks again.
one more question, how big of a border are you leaving around your bmp fonts when you make them?
I left about 1 pixel all around it came out looking really weird… part of the letter even gets cut off when I use it in WFS.
I always use at least 2 pixels around the letter for easier manipulation with the image behind and to keep even space between letters.
I dont know what I’m missing but mine isn’t playing nice…
I made it with 2px border, transparent on black but it still looks weird when I use it in WFS.
I am using the text bitmap box for now for testing since I haven’t done all the fonts if that matters.
just to be clear, your using white font on transparent background and mapping or using black box with transparent font?
What program did you use to make/edit them?
I think you should make the box bigger, it seems you have entered more text into it, than can fit in without clipping. Or did you mean the warped edges and unexpected vertical lines?
no I definitely didn’t mean that lol. I made the box way bigger and no change. Even increased the font and no change.
Maybe its something with the export properties of gimp.
Do you normally save it as 16bit?
Sorry I did not notice it earlier. Do not use .bmp format. It is not capable to store transparency. Bitmap fonts are not called that because .bmp format, but because they do not use vector description like the the .ttf do.
Just use all default .png settings, like this
