Today, I’ll explain how to use Biblos to create widely used graphic symbols in computing: icons. Using Biblos for this purpose is straightforward, and I assure you that with its tactile graphics environment, you can create as many icons as you want.

In computing, an icon is a small image representing Software, a command, an action, a file type, or a website. As a sighted user, you interact with icons daily. Often, you recognize commands by their icons—for example, copy-paste icons—or launch Software without reading its name, relying solely on its icon.

With this brief introduction, I hope to convey how essential icons are for developers and companies, and how integral they are to your daily use. Consider that there’s even a market for icons and graphics, where designers create custom icons for clients.

Is it easy to design an icon? Judge for yourself. Look at the icons on your desktop or within a Software interface. As a former designer, I’d say yes.

However, creating a design involves two paths: copying others or developing your unique style.

Open your desktop and observe the icons for installed applications. Notice their small size and stylized details. Do you think designing an icon at 256x256, 48x48, or even 16x16 pixels is easy?

The numbers I mentioned refer to the horizontal and vertical pixel grid that makes up an icon. Icons are raster images (as opposed to vector graphics, which I’ve discussed before) stored on your Computer as .ICO, .PNG, or .BMP files, or embedded within Software executables and libraries. If you’re a webmaster, you likely use .PNG icons or include a favicon.ico file in your website’s root directory for browser bookmarks.

Now that you understand what icons are and their role in computing, let’s get hands-on: we’ll create an icon together.

Open Biblos and navigate to Tools/Braille/Tactile Graphics…

You’re now in the vector graphics environment designed for tactile diagrams, but we’ll use it to create our first icon. If you have a Braille printer, you can later print it in relief.

First, set the icon dimensions. Let’s create a 32x32 icon by resizing the canvas. Go to Insert/Size and Position/Resize…

In the resize window, enter 32 in the X and Y fields. Check Fit Image to Dimensions and click OK. The canvas is now resized, and this instruction appears: GraphicSize(32,32,1)

Next, manually add an instruction to enable transparency. Desktop icons typically have a foreground image and a transparent background that adapts to the desktop. To replicate this:

If you have an older Biblos version, uninstall it, download the latest version, and update if prompted.

After the previous instruction, write or paste:

GraphicTransparent(true,clWhite)

Click Render to update the graphic.

Now, if you’re sighted, grab your Mouse; if not, use keyboard navigation. Let’s draw our first element: a circle.

Right-click anywhere on the left-side canvas and select Circle. Move the Mouse to the center (coordinates X-15, Y-15) and left-click to start drawing.

Drag the Mouse to expand the circle to a radius of 10 points. For precision, move the cursor to X-5, Y-15 and left-click again.

If using the keyboard, add this instruction:

Circle(15,15,10)

Next, create a green letter "B."

First, set the font. Go to Insert/Text and Braille/Font…, select Arial 16pt, and click OK. This instruction is added:

Font("Arial",16,fsNormal)

Choose the pen color. Go to Insert/Pen and Colors/Pen Color…, select green, and click OK. The instruction becomes:

ColorPen(#008000)

Note: The parameter could also use the constant clGreen, which you’ll learn more about in Biblos tactile graphics guide.

Finally, add the letter "B." Go to Insert/Text and Braille/Text…

Type "B" (uppercase), set X and Y to 15, and choose Mid-Center as the origin. Click OK to add:

Text("B",15,15,hsMidCenter)

Great job! The complete icon code is:

GraphicSize(32,32,1)

GraphicTransparent(true, clWhite)

Circle(15,15,10)

Font("Arial",16,fsNormal)

ColorPen(#008000)

Text("B",15,15,hsMidCenter)

Our icon is simple, but you now know the basics. Save the code as a .BTACTILE file for reuse. To export the icon, go to File/Save Image…, name it MyIcon.ico, choose a save location, and click Save. To print it in Braille, use File/Print Tactile….

This was a lengthy guide, but I hope it was clear and helpful!

For further support you can subscribe the Biblos Group on Facebook.