jim's jimnasium helps you
Create a Personal Web Page Graphics
|
Adding Graphics
|
There are many sites available that have graphics free for the taking (for personal use). In addition, there are a few free services that will create some customized graphics for you (like the banners on my links page). A good collection of links to the many graphics resources on the Web is found at the Art and Icon Hotlist, courtesy of Roy Hollinger (also a Geocities resident). To copy an image that you want to use, press the right mouse button while the cursor is on the image and select Save this Image as... to copy the image to your own disk. You can then reference that image wherever you want in your own page. Usually you will insert the image with the following type of tag (this is the tag for the colored line below):
This will display your image. The options specified in this tag indicate how the picture will be aligned (no border shown, centered, with 20 pixels above and below the image).  Using graphics for Links
Images can be used for links just the same as a text link. In fact, you can use both an image and text for the same link. A good source of graphics images, bars (like this one above) and the icons here, can be found at the ICON DEPOT (also here at Geocities).
 Another good source of art that you can use on your pages can be found at "Minnie's Creation Studio" . She has backgrounds, bullets, buttons, banners, lines, and business backgrounds you can use on your personal page for free. |
| Creating or Modifying Graphics-- Animation and Transparent Backgrounds |
Graphics images can be created with a solid or transparent background color. Normally the images are created with a solid background (it can seem transparent if the background color of your page and the image are the same). If you are using a pattern of some kind for your background (like I used on this page), then a transparent background would be preferred. This green bullet has a gray solid background To modify, recolor, or resize graphics, Paint Shop Pro for Windows 95/NT by JASC, Inc., is an easy to use, feature-rich image viewing, editing, and conversion program. This version supports more than 30 image formats, and features a Windows 95 look, enhanced painting tools, and advanced built-in special effects filters. It is an excellent tool for working with both jpg images (usually the best for photographs) and gif images (better for line drawings and images having transparent colors).
Downloading of images can take quite a while, which is why you want to specify the HEIGHT and WIDTH in the IMG tag you insert in your document. But the format of your image, and the color depth (number of colors) will influence the size of the image. For example, compressing a Windows bmp image can reduce the size of it by a factor of ten or more. For an example, see my gif-jpg comparison page. (Paint Shop Pro is also a good tool to use to do the conversions between image formats.) The GIF Construction Set for Windows is a shareware package that will allow you to add the controls to a gif image that will tag a solid background (or any other single color) to be transparent when displayed on your Web page. Usually when you edit a .gif image, it will not have a transparent background. Although some graphics editors (like Paint Shop Pro) allow this, a lot of them (like MS Paint) don't support transparency. An image processed with one of these graphics editors can have transparency added quite easily with the GIF Construction Set.
To make the background of a gif image transparent with the GIF Construction Set, you need to do the following: |
and this is the same thing with a transparent background
. To make a background transparent you can use a tool like Paint Shop Pro or Graphics Workshop for Windows..
NOTE: If you click one of the "CLICK for" icons in the tutorial, a new browser window will be opened for viewing these pages. To return, you can just select this browser (from the task bar in Windows 95 or click your mouse somewhere on this window). You can also close (or File, Exit) from the new window when done, leaving only this window.
