|Please stop by and visit my other sites:
This is the most important section I'm writing in the sense that this is where the most errors are made by people on the Web. Pages that take too long to load are the biggest annoyance on the Web, in my humble opinion. This section will teach you how to do graphics that are smaller in file size that will load quickly. The most important thing we are after in web images is a small file size (I'm talking about the amount of space an image takes to store, not how much screen room the image takes up).
There are basically two kinds of graphic file types that are used on the Web--.gifs and .jpgs. As a general rule, a .jpg is how you would store a photo, because photos are many colors. You would store a drawing in a .gif file, because drawings are far fewer colors.
A lot of people, before the Web and early on during the Web, had at least one of the bigger graphics programs such as Corel Draw or Adobe Photoshop. The biggest drawback of the big graphics programs is their price tag. They generally run $350 to $500. In my opinion, they are not that easy to learn to use when you're first starting out, either.
For my web work, I use an incredible program called Paint Shop Pro, PSP, for Windows 95 (also available for Windows 3.1) available from JASC, Inc. as shareware. This program does almost everything the big graphics programs do, is easy to use, and it will do just about everything you need to do for web pages. The price tag on this program is very reasonable compared to the $500-$800 graphics programs! As far as I know, there is no other graphics program available in this price range that can touch what PSP can do.
Paint Shop Pro is the only web software I've ever purchased that sent me their software in a box (with a manual)! Most of the shareware that you purchase on the Web comes "as is" and sometimes absolutely no instructions at all are provided, so you're on your own.
I started off using this program just to convert file types. I have always scanned images in as .bmps, and .bmps are way too large in file size to put up on the 'Net (you'd still be waiting a half hour later for one image to come up). Converting file types is just one of the invaluable capabilities this program has. Now I also use it constantly for all kinds of file manipulations and creating new images.
A good rule of thumb for any photo is to have the .jpg take up 20 Kbs or less in file size. When you scan in an image, don't make it too large in screen size. First of all, anything that takes up more than a screen on the Internet is a waste. People aren't going to be able to see the whole image, and you've wasted your time and energy in putting up too large an image. Any image you're working on in PSP will look smaller than it will look on the Internet, so keep that in mind. If you've got an image that takes up the whole screen or more in PSP, the image is way too large.
The 'Net only "sees" 72 dpi, so it is a waste to save .jpgs in anything higher than 72 dpi. You can compress .jpgs, also, to cut down file size, but if you compress at too large a percentage of compression, you can lose image quality. I generally save at 72 dpi with 10% compression. There is very little difference in image quality between 0% compression and 10% compression. I have over 1,400 photos on our commercial site, so all I'm after with these photos is the ability to see basically what the piece or dog design is. They don't have to be perfect quality for people to see what they're ordering, and I can't waste the storage space, because we have so many photos. Do some experimenting to find out what percentage of compression works best for your needs.
|1.||When you're ready to save your .jpg file, go into "File" and click on "Save As".|
|2.||Select "JPG - JPEG - JFIF Compliant" (be careful not to confuse this choice with the one above it which also has "JPG" in it, because the one above it is the wrong choice) as the file type in the box that appears.|
|3.||Now go into the "Options" box at the lower right hand side of this box. There are two boxes - "DPI to be saved:" and "Compression level:". Fill in those two boxes with your choices, and then click on "OK" at the bottom of this box, and you will be back in the "Save As" box.|
|4.||Make sure you have recorded the correct file name and are storing in the right directory and click on "Save". You're all done!|
Another invaluable capability PSP has is creating transparent .gifs. When you see a .gif on the 'Net with no background showing, this is because the background has been "transparentized" so that it doesn't show. The image on the left below is transparentized, and the one on the right is not. See how much nicer the one on the left looks? When you are surfing on the 'Net, you will see many images on sites that should be transparentized and are not.
|1.||Create a .gif file and open it in PSP if you have not already done so.|
|2.||Next, recolor the background of your image to the gray I have in the box below (follow Steps 3-10 to do this).|
|3.||Download the white box below and save it on your computer. (Go to this page if you don't know how to download an image off the 'Net.)
|4.||Open the gray box in PSP.|
|5.||Click on your .gif image (the top of the image where the file name is turns navy blue if that file is open and ready to be worked on; it is gray if it's an inactive image file).|
|6.||Go into "Colors" on the Text Toolbar and click on "Increase Color Depth". Then click on "16 Million Colors [24 bit]".|
|*IMPORTANT* - Most of the tools in the Image Toolbar will not work if the image you're working with is not in "16 Million Colors [24 bit]" in versions 4+ of PSP (for Windows 95).|
|7.||Then select the eye dropper tool from the Image Toolbar just below the Text Toolbar at the top of the page.|
|8.||Touch the eyedropper tool to the gray box. This will pick up the color gray (it will appear in the top box of the double box of colors and also the single color box at the bottom on the right hand side of your screen in the "Colors" box below the color pallette. Visually check the "Colors" box to make sure the gray is there.|
|9.||Then take your "fill" tool from the Image Toolbar (the paint can with the drop of paint dripping) and put the fill tool on the background of your .gif image and click.|
|10.||This should give you a gray background. If not, you probably didn't change this image to "16 Million Colors" (see Step 6).|
|11.||Now you're ready to save your file. Click on the "Colors" box in the Text Toolbar towards the top of the page, and click on "Count Colors Used".|
|12.||A screen will appear that will tell you how many colors you have in your .gif.|
|13.||If it reads, "The number of unique colors in this image is 220.", then click on "Colors" again, click on "Decrease Color Depth", and select "256 Colors [8 bit]" (the number 220 is less than 256 Colors"). If the screen reads, "The number of unique colors in this image is 12.", then click on "Colors" again, click on "Decrease Color Depth", and select "16 Colors [4 bit]" (the number 12 is less than "16 Colors").|
|NEVER use the "2 Color [1 bit]" option. This will turn your screen black, and your image will be gone. If you do this by mistake, just go to "Edit" in the Text Toolbar, and click on "Undo". This will undo your last step, but only the last step you did.|
|14.||Use your eye dropper tool again, and touch it to the background of your .gif file.|
|15.||In the "Colors" box towards the top of the right hand side of your screen, you will have some lines appear between the double color box and the single color box. They will start with "R", "B", "G", and "I". The "R", "B", and "G" boxes are the hex code, which will be covered later. Right now what you need is the number that appears after the "I".|
|16.||Remember the "I" number.|
|17.||Go into "File" and click on "Save As".|
|18.||Select "GIF - Compuserve" as the "File Type" in the box that appears.|
|19.||In the "Sub type" box, select "Version 89A - Noninterlaced". (TIP: I always leave my .gif file sub-type as "Version 89A - Noninterlaced" because then I'm always set up to do transparent images.)|
|20.||Now go into the "Options" box at the lower right hand side of this box.|
|21.||There are several choices to check. Click on the white dot for "Set the transparency value to palette entry" and enter the "I" number you've memorized in the box on this line.|
|22.||Then click on "OK" at the bottom of this box, and you will be back in the "Save As" box.|
|23.||Make sure you have recorded the correct file name and are storing in the right directory and click on "Save". You're all done, and you should have a transparent image now!|
|If you upload your image and the background image is not transparent, you've done something wrong. The most common mistake is not recording the "I" number correctly. Just go into PSP and repeat every applicable step, save the file again, and upload it again and check it.|
The reason it is best to use this gray background rather than another color, btw**, is because some of the older browsers do not have the ability to "see" a transparent background. I believe Lynx is one of these browsers, and Lynx throws up a gray page no matter what color you have selected as a background for your page. This way the image will most likely appear "transparent" on one of these browsers.
If you're saving a .gif file that you don't want to transparentize, the steps are almost the same. Go into "File" and click on "Save As". Select "GIF - Compuserve" as the file type in the box that appears. Now go into the "Options" box at the lower right hand side of this box. There are several choices to check. Click on the white dot for "Do not save any transparency information". Then click on "OK" at the bottom of this box, and you will be back in the "Save As" box. Make sure you have recorded the correct file name and are storing in the right directory and click on "Save".
.Gifs are much smaller numbers of colors than .jpgs. I talked a little about the "256 Colors" and "16 Colors" choices in the "Colors" selection on the Text Toolbar earlier. .Gifs can only be saved as "256 Colors" or less. You cannot save a .gif in "16 Million Colors".
The fewer number of colors there are in an image, the smaller the size of the file will be. The most important thing we are after in web images is a small file size.
I probably have no more than a dozen .gifs on our pages that are saved as "256 Colors", and they are all Drop Shadow headers like the one below:
I have saved every .gif I possibly could in "16 Colors." If it wasn't "16 Colors", I made it into "16 Colors"! Sometimes you can save an image in "16 Colors" that is, in actuality, many more colors without changing the image too much, and sometimes you can't, and it requires another method to fix.
Reducing A .Gif File To 16 Colors
|1.||Make a copy of your .gif, rename it, and save it so that you've got a good copy available if you blow the one you're working on.|
|2.||To do this in PSP, go to "File" in the Text Toolbar, click on "Save As", rename the file you're working on, make sure your "Options" settings are correct, and save it. Now you're ready to work on the .gif you've kept open in PSP.|
|3.||Go into the "Colors" option on the Text Toolbar, click on "Decrease Color Depth", and select "16 Colors [4 bit]". Did your image colors change drastically? If so, go to Second Method below.
Reducing A .Gif File To 16 Colors
|1.||Now you can try repainting the major colors in this .gif (using the "Fill" tool in the Image Toolbar which was discussed above in "Creating Transparent .GIFs In PSP" above) and try saving it again as "16 Colors".|
|If this second step doesn't work, and the colors don't remain correct, you'll have to pull up your saved image to work on, but make sure you rename it and save another copy before you start working with the file you've got open.|
Reducing A .Gif File To 16 Colors
|1.||This method is much more time consuming. You can go in and alter this image pixel by pixel so that you make sure it's "16 Colors" or less.|
|2.||Under "View" in the Text Toolbar, there is an option called "Zoom In" which will blow the image size up ("Zoom Out" shrinks an image). I generally zoom in at 4:1 to work with an image. This makes the pixels really huge.|
|3.||Then I recolor what's necessary using the Paint (the single paintbrush) and Fill (the paint can with the drop of paint dripping) tools in the Image Toolbar and count the colors again. You're now ready to save your file at "16 Colors", and you should have a file very small in size!|
|4.||The Paintbrush tool colors one pixel at a time, and the Fill tool is used for large areas of color (it colors every pixel that's one color that's touching).|
Below is a "before" and "after" image that I worked on. I didn't just change the number of colors. I also worked extensively on the outline and detail lines of the drawing.
253 Actual Colors
6 Actual Colors
As you can see, the image on the right that I reworked is a little more jagged on the edges and detail lines, but that image is *far* smaller in file size than the image on the left.
You can resize images in PSP, and sometimes the quality of these smaller images is very good and sometimes it's not as good, so this will take some experimenting, also. Usually this depends on how much you need to shrink an image. If you're shrinking it too much, the quality of the image tends to go down.
First of all, take your original image, rename it, and save it before you start experimenting so that you still have a good copy of this image. Go to "Image" in the Text Toolbar, and one of the options is "Resize". Click on this and a box will appear where you can enter the new size (width and height) that you want the image to be. You only need to enter either the width or the height, not both, and the other measurement will automatically adjust. Experiment with resizing an image.
Another option that will make a page load faster is to use thumbnails. Thumbnails are little tiny images linked to the full size image (see below; click on the thumbnail). I use a lot of thumbnails on our commercial pages, because I have many photos on most of those pages. Go here to see one of those pages.
If you are using several thumbnails on the same page, they should be approximately the same size. If you use the same width (i.e., 60 or 80 works well for most images), you will not have to reset it each time. The width setting stays in place in PSP, but the height setting does not. Resize your image, give it a different file name, and save it. If it's a .gif file, make sure the "Options" settings are correct before you save your file. You might want to consider saving all of your thumbnails to a different directory or sub-directory.
This is as good a time as any to talk about where to store things. I work with so many images and HTML files that I have to have a very organized directory structure or I wouldn't be able to find anything. It might be a good idea for you to be as organized. Dumping everything into one directory or sub-directory may not be the best way to go. I store all my graphics files under the folder "Deskscan" (my HP Scanner Jet folder) in separate sub-directories. I have one labeled "Thumbs" and one labeled for each site I'm working on if it's a small site. In my commercial site, we have several vendors, so each vendor has their own sub-directory. This is an easy way to split the images up so that I can find things.
The first thing you want to do is measure your graphics. This causes the images to come up on your page faster. In PSP, just touch the eyedropper tool to the .gif or .jpg, and on the right hand side of your screen at the bottom, some numbers will appear - i.e., "Image: 125 x 25 x 16 14.3 KBytes". "125" is the width, "25" is the height, "16" is the number of colors, and "14.3 KBytes" is the size of the file. You only need the width and height measurements to record on your web page. (If you don't have PSP, you can also upload the page and go to "View" in your Netscape Toolbar. Click on "Document Info". This gives you information on the images on the page. Find the image that you don't know the measurement of at the top of this page and click on it. Information on the file will appear below, including the measurements.)
Your HTML code should look similar to the code below to center one image on a page. Substitute your URL and/or directory for "yourURLandordirectoryhere" and your image file name for "imagefilenamehere".
If you want a "picture frame" around your image, then this would be the correct HTML code:
You should use "cut and paste" to copy the HTML code above and then paste it into your HTML file. Use your cursor to highlight the text you want to copy by putting your cursor on the first letter and hold your left mouse button down until you have highlighted all the text you want to copy. In Netscape, you go to "Edit" in the Toolbar towards the top of the page and select "Copy" from the choices. Then go into the program that has your HTML file and put your cursor where you want the text to go in your HTML file. Go again to "File" in that toolbar and click on "Paste". This will drop the HTML code you just copied in the place you want it to go. "Cut and paste" is one of the things that you will find yourself using a lot!
One very important thing to note here is that you cannot just download any image you want off the Web. Most of the images are copyrighted. People will usually put the copyright information at the bottom of each page. Things are copyrighted on the Web just like everyplace else, and you should have the courtesy to respect these copyrights.
There are many free graphics sites with public domain images on the Web where you can download and use the graphics. Unfortunately, some of the owners of these sites are not too careful where they get their images. I found 14 or 15 of our images on one of the free graphics sites in the dog world. If you have any question at all as to ownership of the graphic you're interested in, email the owner of the site and ask permission to use the image(s) or to quote text from them.
This is the company that makes Paint Shop Pro (PSP). The program is downloadable as shareware and is very reasonable to purchase.
This excellent site is filled with *tons* of downloadable shareware to help build your own web pages. Shareware, a unique "Net" concept, gives you an opportunity to try a program for either 30 days or a certain number of times for free before you buy it.
FREE DOGGY GRAPHICS
This is another site of ours. It's filled with over 400 graphics for the dog world!!
ENDER DESIGN: REALM GRAPHICS
This is the site where I got my little stars and "New" icons from. Andrew Soncha has a lot of really neat public domain graphics (buttons, lines, bullets, backgrounds, etc.) that you can download and use for free on your personal web pages on this site. This site has some of the classiest graphics around!
I have just started doing animated .gifs, so I'm not ready to pass much information or tips along on these yet, but I will add to this section when I gain more experience. One thing I can tell you is that the .gif animation software does most of the work for you. You do the individual "frames" (like in a cartoon), and the software puts all the frames together for you, adds "programming", and you have a .gif animation before you know it!
Two tips--have every "frame" exactly the same size that you use in an animated .gif. And clean up your graphics as much as possible to make as small a file size as possible so that they start "running" right away.
With my limited experience, I would recommend using animated .gifs as opposed to java animations, because I think that more people with different computer systems and/or browsers can "see" them.
There are some good links below for you to do some exploring on your own. Of the two animated .gif programs I've tried to far, I am much more impressed with GIF Construction Set from Alchemy Mindworks.
I have listed three free graphics sites in the section above which also have links for animated .gifs.
GIF ANIMATION ON THE WWW
Royal Frazier has done a great site with lots of instructions and resources on how to do animated .gifs.
ALCHEMY MINDWORKS INC.
Steven William Rimmer offers lots of software on his site, but GIF Construction Site is an excellent program to do animated .gifs in. Poke around in this site--Steven has an *incredible* sense of humor and you really should check out the Sending Email To Alchemy Mindworks page--and be prepared for at least a couple of belly laughs. Take his software seriously, though, because there's a lot of good stuff on this site!