- monitor calibration
- producing images for the web and multimedia
- setup of the basic image-layout
- switching from drawing to painting
- refining the image
- converting from RGB to indexed colors
The problem with graphics for the web and multimedia is that file sizes need to be small and that you don't have any control over the display unit of the final user.
The main point of this site are techniques used before filecompression with the goal of improving filecompression without notable loss of image quality.
The first thing of crucial importance is the adjustment of your display. If you want to check your display settings you should have a look at my monitor adjustment page.
If you want to produce graphics, to be used on other platforms than yours, it's important that your system has a high color fidelity.
You need a 24 bit monitor (millions of colors). Even if thousands of colors(16 bit) sounds like a lot, systems running on 16 bit lack the richness of 24 bit systems.
I work on a Macintosh, in my opinion the only system for serious graphic production, and the software to which I will refer to on this site is Macintosh software. However most of the things I will explain here are also valid when you work with other systems.
Many 'multimedia-designers' have spent fortunes in sophisticated hardware, but didn't calibrate their display. A serious multimedia-designer will always calibrate and re-calibrate his monitor. The most efficient and simple way to do this is by using the Gamma Control Panel wich comes with Photoshop.
See the Adobe Photoshop User Guide on how to use this panel.
Set the Target Gamma to 2.2. This is the best value for web-graphics (an average between a Mac and PC gamma). On a Mac you'll see your monitor darken, but this will prevent that you produce images that are to dark when seen on a PC.
PRODUCING IMAGES FOR THE WEB AND MULTIMEDIA
There are three ways to get images on a computer screen:
1. with a drawing and/or painting-program
2. scanner, photoCD or video
3. borrowing them from other sites
This site handles the first option, however most things are also valid for the other options.
Setup of the basic image-layout
The best way to start with your graphics is in a vector-based drawing-program like Illustrator, Freehand or Canvas because those programs give much more control on layout and typography than paint-programs usually do. (I prefer Adobe Illustrator because it's totally compatible with Adobe Photoshop)
Simple graphics can of course also be made directly with a paint-program, but even character spacing will then become a tiresome job. Photoshop has some very basic vector-drawing possibilities with its path-tool (pen), but the best thing is to have Illustrator and Photoshop open at the same time. (it seems that Fractal Design Painter 4.0 has an integrated vector and bitmap editing environment, but up-till-now I didn't have the possibility to try this program)
Use your drawing program also to assign colors to text and images. Already in this stage you should be aware on how most browsers handle colors on 8 bit monitors. The colortable on the top left of this page is the one used by Netscape. Other colors will be treated different depending on the platform used and the settings of Netscape. Try to avoid colors which differ a lot from the 'Netscape colors'.
Also try to avoid colorgradients, because in most cases they will look horrible when dithered on an 8 bits monitor!
Add crop-marks to your drawing. In this way you have a precise control over the image area. Also when you want to import parts of drawings in Photoshop, the positioning will always be perfect.
I use Illustrator also to create complex masks for use in Photoshop.
Switching from drawing to painting
Start Photoshop and open the drawing you've made.
You will get a dialog box for opening an eps-file and enter the values here as follows:
Use pixels as unit for the image-size.
This is the most adequate measurement on a computer screen.
Open your drawing at the size you want to use it.
Every resizing afterwards introduces noise, alters colors and reduces the quality of the image.
Set RGB mode.
Also grayscale images should be opened in RGB mode.
Set the resolution to 72 dpi.
This is the average screen resolution.
Refining the image
For this you can download the Netscape Color Table. Save it for instance in the color palettes folder of Photoshop.
Load this 'Netscape Colortable' in the colors window of Photoshop. This way you will have a floating 'Netscape Palette'. The color table can also be used in other painting programs.
Refine your image using the colors from the Netscape palette.
Ideal would be if the backgroundcolor from your image is equal to the one you're going to use in your final layout. This gives you a better idea of how your final product will look like, makes shadows and details more integrated with the background and some eventual 'wild pixels' won't disturb. Be aware that Netscape uses often a different dithering for background images and normal images, unless the colors are 'exactly Netscape'.
When you're finished you should have a great looking image in 24-bit mode, and you can save a copy in Photoshop format.
Converting from RGB to indexed colors
For use on the Web you have to save your images in CompuServe GIF or JPEG format.
The JPEG format is best used for photographs, giving a high compression and a reasonable image quality. (you always have to choose between high quality, poor compression and vice versa)
JPEG images are always RGB so they look good on a 16 or 24-bit monitor, but will be dithered on 8 bits monitors. The quality-loss with JPEG-compression is often disturbing in computer made images, and for this type of image it is advisable to use GIF compression.
If you don't have much experience in preparing images for the web the best thing you can do is to try and see which method is the most suitable in your situation. Always check images with your favourite web-browser and your monitor set to 256 colors. (switching colors on a Mac is easy with QuicKeys or ColorSwitch)
GIF compression only supports 256 colors. So the image has to be converted to a 256 color image.
Converting colors is one of the weaker parts of Adobe Photoshop, and I prefer to use DeBabelizer from Equilibrium which gives a much better control over color reduction.
Nevertheless I like to explain here how to reduce colors with Photoshop because in most cases you will get images of reasonable quality.
Reduce the colors of the image in Photoshop as follows:
1. choose Indexed Color from the Mode menu
2. select Custom (for the palette option) and no dithering
3. click ok
4. load the netscape color table in this dialog and click ok
If you're not satisfied with the result then select 'Undo' and start-over again, now choosing diffusion for the dithering.
5. retouch the image
Remove all unwanted pixels, clean-up ugly ditherings. The more regular the image the higher the final GIF compression will be.
6. convert back to RGB
7. convert again to Indexed Color, but now select ADAPTIVE and NO DITHERING.
For what concerns the color-depth you have to choose between quality and compression. A 4-bit file (16 colors) is half the size of an 8-bit file (256 colors).
8. save the file as a CompuServe GIF
Here are some examples which show the differences between the different formats