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.
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.
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.
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
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.
Website by Joachim Michaelis