How to create a step-by-step guide
Prepare images for your guide. You can add existing images to the image library, capture some screenshots or create cloned images. Add callouts using image editor to emphasize meaning of the corresponding step.
Select "Step-by-step Guides" node in the project tree view.
Click "Add Guide". New guide dialog box appears.
Give appropriate name to your guide. It is recommended to avoid use of spaces and special characters since this name will be used in "SBS" placeholder.
Check "Add topic" to automatically add topic with created guide. It will be added as the last topic in the project. You can use project tree drag and drop feature to put it in the correct place. If you leave it unchecked then you need to manually insert "SBS" placeholder into desired topic.
Click "Add images" button to add images for steps. You will be able to rearrange and rename steps later.
Select images for steps. Images are taken from the project's image library. Check as many images as you wish.
The list of steps is at the left top corner of the guide editor. On top of the list there are tool buttons to edit it.
Click "Rename" to give appropriate titles for steps.
Reorder steps using "Up" and "Down" buttons.
Write some descriptive text for each step. Be short, image should say for itself.
Guide options are at the left bottom row. Here you can select whether you want to add step numbers to step images, select color scheme to use for step numbers and where they should be located on the step image. Check "Auto size" if you want Helpinator to select size of the HTML box automatically, or set width and height manually.