Rotate forms for round watch faces

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.

Examples:

Hours \frac{360^\circ}{12} = 30^\circ
Minutes \frac{360^\circ}{60} = 6^\circ
Weekdays \frac{360^\circ}{7} = 51.4286^\circ
Days in Month \frac{360^\circ}{31} = 11.6129^\circ

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:

  1. I create one marker and place it.
  2. I copy this marker to the opposite side and rotate it by 180°.
  3. I select both markers.
  4. 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.

Here’s the download of the actions.
The file will be updated from time to time with more helping actions. You are welcome to collaborate updating this file on GitHub: https://github.com/IOIO72/watchface-photoshop

Icon

Watch face Photoshop Actions 1.37 KB 34 downloads

This file includes helping actions for designing round watch faces with Adobe Photoshop. You...

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Loading Facebook Comments ...

Leave a Reply