Headline Viewer Skin Creation Guide
For version 0.9.7
Copyright © 1999-2002 Vertex Development

If you are going to be an active Headline Viewer skinner, you should definitely join chvskin, the mailing list. You may also want to look at the chvskin archive. To join, simply enter your email address here and click the button:

Thanks, and happy skinning!

Table of Contents

• What is a Skin?
• Skinning Overview
• Naming your Skin
• Planning the Shape
• Choosing Metrics
• Choosing Reference and Contact Information
• Choosing System Button Positions
• Writing the skin.xml File
• Creating the Parts
• Testing
• Shipping
• Skin Parts
• Skinning Buttons
• Skinning the Find Item
• Skinning Tips
• Transparency
• Skinning Tools & Resources
• Paint Shop Pro
• Screen Loupe
• XML Notepad
• WinZip

What is a Skin?

Skins let you customize the appearance of Headline Viewer! The following skins are shipped with version 0.9.7 of Headline Viewer:

Technically, a skin consists of a series of bitmapped images and a small amount of textual information which provides some extra information about the skin. You should be able to create an attractive skin in about one hour.

Note that the word "skinning" describes the process of creating a skin. If you create a skin then you are a "skinner."

Skinning Overview

This section provides an overview of the steps involved in creating a skin.

Naming Your Skin

Your skin must have a unique "display name." The name should be several words in length and it should be descriptive. The names listed with the skins in the preceding section should give you some ideas. You don't need to include your name in the skin's name; this information (along with your email address, and a link to your web site) is stored in a small XML file that you will soon learn how to create. 

You also need to create a short form of your unique name. The short form name should not include any punctuation, since it will be used as a directory name. Go to the directory where you installed Headline Viewer, then go to the Skins subdirectory. Create a directory within that directory with your skin's short form name. 

Planning the Shape

If you have used Headline Viewer, you know that it is completely resizable. As a skin author, you have probably wondered how this is done. Basically, each stretchable edge is composed of two types of skin elements: fixed elements, and stretchable elements. The fixed elements are always drawn in the size that you painted them. The stretchable elements, on the other hand, are either stretched to fit, or tiled in the appropriate directions (horizontal, vertical, or both). If the image associated with the element is 1 pixel wide or high, then the image is stretched. Otherwise it is tiled. Tiled images can be used to create skins with irregular edges such as those seen in the Chiseled Rock skin.

As part of your planning process you need to choose an important metric, the BorderSize. This integer value describes the amount of space (in pixels) between the edges of the main parts of the user interface and an imaginary rectangle which outlines the entire Headline Viewer user interface.

Let's take a closer look at the way the fixed and the stretchable elements work together. First, note that even though the items are shown as squares or rectangles, you have full control of the shape of each item using transparent GIF or BMP files.

As an example, here are the parts of the title bar:

The Corner pieces (C0 and C1) are fixed. The same holds true of the Transition (T0 and T1) and the Title (L0) piece. The Corner pieces will always be a square, with height and width of BorderSize. The Transition pieces will also be square, with height and width of BorderSize. The Title is of height BorderSize, and it can be of any fixed width that you desire. The Edge pieces (E0 and E1) are of height BorderSize, and of any width. The E0 and E1 images are stretched or tiled. Note that the L0 piece is optional. If it is not included, then the right edge of E0 will butt up against the left edge of E1.

The Headline Viewer skinning model is fairly flexible. The geometric relationship of the main parts of the user interface (Category List, Active Provider List, Article List, Provider Image, and buttons) is fixed; you cannot change it. However, you can control the amount of space between the parts, and you also have full control of the border around the parts. Consider the following diagram:

These items will remain fixed in relation to each other. You do have the opportunity to control the size and the content of the gaps between each item. The Active Provider List and the Article List will grow and shrink as needed when Headline Viewer is resized. Your skin can fill in all of the gaps between the pieces, and it can also add borders around the edges of the window.

Choosing Metrics

The metrics of a Headline Viewer skin are some pixel measurements that are used to set the spacing between various parts of the skin. In this document, the names of metrics values are shown in an italic font. The following metrics are available:

Write down the metrics values that you plan to use, and keep them in mind as you create each part. Soon you will learn how to enter those values in to the skin.xml file.

Choosing Reference and Contact Information

Reference and contact information is stored with each skin in order to identify you, the skin author, and to provide additional information about the skin. The following information is available:

Choosing System Button Positions

When you design your skin you can also choose to position and display the three system buttons. These are the Minimize button which iconifies Headline Viewer, the Maximize button which makes it take up the entire screen, and the Close button which shuts down Headline Viewer. The X (horizontal) and Y (vertical) positions of each button must be specified. Specifying an X or a Y for a particular button causes it to be displayed; if no X or Y is specified then the button is not displayed. Note that while this system allows you to omit any or all of the system buttons, doing so will make your skin harder to use.

Because Headline Viewer's window is resizable, the button positions can be specified in a very flexible fashion. For example, you may want to position the Close button relative to the bottom right corner of the window. Therefore, you can specify that the X coordinates are relative to the left or the right edge of the window, and you can specify that the Y coordinates are relative to the top or bottom edge of the window. Each coordinate takes the form of an edge prefix followed by a pixel measurement.

For the X coordinate, the edge prefix can be the letter "L" to position relative to the left side of the window, or the letter "R" to position relative to the right side of the window.

For the Y coordinate, the edge prefix can be the letter "T" to position relative to the top edge of the window, or the letter "B" to position relative to the bottom edge of the window.

For example, a button positioned 4 pixels in from the top and from the left would use the following values:

X: L4
Y: T4

A button positioned 5 pixels in from the right bottom corner would use the following values:

X: R5
Y: B5

Once again, if you do not want to include a particular system button on your skin, then do not include an X or Y value for it in the XML file.

Writing the skin.xml File

The file skin.xml must exist in your skin's directory. This file stores the metrics values for your skin, along with reference and contact information. Take the skin.xml file from an existing skin, and copy it in to your skin directory. Edit it using Notepad or any other text editor. You could use the XML Notepad, but this is overkill for such a simple file.

The file appears as follows:

Replace each value shown in bold with the appropriate metric, descriptive value, or button position item for your skin. You can also specify colors for the Find Item as described in Skinning the Find Item.

You can also include XML comments in the file, formatted as follows:

  <!-- This is a Comment -->

Creating the Parts

You will use a paint program to create each part of your skin. If you study an existing skin, it should be clear that many parts are simple reflections of other parts. For example, you can create the 4 corners in just a few minutes as follows:

1. Create and save C0, the top-left corner
2. Flip that image horizontally, and save it as C1, the top-right corner.
3. Flip that image vertically, and save it as C2, the bottom-right corner.
4. Flip that image horizontally, and save it as C3, the bottom-left corner.

In a Headline Viewer skin, transparent sections are denoted using the fully saturated Magenta color (Red=255, Green=0, Blue=255). Be sure to set the transparency value and to flag each image as transparent if it contains any transparent sections.

Refer to the Skin Parts section below as you create your skin. It is important to realize that Headline Viewer has several view modes (accessible via the right-click menu). It is possible to hide the Active Provider List and the buttons. When a particular part is hidden, the interior (I) images which border it are also hidden. You need to make sure that your skin looks great in each mode.

You also need to create a thumbnail image for your skin. This image should be 300 pixels wide and 200 pixels high. For best results do this as follows:

1. Resize Headline Viewer to 600 pixels wide and 400 pixels high. If you are using Screen Loupe, use the onscreen rulers to make it exactly this size.
2. Press Alt+PrintScrn to take the picture.
3. Paste the picture in to your image editor.
4. Reduce the image to 300 by 200. If you are using Paint Shop Pro, reduce the image using the "Bilinear Resample" method for best results.
5. Save the resulting file as "thumb.gif"

Testing

It is best to build and test your skin incrementally, step by step. Create your skin directory, and put the skin.xml file in it. Start Headline Viewer and select your skin in the Skin Gallery. After you create a handful of images, press the F12 key to reload the skin. Add some more images, and try again. Be sure to resize Headline Viewer as you work to make sure that everything is absolutely perfect.

As noted above, be sure to test your skin in each view mode:

1. Show everything
2. Hide the Active Provider List
3. Show the Active Provider List
4. Hide the Buttons
5. Hide the Active Provider List
6. Show the Active Provider List
7. Show the buttons

Note that you can use the right-click (context) menu to perform steps 5-7 of the test.

You should also examine your skin to make sure that there are no ugly "pixel seams" between the parts. A magnifying tool such as Screen Loupe can be very useful here.

Shipping

Once you have perfected your skin, you need to package it up for distribution. Do this carefully to avoid getting lots and lots of email from confused users.

All you need to do is to use a tool such as WinZip to create a ".zip" file. The file must have the same name as the directory where you store you skin. You want to include a partial path, so that when the user unzips your file into Headline Viewer's Skins directory it will create your skin's subdirectory, with all of the required parts inside.

Send your skin to us at chv@vertexdev.com . We will put it in our skin gallery, and we will consider putting it in our standard distribution. We also hope to have Headline Viewer entries at the popular customization sites. Stay tuned to the mailing list for more information.

Skin Parts

A Headline Viewer skin is composed of up to 58 image files in GIF or BMP format. The follow diagram shows the base file names and the relationship of the various parts:

File names can be in upper or lower case. Note that you need to add a file type suffix (.bmp or .gif) to the names listed above, and that items of type Button or System Button also need "_p" or "_n" in the name. All of the Button and System Button images are optional -- if you do not supply an image then a standard Windows button will be used instead.

Skinning Buttons and System Buttons

All of the buttons in the Headline Viewer user interface can be skinned. Each button requires two images, one to show button in its normal state, and another to show it in its pressed state. The name for each button image is formed by adding "_n" (for normal) or "_p" (for pressed) to the base name noted above. The image itself can be in BMP or GIF form.

For example, the About button can be skinned by creating buttons named "about_n.gif" and"about_p.gif", or "about_n.bmp" and "about_n.bmp".

 The pressed image typically adds a shadow to the normal image to create the appearance of depth:

There are four system buttons (Min, Max, Restore, and Off) but only three are shown at any given time since the Max and Restore buttons share the same space.

Skinning the Find Item

The foreground and background colors of the Find Item can be adjusted so as to best match the skin. This is done by setting the following values in the skin.xml file:

Each item must have an associated value. The value is a string which can be formatted in two ways:

• Six hex digits formatted as "bbrrgg", where bb, rr, and gg are the hex digits for the red, green and blue components of the color, or
• A leading "#" and six hex digits formatted as "rrggbb".

For example, the fully saturated red color would be expressed in the first notation as "00ff00" and in the second notation as "#ff0000".

Skinning Tips

Be creative with your transparent sections. Check out the edges of the Rough Rock skin for some ideas.

Look at the skins included with Headline Viewer for some ideas. Surely you can do just as well, if not better!

Look at skins included with applications such as WinAmp and Sonique for ideas.

Use some prebuilt textures from the Graphtallica Texture Bank.

Ask questions on the chvskin mailing list if you get stumped.

Your skins will look their best if you manipulate them within your paint program using 24-bit images, and then decrease the color depth (if needed) just before saving them.

If you have suggestions that would let us make this program easier to skin or which would allow you to make better skins, please do let us know (chv@vertexdev.com).

Transparency

Transparency can be used on any of Headline Viewer's skin elements, but it is most often used on the edge parts. To create a transparent part, draw the transparent part using the color magenta (Red=255, Green=0, Blue=255). If you are using Paint Shop Pro, you can set this color as the image's transparent color while editing. Here is a sample transparent part from the Rough Rock skin:

The magenta pixels will not be drawn; the edge will ultimately look like this:

You can create a rough edge as follows:

1. Cut an anti-aliased rough-edged selection from an interesting texture.

2. Paste this selection on to a pre-prepared image of the desired size with a transparent background.

3. Invert the selection.

4. Fill the inverted selection with the transparency color (magenta).

Skinning Tools

This section lists some tools that we have found useful when creating skins. Be sure to pay your shareware registration fees if you continue to use these fine products.

Paint Shop Pro

This is an excellent image editing tool. As of this writing, version 6.01 is the latest and greatest. You can find this program here.

Screen Loupe

This is a great tool for checking out your skin in great detail. It magnifies the area under the cursor so that you can verify each and every pixel. You can find it here.

XML Notepad

This tool is perhaps overkill for the simple XML file used in Headline Viewer, but it is useful nevertheless since it checks and enforces proper XML syntax. You can find it here

WinZip

This program will let you create and access .zip files. Get it here.