Make screenshots stick out

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

Introduction​

Vivid pictures of user interfaces 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.

 

Mangini

MD developer
Local time
14:58
Joined
Feb 13, 2020
Messages
31

You sold me with the GIF, and stole my heart with this:

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.
Can't wait to try it out, well done!

 

ReinissB

Member
Local time
21:58
Joined
Oct 25, 2019
Messages
54

Used it for my latest dribbble shot and I am very satisfied with the result.


The one thing that I did not like is that you can't fix the position of X Y or X while scrolling only X and Y or Y and Z and so on..

 
Last edited:
Top