|
|
|
|
Web Graphics: A How to Guide Part 1: The Tech Side I've seen some pages that look great without graphics - you can do some amazing things with plain text. But sooner or later you're going to have to use some graphics. Pictures spice up the visual appeal of a page, adding meaning and sometimes needed distraction to the text. Be careful to make sure you don't overpepper your page with optic tidbits, or your audience may cme down with a bad case of graphic indigestion. Now that I've pounded that analogy into the ground, it's time to learn the basics of web graphics.
To use pictures on a web page, they need to be in one of two formats: GIF or JPEG. Both have their strengths and weaknesses. GIFs use a 256-color variable palette, and can be animated, transparent, and interlaced. JPEGs can be used with thousands or millions of colors. What this means is that GIF images can be made of any colors, as long as there are no more than 256. You can animate them, stringing together different images in one file, or make a color in the image transparent, meaning the background of the page will show through instead of that color in the image. GIF files can also be interlaced, which means instead of the file loading from top to bottom, it loads in rows, so that you can see a rough representation or the image before it fully loads. JPEGs have none of these special features, but can use as many colors as you want. GIFs are best used for computer-made graphics, and pictures with few or bold colors. JPEGs are best for scanned photographs with lots of detail. It's best to test out both types to get the feel of them. Neither will work alone for all your graphics needs. To convert your graphics into one of these web-ready formats, you will need a special program. For Macs, GifBuilder works well for GIFs and Gif Converter for JPEGs. (go figure) Both are shareware. For PCs, PaintShop Pro and Microsoft Image Composer both do the job. Both have working demos available online. But first, you have to make the graphics. Get a paint program. PCs usually come with MSPaint, and many Macs come bundled with ClarisWorks. Both of these programs can be used to make web graphics, but neither are very good. The main thing you want in a paint program is something called antialiasing. This feature automatically blends the colors in the picture. This gives it a great, nice-looking effect. Most paint programs with antialiasing will have enough other features for most amateur web designers. If you want to go for the best, try Adobe Photoshop. It's the industry standard - It will do most anything you'll ever want, and thousands of other things you'll never need. Even if you find something it can't do, there are tons of third-party plugins for special effects and filters. CorelPaint/Draw and Fractal Design Painter are other major paint programs. Both are a bit cheaper, but neither quite as good as Photoshop. Eventually, you'll find some programs you can afford. Dabbler 2 is a natural-media drawing program, and great if you want doodlings instead of exact drawings, and its $50 price tag fits most budgets. For PCs, PaintShop Pro is sort of a smaller, less complex Photoshop. A Mac counterpart is ColorIt! Pro. Both are low-priced and relatively easy to use. Once you get a good paint program, you'll wonder how you ever lived without. When using these programs, remember the limitations or your file format. In GIF programs, see if you can set it to best palette or remove unused colors. This makes the file use only the colors it needs, and therefore making it smaller and better looking. For JPEGs, make sure you set the file to best quality if you want it to look good. Most JPEG programs have a sliding scale, which allows you to pick whether you want a smaller file size and less quality or vice versa. Most importantantly, try all your graphics in both formats unless you know which one will work better. Once you understand the basics, it's easy to make web graphics - the key is making them look good. |
Web Graphics: A How to Guide Part 2 Web Graphics: A How to Guide Part 1 Neat. Making a Good Page This is Madness! A Fable Testing... Everyone Should Be Able To See Your Page -- Well Web Page Makeovers: The Rules of Web Design Netscape Vs. Microsoft and the Great Tag Debate A Real Retro Web Page Fonts and the Future of Web Design Simplicity: How Not To Fall Off the Web Page Learning Curve |