user's avatar
Tutorial: Making Apple Watch Pattern
TUTORIAL
How to Make an 
Apple Watch Pairing Pattern in Vector
Apple Watch so pretty itself, but also its pairing screen. I feel that this pattern is too complicated to be made manually, so it seems it was made by using code. 

Let's try to repeat that pattern with this simple tutorial. I'm going to use PaperJS – a vector graphics scripting framework. It gives us the ability to make any shape we like and export it in SVG. Nice!

First, open sketch.paperjs.org and follow the tutorial. 

Starting With Ellipse

The code is simple and self-explaining, except the line 57. I'm positioning the ellipse at the center of the screen, but shifting off the center by x: 94 and y: 0. 

It will be necessary later when we make copies of that ellipse and rotate them around the center.

In this tutorial we going to use strokeColor: 'black', just because Sketch's background is also white, later you can replace it with 'white' or any other color on your own. 

Try yourself: Sketch
Making Clones
Simple for-loop is used to make 24 clones. It's clear that Apple uses 24 numbers because that represented 24 hours a day. Smart move, Apple! ;)

At the end of the loop, we need to rotate the ellipse by an angle multiplied by the number of clones and rotate it from the center of the view.

Try yourself: Sketch​​​​​​​
The fun about the code is that you can tweak any number to get fun and interesting result. Go and play with it!
Adding Dials
For the deals, we need to write a simple function that creates rectangles based on the function’s parameters.

We going to use this function twice: for making 12 and 24 dials.

Try yourself: Sketch 
At the right corner of the Sketch tap "Save as SVG", so you can open it in Adobe Illustrator and use in you design mock-ups. 
Tutorial: Making Apple Watch Pattern
7
147
0
Published:
user's avatar
Alexander Deplov

Tutorial: Making Apple Watch Pattern

7
147
0
Published: