I’m making a manual for a web-based app. I take screenshots and put them into
adobe illustrator and they lose their quality extremely fast when zooming in.
Is there any way I can take high resolution or vector based screenshots that don’t loose image quality when zoomed in? This seems to be only a problem with Illustrator, with Photoshop when I zoom in it gets slightly fuzzy but that’s it.
There’s no way to capture a vector screenshot. You can, however, convert the screenshot to vector through use of tools like Image Trace (Illustrator, under the Window menu) or recreate the user interface by hand.
Alternatively, if you have access to a computer (or tablet) with a retina display, the screenshots taken on it will be around double the resolution and be able to be scaled up a lot cleaner. They will, however, still be raster graphics, so they won’t scale infinitely.
The reason why it gets fuzzy and why you can’t take a vector screenshot: Screenshots are always raster graphics. Illustrator is a vector graphics program. Raster graphics are pixel-based; they’re comprised of many pixels that each have color information. When you scale a raster image up, you make the pixels bigger, which results in a pixelated or fuzzy look to the image.
Vector graphics are essentially math and some markup. When you create a shape in Illustrator, it makes a mathematical expression that represents that shape. When you scale the image, it just redraws it. It doesn’t get pixelated because the shape is preserved in the expression, not in the color value of the pixels.
When you take a screenshot, you’re literally capturing the pixels on your screen, so its a raster, or bitmapped, image and not a vector.