Last week I was told I had to take a print ad that I designed and develop it into a flash web banner. No biggie, right? The only catch was that the final file size limit was 25kb. Ouch! The ad was heavy on photography, so I knew I had to illustrate every visual so that the artwork was completely vector-based. It doesn’t matter how many times I’ve done this, I’m always daunted by the idea of illustrating for the web with the goal of photo-realism.
After I finished one element, the above tomato, I looked at what it took to get there and thought, “that wasn’t so hard.” The truth is, its really not difficult. Just walk through the steps below, and you can illustrate something like this in MINUTES!
SET UP YOUR FILE: (Note: I’m using CS4)
Create a new Illustrator file and make sure that its the same pixel dimensions as your ad. This is important because any effects that look at rasterization will change depending on the size of your artwork.
Next go into the menu, click Effect>Document Rasterization Settings. Make sure “Screen (72 ppi)” is chosen and click OK.
Place the image you need to illustrate in the document, and scale to the correct size for the web. Create a new layer, name it ‘image.’ Move the image to this layer and then lock the layer. Make a new layer on top of the image layer and call it ‘art.’ This is where you will be drawing.
You always want to break down your illustration in to the most simple elements. In this instance red and green become the primary colors. From there I pick 3 lighter and 3 darker shades/tints of each hue. You don’t have to use every single resulting color, but it at least gives you a starting point.
Choose the pencil tool and begin drawing your basic shapes. I like to draw right on top of the image, but to do so AND still see what you’re looking at, you need to put the art layer into outlines mode. To do this hold the command key and click on the visibility button (eyeball) on the art layer. What this does is show just the vector shapes you are creating with no fills or effects. Once I’m happy with the shapes i’ve drawn, I command click on the layer visibility again to select the objects and tag them with color.
I like to start with the base color and draw the silhouette. Then I’ll draw a few of the darker shades. If you’re having trouble deciding where to make the shapes, squint your eyes. This will blur the image and allow you to see a better range of space for the colors. Be loose and organic, but STUDY your image. This is the most difficult part to get right.
Continue looking at the shapes, but now start to focus on the lighter tints. I know that at this point it sort of looks like a lame army camouflage pattern, but don’t worry – we’ll fix that in a minute.
This is where the magic happens. Select individual shapes and add a gaussian blur to them. You can find it in the menu under Effect>Blur>Gaussian Blur. For my purposes in a flash web banner, very little blur is needed because of the small scale of the artwork. I only used settings of 2-8 pixels. If you don’t like what you’re seeing, you can adjust it later. However, you don’t do it through the menu; you have to select the object you want to edit, find your appearance palatte, and click on gaussian blur to bring the window back up.
Right click ‘download’ to get the illustrator file: DOWNLOAD.
TAKING IT TO FLASH:
When I took this artwork in to flash, I had another hoop to jump through. The blurred shapes didn’t look right, so the following steps describe the process I went through to make adjustments.
I grouped my tomato in Illustrator and hit command+C on the keyboard. I then opened my flash web banner file and hit command+V. Make sure ‘Paste using AI File Importer preferences’ and ‘Apply recommended import settings to resolve incompatibilities’ are checked. This is important because it makes sure that Flash reads this object as vector, and any blur effects that were applied are interpreted by Flash as a filter, not rasterized shapes. Rasterized art take up much more memory than vector-based art – which was the whole reason I was illustrating this ad in the first place.
So now I’m looking at the tomato in Flash and I’m not happy with it. All the shapes are there, but the blurring had decreased, and didn’t look as real as it once did. After turning the group into a movie clip, I went down in to each individual object and had to adjust the blur in the ‘filters’ palatte. I had to double the number for each object until I was happy with it. I’m not sure why there is a difference but regardless, I was able to fix it and it looks great in a flash movie.
If you have any questions please ask them in the comments. Happy illustrating!