Home Contact Buy
Sitemap Contact
Home Time Tracker Consulting Download Video Free Buy Sitemap Contact

How to Create Skins for World Clock

Here are several examples of available Anuko World Clock skins.

Anuko World Clock skin examples

Anuko World Clock skin examples


But still, you are not totally satisfied with any of them. Well, the good news is that you have a few options.

  • Tune up font for clock labels and border by editing skin.ini file.
  • Do some minor modification of skin artwork to better suit your style.
  • Design your own "breakthrough skin" by drawing your own artwork.

All of the options are pretty straightforward including designing your own skin. It is a simple process that requires no more than creativity, and any image editing program, which can be anything from Adobe Photoshop, even to Microsoft's standard Paint program.

But let's start with configuring available skins.

Configuring Available Skins


Read this section of this page to understand the format of skin.ini file. Experiment with it and change values to your liking. Notice that after you change anything in skin.ini you need to reapply new settings, which can be accomplished by selecting some other skin first and then the skin you are trying to configure. One other thing to remember is that a software update will change your skin.ini back. Rename your skin by giving the skin folder a different name to keep your changes in skin.ini file after software updates.


Modifying Skins


You can change any skin by editing its artwork. For example, if you are unhappy with skin background or look of some elements - just change them to your liking. If background needs to be changed make sure to play with existing skin first by doing the following 2 things.

  • Disable dynamic clock highlights. These are additional highlights for your clock faces that change color of your clocks depending on time. Just uncheck the "Highlights" node in the clock tree to remove them. Highlights have nothing to do with skins.
  • Play with the "Background" checkbox in clock Preferences window. Unchecking this option makes the skin transparent and basically you see the background underneath your clock (desktop or taskbar).

In other words, before modifying skin backgrounds make sure you understand how they work.


Designing Your Skin


This requires more effort but in return you have total freedom creating your own skin.

Notice that World Clock supports several skin formats, from very basic digital WinAmp format to advanced formats. Make sure you understand the formats very well before proceeding.


Location and Organization of Skins


Skins are bitmap and initialization files that reside in World Clock skins sub-directory. Each skin has its own sub-folder. For example, all Bamboo skin files are located in <install_dir>\skins\Bamboo (by default C:\Program Files\Anuko\World Clock\skins\Bamboo). Name of the folder defines skin name. All you need to add a new skin is create a folder for it and drop its files in.

Skin files are as follows.

  • text.bmp or alpha.bmp - text bitmaps for clock labels. alpha.bmp takes precedence if available.
  • numbers.bmp or digits.bmp - digit bitmaps for digital clock faces. digits.bmp takes precedence if available.
  • clkface.bmp - clock face and hands bitmap for analog skins.
  • skin.ini - optional skin initialization file.

Notice that 2 digital skin formats are supported: WinAmp format (when text.bmp and numbers.bmp are used), and Anuko World Clock format. Minimal digital skin consists of 2 files: numbers.bmp + skin.ini or numbers.bmp + text.bmp. You can use other WinAmp skins if you'd like (search the Internet for WinAmp skins). However, for better quality consider tuning up with skins.ini or using alpha.bmp + digits.bmp.



Format of the skin.ini File


Note: World Clock software updates overwrite skin.ini file in all skins that come with the product. Rename your skin to keep your changes in skin.ini during software updates.

Here is an example of the contents in skin.ini file:
[font]
face=Tahoma
align=center
size=-10
color=0xffc000
background=0xc0c0c0
weight=700
style=1

[shadow]
color=0x000000
offset=1

[border]
enabled=0
color=0x000000

[font] - defines section in skin.ini file for font attributes.

  • face=Tahoma - Windows font name for your clock labels. If no value is provided or the file skin.ini is not available then letters from text.bmp or alpha.bmp are used. Notice that digits in digital skins come from the file named numbers.bmp. In other words, changing font for labels has no effect on digits in time display.
  • align=center - text alignment. Only center and right text alignments are currently supported.
  • size=-10 - font size. Negative value defines size in pixels while positive in pt. We recommend using pixels.
  • color=0xffc000 - color of text. This is an RGB value in hexadecimal representation, 0xff0000 for red, 0x00ff00 for green, 0x0000ff for blue, etc.
  • background=0xc0c0c0 - RGB value of clock background color. 0xc0c0c0 represents a level of gray. This attribute is available since World Clock 6.0.0.5328. When no skin bitmaps are provided (there are no .bmp files in the skin folder), then this background value is used. When skin bitmaps are provided, this value is ignored and the background is determined by top-right pixel in one of the provided bitmaps bitmap (text.bmp, alpha.bmp, numbers.bmp, or digits.bmp).
  • weight=700 - weight or thickness of your font, 0 - don't care, 100 - thin, 200 - extra light, 300 - light, 400 - normal, 500 - medium, 600 semi-bold, 700 - bold, 800 - extra bold, 900 - heavy.
  • style=1 - font style, 1 for italic. Only italic is supported.

[shadow] - defines section in skin.ini file for font shadow attributes.

  • color=0x000000 - RGB color of font shadow in hexadecimal representation.
  • offset=1 - shadow offset from font in pixels. Positive value for right and down. Negative for left and up.

[border] - defines section in skin.ini for skin border attributes. This works only in digital skins.

  • enabled=0 - set it to 1 to display the border.
  • color=0x000000 - RGB color of skin border in hexadecimal representation.

Note: World Clock software updates overwrite skin.ini file in all skins that come with the product. Rename your skin to keep your changes in skin.ini during software updates.


Skin Text


Two variations of text bitmaps are used to represent text: alpha.bmp or text.bmp.

alpha.bmp - a 16x14 matrix of text symbols of equal size, altogether 224 symbols starting with ASCII 32 and ending with ASCII 255. Notice that you define the size of your text symbols.

 !"#$%&'()*+,-./
0123456789:;<=>?
@ABCDEFGHIJKLMN0
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{|}~ 
....

text.bmp - a limited set of letters in WinAmp format.

Color of the top right bitmap pixel is used as skin background. Symbol '=' from these bitmaps is used as the time separator symbol to separate hours from minutes and minutes from seconds if WinAmp digits are used (see numbers.bmp below).


Skin Digits


Two variations of bitmaps may be used to represent digits on clock faces.

digits.bmp - is a bitmap of digits 0...9 and the time separator in one straight line. Bitmap height defines digit height. Digit width is defined by dividing bitmap width by 10 without remainder. The remainder defines width of the time separator. For example, 103x16 pixel bitmap would contain 10 digits 10x16 pixels each, and a time separator 3x16. Each digit is assumed to be drawn together with separating space from another digit.

numbers.bmp or nums_ex.bmp - fixed WinAmp format for digits. Bitmap size is always 99x13 pixels. Digits 0...9 each 9x13 are drawn without separating space. Last 9 pixels of bitmap width are not used. During load a 2-pixel separating space between digits is added up. The '=' symbol from the alphabet bitmap is used as the time separator symbol.

Bamboo skin digits

Bamboo skin digits


Color of the top pixel right after the digit 9 is used as skin background.


Clock Face for Analog Skins


clkface.bmp - a bitmap with dimensions F x (F + 3A) where F is the diameter of the clock face plus a few separating pixels. F must be minimum 128 pixels. A represents height of the area to draw clock hands. In other words, below the clock face itself you need to draw three hands, hour hand, minute hand, second hand one below the other. Vertical axis of this bitmap defines the point around which arrows rotate.

Analog clock skin example

Analog skin example


Color of the pixel with coordinates (0, F-1) is used as skin background.

If you come up with some great design please consider sharing it with others by sending it to us for consideration.