coskcore

Many artists use only vector art in some of their designs, whether it’s for print or the web. Some clients’ web sites or print material lend themselves to consist of illustrations rather than photos. Other clients may prefer almost all photos to have a more personalized look that has more human interest appeal.

Raster images are composed of pixels, and are often photos. When you take a photo of something, digital cameras save the information in this way. So when you open the image at full size, that’s as big as it should be.

If you resize it to make it larger in Adobe Photoshop for example (Image>Image Size), it becomes pixilated.

It’s okay to make the images smaller, because Photoshop makes the calculations and the results are much better. But avoid making them bigger than the original size unless you want a pixilated look. Vector images, on the other hand, are produced using mathematical computations which include points and paths, and are edited in software applications such as Adobe Illustrator.

When you resize a vector image to make it larger, the image doesn’t lose resolution or become pixilated. Here’s a close-up detail of one vector image; notice that there’s no pixilation and the smoothness of the edge is maintained even when zoomed in or made larger than the original size.

1. We’re going to build a snowboard-themed design using vectors and photographs. We start with an illustration from here at iStock, and then blend it with several photographs to create something new. If you’d like to follow along with this specific file,you can find it here. Now open the illustration up in Adobe Illustrator.

2. Let’s say the client wants some more human interest in this, and some actual photos of some snowboarders. We don’t want to just slap some cut-out photos of snowboarders on it. We need to consider where to place them, whether or not to add some blending element, and how much to use to balance it.

Get a photograph, like this one here, or one of your own. Open this raster image up in Photoshop.

3. Next, we need to cut out the snowboarder (or whatever person or object you’ve selected to place onto the vector art). There are many ways to cut out areas of a photo: the Polygonal Lasso tool isn’t the most precise, but we’ll use it here just to keep things moving quickly.

4. Double-click on the Background layer in the Layers palette in order to make it a normal layer (click OK, naming it “Layer 0” is fine). Next, click on a starting point on the edge of the area you want to cut out. Normally we’d want to go right along the edge of the snowboarder, but in this example, let’s create a “cut out” look by intentionally making straight lines well outside of the edge. Click-and-release, then go to the next point, and click-and-release, until we’ve went completely around the area we want to “cut out.”

5. Go to Select>Inverse to select everything but the area we just selected. Press Delete (PC: Backspace) to remove the pixels around the area. The background area around the snowboarder should not be transparent.

6. Select the Marquee Selection tool and click anywhere to de-select the selection. Go to Layer>Layer Style and select Stroke. Change the Size to 4 and change the color to Black. Click OK.

7. Save the file as a .GIF, and make sure Transparency is selected. This will make the empty pixels transparent. Open Illustrator with the illustration and go to File>Place and place the file we just created. Click-and-drag it to move it to an area that looks best.

8. Repeat steps two through seven with a few more photos that fit the look of the design.

The Result:
Since our working document is an Illustrator file, it’s easy now to add some more shapes with the pen tool. Once we add these, along with our other cut-out photographs, here’s the final result using the images I used.

Now that you’ve got the basics down, have some fun. You can incorporate vector elements into a Photoshop document as Smart Objects, keeping them easily scalable and editable. Try using different vector images as a background and placing various photos on top and blend them using these techniques as one way to combine vector and raster images to create new designs.

Now that you’ve got the basics down, have some fun. You can incorporate vector elements into a Photoshop document as Smart Objects, keeping them easily scalable and editable. Try using different vector images as a background and placing various photos on top and blend them using these techniques as one way to combine vector and raster images to create new designs.

In the example below, I used these two images and cut them out along the area I wanted to place into Illustrator.

Then I also added a Live Trace to the spray paint can, and removed some grunge part of the original illustration.