Open Broadcaster Software is not only used by Twitch streamers. Sometimes, we venture a bit too far in the land of pixel-perfect design and end up analyzing screenshots to inspect pixels. To speed up that awful process, OBS can act as a real-time magnifier for part of the screen.
OBS
It’s a versatile streaming and screen recording software. Many people make a living by using it to broadcast their gameplay live, but it’s not the only advantage it offers. Install it and follow along to see why.
- In Sources, click + and choose Display Capture and hit OK.
- If you have more than one monitor (that helps!), choose which to magnify. Then OK.
- Hold Alt and drag the red handles to crop the frame around the desired target. The smaller the crop, the higher your magnification could be.
- Without pressing any key, grab the corners and enlarge the frame to fill the video area.
- Right-click on the video area, choose Scale Filtering then Point.
With the last step, you make OBS show the pixels as-is instead of a smoothing algorithm. I used this trick heavily when I created Link Underline Animations for this site. While I use this setup, I sacrifice an entire monitor to be a constant real-time zoom camera to the target area. I see that this luxury is not always available, for example, on the go with a laptop.
Alternative solution with the tool in Windows
I’m aware of the Magnifier tool in Windows, but I found it incredibly cumbersome to use. You are welcome to give it a try; it might be useful if you have a single monitor.
- Hit Win++ (in the Numpad or the one next to Backspace)
- Ctrl+Alt+D to go for the Docked view (a floating window).
It’s smoothing the pixels, but that feature can be disabled. Go to its Settings and untick Smooth edges of images and text.
Why do this at all?
This practice is part of our commitment to superior quality and attention to detail. We’ve always used to do something similar during design processes to inspect pixels and see how browsers render UI, but these tools speed that up. Only by doing this can we ensure crisp lines without slipping into subpixel territory. With the advent of high-dpi monitors and default display scaling, I realize this might be an upscale battle. That doesn’t stop me from trying to render pixel-perfect interfaces.
On a side note, VFX artists have the term pixel-fucking for too much of this. I like to draw an analogy between this and subsurface scattering in 3D that breathes life into animated characters. Most people have no idea what level of detail is in a movie, much less what goes on in software development. In our team, we prefer to use a less vulgar yet funnier expression, sharpening the fart. For those that are less visually-inclined, all this might seem unnecessary, but it often does help the overall look and feel of a product or site.
