DEV Community

loading...
Cover image for Sprucing up a screenshot post-capture with a "virtual camera"

Sprucing up a screenshot post-capture with a "virtual camera"

mikaei profile image MikaeI ・2 min read

TL;DR: Screenstab is a novel way of giving life to a screenshot by editing it post-capture with a "virtual camera".

Alt Text

Introduction

Vivid pictures of user interfaces (like the one above) are a popular choice of illustration material for tech-related content, as they make for particularly eye-catching visual elements. However, simply using a flat computer screenshot doesn't end up being very visually engaging, and getting to the point of properly photographing a screen in real life requires time and effort.

This was a real pain point for me, so I ended up making a completely automated digital tool for this purpose: Screenstab.com.

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.

Discussion (0)

pic
Editor guide