I was recently hired by Opera Software to give a course on television design for the team responsible for adapting the Opera web browser for Nintendo Wii. With more than six years of experience in designing interactive applications and motion graphics for television, I found that this was a great trigger to write down some of the knowledge I have gathered throughout the years.

What does a designer need to know?

There are many resources on TV design out there. Most articles tend to be very technical and detailed, so I will attempt to keep this article focused on what you really need to know as a graphic designer. I have often seen that otherwise great designers without TV experience struggle with getting TV design right, and I have received designs for television from external consultants in many strange sizes and formats. A large and well known advertising company once delivered their final designs in Powerpoint !

These are transitional times as people are moving to the new and slimmer LCD or Plasma TVs. But it will take a while for the fat old CRT TVs to disappear, so we may need to consider both old and new systems for quite a while yet.

Cathode Ray Tube Televisions – CRT TVs

Traditional television sets have a series of flaws and quirks that tend to puzzle novice tv designer. CRT TVs may have quite a lot of overscan (see “lost real estate”). One would expect newer CRT screens to have less overscan than older screens, but this is not always the case. The fact that TVs are judged by the flatness of the screen and the sharpness in the corners make many tv manufacturers increase the overscan in order to score higher on these parameters.

The refresh rate of CRT screens can be quite low, which may accentuate horizontal flickering in your images due to the interlaced signals (see “flickering images”).

PAL and NTSC pixels are not square. An image that looks fine on your PC screen will look stretched on TV, and a raw TV image will look squeezed on your PC. NTSC pixels are taller than they are wide, while PAL pixels are wider than they are tall. This is something you should be aware of to help you fix it if your design looks stretched, but you shouldn’t get too hung up in this unless you are drawing logos or circular elements that need to be accurately rendered. You may apply one of the following workflows to fix images that appear stretched on television:

• Design in 768×576 px and scale down to 720×576 px to adjust for non square pixels for PAL.
• Design in 720×540 px (some prefer 640×480 px) and scale to 720×486 px to adjust for non square pixels for NTSC

LCD and Plasma Televisions

LCD and plasma screens have a fixed number of “dots” or pixels in width and height that make up the image. This is called the native resolution of the screen. The native resolution of the screen determines if the screen is HD ready or not. If your image has the same dimensions as the screen, it will be shown as it is. If not, it will be scaled to fit the screen with a slight reduction in image quality.

Plasma screens are particularly vulnerable to graphics “burning” into the screen. This is also an issue with LCD screens, but to a lesser degree. You can help avoid ruining your users’ expensive screens by reducing the contrast of graphical elements that stay in the same place for longer periods of time.

Modern LCD- and Plasma screens have less overscan than traditional CRT screens. Most have square pixels, but there are a few exceptions.

Both LCD- and Plasma screens have square pixels. Interlaced signals will be converted to progressive images again with a slight reduction in image quality.

Lost Real Estate

The hardest to get a grip on for a non-TV designer is the fact that the entire screen can not be used freely. A certain amount of the picture area will get cropped off along the edges of almost all television screens. This is called overscan. Zero percent overscan means that the entire picture is visible, but this is hardly ever the case.

A CRT TV may have more than 10 percent overscan. An HDTV will have about 5 percent or more overscan. If you believe that your HD designs will be viewed on an SDTV, you may need even more margin to compensate for the fact that the sides are cut off to reformat the footage for SD.

For these reasons, you should not place anything that you want to be sure that the viewer sees outside an area covering 80% of the full picture. This is called the “Title Safe” area. Similarly, everything you would like to be visible should be within 90% of the picture. This is referred to as the “Action Safe” area.

Keep in mind that these are just general guidelines. All TVs have different amounts of overscan, and these numbers are only meant to make sure that important elements are visible on all TVs. Still, many designers tend to take these numbers too literally. They falsely make the assumption that they can align design elements to these guidelines, only to find that some TVs cut off parts of their design, while others leave an unintended margin. A CRT TV may even present the image off center, leaving different margins on each side.

Resolution Chart

TVs come in a wide variety of flavors. Here is an overview of the most important TV formats for reference:

Flickering Images

Televisions either draw the whole image at once, called progressive scan, or they draw every second line every other time, called interlacing. You do not need to worry too much about this, but as a designer you need to know the following about interlacing:

• Thin horizontal lines will flicker on an interlaced screen. Make sure all lines are at least two pixels high, and with a height divisible by two.
• Your image will get slightly blurred if an interlaced signal is deinterlaced and presented progressively by a tv or a set-top-box.

Apply 0.5 to 1.0 pixel vertical blur to your graphics to reduce flickering on CRT TVs. If your graphics are to be subject to compression, that may take care of the flickering for you.

Typography

You need to use fairly large fonts when designing for television. I am often asked for a minimum size, but there are no fixed rules for this. The perceived size of the text is most important, and the actual font size, capitalization, tracking, color and contrast all play important parts.

Consider using fonts created specifically for television. Tiresias is one of these. Be sure to avoid serif fonts and italics for small sizes and larger text areas.

Colors

There is no such thing as color management for TV design, because you have absolutely no way of controlling the settings on the viewers’ TV sets. You should know that bright or highly contrasting colors tend to bleed on CRT TVs, and that some colors, especially heavily saturated colors like red, white and yellow tend to be tricky.

Bright areas on a darker background tend to appear to grow in size horizontally and push the entire image out of shape on CRT screens, making the sides appear wavy.

You should avoid using pure white in your designs. Use an adjustment layer in Photoshop or your compositing package to take the pure white areas down to a level of 240 or lower. If your design is to be broadcast using mpeg-2 compression, that may take care of this for you automatically. If you are using an adjustment layer, all you have to do is turn it off to get a nice, bright image for showing your work to your client or manager on a pc screen.

And Most Importantly: Always Preview Your Work!

This is not a suggestion. If you are going to design for television, you have to see your work the way your viewers will see it. Only then can you be sure that your choice of typography, color and graphics are actually working as intended.

Get as close as you can to all possible target configurations. To preview your work for a CRT TV, you may either get yourself an extra graphics card or you can use a DV camera with firewire to get your work on TV. Always use quality cables like HDMI, S-Video or Scart, and avoid composite cables as they introduce further problems in your images.

Design Templates

You may use the following templates when designing for television:

Stay tuned

I will continue to update this article with more illustrations and facts. Please leave your comments if you disagree with anything I have written here so that I can correct any errors. If you are returning to read this article again, here is a list of the major updates:

060927 Added Design Templates