Development ENKRCN

1. Overview

Overview

The Gear Watch Designer interface should be instantly familiar to those who have used modern design tools. Just arrange your screen by dragging and dropping, then let your creativity flow.

Overview
A. Component

Add as many different components as you like to your watch face.
For some components, you can even use a customized design source.

For example,
bring the heart rate or step count data to the forefront with the Text tool,
or add an image to launch a particular app.

bring the heart rate or step count data to the forefront with the Text tool, or add an image to launch a particular app.
B. Preview

Change the position of your design elements, or add new ones by dragging and dropping components from the Resource pane.

C. Properties

Each component has a corresponding range of properties that you can amend and tweak as you like.

For example, you can change the color of the numbers on a digital clock, or choose whether the watch hands measure hours, minutes, or seconds.

For example, you can change the color of the numbers on a digital clock, or choose whether the watch hands measure hours, minutes, or seconds.
D. Resources

You can import many different types of files (JPG, PNG, fonts, etc.) to use as components. Use the [+] button to import fonts, and keep your components organized in different folders.

You can import many different types of file (JPG, PNG, fonts, etc.) to use as components.
E. Layer

Manage, order, or remove any layer image on your watch face.

F. Conditional lines

Make your designs more dynamic with components that change their appearance depending on certain conditions. These conditions could include the time of day, number of daily steps, battery status, and more.

You can show or hide objects in the preview by choosing show or hide in the appropriate frames.

The time of day is set as the default condition. For example, your watch face can be bright during the day then gradually darken as it gets later. You can set the scale of the timeline to be measured in minutes or seconds.

2. Designing a clock - Analog clock

Create an analog watch in three simple steps.

Create an analog watch in three simple steps

Step 1. Select a background image
Pick a background image provided by the Gear Watch Designer, or use a custom one*.

Step 2. Add an index
Select the range and bar count from Properties to automatically create an index.

Step 3. Add a watch hands
Pick the length, thickness, and sync source of the hour/minute/second hands.
To change the pivot point, right-click on it and select Show Pivot.

Drag and drop the watch hands wherever you like. You can also change the range of rotation.

Images created elsewhere will be saved as a PNG file.

* Images created elsewhere will be saved as a PNG file.

Tip

As well as hours/minutes/seconds, you can set the hands to show other things like the battery level and step count.

Tip

You can also select an animated background image.

2. Designing a clock - Digital clock

For a more modern design, a digital clock is easy to create too.

For a more modern design, a digital clock is easy to create too.

Step 1. Select a background image
Pick a background image provided by the Gear Watch Designer, or use a custom one*.

Step 2. Add a digital clock

Step 3. Set up your digital clock
Choose a 12-hour or 24-hour format, then decide how the date is shown.
Click More > to format the date and time for a different country or region. Take a look at the ICU format documentation for more details.

For a more modern design, a digital clock is easy to create too.
Use fonts

Step 4. Use fonts

You can add different fonts to Resources as Truetype fonts, or a custom image as
a bitmap font.

Click 1Open Bitmap font settings.

Click 2Load an image to replace numbers or symbols.

3. Conditional lines - Time

Watch faces can be designed to change depending on certain conditions, such as the time, step count, and date using conditional lines.

Watch faces can be designed to change depending on certain conditions, such as time, step count and date using the Conditional line.

Morning - Afternoon - Evening

Step 1. Create layers
Create three background image layers.

Create some time periods, Hide layers

Step 2. Create some time periods
Set time periods to control when each layer is displayed.
First, select the starting frame, then the time range.
Drag 1-2Drag from the start frame to the end frame.

Step 3. Hide layers
Right Click 3, 4Right-click the frame area, then click Hide.

Click on the Scale button to change the time measurement units.
Tip

Click the Scale button to change the time measurement units.

Show other layers, Play

Step 4. Show other layers
Show other layers in the same way.

Step 5. Play
Press play to preview your changes.

Watch faces can be designed to change depending on certain conditions, such as time, step count and date using the Conditional line.

Watch faces can be designed to change depending on certain conditions,such as time, step count, and date using conditional lines.
Right Click 5Right-click on the frame area.
Click 6Select show.

3. Conditional lines - Step count

Watch faces can also change according to step count.

Watch faces can also change according to step count.

Changes according to the step goal
Creating a watch face that changes according to the percentage of daily steps achieved is easy.

Step 1. Change the condition
Add Steps to the Conditional lines.

Step 2. Activate layers, Step 3. Show or hide layers

Step 2. Activate the layers
Right click 1Right-click a frame area, then click Activate.
A layer will only change according to the step count from the moment it is activated.

Step 3. Show or hide layers
Show or hide layers as illustrated in the previous steps.

Step 3. Show or hide layers
Tip

Each layer only monitors one type of condition at a time. If a layer is activated to change according to step count, any existing monitoring of another condition will stop.

3. Conditional lines – 12-hour and 24-hour versions

Show different watch faces based on the setting chosen on the user’s phone.

Watch faces can also change according to step count.

Changes according to the time format set on the user’s phone
You can show different watch faces for the 12-hour and 24-hour versions.

Step 1. Prepare 2 digital clock components
One 12-hour version and one 24-hour version.
Place them in the same position.

Watch faces can also change according to step count.

Step 2. Change the condition
Add 12H/24H to the conditional lines

Step 3. Active layers
Right click 1Right-click a frame area and select Activate.
A layer will change the time format from the time it is activated

condition 바꾸기, 비활성화 상태의 Layer를 Activate 해 주기

Step 4. Show or hide layer

Only show the digital clock for 12-hour layer in the 12-hour format, and show
the other layers in the 24-hour format.

Tip

You can change the layer name by double clicking the name field and entering a new name.

Tip

You can handle distance units (km/miles) in the same way.

3. Conditional lines – Loop

Conditional lines let you show and hide components on watch face and control their behavior.
For example, you can change the background every second.

Watch faces can also change according to step count.

Changing the background every second
In this example, 5 background images are used and they
are shown and hidden respectively every second.

Step 1. Place 5 background images
Use 5 different background images

Note

To show the sequence from beginning to end, start it from 00:00:00. Otherwise, the sequence won’t be shown before the selected point.

Watch faces can also change according to step count.

Step 2. Set the layers that you want to show and hide each second

Step 3. Repeat the cycle
Right Click 1Open context popup and select Loop. Set loop for each layers.

4. Adding animations - PNG sequences

Make a more vibrant design by adding animations.

Put your own spin on a watch face, Step 1. Create an animation source

Put your own spin on a watch face

Step 1. Create an animation source
Create your own PNG sequence animation with a design program like Adobe Flash or Premier.

Step 2. Import an animation, Step 3. Create a smart component*

Step 2. Import an animation

Click 1When the animation is clicked, you will see a file select dialog.

Drag all or multi select 2Select the files to include in the PNG sequence.

Click 3Click Open.

Step 3. Create a smart component*
If your files are a PNG sequence, a new layer will automatically be created as a smart component.

Click 4Click Yes to import the sequence as a smart component.

* Smart components let you associate additional actions with objects. You can specify actions based on conditions.

Step 4. Change the smart component conditions, Step 5. Play

Step 4. Change the smart component conditions

The PNG images will be added as individual layers in an ordered timeline.
You can edit the animations by showing or hiding them, or by changing the length of time a frame displays for.

Step 5. Play

Run the animation to see it in action.

5. Always-on states

Always-on states are designed to display the time information with ultra-low power consumption.
The Gear Watch Designer automatically generates an Always-on version of your watch face.

Because the Always-on state is set as low power mode, there is restriction to represent the color.
Samsung recommends a design that uses no more than 15% of the available pixels in always-on states.
If your watch faces use more than that, they will be rejected.
If an Always-on version of your watch face is not created, a default version will be displayed.

For more detail on designing and developing Always-on states watch face, see the Home structure > Watch Face.

Note

Gear Watch Designer is now checking the Always-on states when it starts to build.
If it uses more than 15% of the available pixels in Always-on states, build process is suspended.
If it exceeds 15% temporarily, the watch face could be built. However, the store registration can be rejected during the quality verification process or it can be canceled by the user complaints even if the watch face was built.

Always-on mode 1
Always-on mode 2

Step 1. Create an Always-on version automatically

Click the always-on state button to generate an Always-on version of your watch face automatically.

Click 1Turn on Always-on mode

There are two different color schemes - Low-bit color and high color.

In low-bit color, the always-on state only uses cyan, magenta, yellow, red, green, blue and white at full brightness. Gray scales and gradients cannot be used.

In high color, there are no color limitations so the corresponding active versions of your watch face can be replicated more closely. High color always-on states are only available for Gear S3 or newer devices.

Step 2. Change the design, Step 3. Switch back to active view

Step 2. Change the design

Gear Watch Designer will initially generate both a low-bit color and high color version of your always-on state automatically. You can use these versions in the final product, or modify them if they’re not suitable.

You can also design your own always-on watch face with a limited number of features and functions.

Step 3. Switch back to active view

Once you’re happy with your Always-on watch face, continue with the rest of your design by switching back to active mode.

6. Adding complications

Enhance your watch faces by adding a variety of information.
Tapping on a complication lets users run apps directly from their watch face.

Adding complications 1
Adding complications 2

Step 1. Position the complication background

Decide where you want to position your complication.

Tip

Adding backgrounds for all your complications isn't necessary. In this example, a background is used as a start for creating a complication. You can create complications for any component, like hands, indexes, and other elements.

Step 2. Decorate the complication

Add some hands and an index to the complication. In this example, the complication will show the battery level.

2. IndexGo to Component > Index

3. HandsAdd some hands, then go to Properties > Sync to > Battery %. Set rotation to 1.

* You can decorate complications in many other ways.
For example, a battery level can be displayed in digits, and warning messages can be displayed when the battery level falls below 20%.

Step 3. Make an interactive complication

The complication now shows the current battery level. Next, let’s make this complication a button that can open the Battery app.

Adding complications 3

Step 4. Make the complication a button

Click 1Open the settings menu

Click 2Select Set as button

The complication is now a button, and you can change its properties.

Tip

Any component of a complication can be a button. We recommend using components which cover the entire area of the complication, like a background. If it does not cover the entire complication area, use a transparent component positioned to cover the complication as a button.

Step 5. Edit the button properties

Once a component is set as a button, you will see two new tabs in Properties: Normal and Action.

Normal controls a component’s properties when it is not being used. Action controls a component’s properties when it is tapped.

Adding complications 4

Step 6. Set Action behavior

Decide what you want your new button to do when it is tapped.In this example, the Battery app will open.

Click 1Show the list of apps from the drop-down menu.

Click 2Select the app that you want to open when the button is tapped.

Tip

You can make a component’s image change when you tap it. Select ‘Change image’ from the drop-down menu to add a maximum of 6 images.

Step 7. Complication complete

Your complication is now complete.
It will show the current battery level. When tapped, the Battery app will open.

Tip

There are a number of complication templates in the Gear Watch Designer. You can use these as a basis to create your own designs.

7. Groups

Manage all your Gear Watch Designer objects with a new grouping feature.
Group multiple objects together, and control them as one object.

Adding complications 1

Step 1. Select multiple objects
Select two or more objects.

Step 2. Create a control box for each one
Functions like Multi-select. Delete, Copy, and Move are available.

Step 3. Make a group
Multiple objects are combined in one group object. Each group object will have one control box and the pivot point of each group object will initially be located at the center.
* Ctrl+G (Group)
* Ctrl+shift+G (Ungroup)

8. Dynamic watch faces (Gyro)

There’s now a new way to add a bit of movement to your watch face that’ll make your design stand out from the rest.

Adding complications 1

Gyro Effect
Add gyro effects to your watch face and see how it moves and changes appearance as you tilt your Gear.

The aspects of watch face components that you can change include size, Inner Pivot position, rotation and opacity.
From version 1.5.2, you can use the Gyro Effect tab to tweak the X and Y rotation dimensions of objects independently to create 3D effects for your watch face.

The Gear Gyroscope

Adding complications 1

Gyro effects are applied as the Gear moves within the -90º to 90º range along the X and Y axes. 0º indicates that the watch is level.

Watch faces can also change appearance
when the Gear moves clockwise or counter-clockwise

Adding complications 1

-90º on the X axis indicates that the Gear has rotated 90º upwards along the X axis (counter-clockwise).

Conversely, 90º indicates that the Gear has rotated 90º downwards along the X axis (clockwise).

Adding complications 1

-90º on the Y axis indicates that the Gear has rotated 90º to the left (counter-clockwise).

Conversely, 90º on the Y axis indicates that the Gear has rotated 90º to the right (clockwise).

Adding complications 1

Gyro effects let you adjust the dimensions, inner pivot positions, rotation, and opacity of objects in your watch face.

Note

You can only enter values for each property for the -90º to 90º range.

Note

Gyro effects won’t work unless the absolute values of each property’s reference points are equal. For example, Inner pivot X can’t use -90 and 45 as its reference points, but it can use -45 and 45.

The values you enter will determine how much the actual value of the property will change with respect to the base value.The actual value will be calculated through linear interpolation using the values at -90º and 90º.

For example, if you enter values of -90 and +90 for Inner pivot X to allow a range of -90º to 90º, then Inner pivot X will be +80 px of the base value when the Gear is rotated 80º.

Adding complications 1

There are 3 different tabs (Gyro XY, Gyro X, Gyro Y) for applying gyro effects.
Gyro XY properties are always applied, regardless of the axis of rotation.

Note

You can only change each property in one tab. For example, if a Rotation value is entered in the Gyro X tab, then the Rotation value cannot be entered in the Gyro Y or Gyro XY tabs.

The Gyro X and Gyro Y tabs allow you to control the properties when the watch rotates along the X and Y axes respectively, so you can use these Gyro properties independently to create a variety of cool effects.

Adding complications 1

Let’s take a look at how the Dimension property can be used to create watch faces.
When the Gear is laid flat with no tilt in any direction
(0º along both the X and Y axes), the dimension values of the watch face are at 100%.
(Case ①) Any movement downwards or to the right will incrementally increase this percentage up to a maximum of 200%.
Any movement upwards or to the left will decrease this percentage down to a minimum of 0%.

In the example above:
② If the Gear rotates -90º along the X axis or -90º along the Y axis, the object will shrink and disappear from the screen (0%).
③ If the Gear rotates 90º along the X axis or 90º along the Y axis, the object will double in size in that direction (200%).
④ If the Gear rotates along both the X and Y axes, the properties entered for both axes will be applied     simultaneously. If the Gear rotates in opposite directions along the X and Y axes, then the object will stretch vertically or horizontally.
⑤ If the Gear rotates in the same direction along the X and Y axes, then the object will increase or decrease in size.

Adding complications 1

Resize
Enlarge and shrink an object in relation to a point at its center. The point will remain in the same position as the object gets bigger or smaller.

Move
Change the position of an object using a point at its center. The value of the Position input field is based on the center of the object.

Rotation
Rotate an object based on a point at its center. Rotations will not change the position of the object.

Adding complications 1
Tip

When entering an exact value in the Gyro input field, it’s important to anticipate an object’s position and dimension changes.
Place the object to see how it looks and where it is located at -90 or +90. Then enter the difference value into the Gyro input field so that the object reaches the desired end position.

8. Dynamic watch faces (Gyro) : Adding depth to watch faces

Create dynamic watch faces with a sense of depth.

Adding complications 1

Step 1. Create a shadow
Use a tool like Photoshop or Sketch to make shadows for your objects.

Step 2. Place the shadow
Place the shadows above the background images, and below the watch components.

Step 3. Apply Gyro effects
Apply the following Gyro effects to the shadows.
In the Gyro X tab
– Inner pivot X: +5px to -5px.
In the Gyro Y tab
–Inner pivot Y: +5px to -5px.

8. Dynamic watch faces (Gyro) : Adding a level to watch faces

Use Gyro effects to create a watch face with integrated level functions.

Adding complications 1

Step 1. Create step-wise images

Use a tool like Photoshop or Sketch to create a series of
images that gradually decrease in size.

Step 2. Place the step-wise images

Place the images in order based on size, with the largest image at the bottom.

Adding complications 1

Step 3. Apply Gyro effects

Apply Gyro effects to the images.
The bottom-most image should have the smallest value, and the top-most image the largest. The images in-between should have gradually decreasing values.
For example, you can apply the following values: 14 px, 20 px, 30 px, 40 px.

The bottom-most image:

In the Gyro X tab – Inner pivot Y: +14 px to -14 px.
In the Gyro Y tab – Inner pivot X: +14 px to -14 px.

The top-most image:

In the Gyro X tab – Inner pivot Y: +40 px to -40 px.
In the Gyro Y tab – Inner pivot X: +40 px to -40 px.

8. Dynamic watch faces (Gyro) : Adding parallax effects to watch faces

Use Gyro effects to create a watch face with parallax effects.

Adding complications 1

Step 1. Create the images

Use a design tool like Photoshop or Sketch to create images for the effect: a background image and a number of PNG images to be placed on top.
For this example, we will create a watch face showing someone floating in a tube.

Step 2. Place the images

Place the background image at the bottom, then overlay the images for the tube shadow, waves, and person/tube in that order.

Adding complications 1

Step 3. Apply Gyro effects
Apply the following Gyro effects to the images for the tube shadow, waves, and person/tube.

Tube shadow:
In the Gyro X tab
– Inner pivot Y: +10 px to -10 px.
In the Gyro Y tab
– Inner pivot X: +15 px to -15 px.

Waves:
In the Gyro X tab
– Inner pivot Y: +10 px to -10 px.
In the Gyro Y tab
– Inner pivot X: +10 px to -10 px.

Person/tube :
In the Gyro X tab
– Inner pivot Y: -35 px to +35 px.
In the Gyro Y tab
– Inner pivot X: -40 px to +40 px.

Adding complications 1

For more details on producing dynamic Gyro effects, take a look at the sample watch faces included with GWD
1.5.2 or check out the Gyro presets in Complications > Effects.

9. Weather

Weather contents is provided by OpenWeatherMap

Adding complications 1
Adding complications 1

Step 1. Get an API key
Before you can add weather data to your watch face, you’ll need an API key.
Go to https://home.openweathermap.org/ and create an account to get a free API key.
You can also buy a paid plans.

Note

To use OpenWeatherMap API, you must follow the service provider’s Terms and Conditions.

Adding complications 1

Step 2. Enter your API key

In the Gear Watch Designer, go to Edit > Preferences > APIs
and enter your API key in the Weather input field.

Step 3. Apply the weather data

Once your API key is activated, you can use the weather data in your watch face.

Tip

The .gwd file itself doesn’t contain the API key, so sharing the .gwd file doesn’t guarantee that weather data will be displayed correctly.

10. Trial periods

Trial periods let users try out your watch face for free before they buy it.

Adding complications 1

*To add a free trial period to your watch face, you’ll need to change a few settings first.

Adding complications 1

To add a free trial period to your watch face, you’ll need to change a few settings first.

Adding complications 1

Step 1. Edit the In App Purchase settings
1. Click the In App Purchase settings button on the toolbar.
2. Select Enable In App Purchase.
3. Select what happens when a trial expires in the Options menu.
4. Set the duration of the trial period (at least 1 minute).
5. Click OK.

Step 2. Edit the IAP Test settings
Change the IAP Test mode to Commercial, then upload your watch face to Galaxy Apps.

* If you’re selling your watch face in Galaxy Apps, you’ll need to add some additional info about the trial period before it becomes available for sale. For more details, see the Uploading section.

11. Keyboard Shortcuts

Function ZONE Shorcut key Note
Menu bar Preview Resources Layer Conditional line
New project O Ctrl + N
Open project O Ctrl + O
Save O Ctrl + S Possible if changes occur
Save as O Ctrl + shift + S
Quit O Ctrl + W
Undo O Ctrl + Z
Redo O Ctrl + Y
Cut O O O O O Ctrl + X Possible when selecting objects
Copy O O O O O Ctrl + C Possible when selecting objects
Paste O Ctrl + V
Style Copy O Ctrl + Shift + C Possible when selecting objects
Style Paste O Ctrl + Shift + V Possible when selecting objects
Group O O O Ctrl + G Possible when selecting multi objects
Ungroup O O O Ctrl + shift + G Possible when selecting group
Show O O F6 Possible when selecting frame
Hide O O Delete Possible when selecting frame
Run O F8
Run on device O F9
Build O F10
Show Pivot O O Ctrl + P
Bring to front O Ctrl + shift + ] Possible when selecting objects
Bring forward O Ctrl + ] Possible when selecting objects
Send Backward O Ctrl + [ Possible when selecting objects
Send to back O Ctrl + shift + [ Possible when selecting objects
Align center O Ctrl + E
Zoom in O Ctrl + ‘+’ Same as Mouse wheel up
Zoom out O Ctrl + ‘-’ Same as Mouse wheel down
Fit in window O Ctrl + 0
Actual size (100%) O Ctrl + 1
Lock O Ctrl + L
Multiple select / deselect O Shift + component Click
Move O Drag Possible when selecting objects
copy O Alt + Drag Possible when selecting objects
Move vertically/horizontally O Shift + Drag Possible when selecting objects
Adjust size proportionally (img) O Possible when selecting objects edit point
Restrict movement to 45 degree angles O Possible when selecting Hand
Move object O Arrow key Possible when selecting objects
Multiple select show/hide pattern O Drag Possible when selecting frame