Version 1

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 (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.

An example of a screenshot with design elements.

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 Photoshop, 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.

Example.

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

Example.

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.

Free Screenshot Software Comparison

This time I will briefly tell you what features I use in screenshot programs and what I lacked in them.

An important criterion - they are all free.

Lightshot (LS) in the process of taking a picture does not allow you to move what you screenshot, the screen “freezes”. Composition and size must be adjusted before. The size is set in the process of drawing the frame. If you need an exact one, then it will not be quick and very convenient to fit. You can add graphics (arrows, text, etc.) in the process.

ShareX - basic features is similar to the LS. You can take screenshots of windows, regions, screens, etc. In “Region” mode you can set the size of the screenshot. Graphics are added after the screenshot is taken. In addition, the program has a huge number of useful and interesting functions. It's a small image editor.

ScreenToGif allows you to move windows in the background. Frame is visible and you can build a composition. One resolution, changes manually. Graphics are added after the screenshot is taken. A small editor for post-processing a screenshot.

In general, it turned out that all these programs somehow did not suit me.

What I want:

• Size presets that can be easily changed

• The ability to build a composition seeing the boundaries of the screenshot

• Guides to create a more accurate composition

• Ability to add graphics in the process.

• Graphics presets (arrows, numbers)

• Easy, simple and free

As a result, I decided to make my own screenshot program…

At the beginning I made a prototype using Lazarus (Object Pascal, https://www.lazarus-ide.org/). Because I know a little about how this IDE and the Pascal language work. It turned out to be primitive, but even in this form it helped me for some time.

Then, I realized that the size of the exe file and the ease of development in Pascal did not suit me.

I had to do something more…

To be continued.

"Fast Screener": learning C# and creating a program.

I have done little programming and have never programmed in C#. I had some experience with scripting and markup languages. That’s All.

I started googling how such an application could be made quickly. I came across a series of dotnet tutorials - “What is C#”.

https://www.youtube.com/watch?v=BM4CHBmAPh4&list=PLdo4fOcmZ0oVxKLQCHpiUWun7vlJJvUiN

I looked. I liked the guys who were talking, and the programming language seemed friendly. I also saw a lot of information and documentation on C# on the Internet.

Result: I decided to write a program in C#.

Everything was new. Syntax, rules, etc. Almost every week I came to a dead end - I couldn’t figure out how to implement the functions I needed. I looked for tips on the Internet (https://stackoverflow.com/). Most of the fuss was with the settings (GUI, saving). I didn’t do a lot of things the way I wanted.

Slowly, over a couple of months, in my free time, I did what I needed. In the process, I understood what other functions I wanted, added them, and tested them.

I named the program “Fast Screener” or “FS”, because... it allows me to quickly take screenshots. It runs on Windows x64 (NetFramework required).

The result was 3 iterations of appearance and functionality. Because you must design first 😊

Stages of development. Window.

Menu.

Settings.

GUI anatomy.

What the program allows you to do:

• 4 size presets that can be changed

• Adding arrows (you can set color, length, and direction)

• Adding numbering (you can set color and size)

• Proportional (3x3, 4x4) and custom grid

• Copying the image to the clipboard + saving to a PNG file on disk.

• Settings are saved when you close the application.

Fast Screener is an application that sits on top of all windows. In the frame window, like in the viewfinder, you can place what you want to see in the screenshot. Making the most of the given size.

The grid is necessary for convenient positioning of objects. For example, you want all images to be about 10 pixels from the edge. Or build some kind of composition based on a 3x3 proportional grid.

Example: application in progress and screenshot. Arrows and numbering are used.

Summary

I actively use the program at work. I quickly get screenshots of the required size, which contain everything that is important. Got used to it. It did not completely replace all other programs, but that was not the goal either...

Current process:

1. Size selection (FS)

2. Adding graphics (FS)

3. Screenshot (FS)

4. Saving or immediately inserting into a document (in difficult situations I use PS)

What was interesting in the process of creating the program:

• Learn something new and unknown

• Programming

• Make a tool for the job yourself and be able to improve it in the process

• Solve problems and find a way out

• Feel the importance of design. At least minimal. I spent a lot of time on things that should have been thought through first and only then done.

Is size 4 enough for me? – Yes, but it would be cool if the user could add new ones himself. Or presets of 3, 4 or 5 resolutions. For different documents.

Is there anything that can be improved in Fast Screener? - Oh yes! I wouldn't call it the final program, but rather a working prototype. From a programming point of view, it's crazy)

Thank you for your attention!

Write who uses what for screenshots or what tools they make or want to make, not only for documentation. Interesting to hear your stories.

Links

GIT: https://github.com/Ivanou-Dzmitry/fast_screener

EXE: GoogleDrive or https://dziva13.itch.io/fast-screener-2

P.S. NetFramework is required to operate and run the application. He will offer to download and install himself.