-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtext-transparency.html
148 lines (133 loc) · 7.75 KB
/
text-transparency.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE HTML>
<!--
Hello! Welcome to my personal website. Feel free to look around or get in touch with me if
you wish to know more. I typically respond to emails within a couple of hours.
This stylesheet is a customized version of Forty by HTML5 UP used under the CCA 3.0 license.
I love doggo memes.
-->
<html>
<head>
<title>Creating Transparent Text Images and Removing Image Backgrounds</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>Vishnu</strong> <span>Thiagarajan</span></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="coursework.html">Coursework</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="projects.html">Personal Projects</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<ul class="actions vertical">
<li><a href="resume.html" class="button special fit">Résumé</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main" class="alt">
<!-- One -->
<section id="one">
<div class="inner">
<header class="major">
<h1>Creating Transparent Text Buttons</h1>
<h3>Or Just Removing Image Backgrounds</h3>
</header>
<span class="image main"><img src="images/startoverlay.jpg" alt="" /></span>
<a href="http://github.com/vishnut/TransparencyTools" class="button special" target="_blank">GitHub Repo</a><br/><br/>
<p>A few weeks ago, I was working on a <a href="https://github.com/vishnut/Survive" target="_blank">game (check it out!)</a> 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.</p>
<p><b>Step 1: Decisions </b><br/>
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.</p>
<span class="image"><img src="images/startbutton.png" alt="" style="width:500px; max-width: 100%;" /></span>
<p><b>Step 2: Create the Text Image </b></br>
Using a free tool such as <a href="http://picmonkey.com" target="_blank">PicMonkey</a>, draw a rectangle (or some other shape) in your desired color and add text to that image.</p>
<span class="image"><img src="images/2startbutton.png" alt="" style="width:500px; max-width: 100%;" /></span>
<p><b>Step 3: Run the script </b></br>
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. </br>
<code>python tblack.py startbutton.png</code><br/>
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.</p>
<p><b>Step 4: Overlay </b></br>
Drag it into your app if you want to use it as a button. If you want an image, using <a href="http://picmonkey.com" target="_blank">PicMonkey</a> 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>
<p>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 :) </p>
</div>
</section>
</div>
<!-- Contact -->
<section id="contact">
<div class="inner">
<section class="split">
<section>
<div class="contact-method">
<span class="icon alt fa-envelope"></span>
<h3>Email</h3>
<a href="mailto: vishnut@utexas.edu?Subject=Hi%20Vishnu!" target="_top">vishnut@utexas.edu</a>
<br>
<a href="mailto: thiagarajanvishnu@gmail.com?Subject=Hi%20Vishnu!" target="_top">thiagarajanvishnu@gmail.com</a>
</br>
</div>
</section>
</section>
<section class="split">
<section>
<div class="contact-method">
<span class="icon alt fa-phone"></span>
<h3>Phone</h3>
<a href="tel:281-725-0635">(281) 725-0635</a><br/>
</div>
</section>
</section>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="http://github.com/vishnut" class="icon alt fa-github" target="_blank"><span class="label">GitHub</span></a></li>
<li><a href="http://linkedin.com/in/vishnuthiagarajan" class="icon alt fa-linkedin" target="_blank"><span class="label">LinkedIn</span></a></li>
<!--li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li-->
<li><a href="http://facebook.com/wishnut" class="icon alt fa-facebook" target="_blank"><span class="label">Facebook</span></a></li>
<!--li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li-->
</ul>
<ul class="copyright">
<li>© Vishnu Thiagarajan</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92157885-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>