I was asked about the screenshot images I include in my pull requests with user interface changes (e.g. 1, 2, 3). Specifically, I was asked if I use a program to create them. I don’t. It’s a fairly manual process. I decided to automate that process over the weekend. Read on to learn how to create screenshot images with a single terminal command.
Story
Prior to creating a script to automate the process, I have been copying and pasting screenshots onto template images in order to make my screenshot images. It’s not as time-consuming as it used to be now that I’ve developed a method over the years. I’ve stockpiled template images based on the desired screenshot image layout (e.g. 2×1, 2×2, 2×6, etc.). Once I had created a template layout, I just copied, pasted, and positioned the screenshots onto the template. For the typical templates (e.g 2×1 or 2×2), it doesn’t take very long. For the larger templates (e.g. 4×5), it can take a little while since I have to copy, paste, and position 20 screenshots.
I decided to write a Bash script and attempt to do everything I do manually in one command. Now, what usually took minutes to do takes seconds. Also, I think it’s user-friendly enough to share in case anyone else would like give it a (screen)shot.
Script
The screenshots.sh script uses multiple options to perform a series of concatenations and create a single ImageMagick command. All options are required except -f. The breakdown of each option and its purpose is below.
| -f | font of header text, Roboto.ttf by default, optional |
| -l | layout of output image, integers in columns:rows format |
| -o | output image, file name with optional path without spaces |
| -s | screenshot image, file name with optional path without spaces |
| -t | text of column header, string without spaces |
Both the -s and -t options are meant to be used multiple times when running the script (i.e. one -s for each screenshot and one -t for each text label). There is some basic error handling to ensure the number of screenshots and text labels input match the expected layout. The order of the screenshot arguments determines how they will be inserted into the output image. The first screenshot image will be in the first column and first row. The second screenshot image will be in the second column and first row if there is only one row or the first column and second row if there are multiple rows. In other words, the screenshot images fill the first column before moving on to the next from left to right. The text labels do the same, but there is only one row of headers so the text labels are not inserted anywhere except the first row from left to right. The script detects the dimensions of the first screenshot image and creates the output image based on that. Therefore, it should work for any device size (i.e. phone or tablet) and any orientation (i.e. portrait or landscape). The only caveat is that the screenshots must be the same size with the same dimensions.
In the compiled command run at the end of the script, it uses the magick command, which means ImageMagick needs to be installed on the system. I used ImageMagick 7.0.9-2 Q16 x86_64 2019-10-31 to develop this script. Also, you will need to specify a font to use for the header text labels. I use Roboto. You can use whatever you like, but just make sure the OTF or TTF file is in the same directory as the screenshots.sh script then update the FONT constant in the script. You can also specify any font shown by the magick identify -list font command with the -f option if you prefer to use a built-in font.
Sample
Here are a couple example uses with explanations to help with understanding.
./screenshots.sh -l 2:1 -f TimesNewRoman -o output.png -t Text1 -t Text2 -s screenshot_01.png -s screenshot_02.png
The command above will create the output.png file, which will have two columns and one row with the first column containing the “Text1” header and the screenshot_01.png image and the second column containing the “Text2” header and the screenshot_02.png image. The headers will use Times New Roman font. All files are in the same directory as screenshots.sh. The output.png image is shown below.
./screenshots.sh -l 2:3 -o /Users/Tyler/Documents/842_add_sorting_results_search.png -t Develop -t Layout -s ~/Downloads/Screenshot_1573434041.png -s ~/Downloads/Screenshot_1573434048.png -s ~/Downloads/Screenshot_1573434052.png -s ~/Downloads/Screenshot_1573434056.png -s ~/Downloads/Screenshot_1573434061.png -s ~/Downloads/Screenshot_1573434071.png
The command above will create the 842_add_sorting_results_search.png file, which will have two columns and three rows with the first column containing the “Develop” header and the Screenshot_1573434041.png/Screenshot_1573434041.png/Screenshot_1573434041.png images and the second column containing the “Layout” header and the Screenshot_1573434056.png/Screenshot_1573434061.png/Screenshot_1573434071.png images. The headers will use the default Roboto font. The screenshot files are in the ~/Downloads directory and the 842_add_sorting_results_search.png file will be saved in the /Users/Tyler/Documents directory. The 842_add_sorting_results_search.png image is shown below.
Summary
This script is not really optimized. It’s not using the latest and greatest programming language. It could probably be updated and made way better. But that’s not why I made it. Its purpose was to automate a part of my everyday life, allow me to work more efficiently, and share a helpful tool. I think it accomplishes those objectives and that’s good enough for me.
Oh, and it’s licensed under GPLv2 of course. So you can take it and do whatever you want with it. But if you change it, please share!
Heck of an App 
