New TiVo Logos

How to Create Your Own Logos using Paintshop Pro

Several people have asked me what procedure I use to create my logos. Since the TiVo colour palette is a little strange, I'll outline the process I go through when creating a logo.

There are two kinds of logos in use when it comes to channel logos on TiVo; the logo that is displayed on the programme title banner (type 1) and those used on the Now Playing screen (type 2). Each has a predefined size and colour palette. The trouble is, when a logo is loaded into a package such as Paintshop Pro, the palette that can be seen on the downloaded graphic is not the same one internal to TiVo. In other words, TiVo already has a pre-defined idea of the colour palette and some of those colours are very different to the one found in the final image. TiVo totally ignores the palette provided in the .png file and uses this pre-programmed one. This is why logos come out with weird colours and transparencies when using a basic graphics editor.

In order to design logos, you have to avoid using the colours that TiVo thinks are different - the ones that have transparencies (so that text can be antialiased onto moving video) and the ones that are simply different colours. To be able to do this, I created a "mask" palette, which masks out all the "illegal" colours.

Here are the original TiVo palettes and the corresponding mask palette that I used. You can download the relevant Paintshop Pro .pal file by right clicking clicking on the palette's image and saving it to disk.

Type 1 palettes

type 1 tivo type 1 purple mask type 1 green mask
Original
Purple
Green

Type 2 Palettes

type 2 tivo type 2 purple mask type 2 green mask
Original
Purple
Green

For people using the Gimp image editor, johala_reewi has provided this set of palettes.

As their name imply, in the purple mask I'm using the colour purple (#FF00FF) as the colour masking and the green mask uses green (#00FF00). The two different masks allow for the different colours that logos are comprised of - sometimes it may be appropriate to use the green mask when the logo concerned has a lot of purple in it. From now on I'm going to assume we're using the purple mask.

When designing the logo, it shouldn't have any purple in it otherwise it will be allocated one of the "illegal" palette values. Notice how few bright colours are available in the type 2 logos. Noticeably there is no purple so rendering logos with the colour purple in them is hard!

There now follows a step by step description of a typical logo being created.

1. Create an "empty" logo graphic with the appropriate colour palette and dimensions. For a type 1 logo, the dimensions are 65x55 and for the type 2 logo 100x35. I've saved you the work and you can download these here (and yes, they're in there - they're both using a transparent colour for background!). Right click in the empty box and use Save Picture As.

type 1 empty Blank type1 Logo with purple mask.
type 2 empty Blank type 2 Logo with purple mask.

2. If you're not using the examples supplied, apply the appropriate mask palette to the graphic. You can import palettes on Paintshop by using Load Palettes in the Color menu.

3a. Sample the channel's logo from a known source, into a new image.

3b. Alternatively, draw the logo from scratch. If you're not going to be drawing the logos to the exact sizes of the final images, bear in mind that fine detal may be lost in the resize.

4. Resample the new logo to an appropriate size so that it fits into the blank frame you've created.

5. Copy the resized image into the clip board and then paste it into the prepared logo (Ctrl E) On type 2 logos. The colour mask will automatically apply the nearest available colour to each pixel. This is usually when you say "ugh!" when creating type 2 logos as a horrible approximation usually takes place. Tweak the original image a bit to get a better colour match and re-do step 5 until it looks OK. There are various techniques applied at this stage to improve the colour matching.

6. I use a strict rule of leaving lines 34 and 35 blank and set to transparent. I do this because the logos look a bit "crowded" if they're all directly up against each other. Why 2 lines and not 1? Well, remember that these logos are primarily designed to be displayed on a TV screen which will be interlacing the logos. If only 1 line were used, the gap between the logos would twitter horribly, similar to the menu bars!

To create the blank transparent 2 lines, set the foreground colour to palette value 0. The easiest way of doing this is to use the dropper and select the top left colour in the palette diagram. Despite being displayed as magenta, this value is actually totally transparent in the internal TiVo palette. Use the paintbrushtool to fill in the 2 lines with this colour.

7. If your logo is smaller than the frame of the logo graphic (e.g. not as wide as 100 pixels in the type 2 logo), you may wish to also use palette value 0 to make the sides transparent.

8. We're essentially there. I don't know if step 8 is strictly necessary as I've forgotten to do it on occasion but I always ensure it's done in the final versions in case something goes wrong down the line. Before I import the logos into TiVo, I always restore the colour palette back to the original TiVo layout. This is done by applying the original palette to the graphic by using Load Palette (Shift O), ensuring you have clicked Maintain Indexes otherwise some of the duff colours may be re-used.

9. Save the logo. One extra thing to be aware of is that some photo editing software (such as Paintshop Pro) have an option to save "optimised palettes". If this is activated, you get logos that look perfect on screen but are dumped by TiVo as corrupted as all the pallete values are changed when saving! In Paintshop Pro, this can be deactivated in the Options section of the save dialogue box.

(optional) If you would like to create a logo that has diagonal edges to the transparent background, this step will prevent you from getting undesirable ringing effects around the final logo when displayed on the telly. Before resizing the logo, paint the background (the bit that's going to be transparent) to a cyan/light blue colour, similar to the background of this page, using a flood fill with a relatively high tolerance. The logo is going to be sitting on top of the moving clouds background and doing this allows the logo to antialias the diagonal edge while at the same time blending into the approximate final background colour (it does have the effect of adding a blue halo sometimes when viewed in TivoWeb).

TiVo uses a different method to get the same effects. It uses colours that antialias to transparency rather than to the blue colour described above. This allows TiVo to render text and graphics onto any colour background, maintaining the antialias effect. This is also the reason why we have to go through these steps in the first place!

What if my logo has purple in it? Won't the mask make the purple transparent in the final version? I've found the purple mask to be satisfactory in the vast majority of cases, but there are a few exceptions. The first course of action of course is to avoid purple as much as possible. If this is not possible (e.g. BBC TWO logo which is all purple), I used the green mask instead.

In most cases I've found that I could hand paint the offending transparent pixels with a more appropriate colour if the "invasion" isn't too great. Find out the incorrectly matched pixels by quickly toggling the transparency by using Shift V.

The colour purple is an aditional problem for type 2 logos as the colour simply isn't in the TiVo colour palette, so you're doubly stuffed! Use an alternative colour - or a colour approximating purple can also be achieved using dithering.

If you've read this far, you're obviously either very bored and are desperate for something to do or are committed to creating your own logos. If it's the latter - good luck!


Back to main page