Creating pretty screenshots


Two questions in one.

First off, how do you guys scale screenshots so that they don’t look like crap (blurry, pale or pixelated)? The best I could do is this:

The second one is this: is there any tool (desktop or web-based) which can add “magnifying glass” of sorts to the screenshot?

Your second example looks like a custom Photoshop job. Fairly easy, just google “photoshop magnifying glass tutorial”.
For the header google image search for vector browser layout.

Here are some tools I recommend if you are doing mobile screenshots:


For #1 I find that keeping to exact fractions (ideally 0.5) when resizing the image helps a lot. Then, if you save in lossy format (jpeg) make sure you play with the quality setting until you find the right balance of size/quality. All jpeg compression algos are not created equal, some programs do better than others at this.

For #2, I actually experimented with creating such a thing when I was toying with easel-js. It’s on the backburner for now but it might resurface as part of an other project one day. :slight_smile:

Also, when you resize make sure you’re using RESAMPLING.

I have this problem often. Rather than trying to resize an image, I resize my browser to the size I want the image to be, then I use the browser zoom to zoom out, and take a screenshot of the resized/zoomed out browser. It’s not perfect, but it usually results in some pretty crisp screenshots.

That’s the approach I took for all of the screenshots here

1 Like