Continued From..

9. Click the path tab in the layer palette window.
10. Select Make Selection in path menu. When prompted choose feather value such as .5: experiment to taste.

11. You will see a marquee selection of your figure/object to be clipped.
12. Select the layer tab in the path window and click the image layer (the one with the naked girl) to make active. (Note: at this point you can select the image and copy into a new document layer, etc.).
13. Select Select -> Inverse.
14. Delete selection or Select Edit -> Cut.
15. Save file in preferred format.
Silhouetted images can be placed over any background. If you have done a good job with it chances are good your image won't need any fine tuning. If you see a halo around it when you place it over a new background etc., simply use the erasing techniques from above to shave that sweet amateur image just enough to eliminate any remaining background pixels.

Bonus! Cast a shadow.
Using some of the skills we have acquired so far, as an added bonus we can create a realistic dropshadow with our silhouetted image. Assuming you created a path, you can kick it up a notch here. Begin with the image file open and the image layer selected in the layer palette window.
1. Select the path tab of the layer palette window.
2. Select the working path layer created above.
3. Select Make Selection from the path palette menu.
4. Select Select -> Feather and choose a value from 2-10 or so: experiment to taste.
5. Click the foreground swatch and select a value of black for your shadow color in the color picker. Try a value between 65% and 85%: experiment to taste.
6. Click layer tab in layer palette window and select Create New Layer in layer palette menu or click new layer icon at palette bottom.
7 Select Edit -> Fill with chosen foreground color.
8. Select Edit -> Transform -> Scale/Perspective/Skew/etc. and freely scale the new layer down to create shadow. You can position the copied layer to simulate shadows from any angle of light source. This is usually contingent on the image itself.

File Optimization - Get Ready for the Web
Ok, so now we've made some title graphics with different effects and we want to get them up on our new site. We will need to convert our files to optimized jpeg or gif files. Most image editing programs such as Coral Draw, Paint Shop Pro, PhotoImpact, Picture Publisher - all have the ability to output for these formats built-in. The links below offer some freeware or shareware solutions in case you (like me) are running your business on a budget.

 
"I don't care to belong to a club that accepts people like me as members."
Groucho Marx
 

For the titles that use only type or vector/lineart it is best to create gif files. For our images that are rasterized or photographic in nature, it is best to make a jpeg. Assuming you have cropped your stuff so there is no extraneous canvas area without image data, and it has been downsized to the ideal dimension for our web page, you are ready to make your final files. Remember, our image size is directly proportionate to the money spent in transfer, so the smaller the better for the webmaster. For .gif files you should be able to set the number of colors and a percentage of dither in your software, and ideally be able to preview the output file's size in bytes. The maximum colors in any palette is 256, however, unless your image contains complex rasterized images, you won't need to create a .gif with that many colors. Experiment to get the best possible appearance with the most file size savings. Usually a gif using 4 to 64 colors, and a lower percentage of dither will achieve good results consistently. In fact, the premier web designers will use an 8-color palette to create most professional quality GIF graphics.

Let's face it - file size is mission critical to page load times, and the longer our page loads, the fewer sales we are bound to make. Keep that in mind when looking at your graphics' file sizes.

For images that feature photographic content, or rasterized images, we will want to create .jpg's. The percentage of compression will determine the file size of these units. If type or other elements are present, the key is to find the percentage of compression that does not degrade the quality of the type, while our image remains clear, and our file size is good for our bandwidth bill. Again, experimentation is key. A visual comparison of your image at different levels of compression will enable you to determine the optimal setting. It is always good to ask yourself how much you're willing to allow your image file to be before you start compressing it, and target your output files for that size. If you have to make your final image smaller than expected, then so be it. As a fellow VNWR member once said, a k saved is a k earned. Now, hopefully you can take all this and generate some highly effective optimized graphics, guaranteed to make your site a winner! Again. thanks for travelling to Wide's World.

Some Useful Links

GIF Builder Make GIFs on your Mac.
GIF Construction Set Make GIFs on your PC
Super JPGJPEG optimizer and file mgmt. utility
Gypsee - Musical animation tool, built-in GIF optimization engine.
JPG Optimizer - XAT Image optimization tools
Dogwaffle Project - Random dude's free image program if you hate the GIMP.
Reptile - Texture and Background Creator Freeware tool
Buttonmania - Create cool buttons easily with this freeware button maker.


©2001 VNWR. All rights reserved.