Howdy-howdy!
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:
http://www.netwalkapps.com/app/promotee
And
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. 
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 http://duetapp.com/features