Updated date:

Image to ASCII Art: How to Make Text Drawings

Author:

As an experiment, I made an app that draws pictures using text. Pixel photos are converted into ASCII images.

Photo to ASCII text image. If you look closely, you can see the keyboard characters.

Photo to ASCII text image. If you look closely, you can see the keyboard characters.

ASCII Images

Most digital pictures are created with tiny rectangles called pixels. They have red, green, and blue color values that range from 0 to 255. That is 255*255*255 possible colors. A grayscale photo could contain up to 255 shades of gray.

Pixels also contain an alpha channel that sets the opacity. Using a single color, you could create a blackscale, redscale, greenscale or bluescale image. The RGB color value stays the same, but you set the transparency based on the intensity of the original color.

ASCII or text images are made using keyboard characters. The letters, numbers, and symbols on your keyboard are different shapes and sizes. So they have different intensities. A # is darker than the ^ symbol. Using 70 different ASCII characters gives me 70 shades of black.

How to Make ASCII Art

Classic ASCII art was made by typing. You could type out a picture on a typewriter or computer. The idea was to use the keyboard characters to form patterns that look like a person, animal, or scenery.

The easiest way to manually make ASCII art is to focus on the edges. Create basic outlines that look like something. Keep it simple, like a child's drawing.

When it is done automatically, it is easier to draw everything. Getting a computer program to loop through every pixel was easier than getting it to recognize shapes and patterns.

Simplify the original image by making it smaller and removing the background.

Classic ASCII image created with an image to ASCII converter app.

Classic ASCII image created with an image to ASCII converter app.

Text Shading

There are different formulas for finding the intensity of a color. The simplest is to add the RGB values and divide by 3. You end of with values that range from 0 to 255. With text shading, colors or color intensities are replaced with keyboard characters.

If you have 255 symbols, then you could match each intensity value with a character. For 95 symbols, you multiply the results by (95/255). When the color intensity was 127, the pixel image to ASCII converter displayed a V.

Usually, the background would be white. Colors that are the same or almost the same as the background would not be given a symbol. Going from millions of possible colors to 95 symbols and white space simplifies the image. Different colors will be represented by the same text character.

Black text pictures with a font size of 1px look similar to blackscale images.

Photo of my dog to ASCII text image using a small font.

Photo of my dog to ASCII text image using a small font.

Font Size

Classic ASCII pictures use a large visible font. The characters are large enough to read, and there is white space between them. The separate letters, numbers, and symbols make patterns. A series of X's could be an eyebrow if it is near something that could be eyes and a nose.

With a small font size, letters and numbers look like the period at the end of this sentence. The characters are tiny and close together. If you add color, then the text version could look almost the same as the original. The differences can make it look more artistic.

Each pixel from the original picture is being represented with text. So a font size of 10 would make the ASCII version 10 times larger. To create a classic ASCII image, you may need to reduce the source to the size of a large thumbnail. For best results, make sure the source image looks good at the smaller size.

Using a font size of 1 turned digital photos into drawings. A large font created a series of characters that formed patterns.

Font Color

People usually associate text and ASCII characters with black. Using straight black can make it look like an old-style ASCII image or pencil drawing. Most black ASCII images have transparent or simple backgrounds. It prevents the background and foreground from blending together.

Straight black works best on simple photos. If the classic ASCII style does not look good, then change the font color. Using color or grayscale increases the contrast between objects. It is easier to see the patterns. I like using color and a small font to make it look like a painting.

Drawing with text changes the intensity and transparency of the colors. A red % is not going to look the same as a filled-in red square. The colors may look watered-down. My results reminded me of water paintings.

After replacing a color with a number, letter, or symbol, you can set the font color to the original pixel color.

Liquid Blur Effect

I accidentally created a liquid blur effect after blurring the source photo. Blurring the picture before converting it to a text image gave me some interesting results. It kind of looks like I squeezed tubes of paint onto the canvas.

Increasing the blur makes the image more abstract. I could not duplicate the effect with pixel filters. For a water paint effect, use a small font with color and blur it a little. See what you can make with it.

Dwayne Johnson ASCII picture with liquid blur effect.

Dwayne Johnson ASCII picture with liquid blur effect.

Photo to Ascii Art Converter

All the text shading pictures on this page were created with my image to ASCII art generator. Select a picture. Press the ASCII button and wait a few seconds. The photo to ASCII converter will quickly change every pixel into a text character.

Use small photos or a small font. When increasing the font size, display the original at a smaller size so the ASCII version is not too big. I limited the font size for large photos so you don't accidentally make a large photo 10 times larger.

There are lots of different font styles and different ways to calculate the intensity of a color—experiment by trying out different values. Alter the text values and the appearance of the original photo.

Recommended for you

Converting from pixel images to keyboard characters is quick and easy if you use a computer app to do it for you. If you do it manually, it could take a long time.

  1. Choose a photo.
  2. Select a display size.
  3. Choose a font size.
  4. Choose an alpha intensity formula.
  5. Pick a font style.
  6. Decide if you want color.
  7. Make an ASCII image.
  8. Experiment
Classic Ascii ArtDrawingPainting

black text

black text

colored text

large font

small font

small font

works on simple images

high contrast images

works on most images

Tropical beach photo to ASCII painting. Made with small keyboard symbols.

Tropical beach photo to ASCII painting. Made with small keyboard symbols.

Copy and Paste Text Art

Text can be added to image canvases or text areas. If it is going to be added to a text box or document, then it should be 10 to 14 pixels high. When adding to a canvas, it could be as small as 1px.

The words in a sentence don't always stay on the same line, and paragraphs can change their shape. Pasting keyboard characters into a different document or text area can change the font and spacing. It can also remove spaces and wrap lines.

Images are stable. When viewed in different programs or in different screens, they keep the original aspect ratio. Reducing the size does not distort the picture. That is one of the reasons I added ASCII characters to a canvas instead of a text area.

Copy and paste ASCII art needs to be small and simple. It is hard to recognize objects based on their color when using large black characters. So you need recognizable shapes like a rectangle with a triangle on top.

Finding the right photo for copy and paste text can be difficult. It may be easier to make a simple drawing or manually type out the symbols yourself.

I recommend saving your art as a picture. Put the symbols onto a canvas and save it as an image, or add it to a text box and do a screen capture. Only do it as copy and paste keyboard character art if you need text.

The code capsule below contains characters that represent an image. It was my first attempt at creating an ASCII picture in a text area, copying it, and then pasting it into a text area on a different website.

                     ||jjjjjj|                               
                     r0jjjjj||                               
                     jj||ji                                  
             @    i|rjjjjj               ]JJJJ               
            %1a   ?|jj||jj             JJcJcc8JJ             
          %0000%  %%a                 kJJJ8JJJcJck           
         %000000% @01               kcJJJcJcJJk8cJ|          
        %00000000r%0k             Jzc8zzJJ%zJJJJJJJkkJ       
       %0000000000r%%             cJJJJJcJJJJcJJJJ8zJJc      
      %00000000000001a            cJz%cJaJJJJcJJJJkLJJJJcb   
     vr000000000000001a           kJJckcJJJkkcJzzJJzJk8c8kJ  
   ^@00000000000000rrrr1%          JJJJJcJJJccJccJJJJJJJJJJJ 
  babbbb@@%%%%a%@kJrrrr%%%         :JJJ%LJJJJJJJJc8JJzJJcJc  
   a000000000000000000rk           JczcczckcJ%zc8JJJJJczJJJ  
   %000@kr00000@brr000r             J8kJ8JJcJckczJJJJJJ8cJc  
   %00k``.`%00k``%`.r0%              JJJJJhJJJJ%JJcJJJJJJz   
   %00k.%%%%00%``%.%00%              cJccJLJJJJ%cJz8cccJzJ   
   %00k%%%%%00@%arrr00a                 cJcJcc8JJJJ::        
   %00000000000000000r                    LJJJkcc            
   %0a%%kJJJb00000000@                    aaaaa              
   %0%00000Jr0%%%%%r0@                    aaaaL              
   %0%00000a00%`%`%00@    XXX UXXi       aaaaaa  X`X    XlXj 
   J0b0@00br00aJ11r00@     X  ff   UXlX  aaaaaaa   II:  I    
   Jr10000%0000000000@     I  ffI  I/XX aLaaaaaa  III  III   
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk%hkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

A house with smoke coming out of its chimney and an apple tree.

HTML Code for a Text Area

<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, height=device-height"/>
<title>Text Area for ASCII Art</title>
<style>
</style>
</head>  
<body>
<center>
<textarea spellcheck="false" id="TextBox1" name="Textify" rows="50" cols="55" style="overflow:hidden;white-space:nowrap;line-height: 80%;font-size:12;font-weight:bold;font-style:normal;font-family:Monospace;letter-spacing:normal;" placeholder="Type here or paste a text picture."></textarea><br>
</center>
</body>
</html>

Copy and paste the HTML code into a text document. Save it as TextArea.htm. Then open it. Type to create a keyboard picture or paste an existing text image.

You can change the font size, style, and spacing along with the number of rows and columns. If you paste the picture above into the new text area then the lines will be closer together and the font will be a little smaller.

Fixing the Aspect Ratio

The problem with using text to represent square pixels is that the width and height are not equal. At 10px the text height is 10 but the width may be 6. A 600 by 600 image becomes 360 by 600.

When using a text area there are a few options to fix the aspect ratio.

  1. Reduce the line height and increase letter spacing.
  2. Reduce the height of the source image without changing the width.
  3. Manually remove lines from the text image.
  • How to Make and Use a Transparent Image
    Transparent background images focus on the subject and they are easy to edit. You can quickly add them to other pictures or turn them into an animation. See through photos can be merged with other images. Learn how to make and use transparent picture
  • How to Turn a Photo Into a Painting or Drawing With ...
    Take a picture with your camera then make it look like a drawing or painting using color filters. Paintings and drawings can be more interesting to look at than regular photos. If you don't have the time, materials or the skill to make art by hand yo
  • Best Photo Filters
    Make cool pictures using photo filters. Change the colors to make them look more interesting. Transform your old pictures into new ones. You can do a lot with a digital image.

Final Thoughts

Pixel images are common. Text art is interesting because it is different. Tiny pencil dot size squares are replaced with letters, numbers, and symbols. The results often look very different from the original while representing the same thing.

Small screens and displaying the pictures at a smaller size can ruin the effect. Photo programs may have trouble displaying large ASCII images. The hardest part is making sure the ASCII version will be displayed at full size without reducing the quality of the image.

You can turn photos into sketches, drawings, oil paintings, spray paintings, and chalk drawings using color filters that alter the pixel colors. Converting from pixel colors to text is another way to turn photos into art.

I like how different the ASCII version looks. They don't look like anything I made before.

Text pictures can be keyboard characters in a textbox or on a canvas. I prefer to put the text on a digital canvas and save it as a picture. When using a text area, I like to reduce the line spacing and take a screenshot.

Turning a photo into keyboard art using a picture canvas is easy. With the font size, spacing, width limits, and spell checking, it would be difficult to make a good-looking ASCII image in this text capsule.

Converted animated dog GIF to  ASCII.

Converted animated dog GIF to ASCII.

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2021 Michael H

Comments

Michael H (author) from Canada on July 24, 2021:

Your assumption is probably right for simple ASCII images that contain a small number of symbols. Some of the text images I found only contained two symbols.

If the small version of the text image looks like a black and white photo with lots of different shades of grey then the artist probably matched symbols with color intensities.

DreamerMeg from Northern Ireland on July 23, 2021:

That's very interesting. I never actually wondered how they were made before, just assumed that an artist typed them out following a pattern they had created.

Related Articles