Keyboard art for beginners
Make this tiny envelope with punctuation and spaces. You choose where each character goes; there is no image conversion or code to run.
+--------+ |\ HI /| | \ / | | \__/ | +--------+
Start with a fixed-width text editor
Open a plain-text editor and choose a monospace font. For this printable-ASCII example, each character and ordinary space occupies one column. Press Enter for a new row and use spaces, not tabs, to place the edges.
The symbols are ordinary keyboard characters: plus, hyphen, vertical bar, backslash, forward slash and underscore. Their keys vary by keyboard layout. If a symbol is hard to enter, copy it from a specimen below.
Insert mode shifts later characters when you type. To keep this grid aligned, select a single space before replacing it with a slash. If your editor has an overtype mode, it can replace that cell instead; the key or setting depends on your editor.
Build the envelope
Make a ten-column outline
Type a plus sign, eight hyphens and another plus sign. On each of the next three rows, put eight spaces between two vertical bars. Repeat the top row for the bottom edge.
+--------+ | | | | | | +--------+
10 columns, 5 rows. Copy and TXT keep the spaces and four line breaks, with no added final newline.
Replace spaces with the fold
Keep both outer bars in place. In the first inside row, replace the first space with a backslash and the last with a forward slash. Move each slash one cell inward on the next row. In the third inside row, bring the slashes inward once more and put two underscores between them.
+--------+ |\ /| | \ / | | \__/ | +--------+
10 columns, 5 rows. Copy and TXT keep the spaces and four line breaks, with no added final newline.
Put a short message in two cells
The first inside row has six spaces between its slashes. Replace the middle two with HI, leaving two spaces on each side. Do not insert extra characters: every row should still be ten columns wide.
+--------+ |\ HI /| | \ / | | \__/ | +--------+
10 columns, 5 rows. Copy and TXT keep the spaces and four line breaks, with no added final newline.
Edit your drawing and make a PNG
Copy Envelope with HI, then open ASCII to PNG. In Your text art, select all of the existing sample and paste. Check that the five rows and both backslashes survived.
Try replacing HI with OK. Keep the two spaces before and after the letters; replacing two cells with two letters keeps the envelope ten columns wide. Longer messages need a wider design, not just a smaller font.
Leave Font size at 16 px, Padding at 24 px and Background at White, then choose Render PNG. Inspect the full-size preview, including its bottom and right edges, before Download PNG. Pixel dimensions depend on the monospace font on your device; ten columns is not ten pixels.
Save input TXT keeps the editable characters. Changing text or settings makes the old PNG unavailable: choose Render PNG again before downloading the new drawing. Tabs, emoji and other unsupported input produce an error rather than being silently removed. Export before leaving; the editor does not automatically save your work.
A PNG keeps the layout as rendered on your device, but its letters are no longer selectable text. Keep the TXT and add a useful description when sharing the image, such as "A small outlined envelope with OK inside the folded flap."
When an edge moves or a slash disappears
If a row grows wider, undo the insertion and replace the intended space instead. Count ten character cells from the first plus sign to the last. All three specimens use the same outer frame; only the inside cells change.
If gaps change after pasting, check the destination's font, line wrapping and handling of repeated spaces. A small drawing can still break in a proportional font or a field that removes line breaks. Preview there before sharing; this lesson does not establish compatibility with any particular messaging app.
A backslash is an actual drawing character here, not an instruction to hide the next character. HTML, Markdown and programming languages can interpret some punctuation as syntax. Use a preformatted or fenced block when supported; the literal HTML lesson shows how to embed characters without turning them into markup.
If Copy fails, use the raw text shown by the error or download TXT. TXT contains only the specimen in UTF-8, not the step heading or a Markdown fence. If you only need an automatic frame for a longer note, use the text box editor; it does not draw this diagonal fold for you.
Try another shape
Keep a copy of the empty outline and change one cell at a time. Try moving each slash one column outward, or replace HI with two other printable ASCII characters. Compare the result with your previous version before adding more detail.
These teaching arrangements were assembled for this site, not copied from an art collection. Familiar geometric shapes are not claimed as exclusive. The historical ASCII Art FAQ discusses hand drawing and fixed-width editors; it is background reading, not a guarantee about modern apps. The ASCII reference explains the underlying characters.
The editor link carries no drawing or private message. You paste the text yourself; rendering stays in the browser. Site resources and analytics still make requests. See data handling.