Web Site Design - Web Graphics

call 503-356-1510 for a free consultation and/or quote

Use web safe colors. Check out the CBD Web Color Chart
Make your own "web safe" colors by "optically" mixing 2 or more web safe colors (basically creating a pattern of stripes, checks or dots with two or more colors). CBD has an online mixing tool that allows you to see what your mixture will look like. Mix using stripes or checkerboard pattern.
Beware of graphics clichés. Shadows on text graphics, bevels on buttons, distorted text graphics, psychedelic patterns everywhere and other common graphics treatments can really be overwhelming. As with most things in life, moderation is the key -- or better yet, you could just skip it altogether!
Anti-alias where appropriate. If you use text graphics (images of words) in your designs, and you find the text looks rough, try anti-aliasing. Conversely, if you have a graphic image of small text, sometimes turning off anti-aliasing can improve legibility. It generally depends on the font. Arial with a small point size, for instance, tends to look good without anti-aliasing. See graphic below for examples.

Anti-alias graphics samples

Use the right file format for graphics. Line art, most text graphics, solid color graphics, graphics made up of only a few colors (GIFs only support 256 colors), graphics requiring some transparency, and graphics with little to no rendering (fades, shadows, etc.) are best suited for GIF (Graphics Interchange Format). Photographs and highly rendered art work do well as JPEG or JPG (Joint Photographers Experts Group). JPEGs do not support transparency. JPEGs support millions of colors (16.7, I think). PNG graphics are growing in popularity, but are still not supported by all browsers.
Keep notes of colors, fonts, sizes, filters and other aspects of graphics that you're likely to forget. Trying to match a font to that of one you used in a graphic 6 months ago can be a pain.
Optimize your graphics for the web. In other words, reduce the file size. One of the most effective ways to reduce the size of a graphic is to reduce the number of colors used in it. cropping is another quick way to trim some fat. Since version 4.0 or 4.5 (I think), Adobe PhotoShop has had a "Save for Web" feature which optimizes graphics. Check out the Graphics Resources page for links to software and tutorials to help with graphics optimization.
Make graphics the actual size you want them to be on the web. Web servers will load the full graphic no matter what, so in terms of bandwidth, you're saving more if you don't rely on image height and width properties to shrink your graphics.

If you have any questions about web site design, or would like a free consultation and/or quote, please email or call 503-356-1510.