Guide

Table of contents

  1. Auto-Saving Workspace
  2. Adding Notes To A Diagram
  3. Color And Transparency
  4. Custom Fret Labels
  5. Drop Shadows
  6. Using Diagrams
  7. Printing Documents

Auto-Saving Workspace

Fretboard Illustrator saves your work automatically. If you navigate away from the app, to read this user guide for example, your workspace will be just as you left it when you return to the app. Your work and settings are stored locally in your browser.

Adding Notes To A Diagram

A few clicks on your first diagram and you'll see that adding notes is quite simple. The notes you add appear in a circular shape by default. With each subsequent click on the same note, its shape will change to a square, then a diamond, and finally, on the fourth click, the note will be removed from the diagram. While this method may initially seem unconventional, you'll find it both straightforward and efficient once you become accustomed to it.

The first items in the options panel control the behavior and appearance of notes that you are going to add to your diagrams. Changing these options will not affect any notes that have already been added.

Toggle Select Matching Notes to the off position to enable adding one note to a diagram at a time. Alternatively, toggle it to the on position and Fretboard Illustrator will automatically add all matching notes to the the current diagram.

Color And Transparency

The default monochrome colors should meet your needs if you're looking for something purely functional. The fretboard background, along with the diagram itself, default to transparent. If you add diagrams to an html page that has a colored background, that background color will be the background color for your diagram as well.

If you're adding diagrams to a darker background, you have the freedom of choosing colors that will contrast well against a dark design. You can toggle Fretboard Illustrator's theme between light/dark in the top menu to test your designs at any time.

You can enhance your designs by blending color and transparency for a more creative look. However, be cautious not to make your design difficult to view for practical purposes.

Custom Fret Labels

Enabling custom fret labels will hide the default numbered fret labels and allow you to add your own custom labels.

Custom labels can be applied at any point along the fretboard and do not necessarily have to be numeric or even short. A custom label can be the name of a chord like Bm7b5 or even an entire sentence. The only logical limitation is that the length of your labels should not exceed the length of the diagram itself.

When you create a custom label, it will be decorated using the current Note Fill Color. This allows you to add different colored labels within a single diagram. If you add a blue label, you can then change the Note Fill Color to red, and the next label you add will be red.

Adding Custom Labels

Once you've enabled custom labels, you can now click the empty area below and between frets where the original labels were. When you click one of these areas, a text box will appear where you can enter your label. Clicking elsewhere on the screen afterward will commit that label to your diagram. There is a spot between each fret for entering labels.

Important

Here you can see custom labels in action.

Custom Labels

Drop Shadows

Adding drop shadows can enhance the visual appeal of your diagrams; however, be cautious, as shadows may not be universally supported and could produce unintended effects in certain situations.

While modern web browsers typically render shadows well, PDF and image viewers might not display them correctly, potentially leading to a less than optimal appearance.

Using Diagrams

After creating and downloading your diagram, you can easily embed it into your website's HTML using an tag, just like you would with any other image. Here's an example:

<img src="assets/images/fretboard-diagram.svg" height="250" alt="Fretboard Diagram" loading="lazy"/>

Utilize the height attribute to control the display size of the image.

Please note that support for SVG diagrams in word processors may be limited. If you encounter issues with SVG formats, consider using a PNG version instead.

Printing Documents

Fretboard Illustrator lets you add multiple fretboard diagrams and blocks of text to your workspace. Anything that you add to your workspace can be previewed at any time using the Preview/Print button. When you're happy with what you see, use your browser's print dialog to choose pinting to your printer, or to save as a PDF document.

notes