(or Vector? Raster? What are these, and how do I use them in Photoshop?)
If you’ve been hanging around the Photoshop, Graphics, or Photography communities for any length of time, you’ve heard these terms: “Vector Graphics” and “Raster Graphics” or “Rasterize.” You may have even heard that, if you’re going to do vector graphics, you really shouldn’t use Photoshop; use Illustrator instead.
Well, Photoshop has amazing vector capabilities and, if you have PS, you should explore them!
As you work through this tutorial, you’ll gain practice with the following ideas and techniques:
- Raster Graphics
- Vector Graphics
- Making a Raster Shape
- Making a Vector Shape
- Rasterizing a Vector Shape – why and how
- Making a Vector image from a Raster image
- Saving a Raster Image
- Saving a Vector Image
(rasterized just for web use)
A. Raster Graphics can be defined as a group of pixels (picture elements) that are arranged in a rectangular grid. These pixels are arranged such that, when we look at them, we see an image. Some images are uniquely suited to be raster images — photos, for example.
Raster images have one notable characteristic that works against them in the world of Photoshop: they are not very scalable. That is, when you enlarge or reduce a raster image, you will lose image information.
You may have noticed this, if you go up close to one of those billboard images at a shopping mall, for example. What looks great from a distance, once you get up close, it’s just pixellated and you can’t even tell what it is.
A similar thing happens when you reduce the size of a raster image. It may look fine when it’s tiny, but, if you try to enlarge it or see detail in it, you’ll see that the fine detail is gone.
This is a fact of life, when it comes to photography. You can enlarge some, but not without limits.
So what if we need to have a logo enlarged to go onto the side of a building or a blimp? That’s when we need to call upon Vector Graphics. How you create a vector graphic depends, of course, on what you’re doing. For my saguaro cactus, I used the Pen Tool to make Shape Layers.
For more on using the Pen Tools to create shapes, check out my tutorials: Mastering the Pen, Copy a Logo, Custom Shapes, and Complex Custom Shapes. Find them here.
A vector graphic will be infinitely scalable, because it is made of mathematical algorithms and not pixels, that is, until they are rasterized. In other words, you’re telling Photoshop to make a line segment that’s blue and three times as long as it is wide. You’re not telling PS how wide to make it until you rasterize it.
A raster image is defined by pixels. Let’s have a closer look. Start out with a new file.
- File > New > make it 1000 x 1000.
- Choose your Custom Shape Tool and any shape except a rectangle or square.
- Choose a color using your Color Picker.
- In the Shape Options, choose Pixels.
- Make a new layer and drag out your shape. Make it quite small.
- Now let’s see what happens when we enlarge this. Edit > Transform > Free Transform.
Now let’s make the same image, but using Photoshop’s vector capabilities:
- Make the layer you just made invisible. Make a new layer.
- Choose the same shape and color, but change the Shape Options to Shape.
- Drag out that same tiny shape. Yikes! What happened? Here’s what I got. The blue blobs are actually the Path showing up large on my tiny shape. Click away from that Shape layer in the Layers palette to see your shape in all its beauty.
- Now click the Shape layer again and transform it to enlarge it, just as you did above.
- Click away to see it without the Path. And WoW! What a difference! Nice crisp edges!
Rasterizing a Vector. If vectors are so great, why would we want to rasterize one? Remember that rasterizing takes away all the scalability, leaving us, not with a Shape Layer or a Path, but with pixels.
Here are some processes that might necessitate rasterizing your layer:
- Painting on part of the layer (although you can always paint onto a new layer)
- Erasing (although you can use a Layer Mask)
- Using a filter (but you can make your vector into a Smart Object and then have editable filters)
- Dodging, Burning (although, again, you could do this on a Color Fill layer put into Overlay Blending Mode)
Rasterizing is harder to spell than it is to do. Click the layer and then go to Layer > Rasterize > Layer.
Making a Vector image from a Raster image is something that designers actually do quite often. Suppose I want to make a cartoon image from a photo of a person? Suppose I wanted to make a logo from this bee at the left?
I actually was commissioned to make a logo with a Caribbean fruit fly. (See below.) I used this method, too, tracing an image of the fly from a photo I found on the internet.
What you do is to use the Pen Tools to get a good tracing of each part of the object. Make each part into a Shape Layer. Fill as appropriate.
For more on how to use the Pen tool to do this sort of thing, see my tutorial on using the Pen.
Saving a Vector Graphic. How you save your vector graphic depends upon how it’s going to be used. If it’s just for your own work, save the PSD and keep it editable.
If, however, you’re doing a logo, they haven’t paid you yet, and you don’t know what size they may need it anyway, save it in PSD first. Then you’re going to want to save it in a GIF or JPG (rasterized) format, probably with a watermarked “SAMPLE” written across it, to send to your client.
But now they have paid you for your work and for an infinitely resizable logo, they’re happy, and it’s time to deliver your work. For their web people to be able to resize it to their specifications, you want SVG (Scalable Vector Graphics.) This is the w3 standard and enables the graphic to display at any size on social media, or anyplace on the web.
And this same functionality can work for your client with print applications, too.
Here’s how to save an SVG in Photoshop:
- Make sure that the whole path is incorporated into either a Shape Layer, Multiple Shape Layers, Clipping Paths, Type Layers, or other Vector objects.
- Click File > Export > Export As… and choose SVG.
If you’re doing your website with WordPress, as are many people these days, if you try to put in an SVG image as a regular image, you’ll get an error message.
This is because of the sort of file SVG really is. It’s actually a text file, including written instructions for how to display the given image. These files can house malicious code and can ruin your website. NEVER use an SVG file whose source you don’t know or trust.
To get around this security issue in WordPress, you can get a plugin. I have one called svg-support.
Now what about print uses? You want the blimp graphics person to be able to take your file and make it look great on that blimp!
There are a few ways to handle this. You may want to sell them the actual Path work. This will allow truly infinite scalability, but they will need to have a designer, at some point, open the file in Photoshop or Illustrator and resize it. It also gives the user the flexibility to change colors or anything else about the logo.
To open a file including Paths in Photoshop, go to File > Open as Smart Object. Opening as a Smart Object enables the user to resize and then go back to the original size easily.
You can also use SVG for a scalable printable option. Save it the same way, and then, when your client opens it, they go to File > Open as Smart Object.
You can also open an SVG file the usual way. Then it gives you the option of what size you want, and PS rasterizes it before opening.
You may not want your client to have quite this much flexibility with sizes for the logo. Maybe you’re giving them a discount price or you just want to make it easy for them, by having web- and print-ready sizes.
In this situation, I have often asked my client what uses they will have for the logo and give them a rasterized version in those sizes. Sometimes they will want the logo in a black & white version, grayscale, color, and some different colors.
Here are some sample file sizes that you might send:
- myjanee_web_100x100pixels.png
- myjanee_web_250x250pixels.png
- myjanee_web_300x300pixels.png
- myjanee_print_300ppi_1inch.png
- myjanee_print_300ppi_2inch.png
- myjanee_print_300ppi_4inch.png
- myjanee_vector.ai
Why PNG? PNG (Portable Network Graphics) offers small file sizes, lossless compression, varying levels of transparency, wide color depth, and better, sharper edges. For more about PNG, have a look at this link.
Saving a Raster Image. To save a raster image for web use, I like File > Export > Save for Web or Shift-Alt-Ctrl S. This dialog box enables you to be mindful of your file type, image size, quality, and, in the lower left corner, your file size.
The best file types for web use are JPG for photos and PNG or GIF for graphics.
If you’re saving a raster image for printing, and file size is not an issue, use TIFF (Tagged Image File Format). This format is lossless, but it produces large file sizes.
If file size is an issue, but the intent is for the image to be printed, you can go with either JPG or PNG. JPG will give you a smaller file size, but its quality may not be as good as the PNG.
So there you have it! You should have a pretty good idea of the differences between raster and vector graphics, when each should be used, how to make a raster image into a vector image, and how to make a vector image into a raster image. And, as a bonus, you should have a better idea of how to save both raster and vector files.
