[TOMAJA Tutorial] Snow, Snowflake & Winter Dream for Every Watch Face [How to]

Hello there!

I saw in the discussion, that some designers would like to have snow in their watch faces. So here is an easy to do tutorial, how to add snow and winter atmosphere to every watch face.

I opened a “sommer” watch face and put some snow to the right places in order to get this:

STEP 1 - Adding Static Snow (and Shadows)

This is the easiest part of this job. Just preparing some white places, adding texture and putting this on the watch (behind the hands :slight_smile: )

STEP 2 Adding Snow (and Shadows) to the Moving Hands

Well, in contrast to static snow, this is something a bit complicated. Snow should be (sure) only on the top of hands. The most amount then, when the hand is in the horizontal position and no snow in the vertical one. Snow is rotating the same speed as the hand. For my hour the Rotation was simply #DWFKS#. Due to the different hand sites the snow should stay I prepares two PNG Pictures - let say left and right snow. To be sure that the show is “growing” from vertical to the horizontal position and “shrinking” from the horizontal to the vertical position - the Width of this object (original 320px x 320px) was dynamic:

Width:

(320*(sin(#DWFKS#*0.01745329252)))

To have the right snow only on the right site, the a modification of Transparency was used.

Set transparency:

$#DWFKS#<180||#DWFKS#>360?100:0$

The speciality of the #DWFKS# function is the maximum value of 390, therefore in contrast to minutes and seconds also additional condition was involved for the “right snow” (#DWFKS#>360).

The last “problem” to solve was the position of the snow according to the hand. With another words the hand was to thick to by satisfied with central growing or shrinking snow mass.

Therefore a correction in the X axis:

(160-(5*(cos(#DWFKS#*0.01745329252))))

STEP 3 Adding Falling Snow (and Shadows) into the Front of Everything :slight_smile:

For this purpose I prepared 3 different long (longer then at the picture below) snow wallpapers and one big solo snowflake.

Every snow wallpaper was just moving in the Y axis (with different speeds for space illusion) down, like this:

slowest one:

(-10+((#DWFSS#)/2))

slow one:

(-355+((#DWFSS#)))

standard speed:

(-355+((#DWFSS#)*2))

solo snowflake:

(-100+((#DWFSS#)*6))

For every element in this tutorial I used also shadow to be more realistic. However for the different wallpaper it is an advantage to use different distances of shadow (for making the 3D effect stronger)

Snowflake likes to feel free also in the X axis, therefore I allow then to move right and left a little bit (according to their positions and speed) :slight_smile:

slowest one:

(160+(cos(#DWFSS#)* 0.15)*4)

slow one:

(160+(sin(#DWFSS#)* 0.4)*4)

standard speed:

(160+cos(#DWFSS#)* 8)

solo snowflake:

(100+sin(#DWFSS#)* 20)

It is good to change the speed and periodicity of movements to have more natural effect.

For the solo player snowflake I prepared additionally small rotation effect.

Rotation:

(160+sin(#DWFSS#)*10)

Also this watch face is, of course, free for an inspection and inspiration at: Facer - Thousands of FREE watch faces for Apple Watch, Samsung Gear S3, Huawei Watch, and more

9 Likes

@Tomas awesome tutorial! Do you want to contribute a Medium version of it to our official list? See New Tutorial section on news.facer.io

We’ll gladly publish it and include that face in the Facer Academy collection in the store front of Facer.

2 Likes

Hello and thank you! I will check the “Medium” how to work with this and will prepare an article about the snow. I will be happy, when you publish it :+1:

Hello again, I tried to publish this tutorial on “Medium” and here is the link:

https://medium.com/@tomaja/snow-snowflake-winter-dream-for-every-watch-face-tutorial-18af1bbc275a

Actuelly it was so easy, that I prepared also my tutorial from yesterday about “floating, zooming and rotating”. Maybe it fits too :wink:

2 Likes

Great! Just requested both for publication in Facer. We’ll likely need to do some minor edits for consistency, but these will be good additions. Thanks for contributing!

2 Likes

Hello, thank you for publishing. (Today I will prepare a new basic tutorial for making of simple 3D effects and shadows.)

2 Likes

Very nice! Thank you for these. :slight_smile:

1 Like

Hello @Linlay , thank you and show us here please a watch face, if you use some parts of this tutorial… I am curious how you implement it…

2 Likes

Thank You for sharing, happy new year

1 Like

Here you go. I used a variation of your floating snowflakes here.

Thank you for this tutorial, Tomas.

2 Likes

@Tomas As always, Thank you for the great tutorial and examples!

2 Likes