The Artist's Guide to Making an Apple Watch App

Name: The Artist's Guide to Making an Apple Watch App
Rating: 4.5 (13 reviews)

Learn how to create an Apple Watch app , starting with creating the image assets and finishing in Xcode.

Created byJustin Dike

Last updated 2/2017

English

English [Auto],

What you'll learn

Create vector based art in Flash to export to Xcode
Import assets to Xcode specifically setup for an Apple Watch app
Design any style of watch face using static or animated images
Set specific images based on the current time (for example, the hour hand to 12)
Get the current time in Swift and save variables for the hour, minute, second, day of week, month, day.
Save NSUserDefaults that are shared between the Watch app and companion iPhone app
Create and program a similar version of the Watch App clock face on the companion iPhone app
Work with the Watch Kit interface controller, groups, images, and labels
Programmably play sounds and set labels on either the Watch app or iPhone app
Change screens (interface controllers) on the Watch app.
Create a complete Watch app that tells time in style!

Course content

6 sections • 40 lectures • 5h 23m total length

Download the Course Assets0:11

Introduction to Adobe Flash1:45
Explore building an Apple Watch app by designing watch assets in Adobe Flash, exporting minute, hour, and second hands, and creating animated, vector-based interfaces ready for store submission.
How Elements are Arranged on the Watch6:15
Use layered groups to lay out watch elements, stack images and labels, and export assets at the same size for a consistent watch face with hands in Xcode.
Drawing Precise Vector-Based Minute Markers9:34
Create precise vector minute markers for an Apple Watch app by building a centered circle, converting to a symbol, and placing lines every six degrees for export to Xcode.
Adding Hour Markers9:47
Drawing the Hour Hand9:27
Design a reusable watch face by creating a vector gear and hour hand as symbols, storing them in the library, and rotating around a pivot with keyframes across 12 positions.
Adding and Animating the Second and Minute7:16
Adding the Month, Day, Weekday and Adjusting Multiple Frames13:35
Animating Gears and Changing Fonts Across Multiple Frames17:34
Animate gears across multiple frames by mapping each weekday and month to specific frames, export the sequence for the watch face, and adjust fonts with masking to control visibility.
Finishing Touches and Exporting15:32
Exporting at 144dpi or 72dpi?1:57
Copying Assets into Xcode and Wrap Up5:30

Xcode Introduction3:28
Learn to start with Xcode for building an Apple Watch app, manage watch and iPhone assets, and adapt a single template to create responsive watch faces and interfaces quickly.
Installing Xcode2:20
Watch App Initial Setup5:57
Renaming the Bundle ID3:49
Rename the bundle identifier across the watch template, watch app, and extension, update the info.plist entries, and align all targets for the store while locating references with search.
Testing on the Simulator3:10
Test and build iPhone and Apple Watch apps in the simulator, switch between devices like iPhone 6 and 42 mm or 38 mm watches, and run to observe cross-device behavior.
Managing Your Workspace2:43
Learn to manage your workspace on a smaller computer by using shortcuts like command+0 and command+1 to hide the navigator, utilities, and assistant editor, keeping the storyboard and code visible.
Layout Basics7:05
Set up Apple Watch layouts by using groups, storyboards, and the object library, configuring 100 percent width and height, stacking groups to craft horizontal or vertical layouts, and centering images.
Adding Groups with Background Images to the Storyboard11:08
Learn to import watch images into the assets catalog, assign background groups in the storyboard, and configure an animated gear and clockface with looping frames.
Connecting Outlets from the Swift File8:02
Getting the Time13:10
Setting the Hour, Minute, and Second Hand Images11:22
Setting the Month and Day Images9:15
Getting the Day of the Week10:26
Deactivate the Timer1:42

Using Auto Layout in the iPhone App Storyboard11:47
Import image assets into the image catalog and lay them out in the iPhone storyboard using auto layout with horizontal and vertical centering, then preview across devices.
Animating the UIImageView10:41
Reusing our Time Code6:12
Setting up the Segmented Buttons10:05
Changing Faces4:56
AppGroups and NSUserDefaults to Communicate Between Devices18:22
Wrapping Up the iPhone App0:47

Adding Audio7:11
Using Labels to Show Time and Adding Custom Fonts9:09
Paging to Different Screens on the Watch15:37
Programmably Opening Other Interface Controllers on the Watch3:49
Conclusion4:33
Wrap up this design-heavy series by exploring creative watch faces and exporting image assets. Add animation or video overlays and background options to boost value in the Apple Watch marketplace.
Update - Submitting the Watch-extended App to Apple Now that we can!12:09
I describe some of the issues I had submitting the Watch extended app to Apple. You might not run into any of them, but in case you do, here's some tips.

Requirements

Any recent Mac
Xcode 6.2
A copy of Adobe Flash (if they want to follow along with the art creation section)

Description

Create the Art

Join Justin Dike, as he teaches how to make a complete Apple Watch app from scratch. Seriously. We start with nothing, beginning in Flash with a blank scene. The course first teaches how to make a multi-layered vector clock face, complete with precise hour, minute and second hands, turning gears, the day of the week, the month and day of the month. This first section of the course essentially builds a template in Flash capable of producing hundreds of watch faces. We’ll talk about exporting images and animation sequences from the finished Flash file, and making mass changes to the file (for example, how to change the font of a label on every frame, or scale objects on multiple frames). The best part is you can make any style with this template, you are not just limited to watches with an analog clock face.

The Program It!

In this session, we will build an Apple Watch app, which is technically an extension of an iPhone app. So first we will cover everything it takes to build the watch app, then move onto programming the companion app for the iPhone. The finished Xcode project, or template, will build an iPhone app that gives users the option to choose and save a preferred face variation on the Apple Watch. So you could sell an app that has multiple clock faces, adding extra value to your buyer’s purchase.

Both parts of this session discuss importing the images exported from the first session, layering them in the Apple Watch interface controller / iPhone view controller, programming each element, and working with NSUserDefaults to save preferences for the preferred watch variation. We will also look at some optional add-ons, such as sounds, programming labels, swiping through multiple watch screens and opening new views on the watch.

The course also discusses some essentials for first-time app developers. Topics include: generating provisioning profiles, adding / changing bundle identifiers, adding the app listing to iTunes connect, submitting the app to Apple, and everything else we could think of to make working with Xcode for the first time as easy as possible.

Who this course is for:

Artists, animators or anyone regardless of previous experience with Xcode.
Past Xcode users that want to learn the basics of creating a Watch App

The Artist's Guide to Making an Apple Watch App

What you'll learn

Explore related topics

Course content

Course Assets1 lecture • 1min

Creating the Art in Flash11 lectures • 1hr 38min

Creating the Apple Watch in Xcode14 lectures • 1hr 34min

Creating the Companion App for the iPhone7 lectures • 1hr 3min

Duplicating the Template and Preparing for Submission to Apple1 lecture • 16min

Adding More to the Xcode Template6 lectures • 52min

Requirements

Description

Who this course is for: