911 Graphics

General Web Graphics Emergencies
How do I get small type to not look blurry in a graphic?
RX First of all, you have to be aware that at a certain size, your text will be unreadable. As long as you're not trying to achieve the impossible (for instance, 4 point type size, on a graphic), be sure that you're following some of these guidelines:
  • Use a bold typeface
  • Make sure your type is anti-aliased. Most paint programs provide a checkbox for this in the type dialog box.
  • Make sure that there's very high contrast between the type color and the background it's on. Dark blue type on a dark brown background will be very difficult to read. Light colored type on a dark background, or dark type on a light background is a much better choice.
  • Choose a simple typeface. Script typefaces, grunge typefaces, or fancy, elaborate typefaces tend to be much more unreadable at tiny sizes than simple san serif faces.
  • Also make sure you're not using your HTML to resize the image. Your image source tag should have the exact dimensions of your image. For example, if your image is 80 pixels high by 400 pixels wide, your HTML for that image should look like the example below: <IMG SRC="picture.gif" HEIGHT="80" WIDTH="400">
My graphics look great in every browser except AOL's. What's up?
RX AOL is rarely serving up the actual web page to its members: most often it's a copy of the real web site. In addition, they also try to reduce their costs by serving up copies of the images on a web page that have been reduced in file size, and also quality. You can see below:
The original file
The original file
How the image appears to AOL members
How the file looks to AOL members

There's no way to prevent AOL from doing this to your web site or images. Most AOL members will view web graphics this way. It's an issue I've been concerned about for a long time. If you are an AOL member and want to view the "real" images, select from the AOL menu bar Members - Preferences - WWW -Graphics - Show Uncompressed Graphics.

How do I make my graphic so that when the mouse goes over a certain object, the object gets highlighted?
RX What you're looking for is a JavaScript mouseover. You can find free JavaScripts, tips, tutorials and more at JavaScript Source.
How big should the images on my page be?
RX An interesting question: you never want an image to be wider than 500 pixels, since there are still many users browsing the web at 640x480, and this 500 pixel limit leaves room for the web browser window edges. More of a concern usually is the file size of the graphics on your page. A good guideline is to try to generally keep your entire page size, including graphics and HTML files, to under 30K. Some HTML editors, like Home Site have a tool that adds up all of the page graphics and lets you know how long it would take to download the page and graphics at various modem speeds. If you're using HomeSite, select Tools/Document Weight to use this feature.

There was an interesting article recently in one of the web magazines discussing how high traffic news sites use a lower bandwidth, simpler and less graphic intense page on days they know they'll have a lot more traffic. Something to think about!

How can I create a large GIF and keep its file size small?
RX The easiest way is by reducing the number of colors in the image. If your GIF is indexed to 256 colors, try re indexing the image to an adaptive palette of 16 or 32 colors. For many images, this is more than adequate and can significantly reduce the file size. Choosing not to dither a particular image can also reduce the file size, but for some images this yields an unacceptable result.

To re index a GIF in Photoshop, open your GIF, select Image/Mode/RGB, then Image/Mode/Indexed, and select Adaptive, 5 bit, dithered.

To re index a GIF in Paint Shop Pro, open your GIF file, select Colors/Increase Color Depth/16 Million. Then select Colors/Decrease Color Depth/XColors. Choose 32 or 64 for the number of colors, and select the Error Diffusion radio button.

To find out how to make a humongous good looking gif with only two colors, get the book!

How can you create a transparent GIF? How can I make a round image transparent with out it looking too edgy?
RX The secret to making a good looking transparent gif is to make the background color of the image that will be transparent the same color as your web page background. Halos of color are usually caused by using a white background for a graphic that will display on a colored web page.

I have a tutorial for creating transparent gifs in Photoshop, Paint Shop Pro, and Painter.

Photoshop is a great design package, but it's expensive. Can you recommend more affordable design software?
RX You're right, Photoshop is expensive. It's a wonderful, powerful software application, but if you're just getting started in web graphics there are several alternatives.

You may want to take a look at these Windows programs, which offer a trial downloads:

And for the Macintosh, check out these packages: And if you're a student or teacher, you may qualify for some serious discounts on your software. Another inexpensive alternative is to buy an older version of a software program. Photoshop 3 and CorelDraw 7 are great choices if you're looking for graphics programs that may not have every single up to the minute feature, but will enable you to create wonderful web graphics.
I was wondering if you could tell me where I can find some cool backgrounds and pictures for my web page?
RX Sure can. I hope you have a few hours because there are lots of resources for backgrounds and images on the web!

If you're looking for a specific image, you might try the Clip Art Searcher. If you're in the mood to browse, check out these sites:

Help! I'm drowning in fonts. Is there a good font management program for Windows?
RX So many fonts...so little time and never enough disk space!

Bitstream has a great utility called Font Navigator. It's included with CorelDraw 8 and also available as an evaluation download at: http://www.bitstream.com/products/world/fontnavigator/index.html

911 Graphics Admitting | Home | Tutorials | Bookstore | Guestbook