IMAGE Vector tutorial feature image
Design - Photoshop

A Beginner’s Guide to Creating Vector Art in Photoshop

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.

IMAGE: The left side of this image is Lobster 1.3 type rendered in Illustrator at 800% zoom. The right side is the same type rendered as a JPG at 300% zoom. In order to show the difference in quality between vector and raster art, I zoomed the vector version in Adobe Illustrator.

The left side of this image is Lobster 1.3 type rendered in Illustrator at 800% zoom. The right side is the same type rendered as a JPG at 300% zoom. In order to show the difference in quality between vector and raster art, I zoomed the vector version in Adobe Illustrator.


IMAGE: As Adobe Illustrator is a true vector application, I used it to demonstrate the inherent sharpness of vector art at high magnification.

As Adobe Illustrator is a true vector application, I used it to demonstrate the inherent sharpness of vector art at high magnification.


IMAGE: Although Photoshop is capable of creating vector art, it's output is raster, so increasing zoom level decreases sharpness and detail.

Although Photoshop is capable of creating vector art, it’s output is raster, so increasing zoom level decreases sharpness and detail.

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.

IMAGE: The 16-bit image retains more details than the 8-bit copy because it has twice as much color information.

The 16-bit image retains more details than the 8-bit copy because it has twice as much color information.

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.

IMAGE: Importing Illustrator art as Smart Objects retains their characteristics, including the ability to edit them inside Illustrator without destroying modifications you made on the Smart Object in Photoshop. That's power.

Importing Illustrator art as Smart Objects retains their characteristics, including the ability to edit them inside Illustrator without destroying modifications you made on the Smart Object in Photoshop. That’s power.

Conclusion

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).

About the author

Gord taught the graphic design program at a private college for six years. He also wrote nineteen of the program's courses. After six years leading classes, he felt it was time to learn how to be a graphic designer again. In addition to graphic design, Gord's an accomplished writer. Digital painting and photography are two of his hobbies.

Share this post

Leave a Comment

Subscribe To Our Newsletter