1

I am looking for a workflow and tools to achieve the following:

  1. Create a screenshot (from a specific region of the screen)
  2. Add custom-made icons to the screenshots (such as arrows, numbers, boxes etc.)

The custom-made icons should be created once and made publicly available.

Ideally, this should be possible on the most common platforms (Mac OS, Windows, Linux). The workflow should be easy-to-use and not involve too many steps.

The screenshots are to be created for an open-source documentation project and the used icons should look similar to get a common look which does not clash with the current theme.

In the past, common graphics tools were used, which already provide arrows, numbers etc. This however makes it difficult for others to replace the screenshots if they are using a different operating system and thus have other graphics tools which do not include arrows with the same styles, for example.


My initial idea was to create a common library of icons consisting of some arrows, numbers etc. Inkscape, for example is available on the common platforms and used to support importing Clipart from "Open Clip Art Library". However, this has been discontinued.


Example: This is an example what my result might look like: Here, numbers were added to the screenshot.

enter image description here

  • I use Shutter to create the screenshots. Then I use Shutter (simply click "edit") to edit them. Use the Shutter toolbox to insert the "numbers in circles" (they are already there), optionally adding arrows (also available) and text. Besides, Shutter is available in the package lists of Linux repos (more recent version via a PPA). The Windows pendant would be Greenshot (same workflow). No idea about Mac, though. Details (German): wiki.ubuntuusers.de/Shutter Would that fit? – Izzy May 11 at 19:43
  • 1
    Thank you Izzy, I'll have a look! – Sybille Peters May 12 at 7:27
  • Let me know if I shall make it an answer then, though it's two different applications to support all your OS requirements. – Izzy May 12 at 9:14
  • About shutter: It is not included in my current version of Xubuntu (20.4). If I try adding the ppa " add-apt-repository ppa:shutter/ppa" I cannot install shutter because missing release for my version (focal): "E: The repository 'ppa.launchpad.net/shutter/ppa/ubuntu focal Release' does not have a Release file." I am not too happy about having to install from external sources anyway – Sybille Peters May 21 at 6:44
  • I use the program "Xfce4-screenshooter" to create screenshots. It seems to support all or most features of shutter as well (select region, entire screen, copy to clipboard, file, open application etc.) – Sybille Peters May 21 at 6:45
0

I did some more searching myself and found there is now a good solution with Inkscape


I would choose Inkscape because it is available on all 3 requested platforms (Win, Mac and Linux), it is free and fairly easy to use (if you do not do complicated stuff).

Since version 0.91 it is possible to use "symbols" and use symbol libraries of your own.

So, the basic steps are:

For creating the symbol set:

You can create a basic SVG file containing the "symbols". Add a title (in metadata). Make sure, the symbols are in the <symbols> section. You may need to edit the file manually.

See

For using the custom symbols (with Inkscape):

  1. Copy the SVG file containing the custom symbols to the directory already containing your symbols:

    (the paths may be different on your system!!!)

    • Linux: /usr/share/inkscape/symbols/
    • Windows: C:\Program Files\Inkscape\share\symbols
    • OSX: /Applications/Inkscape.app/Contents/Resources/share/inkscape

    If it is possible to use a directory for the user, you may want to copy the file there, e.g.

    • Linux: ~/.config/inkscape/symbols
  2. Restart Inkscape

  3. Open the "Symbols" Dialog (Objects > Symbols)

  4. Select the new Symbol set

  5. You can now drag 'n drop the symbol to your drawing.

enter image description here

For using this in combination with screenshotting

Ideally, use a tool which can create a screenshot of a region of your screen and open a custom tool afterwards to work on the screenshot. If this is not possible, you may be able to copy the screenshot to the clipboard or save it and then paste it or open it in Inkscape.

For Xubuntu, the tool Xfce4-screenshooter works nicely and allows to open the screenshot in a custom tool.

enter image description here

Terminology

A symbol, from a user perspective, it’s a reusable SVG item that can be dragged from the symbols dialog to our document.

How to create a symbol library in inkscape 0.91

Technically, a symbol in SVG is:

The element is used to define graphical template objects which can be instantiated by a element.

MDN web docs: SVG > symbol

Symbol libraries are sets of symbols located in one SVG document. Inkscape will look for libraries in the share/symbols directories (both system and personal).

Symbols Dialog in Inkscape Wiki

This can be done relatively easy by creating an SVG file which contains the "symbols". This does have some quirks and will not be so easy to do for non-technical people but in my usecase it is more important to make using the symbols easy and not creating them!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.