Screenstab

Screenstab is a new web-based tool that turns screenshots into attractive, high-quality image assets.

Why did I build it?

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.

How did I build it?

Screenstab is a front-end application written in vanilla JavaScript (ES6). The app is relatively simple, so I'm not using a framework. Instead, I utilize a small library of my own creation as an abstraction layer for data flow and event management. I take advantage of libraries like Three.js (for 3D graphics) and Jimp (image processing). Heavy asynchronous operations are delegated to a Web Worker thread. The app has a small WordPress backend integrated with a third-party service to handle payments and authentication. 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.

What value does it provide?

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.

– Mikael Åsbjørnsson-Stensland, creator of Screenstab

Enter your email to subscribe to updates.