Photoshop is known as an image editing and manipulation application. Since the advent of the world wide web, it’s become a powerful website prototyping and design tool. Although Photoshop’s type design features aren’t as robust as those in Illustrator and InDesign, it’s type tools are good, and improving.
Type isn’t the only vector toolset in Photoshop, however.
It’s possible to create 100% vector art inside Photoshop. It’s also possible to output vector files, too.
Let’s back up a bit. A vector file is based in math, not pixels. Vectors contain a set of instructions for the machine to interpret, permitting infinite scalability and relatively small file sizes, with no loss of quality.
Rasters are pixel-based and mapped to screen coordinates. Each pixel contains 8, 16 or 32 bits of color information. The higher the bit-depth, the larger the file size. Also, the larger the image, the larger the file size.
An image’s pixels are resampled when they’re sized up or down or otherwise altered. For instance, when an image with a screen resolution 72 ppi (pixels per inch) is changed to 300 ppi (print resolution), pixels are compressed, reducing image dimensions accordingly. Enlarging a 72 ppi image stretches its pixels, but doesn’t add detail. A number of factors, including amount of enlargement, determine how much quality is lost.
Each time a raster image is resampled its quality suffers – unless you’re working with Photoshop Smart Objects – just about everything you do to an image will resample it. For this reason, it’s a good idea to complete your transformations in one go, whenever possible. Better yet, in order to protect overall image quality, perform as many operations on Smart Objects as you possibly can.
Non-destructive edits rule.
Editing Vector Art in Photoshop
You can use Photoshop to create vector art. It’s important to remember that output will almost always be raster images. However, type, paths and vector shapes such as rectangles and ovals behave as they would in a pure vector application such as Adobe Illustrator, so you can transform (scale, distort, rotate, etc.) them with no fear of degrading their quality. If you want to edit the file, it’s important to remember to save the original as a PSD.
Because raster files are bitmaps, remember to work at a higher resolution. You can always down sample an output copy or save a copy as a Photoshop EPS file. Another disadvantage is your project file will likely be larger than it would in a dedicated vector application such as Adobe Illustrator.
While Illustrator is best suited for typography and other vector art, it’s not as efficient in working with raster images. It can – for example, in effects such as Blur and Drop Shadow – but its raster files tend to be huge, and application performance can suffer. In a perfect world, we’d use both Photoshop and Illustrator as part of our project workflow. Importing Illustrator vector art into Photoshop as Smart Objects or paths gives us the strengths of each application in a non-destructive workflow.
So why would we want to create vector art in Photoshop? Convenience is one reason: Having all your assets in one file, especially when testing comps, can save a you a ton of development time. And our time is money.
Vector objects retain their integrity no matter how many transformations they undergo, even in raster environments such as Photoshop. Type is cleaner and easier to read when it retains its vector properties; so do technical illustrations, or any art where sharp lines are important.
When it comes to choosing vector art over raster, the correct choice is the format that works for a particular project. In almost all cases, you’d use vectors for logo design, even if it’s primarily for web use. Why? Well, the output file will likely be rasterized for web use – with the exception of SVG format images (but that’s a story for another day).