This tutorial shows you how to combine two graphics into a unique composite graphic - regardless of the graphic or image editing program you use. This was done in Image Composer 1.5 then compressed for the web in PaintShop Pro 8.
1 Work with two graphics in a larger size than you want the finished composite to be. I wanted to put a software disk in the chops of our pal Trapper but just couldn't get him to pose and didn't want the software scratched up, so first I cutout two graphics, one from a photo and one from a scan, saving them each separately in .png format with a transparent background.
2 Working with the cd first, it had to look like it was in the right perspective to actually be in the pup's mouth so first it was squished a little by shortening it's height. Then it was rotated left to the same angle as Trapper's head is tilting. Next the bottom of the cd was warped by stretching out the right and left bottom corners to make it look more realistic (optional - skip this step if your program doesn't have a warp tool). Then the whole graphic was resized smaller to be proportionate with Trapper's size.
To make it look like it was in Trapper's mouth, since the cd had to be the top layer, the top edge was cutout with the eraser tool and a round brush so his muzzle would show through where his upper chops would come down over the cd if he were actually holding it in his mouth. To give it depth, a hard shadow was carefully airbrushed along the cutout edge with black, gradually lightening toward the center of the cd, then a drop shadow was added to the left side of the cd. Remember that the light source is coming from the right so the shadow should be harder and smaller on the top right of the cd, getting larger and softer toward the left side of the shadows, as it lightens toward the center.
3 Now for Trap... first the hard edge of his left side and bottom of the photo were airbrush erased with a light setting and the edges were softened on his right side where the light is coming from and around his paw the same way. Then the cd was put on a top layer. Because I'm working with the sprites in .png format, they retain their sharpness and transparency.
The composite is saved twice, once in an editable format (so the image layers can be edited and reused) and then again in a loseless format as a .png to keep the details, subtle shading and transparency.
4 Then the .png is downsized and used to create an even smaller vignette, airbrush erasing the leg so the graphic would fit in the space it was allotted on the page.
Lastly, the finished graphic is saved as a .jpg (white background) for the web and compressed to a smaller byte size for quick display. When saving graphics for the web, a compression factor of 50% can reduce the byte size down to less than one-tenth of the original byte size without any noticeable degradation in the quality. Photographs and all graphics for the web with gradients should be displayed in the .jpg format. If you ever need to edit the graphic, work with the original editable version as .jpg will degrade further with each subsequent re-save.
Once you master the cutout, airbrush and eraser tools, you can do practically any composite with photos in practically any editing program. Your imagination is your only limitation.
copyright © 1998-2006 webworksite.com