Video

1	2	3	4	5	6	7	8	9

Making graphics for TV

When making graphics for a TV screen, there are certain issues that you need to take into consideration. Here's a brief introduction that should hopefully help you avoid the most common pitfalls.

Interlace

A TV displays interlaced video. That means that for every screen update, only every 2nd horizontal line of pixels is shown. At the next screen update all the remaining pixels are displayed. This requires special attention when designing graphics for TV.

If you draw a horizontal line that is 1 pixel thick, it will only be displayed 25 times per second (30 for NTSC), whereas if you make it 2 pixels thick, it will be displayed 50 or 60 times per second! So basically anything that is only 1 pixel thick and horizontal, will flicker. Such flickering is rather unpleasant to look at.

There are different ways to avoid this problem. The most obvious chouse would be to make the lines thicker. But you can also simply blur the line in the vertical direction. In most decent graphics packages you can do this by using the function called "Convolution matrix". In Photoshop it is called Filter -> Other -> Custom for some reason.

Tip:
The 5-5 weight is the most efficient convolution matrix possible with this technique.

If you want a de-flickering that doesn't move the image half a pixel, use the values 2-6-2 (and 10 for scale). This becomes more powerful if you use 2-4-2 and 8 for scale.

The Scale value is just all the other values added. Some programs can calculate this value automatically.

Low refresh rates

PAL TV displays 50 images per second, NTSC displays 60 per second. This is somewhat slower than normal computer displays, that usually display between 70 and 85 images per second. This basically means that TVs flicker more than computer screens.

So how do you keep this from being a problem? Well first we'll have to look at the way a TV works. Basically the image is displayed by the screen emitting light. This light is not steady but pretty much being turned on and off 50 or 60 times per second. The brighter the image you display is, the more light will be emitted, and the more flickering will occur. Also the larger areas you fill out with bright colors, the more flickering light will be emitted.

So if you want a flickerfree experience, don't fill up large portions of the screen area with very bright colors. Only use extreme white (255,255,255) for small parts of the image. If you want a bright background on the image, only get your RGB values appx. half way up. If nothing on the screen is brighter than this, it actually will look like it's white - and it'll flicker much less.

Composite signals and sudden color changes

ToDo: explain how e.g. red next to blue will make funny patterns etc.

Safe area

On the computer screen you're always guaranteed that the user can see all pixels on the entire screen area. On a TV it's different. Most older TVs do not have a square image. They're slightly rounded. And some of the image is actually being projected outside the visible area. To make things worse, no TVs are exactly alike, so you can't really know exactly where the visible area is.

So to be sure you're actually putting things in a place where people can see them, make sure to stay inside the so-called safe area. Here at KiSS we have this rule of thumb that says that if you stay within the center 85% of the image, you're in the safe area.

Example image for PAL (720 x 576)
Example image for NTSC (720 x 480)

Image testing tools

To help you determine if your graphics are suitable for TV usage, we at KiSS have developed a small selection of photoshop actions, that will test your image for some of the above issues. These tools are not scientifically perfect, but should give you a pointer in the right direction. They require Photohop 7 or 8 to run.

Download actions

Website by Joachim Michaelis