How To Import Your Artwork And Create A Watch Face Using Galaxy Watch Designer
Tony Morelan
Senior Developer Evangelist
Looking to create a custom watch face design for a Samsung Galaxy Watch? Here are a few tips to use when importing graphics from programs like Illustrator and Photoshop into Galaxy Watch Designer.
Designing Watch Graphics
A great watch face starts with thoughtfully-designed artwork. My preferred tools for creating eye-catching graphics are Illustrator and Photoshop. Programs like Illustrator are great for creating vector shapes that can then be brought into Photoshop for coloring and shading. These elements can be watch hands, buttons, icons, and even interactive graphics.
Adobe Illustrator
The watch face area on a Galaxy Watch is a circle with a diameter of 360 pixels. However, I like to start with an artboard that is 720 pixels so that I can create high-resolution marketing images of my watch face design. Bringing graphics into Galaxy Watch Designer at twice the size and later reducing them by 50% using the Properties window helps retain the detail. Keep in mind that high-resolution graphics increase the overall file size of your watch face app and may cause functionality issues if too large, so use this technique sparingly.
Adobe Photoshop
When you have finished designing your outline artwork in Illustrator, create a new RGB Photoshop document that is 720 pixels square. Copy the Illustrator shapes into your Photoshop document one at a time, placing them as Smart Objects. Utilizing the Smart Object feature within Photoshop easily lets you adjust the shape while you build your design.
Tip: It’s important that all text and numbers are legible. At 360 pixels, the size of the watch face area is smaller than how you typically view your design on a computer. Reduce the view size of your Photoshop design so that it matches the basic size of the watch and test the legibility of your text.
Once you have completed your design, save each of your graphics as separate transparent PNGs. For graphics that do not have fine detail like backgrounds, reduce the size by 50% before saving to keep your watch app’s file size down.
For watch hands, save each in the vertical position with the pivot point centered on a canvas that is 720 pixels tall. The image should be cropped to the width of the watch hand. This allows for easier control within Galaxy Watch Designer.
Building Your Custom Watch Face With Galaxy Watch Designer
Visit Galaxy Watch Designer Resources for an overview of Galaxy Watch Designer and download links.
Adding a background:
The first step to building a watch face is to import your background. To do this, click the Background button in the sidebar and select [Import Image]. Navigate your hard drive to select the background PNG file you saved from Photoshop.
To add watch hands:
- Click the Watch Hand button in the sidebar and select [Import Image]. Navigate your hard drive to import the hour watch hand.
- Reduce the size of the watch hand to 50% by changing the dimensions in the Properties. When importing a watch hand, the default sync is [Hour in Day].
- When importing the minute hand and seconds hand, be sure to change the [Sync with] setting in the [Rotation Properties] section of the Properties window to [Minute in hour] and [Second in Minute], respectively.
- Center all watch hands to the background using the Align Center button in the top toolbar area.
Adding a digital clock and complications:
- To add a digital clock, click the Digital Clock button in the sidebar. A digital clock displaying hours : minutes : seconds will be centered on your watch face workspace area.
- Edit the ICU Format in the Type section of the Properties window to change what is displayed by the digital clock. I changed the HH to hh so that the hours display in 12-hour format rather than 24-hour. I deleted the colon that shows between hours and minutes, and added spaces between the hh and mm to align the digits within the shapes of my design. For this design, I deleted the colon between minutes and seconds along with the ss so that only the current hour and minutes show.
To include the date I added two digital clocks, one for the month and the other for the numeric day. For the month I changed the ICU Format to MMM so that it would be abbreviated, and for the numeric day I changed the ICU Format to d.
I added the text component [Battery %] to display battery power. Then I deleted the last percent sign for Display Type in the [Data] section of the Properties window. For the battery icon I made a transparent PNG and placed it below the battery percentage.
Photoshop and Illustrator are just a few of the graphics programs you can use to design. As long as you can save your artwork as a PNG with a transparent background, you’ll be able to create amazing watch face designs in Galaxy Watch Designer. Visit Galaxy Watch Designer Resources for an overview of Galaxy Watch Designer and download links.
