Tutorials by Suzanne

Full bordered tables -- or at least the code for it. Includes a link to a real tutorial for the graphics. The code here is cross-browser and tested thoroughly. Also includes some debunking of the table myths that screw you up when making tabled graphics. Want to troubleshoot your white lines and repeating graphics? Also included. Send me tips if you have them, or if I have forgotten anything.

Wanna see something funny? Orange Ripple is a pseudo-linkware set. I am exploring some graphical concepts and attempting to apply them in a low bandwidth way to the web. Sadly, this fails, but I think it looks funky, if nothing else...

More as I figure things out.

Scanning images and line drawing

Sort of. There are lots of people who can teach you how to scan, but these quick tips may make your life easier...

1. Especially for line art, scan at a much higher resolution than normal, say 250 versus the computer resolution of 72 or 96. When you reduce this image, it will retain the detail better than scanning the image to the exact size right away. To test my theory, draw a circle on a piece of paper with an ordinary pen. Scan it at 72, then scan it at 250. Reduce the 250 resolution scan to the same pixel width as the 72 resolution scan. E-mail me the two scans if I am wrong and I will post them and print a retraction. Remember to label the images.
2. For photographs, the same theory applies, but you don't need to go so high.
3. Not precisely scanning, but when working from a scanned image, do as many manipulations and alterations to the full size image as possible. Reducing the image (physical pixel width and height) should be the LAST step, unless the smaller image needs minor repairs like adjusting the white/black points and midtones. When an effect is applied to an image (photo, line drawing, whatever) it works less well with the smaller sizes, as it doesn't have the room to say smooth the edges. But when you reduce an edge that is already smoothed, it can do it fine. The only time this doesn't work as intended is with drop shadows and text. For those, make them actual size only.

Text Tips

Have you ever noticed how difficult it is to get transparent backgrounded text that is anti-aliased on a textured background to look good? Here are a few tips on making that statement false! You may need to experiment to decide which one works for you, and they do require the use of a graphics program. I prefer Ulead's PhotoImpact, but with a little translation, it should work in any program. Also, you can get SmartSaver from Ulead as a stand-alone and it really is the best saver on the market for web graphics.
     Okay, on to the tips, but please remember we are talking about making transparent gifs out of your text, so this won't necessarily apply as well to 3-d, textured .jpg text:

1. create the text on the same background or colour it will be on
2. create the text on the average colour of the background (use your eye and the eyedropper to get the right colour)
3. create the text, leave it selected, and let SmartSaver do the antialiasing when it is saved by choosing the background (average colour, or just the background, or just the colour) *** (HIGHLY RECOMMENDED FOR TEXT THAT WILL BE ON HIGHLY CONTRASTED BACKGROUNDS!)
4. create the text on the same background, place it properly using SmartSaver positioning if you are saving it as a .jpg (NOT RECOMMENDED FOR FLAT TEXT!)

Hex Equivalents

You probably won't ever need this, but if you do, these are the number translations for RGB/Hex browser safe colours:

HEX FF CC 99 66 33 00

RGB 255 204 153 102 51 00

In case you are wondering about more than the number translation (normally only needed in the case of graphics programs that offer you only one of the two options for colour picking), 255 or FF is the whitest, so #FFFFFF is white, and so is 255 255 255.
     00, obviously, is then the blackest, and #000000 and 0 0 0 is black. If you mix the middle ones, you get all the browser safe colours inbetween.
     If you are doing a light to dark monochromatic, or shadowing, what you need to remember is to reduce all the numbers or hex code by the same amount.
     So, if you have a dark blue (0 0 51 or #000033), and you want a lighter accent that will 'go' or 'match', add 51 or one hex level to each of the three channels. Thus, 51 51 102 or #333366 is lighter. The lightest blue is of course 204 204 255 or #CCCCFF. Any darker than the darkest is black, and lighter than the lightest is light.
     If you don't have to be concerned with browser safe colours, by all means only use the eyedropper and blend and use jpegs or other compression and say to hell with the file sizes. But is you are designing for the web, be it a link or an intricate image map, and you want viewers with any system to be able to see it properly without dithering, without greys in the middle of a summer scene, then you need to know how these colours work.