How to convert text into an image

This tutorial will explain how to create great type compositions and text art using VeraType for Android or VeraType for Mac or PC. We are going to take a poem and shape it into the form of an image.

This is part two in a three part series. Please read before continuing.

Part I – How to create great type art
Part III – Sharing your type compositions

Here is the final image.

Click to Enlarge

Click to Enlarge

Adding your own text
We are going to work with the poem, “The Raven” by Edgar Allen Poe.

First import an image of a raven as shown below.

Import of Raven

Import of Raven

Next, type the text into the text area and set the text switch to “ON”. When you do this the text you’ve typed will be shown in the image.

You can see the text is now in the image.

Import of The Raven

Import of The Raven

You can also copy the text to the clipboard and paste it into the text area. The procedure for copying and pasting differs among the various operating systems and mobile devices. In this example I’ve copied the text from this page.

It may or may not take some time to render. It will render as you type. So if you have a lot of text to type you could turn off the text rendering until you are done typing and then turn it back on.

Note: In this example I’ve only copied the text from the first page (which is only half of the poem the last line being, “Then the bird said, ‘Nevermore'”.

Notice the red markings in the next image. Click to enlarge.

Text Repeat

Text Repeat

These indicate the start of the poem and then the position the poem repeats. The reason the text repeats is because the Repeat switch is set to “ON”. This is on by default to help fill out the image. Be sure to add a space at the end of your text if Repeat is on. If you have a decent amount of text already or if you don’t want to repeat the text then you can set this option to “OFF”.

When you set Repeat to “OFF” the application automatically increases or decreases the detail value of the image until it matches the amount of text you’ve provided. Notice the last line of text entered in the text area matches the last line of text in the image.

Repeat off

Repeat is off

When Repeat is set to “OFF” and when you don’t have a lot of text it will be very small and indistinguishable. It will most likely look like nothing. The more text you have the more the image will fill out.

If there is a lot of text it can take some time to process. It is not known how long it will take but it will depend on the amount of text you’ve entered and the image.

Note: When you set Repeat to “OFF” the detail level slider will be disabled. This is because the detail level has to be auto calculated to fit the content.

The image in the example so far is good but it’s not great. That’s because we are still treating it like an image with a gradient of colors. We can increase the quality of the image by increasing the brightness level to about 230. Now look at the image.

Adjusted image

Adjusted image

It may not be that apparent but you will see the difference soon.

What we did was go from a setting that shows a full range of light and dark characters to a setting that shows only a range of visible and non-visible characters. We do this because the text content you provide is either going to be a alpha numeric letter or blank (IE a space character).

In the images below, I’ve switched to using the Levels Controls so you can see the difference. Notice the Levels slider.

Before

Normal coverage

Normal coverage

After

Full coverage

Full coverage

Since we are not showing a gradient and we will eventually replace the image with our own text we increase the level setting to fill in the image.

Set the Text setting to “ON” to use your own text again. Now change the levels setting and you can see the difference. You typically will have to make adjustments to get the desired outcome.

Final image

Final

Final

PART III – How to export and share your type compositions

If you like this application please let others know about it.

© All images copyright their respective owners.

 

Sharing your Type Compositions

This tutorial will explain how to create great type compositions and text art using VeraType for Android or VeraType for Mac or PC. This is part three of a three part series. Please read the previous articles if you have not yet read them:

PART I – How to create great type art
PART II – How to convert text into an image

Sharing

You can share the image you created in a few ways. When you click the share icon it will give you the option to share the image, the HTML or the text.

Figure 6. Share options

Share options

When sharing on a mobile device any social applications that can work with images will appear when you choose the “Share Image” option. When you choose, “Share HTML” any social applications that can work with HTML will appear and the same goes for the, “Share Text” option. This option is not available on the desktop version.

When working with HTML and text you’ll have to have an application that supports full HTML otherwise these formats will be displayed distorted. A browser is usually the most reliable application to accurately display the HTML that’s generated. When working with text a word processor or code editor is usually the most reliable way to accurately display the text that’s generated. In the case of the word processor, you’ll want to choose a fixed-width font.

Email

You can email the content you created. When you click the share icon it will give you the option to share the image, the HTML or the text. This option is not available on the desktop version.

Figure 7. Email

Email

When you choose, “Share Image”, if you have your email account setup, the email application will open with the image added as an attachment.

When you choose, “Share HTML” or “Share Text”, if you have your email account setup, the email application will open with the HTML or text added as an attachment. Usually, the text or HTML will be distorted. As described in the sharing section, you’ll have to have a application that can accurately display that format.

Copy to Clipboard

You can copy the image you created to the clipboard and then paste it. When you click the copy icon it will give you the option to copy the image, copy the HTML or copy the text.

Copy to Clipboard

Copy to Clipboard

When you choose, “Copy Image”, the image will be copied to the clipboard. You can paste this image in applications that will accept an image pasted from the clipboard. For example, if you are working on desktop, you can paste the image into a program like Photoshop.

When you choose, “Copy HTML” or “Copy Text”, the HTML or text will be copied to the clipboard. As described in the sharing section, you’ll have to have an application that can accurately display that format.

When working with HTML you can paste that into an HTML editor and view it in a browser.

When working with text a word processor or code editor is usually the most reliable way to accurately display the text that’s generated. In the case of the word processor, you’ll want to choose a fixed-width font. Code editors usually display fonts fixed-width by default.

Export

You can also save the image to the desktop or camera roll. When you click the save icon it will give you the option to copy the image, copy the HTML or copy the text.

Export

Export

When you choose, “Image”, you will save an image to the desktop or on mobile to the camera roll. You can change the final image size by adjusting the slider. This adjusts the font size or zoom value. You can set the transparent background image switch to “ON” to remove the exported image background.

Note: On mobile devices the image may appear black. This is because the mobile phone’s photo gallery background is black and the text in the image you’ve exported is also black. Set the transparent setting to “OFF” to keep the background.

When you choose, “HTML” or “Text”, and then export you will save an HTML or text file to the mobile device’s documents directory. On mobile you may have to plug in the device into a computer to find or display the HTML or text. When running the application on the desktop a File Save As dialog will be shown that allows you to select a location to save the file to; by default the desktop directory.

If you like this application please let others know about it.

© All images copyright their respective owners.