Creating Digital Images Part 2: 3 Braille Tips

The first post in this series, Creating Digital Images for Tactile Graphics Machines Part 1, we learned how to trace and/or mark up an image of worksheet or app to create a simple image to be run through a tactile graphics machine. In this post, we will discuss how to create a tactile overlay for an iPad. Follow the instructions in Post 1 on how to take a screenshot of the desired app, create a new GoodNotes document and import the screenshot.

Tactile Overlay

In this digital 21st century, tactile graphics are used to help students transition from tactile educational materials to digital materials. Tactile overlays are a wonderful tool to bridge the gap, as students can feel the tactile overlay while listening to VoiceOver and while interacting with the iPad.

The GoodNotes default template size is GoodNotes Standard. The default size makes the end print/tactile image smaller than the actual iPad screen, meaning that with the Counting game app example, the print/tactile grid and buttons will be smaller than the grid and buttons in the counting game app. The overlay will not align with the app. Choosing the right GoodNotes template will remedy this size issue.

To Change the GoodNotes Template Size

  • In GoodNotes, open the desired image.
  • Select the More button in the top right corner.
  • In the dropdown menu, select Change Template.
  • Select Paper (not Cover).
  • On the left side is the current template size (default is GoodNotes Standard) and a down arrow; select the current size.
  • In the Templates popup, select the desired size. Use A3 for the standard iPad size.
  • Select the Apply button in the top right.
  • In the popup, select the Apply Change.

Screenshot of GoodNotes app with template popup and A3 selected.

Paper Sizes

These designated names (A3, A4, etc.) are associated with the follow paper sizes:

  • A3: 11 3/4 x 11 3/4
  • A4: 8 1/4 x 11 3/4
  • A5: 5 7/8 x 8 1/4
  • A6: 4 1/8 x 5 7/8
  • A7: 2 15/16 x 4 1/8 (iPhone size according to GoodNotes app)

When you print the image directly using the A3 size template, the print/tactile image will be close to the correct size. If you copy the image to a Word document, the print/tactile image size will change - the image will be smaller than the image in the original app, and will not be the right size to be used as a tactile overlay. One work around is to try enlarging the print image using a copy machine.

Note: It is strongly suggested to print the image on regular paper to confirm that the size is correct and the content is correct, before printing on the more expensive capsule paper!

To Add Braille to Image

UPDATE! See Creating Digital Images Part 2A: Braille Font and GoodNotes App post which details how to install Sim braille to your iPad (including importing to GoodNotes app) for a simplified work flow!

Sim braille (simulated braille) is simply that - simulated braille meaning printed circles in the form of braille characters or words. These simulated braille dots are flat and are read visually. When creating a digital image for the tactile graphics machine, sim braille is used; the ink in the printed dots will rise to form readable tactile braille when heated.

Add Sim Braille Font to Your Computer

Add the free braille font to your word application on your computer. TSBVI has several download links for sim braille, including the free Braille-Swell.ttf download. Go to the TSBVI website download Braille and ASL Specialty Fonts page and select Braille-Swell.ttf The font will go to your Downloads. Open the file and install it. Note: When you install the Braille-Swell font,the font is now available when you open your PDF exported to your computer from GoodNotes (opens as a PDF in Preview) or if you copy/paste the PDF into Word. This first example is when copy/paste the GoodNotes image into Word.

Add Sim Braille to Your Image In Word

In the example of the Counting game app, the directions, "How many animals are there in all?" is written above the grid. In GoodNotes, we traced the grid, answer choices and buttons; we did not include the written text. Since GoodNotes does not have a way to install additional fonts, export the traced image to your computer. (Email or if using a Mac that is physically nearby, AirDrop the image.) Drag and drop (or copy and paste) the Counting image into a new Word Document.

Add a textbox above the grid, where the print was located on the original image. Insert >  Textbox > Draw Textbox. Then move cursor to above the grid and expand the textbox to the desired size. Be sure to keep the textbox on the image(do not go above the actual image margins.)

Type in the desired words, in this case, "How many animals are there in all?" Highlight the words. In the tool bar, select Home > select the arrow beside the current font (Calibri, Arial or whatever your default font is) > select the braille dots (Braille-Swell font). You may have to scroll down to find the braille font the first time. Once it has been selected, it should stay close to the top of your font list. It is reccommended to use 22 or 23 font size; however, 24 or 26 font size seemed to align best with real braille dot sizes for me. (I reccommend that you compare different font sizes with embossed braille to determine what works best for you.) BOLD the sim braille font. Note: If the braille characters do not raise well with the tactile graphics machine, be sure that you have increased the font size and have made the font bold.

Once you have selected the braille font, the text will automatically convert to braille dots. As always, confirm that the font is the right size by printing a copy on regular paper before using the more expensive capsule paper.

Screenshot of Word with outline Counting image. Textbox above the grid with words highlighted. Font button selected with popup list of fonts. Braille-Swell font is highlighted.

Below is a quick video tutorial on how to add sim braille to your PDF image. Note: The video did not include how to take out the textbox lines. The written instructions are below the video.


Eliminate the Lines Around the Textbox

  • On the image, select the textbox. (You will now see the grab circles in the corners of the textbox).
  • In the ribbon, select the Shape Format tab.
  • Select the Shape Outline (icon is the square and pencil with the line underneath)
  • In the popup menu, choose No Outline

Screenshot of Word document with Shape format Tab selected, Shape Outline button selected, and popup with No Outline chooses.

Note: When you print  the Word document version of the image, the image shrinks and is no longer the same size as the original iPad game. Currently, the only work around for making this a tactile overlay (that I know to do), is to print the Word document on regular paper then enlarge the image until it matches the iPad image. Be aware that enlarging the document also enlarges the braille. You may need to go back and change your font size when enlarging the image!

Add Sim Braille Directly to the PDF Image

Follow the directions above to share your image as a PDF to your computer. Save the image on the desktop. Open the PDF image; it will open in Preview. You may have to open the Markup Tool bar (select the icon just to the right of the search textbox - it is a circle with pen tip. A second row of tool buttons is now available.

  • Select the Text button (square with a capital T).
  • Drag the text box to the desired area above the grid in the image and make the text box longer.
  • Type in the text, "How many animals are there in all?"
  • Highlight the text.
  • Select the text style (icon has capital A and small a).
  • Select the arrow beside the font name and scroll down to select Swell Braille.
  • Change the font size to 43.

PDF preview screenshot with annotated arrows pointing to the Mark up tool and the text tool - with popup showing Swell Braille, 43 point font.

There were three notable differences between the Word version and the PDF Preview version on my Mac.

  1. When using the PDF, all my images came out the same size (slightly larger than my iPad's image) no matter what size I selected in the GoodNotes app.
  2. The PDF version did not have lines/square around the sim braille, so one less step.
  3. The sim braille size in the PDF was 43 point font.

Note: The sim braille font size in the PDF is 43 while the sim braille in Word is 24 or 26. You should print the document on copy paper and compare the printed font to standard braille to confirm that it is readable braille before printing the document on the capsule paper.  

If you know a better way to create the right size overlay with sim braille, please share in the comments below or email Thank you!

Add braille After the Tactile Graphics Machine

An alternative way to add braille to a tactile image is to run the image through the tactile graphics machine and then add sticky backed braille to the diagram. This is a simple method; however, each copy must be done individually and manually. With sim braille, the original copy includes the braille; therefore, when creating multiple copies, each copy will automatically include the braille. Also, if the digital document is shared, the braille is included.

How to Add Print (for teachers/parents who do not read braille)

There are times when it might be appropriate to add print to a tactile image for easy identify of the image which is especially beneficial for teachers or parents who cannot read the braille. It is easy to add print to the image while in the GoodNotes app. However, when the image is sent through the tactile graphics machine, we do NOT want the print to be raised. There is an easy solution! Cover the print words on the capsule paper with masking tape right before running the document through the tactile graphics machine. The heat should not bother the masking tape; remove the masking tape afterwards. The print is still on the capsule paper and will remain flat while the rest of the ink is raised.