How I Made Screenshot Program and Learned a Programming Language. Part 1

Introduction

In the process of creating documentation, I often use screenshots. It can be a GUI or examples of how to use the application's features. Images make text more interesting and understandable.

This is a short story of the birth of a new working tool and learning the basics of programming.

For many years I have used free programs:

• Lightshot (hereinafter referred to as LS) - simple and fast (https://app.prntscr.com/en/index.html)
• ShareX - a lot of interesting features (https://getsharex.com/)
• ScreenToGIF - for GIFs (https://www.screentogif.com/)

The final processing of the images obtained from these programs (adding arrows, frames, numbers, etc.) took place in Adobe Photoshop (hereinafter referred to as PS).

Why didn't I use the built-in drawing tools from screenshot apps? It's about the overall style, accuracy and speed of work.

Short list of problems:

1. Arrows: length, slope and shadow. No matter how hard you try, they will be different. And if you still try to make them the same length, then too much time is spent on the picture.
2. Frames - the style is too simple. Without a shadow. The shadow is needed so that the graphic element does not merge with the background color.
3. Numbering - in LS it is very simple and the problems are the same as with the arrows. I just want to click the mouse and get a number. Without a shadow.

The process was like this:

1. Screenshot (any program).
2. Selecting a file with a suitable size (PS).
3. Processing, adding graphics (PS).
4. Saving.
5. Paste into a document.

To automate and speed up work in PS, I used layers with pre-made styles. Each screenshot size was a separate file and contained these layers.

The main disadvantage of using Photoshop is, of course, an extra step that takes time and money. Too huge and expensive program for such trifles.

But there are two more problems that PS can't solve, and that's the size and composition of the screenshot.

Speaking about the composition, I mean what and how will get into the screenshot. Yes, I made file templates of the required sizes in PS, but it turned out approximately like in the screenshot on the left. The object is either small or vice versa does not fit on the screenshot.

About the size. Text with images of the same size and same aspect ratio looks neater in my opinion, and the final document looks more professional. Although I used to use pictures of different sizes

A document can use 2-4 image sizes. They are selected in the course of work. Large, medium and small, for example, such a gradation. Large, this is the entire screen in Full HD, etc.

An important clarification, I'm talking about documents where the image is inserted at 100% scale, without software scaling.

Part 2