Screenstab is a new web-based tool that turns screenshots into attractive, high-quality image assets.
My daily job is web development. I frequently share updates with others on the things I'm working on, preferably with images to give an impression. However, it always felt inelegant to sprinkle my work communication with screenshots. Placing screenshots of user interfaces within other user interfaces (like Slack) became a bit like getting lost in the woods wearing camouflage and hoping to be found. I got to thinking about how to make the screenshot format more eye-catching, using effects like selective focus, tilt-shift, and ambient light.
This idea struck in 2018, but I did not have time to realize anything at that point. I eventually resigned to thinking somebody else would get a similar idea and beat me to it. When this failed to happen, I finally started tinkering with it in late 2020.
The most challenging thing to achieve was the actual 3D representation of the screenshot. That included things like adaptive lighting and simulation of depth-of-field, three-dimensional user interaction, performance optimization, as well as deep diving into shader code.
A fun part of the process was getting creative about branding. The name Screenstab is a twist on the word “screenshot” – the rationale being that screenshots should stick out. I like puns and have snuck in several references to swords/stabbing on the website.
The time and effort spent with a given design tool are arguably directly proportional to the number of choices available. The philosophy of Screenstab has been to reduce the number of decisions to a bare minimum. What would otherwise be a manual piece of design work is reduced to a few simple clicks, resulting in a tool that feels powerful as well as precise.