|
 |
How to Create Your Own Skin for ZoneTick
Here are several examples of available ZoneTick skins.
ZoneTick 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 ZoneTick software updates 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 ZoneTick 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 "Backgrounds" node in the clock tree to remove them. Highlights have nothing to do with skins.
- Play with the "Use transparent skins" checkbox on ZoneTick General Preferences window. Unchecking this option shows skin background, otherwise you see the color of your task bar.
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 ZoneTick supports several skin formats, from very basic digital WinAmp format to advanced ZoneTick 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 ZoneTick 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\ZoneTick\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.
- lightmap.bmp - optional light map bitmap to mix up with clock face.
- 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 ZoneTick 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: ZoneTick 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 width=-7 color=0xffc000 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.
- width=-7 - font width. Negative value defines size in pixels while positive in pt. We recommend using pixels. For this value to take effect you must have the size value defined.
- color=0xffc000 - color of text. This is an RGB value in hexadecimal representation, 0xff0000 for red, 0x00ff00 for green, 0x0000ff for blue, etc.
- 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.</li>
- 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.</li>
- color=0x000000 - RGB color of skin border in hexadecimal representation.</li>
Note: ZoneTick 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 left bitmap pixel with coordinates (0,0) 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
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.
ZoneTick analog skin example
Color of the pixel with coordinates (0, F-1) is used as skin background.
Light Map
lightmap.bmp is an optional light map bitmap F x F pixels to mix up with analog clock face. Every pixel is used to change brightness of the resulting image. This could be used to achieve more realistic images for "mechanical" clock skins. For example, you can highlight a specific area of your clock face.
If you come up with some great design please consider sharing it with others by sending it to us for consideration.
 | ||
|
||
| ||
[ July 23, 2008 ]
|
||
| ||
|
[ January 3, 2008 ]
|
||
| ||
|
[ October 11, 2007 ]
|
||
| ||
|
[ October 4, 2007 ]
|
||
| ||
| ||
 |
||
| ||
| ||
 |
||
| ||
 |
||
| ||
 |
||
| ||
 |
||
| ||
 |
||
| ||
|
|
