# Webpage Text to Image conversion

**URL:** https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321
**Category:** Factual Questions
**Created:** [March 22, 2009, 4:45am UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321 "2009-03-22T04:45:38Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![stanger](https://avatars.discourse-cdn.com/v4/letter/s/7ba0ec/32.png) [@stanger](https://boards.straightdope.com/u/stanger)
#### Post date: [March 22, 2009, 4:45am UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/1 "2009-03-22T04:45:38Z")

</div>

Sometimes, when wanting to put a few sentences of text on a webpage, I want to use a special font. Of course, most people will not have this font in their computer, so they will see the text in a default font.

It can be difficult and time consuming to write text in a photo editor, save it as an image, convert the image into a transparency so the text will appear over the existing webpage image, etc.

There are a lot of online webpage banner builders, I was wondering if anyone has seen an online or program that lets you type in a few sentences of the font you like, then easily save it as a transparent image that can be dropped on a webpage?

A lot of programs and online stuff has you upload an image and then put text on it, but I need something that just does the text as a transparent image I can layer on top of my existing webpage images.

Anybody know of such a thing?

---

<div class="post-metadata">

### Author: ![Mike.V](https://avatars.discourse-cdn.com/v4/letter/m/82dd89/32.png) [@Mike.V](https://boards.straightdope.com/u/Mike.V)
#### Post date: [March 22, 2009, 5:03am UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/2 "2009-03-22T05:03:22Z")

</div>

Not exactly what you were looking for, but there [are](http://typeface.neocracy.org/) (slightly hackish) [ways](http://www.mikeindustries.com/blog/sifr/) of rendering custom fonts on the fly.

---

<div class="post-metadata">

### Author: ![sailor](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@sailor](https://boards.straightdope.com/u/sailor)
#### Post date: [March 22, 2009, 9:08am UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/3 "2009-03-22T09:08:30Z")

</div>

IMHO this is not a good idea for several reasons but, leaving that aside, I do this easily by capturing the screen and then using any image program like MSPaint or Irfanview. It takes no time.

---

<div class="post-metadata">

### Author: ![LSLGuy](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lslguy/32/5813_2.png) [@LSLGuy](https://boards.straightdope.com/u/LSLGuy)
#### Post date: [March 22, 2009, 2:59pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/4 "2009-03-22T14:59:56Z")

</div>

How do you achieve a transparent background using MSPaint?

---

<div class="post-metadata">

### Author: ![John\_H\_1](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@John\_H\_1](https://boards.straightdope.com/u/John_H_1)
#### Post date: [March 22, 2009, 3:45pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/5 "2009-03-22T15:45:37Z")

</div>

The commonly supported formats with transparency (png8/gif) only flag a single color as transparent. Text rendered against a particular background actually has translucent edges which show up as a slightly darker/lighter variation of the background. What this means is that if you display your text with transparency over a very different color background there will be a noticeable discolored edge around the outside of the text. If you intend to overlay your text on top of high contrast images this aliasing will be unavoidable with a single color transparency.

You could try to render the text against a neutral color in the middle of the extremes of your image (like grey) and maybe it wouldn’t be noticeable but it’ll still be present. The best solution is probably just to make the text a part of the image. This also allows you to to stuff to make it easier to read (like outline it/add a shadow etc).

If you don’t have a program like photoshop you could try getting [GIMP](http://www.gimp.org/) which is a free image editing program.

---

<div class="post-metadata">

### Author: ![sailor](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@sailor](https://boards.straightdope.com/u/sailor)
#### Post date: [March 22, 2009, 4:36pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/6 "2009-03-22T16:36:04Z")

</div>

> [@LSLGuy](#):
>
> How do you achieve a transparent background using MSPaint?

I do not remember exactly but I remember it involves unchecking “draw opaque”.

---

<div class="post-metadata">

### Author: ![Chronos](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/chronos/32/134_2.png) [@Chronos](https://boards.straightdope.com/u/Chronos)
#### Post date: [March 22, 2009, 4:38pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/7 "2009-03-22T16:38:49Z")

</div>

> [@](#):
>
> The commonly supported formats with transparency (png8/gif) only flag a single color as transparent.

GIF only supports a single transparent color, but PNG has a full alpha channel, so you could have a pixel that’s, say, 0x0A red, 0xC7 green, 0x83 blue, and 0xBE transparent.

---

<div class="post-metadata">

### Author: ![sailor](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@sailor](https://boards.straightdope.com/u/sailor)
#### Post date: [March 22, 2009, 4:38pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/8 "2009-03-22T16:38:52Z")

</div>

> [@John\_H\_1](#):
>
> The commonly supported formats with transparency (png8/gif) only flag a single color as transparent. Text rendered against a particular background actually has translucent edges which show up as a slightly darker/lighter variation of the background. What this means is that if you display your text with transparency over a very different color background there will be a noticeable discolored edge around the outside of the text. If you intend to overlay your text on top of high contrast images this aliasing will be unavoidable with a single color transparency.
> 
> You could try to render the text against a neutral color in the middle of the extremes of your image (like grey) and maybe it wouldn’t be noticeable but it’ll still be present. The best solution is probably just to make the text a part of the image. This also allows you to to stuff to make it easier to read (like outline it/add a shadow etc).

The way I avoid this problem is by first converting the text image to a single flat color whic is quite easy to do. The same problem arises with images which were a flat color but were converted to JPG.

---

<div class="post-metadata">

### Author: ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)
#### Post date: [March 22, 2009, 5:45pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/9 "2009-03-22T17:45:52Z")

</div>

> [@Chronos](#):
>
> GIF only supports a single transparent color, but PNG has a full alpha channel, so you could have a pixel that’s, say, 0x0A red, 0xC7 green, 0x83 blue, and 0xBE transparent.

PNG alpha transparency isn’t well-supported except by the latest browsers. I’d be hesitant…

---

<div class="post-metadata">

### Author: ![Markxxx](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@Markxxx](https://boards.straightdope.com/u/Markxxx)
#### Post date: [March 22, 2009, 5:59pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/10 "2009-03-22T17:59:28Z")

</div>

You can go to [GifWorks](http://www.gifworks.com/), it’s an oline image editor for gifs. It can do a lot.

[XNView](http://xnview.com) is an excellent FREE program to manipulate images if you want. You can do a much with it.

But GifWorks is probably easier, but get XNView anyway, it’s free and excellent

---

<div class="post-metadata">

### Author: ![Markxxx](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@Markxxx](https://boards.straightdope.com/u/Markxxx)
#### Post date: [March 22, 2009, 6:02pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/11 "2009-03-22T18:02:27Z")

</div>

I just thought of another site that might help, and it supports transparency

Of course it’s free

[Cool Text](http://cooltext.com/)

---

<div class="post-metadata">

### Author: ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)
#### Post date: [March 22, 2009, 6:11pm UTC](https://boards.straightdope.com/t/webpage-text-to-image-conversion/490321/12 "2009-03-22T18:11:50Z")

</div>

This site seems to do exactly what you want: [GIF\_TEXT](http://www.srehttp.org/apps/gif_text/mkgiftxt.htm)

The background is transparent by default, and though there are a shitload of options, all you really need to specify is your text, a “TTF Font” (there’s a link to a list at the top) and its size.
