2017年6月2日

Apple Watch用新watchface作った

前にPebble用に作ったwatchfaceをApple Watch向けに作り直してみました。センターに縦に数字が並び、上から、時、分、秒、月、日を表示しています。下の画像で9時25分08秒、6月2日です。左右にある縦に並んだ赤いLED風のものは下から上に光る様なアニメーションをしています。


下が元ネタのPebbleのwatchface、DIGIGRADEです。(こちらでまだ販売しています。なんかもうPebble懐かしいです。。)で、Pebbleの時はこの様に時間と月日以外にバッテリー残量とBluetooth接続状態表示をしていたのですが、電池はほぼ1日しか持たず、iPhoneとの接続切れのほとんど無いApple Watchの場合はそれらはほぼ無意味な表示なのでやめ、また文字盤左右で上下に動く針によるレトログラードなアナログ時刻表示も、より動的な表示にしたくて、秒のグラフィカルな表示に変更しました。ずっとアニメーションしてるwatchfaceは画面が常時点灯してるPebbleではさすがに電池の消費が早いので自粛していたのですが、Apple Watchの場合は手首を振った時だけ点灯、数秒後に自動消灯するので、常時アニメにしてもそう電池の持ちは変わらないかと思われますので、Pebbleではやれなかった常時アニメの表示を入れました。


ということで、以下制作手順です。まずはどんなにするか、iPhoneのお絵かきアプリSketches Proでざっくり指で描き描き。Pebbleバージョンの細かい表示をやめる分、時刻表示は見やすくなりそうだけど大味になりそうなのをどうするかなぁ、とか、赤の差し色はどこかに欲しいなぁ、とか、考えながら指で描き描き塗り塗り。


で、それをApple Watchに飛ばして見てみる、の図。まぁこんな感じで作ってみよう、と決定。


ざっくりイメージが固まったら図面書きソフトVellum-Nitrogenで図面化。


それをeps書き出しをしてイラレで色つけ。バランスを見ながらイラレと図面書きソフトを行ったり来たりを繰り返します。


数字のフォントも新規に作りました。デジボーグのフォントをベースにした幅広な7セグです。


で、イラレで完成させたらをれをフォトショに持っていきます。フォトショではドロップシャドウ付けとか、最終的な色調の調整とか、アニメの検討を行います。


参考までにpebble時代のフォトショ作業の図。ほとんど根性の1ピクセル単位のドット打ちですね。(それはそれで楽しいですが。)


で、アニメの画像10枚をpng書き出しして、Xcodeに持っていき、フォントも読み込ませ、watchfaceとしてビルド。ベタなグラフィックデザインなwatchfaceの場合、ドロップシャドウが意外と効きます。


アニメはこの様に動きます。動画を撮りましたのでどうぞ。アニメは中央から広がる様にするとか、音のレベルメーター風にしても良いかも。


腕に巻いた状態。文字盤の実際の見た感じはもっとシアンと赤の彩度が高い感じです。


最後にもう一度最初にアップした画像。カッコヨイー


以上、いつかAppleがwatchfaceアプリを解放することを夢見つつ作った、オリジナルデザインのwatchfaceのアップでした。