Especially in the beginning of designing round watch faces, I had to get used to place forms to the right place in a circle. This is needed for markers, numbers and some decoration elements. Photoshop doesn’t offer circular guide lines or other help functions for these kind of layouts.
In fact, it’s easy to get the right degree values for spreading assets in a circle. You just have to divide 360 by the number of elements, you like to place in a circle.
Days in Month
The elements to rotate and place are usually similar or same to each other. So the workflow is usually to create an asset, to place it, to copy it and to rotate and place it.
If you do this one by one manually, it not only feels stupid to repeat one and the same action again and again, it’s also very easy to make small mistakes, if you loose concentration.
In these cases, it’s always good to use Photoshop’s action feature.
My workflow for creating hours markers looks like that:
I create one marker and place it.
I copy this marker to the opposite side and rotate it by 180°.
I select both markers.
I press 5 times on the play button of the hour rotation action.
Step 2 is necessary, because the function rotates in the center of a selection.
If you do this with uneven number of elements, like weekdays, you can do it the same way. But in this case you have to press double times on the play button. In a firths step you have to delete every second element to clean up duplicates. This sounds a bit confusing, but it’s easy to do in practice.
Shortly after releasing my Homer watch face, one user suggested a feature to change the colors of the watch face background.
I liked the idea, so I implemented a color change function, which I describe now.
The first thing to do, is to remove the colors of the graphic assets, which should be affected by the color change function. The graphic assets should be as white as possible and only contain grey scale colors to represent structure or shadows. Of course you can use any graphics program. I use Photoshop like so:
Please note, that this procedure isn’t the same as just removing color out of a colored image by pulling down the saturation. With the black & white adjustment function, you can control how the color is translated to black, white or a grey color. You can get more information about this in Adobe’s tutorial: Convert a color image to black and white.
Scripting the color change
Now, back to WatchMaker: replace the original background image with the new whitened asset.
Preparing the script
In the main script we need to set up an array variable which contains the color codes:
To select one of these colors, we need an index variable, which contains the index of the first color code as default:
var_index = 1
Now you can set the tint color of the whitened background image to:
This means: Display the color (var_color) of the current index number (var_index).
The white background should be displayed in cyan, because this is the first color of the colors array.
Implementing the change function
Now we need a function to change the color.
In the script part we include a very simple color change function, which simply increments the index value (var_index):
var_index = var_index + 1
Each time, the function is called, it increments the value of the index by one. It’s easy to imagine, that we don’t have infinite colors in our colors array. So we need to reset the index value to the first index number, if the number of available colors are exceeded.
To get the number of colors, we simply have to count the number of array entries with the length function “#”. To save calculation resources, we store the result of the count in a separate variable.
var_num_cols = #var_color
Now we can check, if the number of available colors are reached and reset the index variable inside the color change function:
if (var_index >= var_num_cols) then var_index = 0 end
var_index = var_index + 1
I thought, the easiest way for the user is to change the color by simply tapping in the middle of the watch face.
The only thing to do is to tap on the background image and apply a tap action for scripts which consists of the function call:
Now, we are done with the background color change function.
Adding more color changes
We can use the tint function for any other graphic asset or any other colored elements by simply applying
instead of a single color code.
If you want to use corresponding foreground colors, you only need another array of colors with the same amount of colors as the first array of colors. I used that for the hours and minutes hand.