Creating Transparent Text Buttons
Or Just Removing Image Backgrounds
GitHub RepoA few weeks ago, I was working on a game (check it out!) and I wanted to add transparent text with a surrounding white box to a gradient background. It seemed easy but when I looked around online, there simply were no easy and customizable ways to do this. There were Photoshop tutorials but I didn't want to pay for it and even with Photoshop, there were just too many steps. So, of course, I wrote a few short Python scripts to do the job. These are very simple but I loved the effect it had on my app and so, I thought I'd write a mini post about it for the sake of having more pretty apps. Although my primary purpose is to create transparent text, these tools (specifically background.py) can also be used to remove an image's white background without a lot of surrounding noise as well. Details about that are in the repo's readme.
Step 1: Decisions
Pick a background image, the text you want to overlay and the color of the text box. In this example, I have picked a landscape background and I want to overlay the word 'START' with a white text box.
Step 2: Create the Text Image Using a free tool such as PicMonkey, draw a rectangle (or some other shape) in your desired color and add text to that image.
Step 3: Run the script
Clone or download the GitHub repository linked above and run the appropriate script. If your text box is white (text probably black), run tblack.py.
If your text box is black (text probably white), run twhite.py. If you have a different colored text box, feel free to edit the RGB
values in line 10 of either file and navigate to the appropriate directory and run 'python script_name image_name' in Terminal.
python tblack.py startbutton.png
If you are new to the command line and are unsure about how to proceed, check out some online tutorials (cd/pwd/ls) or just email
me and I'll be glad to help out. I typically reply within a couple of hours.
Step 4: Overlay Drag it into your app if you want to use it as a button. If you want an image, using PicMonkey again, overlay the new image on the background and adjust overlay trasparency if you wish to. There you go! It's pretty simple but it can give your app/project a sleek and professional look.
P.S. I would love to check out what you guys are doing. If you used this, feel free to send me a link to your project repo :)