Clock face designer: How create a clock face


6 Steps to create a clock face

At the first view the clock face designer looks a little bit complicated, but don’t hesitate: It is an easy process.

Simple sample

1. With the drawing program of your choice create the clock face files.

If you will create a 12 hour clock face you need a file for the clock face background and three files for the hands: hour-, minute- and second-hand:

Clock face:Simple sample: Clock face

Hour hand:Simple sample: Clock face

Minute hand:Simple sample: Clock face

Second hand:Simple sample: Clock face

If your clock has to show different faces between daylight and night or AM and PM you need one or more files twice, depending on your design.

The preferred file format is png because you can use transparent areas in png. If you don’t need transparent areas you can also use the jpg file format.

The most important question is: Which is the perfect size for the drawings:
For clock faces, which will only be shown on tiles, you can use the following sizes:

Tile sizes 60 / 84 / 108 Pixel

Tile sizes 75 / 105 / 135 Pixel

Tile sizes 80 / 112 / 144 Pixel

Tile sizes 150 / 210 / 270 Pixel

Tile sizes 310 / 434 / 558 Pixel

For displays with more than 174 dpi use the 2nd size, for displays with more than 270 dpi use the 3rd size.

If you will additionally use the clock face on the screen, than the size depends on your screen size and how many clocks you will shown on one screen.

At least you need only files in the largest size, tile clock will resize your files for the other necessary sizes.

Tile clock computes for every necessary size one scale factor, depending on the size of the clock face file. This scale factor will be used for the hand files too.

After you have created these files, you have finished the most time consumption step and you can load these files into tile clock.

2. Creating a clock face in tile clock

Start tile clock, select the clock face view via the app bar

clock face designer

and add a new clock face by clicking on the new clock face button:

Add clock face

Then select the clock face base option:

option 1: Clock face for hands, 0-11:59 view (same view for daylight and night or AM and PM)

option 2: Clock face for hands (different views for daylight and night or AM and PM)

option 3: Clock face for digits (here you need at least ten files for the digits 0-9 and one file for the clock face).

Right from this option field you can enter a name for your clock face.

Now you can load the files. Click or tab on the area for the clock face (in the middle) or the hands (left for hour hand with red fields and sliders, right for minute hand with green fields and sliders) and select the created files from step one:

clock face designer

For loading the files for the second hand, change the view by clicking on the change view button below the upper minute area:

change view

The second hand is shown with yellow fields and sliders

Red fields and sliders for hour hand values
Green fields and sliders for minute hand values
Yellow fields and sliders for second hand values

3. Adjust the rotating positions on the clock face

In the fields and with the sliders around the clock face you can adjust the rotating positions off the hands  on the clock face:

clock face center rotaing points

If you click or tab on the sychronize buttons

clock face center rotating positions

you can easily adjust the same values (synchronized) or different values for the hour, minute and second hand.

4. Adjust the rotating points of the hands

With the fields and sliders above or below the hand areas you can adjust the center rotating point of a hand

hand center rotating points

For the hands you have a sychronized button too.

Below the upper hour hand area your can enter the time when tile clock is showing the night clock face:

hand center rotating points

For example:
If you change the changing hour to 20:00, then tile clock will show the upper clock face from 8:00 til 19:59 and the lower clock face from 20:00 til 7:59 on next day.

in most cases, when you enter a changing time different from 0:00 or 12:00, you have to adjust the start and end angles. In this example, the value for the start angle is 240 (30 degrees for every hour), the end angle is 600 degree (360 degree later).

With the angle values you can create interesting clock faces: If the start value is greater than the end value, the clock is running counter clockwise.
Or look at example 03 or example 04.

5. Test your clock face

On the right side you find a test area:

test area
With the sliders, plus or minus button or the time field you can check any time of the day.
In the second hand view you have a slider for the seconds too.

The size of the test area denpends on the selected size in the size Option field:
test area size

6. Creating the tile files

For showing the clock face on a tile, tile clock creates tile files.
This process starts after clicking on the file creating button below the test area (this button isn’t visible in the second hand view):
test area size
Depending on the selected size, the size of your clock face files and of the system speed the process needs 1 or 2 minutes (or a Little bit more).

For every selected size, tile clock creates different tile files. This could be helpful to save system resources when showing many clocks on the tiles. Or you will get a better view of smaller sizes instead of scaling larger files on the tiles by the windows system – give it a try.

Using the clock faces

After creating the tile files you can use your clock faces on a tile or on the Screen. In the tile control view select your desired clock face for evey tile and clock:
test area size

For the tiles there two fields for selecting a clock face.
One for the tile: This clock face will be shown, if there is a large clock view on a tile (more or equal than 150 pixel).
The other clock face is selected for the the clock and will be shown if there are one or more  small clocks on the tile (less than 150 pixel).

Remember 1
Don’t forget to select a tile style.

Remember 2
In the tile control view the yellow values adjust the view of the tiles


and the orange values the view on the screen.

test area size

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.