Skill: Beginner

Program  used: Adobe Illustrator CS4

This article is about giving basic knowledge to help you understand how vector illustrations work together to give a realistic effect. Illustrating vector images is basically creating shapes and layering them to get the results that you want. We will be using a part of a video camera to help you understand what I’m talking about. Since I don’t know that much about video camera parts, I will be using the terms Face, neck and the “top” for the parts.

Before we proceed, I would like to point out that the key element to making photorealistic illustrations is the gradients. AI have a very excellent tools to help achieve the required gradients, shadings and colors. The first and most basic tool that can easily be learned is the "linear gradient tool" - This was the only gradient tool used for the video camera icon discussed later in the article. This tools is very effective when dealing with illustrations that have square edges; but it is very difficult to use when dealing with rounded shapes. This is where the "gradient mesh tool" comes in. The gradient mesh tool allows you to change and edit the gradients by means of anchor points. This tool takes determination and patience though. A good photorealistic illustration should have very little tolerance when it comes to using a reference image; meaning the elements should look real enough, that other people could not tell your work from the original reference image


Reference  image

The first thing we are going to need is a reference image. The reason we are using a reference image is to make it easier to understand how the lighting works in a material. Since we will be using gradients to give the realistic effect, it is important to at least have a real image of a camera to start with. Think of it as those small wheels on the side of your bike when you were a kid.


It all comes down to shapes

                It may seem that creating realistic vector images is a very complicated process. But once you understand how it works, you’ll see that it’s basically just shapes applied with gradients and arrange by layers. I am not saying that the shapes will be all basic squares, triangles and circles; some shapes are a bit more complex depending on what you are trying to achieve.

The  Face

                On the following image, you’ll see the face of the video camera being broken down into several basic shapes. The image labelled “A” is very abstract you almost couldn’t tell what it is. But as more elements were added to it, it all becomes clear. Image “C” seems to looks like it is already complete, but actually still has few elements missing. Subtle details were added in the final image (D) for a more realistic result.


The  Neck

                This is the part that holds the face of our camera. In the image you’ll see how the whole image is composed of basic shapes. In this part, it is important to be consistent on the gradients that you use. You’ll notice that the light is coming from the upper right corner. The final image looks incomplete simply because the neck is not the main feature of our camera. It will look better if the camera is layered on top of this image.

The neck

The  Top

                At this point you probably understand how shapes form the image in vector illustrations. The image of “the top part” of the camera is not broken down into basic shapes. Can you tell what the shapes are just by looking at the image? On the upper right corner of the image is the outline. The outlines show only the stroke of the shapes and not the fill.

The Top

The  Final result

                The final video camera illustration has all the elements together and arranged in an appropriate way. You’ll notice that the neck now looks better with all the elements; every shape working together and having a specific purpose. On the lower left side is the reference camera used to create the vector design.


Video Camera Icon

                The vector camera can be used as icons or an element that might become handy in the future – for those willing to pursue a career related to this. In the following image, you’ll see how I used the image for an iphone app icon design. I added a clapboard element on the top part of the icon because the camera can also be used for making films. The icons or elements also can be submitted to microstock sites if you want to monetize your work. It would be ideal to have a source file (ai or eps) of any existing vector to serve as your guide and reference. 

An EPS file of the video camera icon is available for personal use. The ownership of the icon however is for sale for a negotiable price for those who want the to use it on other means.

                That sums up everything and now that you understand how it all works. You can practice on objects composed of basic shapes just for starters. You can try a computer printer, a ball pen, LCD TV, laptop or a cell phone. You have a lot of options.