Amazfit Bip S Liteの文字盤を作る(1)パーツ画像作成編

Amazfit Bip S Liteのオリジナル文字盤(ウォッチフェイス)を自分で作った記事です。

工程が長い為記事を2回に分け「背景画像・時刻画像・曜日画像」を作成する手順のみ記載しています。

末吉

こんな画像を作るよ。
Amazfit Bip S Liteの文字盤を作る(1)パーツ画像作成編

Amazfit Bipってどんな時計?

この記事を見ているって事は、Amazfit Bipを既に持ってますよね?!でも(アフィリエイトしたくて)説明します。

🔗Amazfit Bip(公式リンク)とはXiaomiグループ製品専門店 TJC株式会社製のスマートウォッチです。
Amazfit Bip Sだと電池の持ちがなんと約一か月もあり、歩数・心拍数・LINEやメールや電話の通知等スマートウォッチとしての機能も十分。なにより安価で(3,000円)超おススメ

作るのが面倒な場合

面倒くさそう~って方は、 有志が作ってくれたウォッチフェイスを利用しちゃいましょう。個人作のウォッチフェイスが豊富にあり簡単に変えられます。

\ 記事にしています。/

関連記事

スマートウォッチである「Amazfit Bip S Lite」の文字盤を変更する記事です。 [chat comment="この機種は「ユーザーが作った」ウォッチフェイスが豊富です。折角なので色々文字盤を変えて楽しもう!😋" name[…]

背景用の画像を作成

背景用の画像を作成します。

ヨシ

背景を変えるだけでもウォッチフェイスの印象が変わりますよね!

画像形式

png形式で作成。

画像サイズ

Amazfit Bipの種類により解像度が異なります。私の所有する「 S Lite」は解像度 176 x 176なので、176pxの正方形で背景用画像を作成します。

画像名

画像名は数字にします。0000.pngにしている人が多い為、私もそうしています。

利用可能な色

次の記事で利用するサイト🔗Watchface Editorでは、bipで利用可能な色しとて8色が紹介されています。(bip Uは表示色が多いので、もっとあると思います)

Amazfit Bip S Liteの文字盤を作る
出典:Watchface Editor

利用可能な色以外

利用可能な8色以外では表示が真っ黒に!・・・なんて事は無く、この画像の様に表示が粗くなるだけです。

これはこれでレロトちっくで味があって可愛い。

注意点

デジタル表示の場合、背景に:(コロン)を忘れずに入れましょう。

Amazfit Bip S Liteの文字盤を作る

数字や曜日の画像を作成

数字や曜日などの画像は、🔗Image creator と言うサイトで簡単に作成できます。

フィールドに数字を入れたりラジオボタンをクリックすると、下にあるプレビュー画面が都度変わり、出来上がりが確認できるという分かりやすいサイトです。

画像の編集が終わったらDOWNLOADボタンでダウンロードします。

Amazfit Bip S Liteの文字盤を作る

末吉

※特殊な「Font file」「First image index」「Text」については、下で解説します。

Font file

Font fileのフィールドから好みのフォントを設定する事ができます。

Amazfit bip 自作でウォッチフェイス(パーツ画像作成編)
Windowsの場合、Fontsフォルダにアクセスすると上記のエラーがでる為、デスクトップ等に設定するフォントファイルを置いて下さい。
STEP1
「Font file」のフィールドをクリック
STEP2
ウィンドウが出てくるので、フォントファイルを選んで「開く」をクリック
STEP3
「Custom font」横のラジオボタンをクリック
プレビュー画面にフォントが適用されます

動画にしました。

First image index

First image indexのフィールドでダウンロード名を指定できます。

数字の場合

数字画像の時に「1000」にすると「0~9の順」で、0の画像は1000.png、1の画像は1001.png…と画像名が割り振られます。

Amazfit bip 自作でウォッチフェイス(パーツ画像作成編)
背景・数字・曜日画像の名前が被らないようにするのもポイント。

Text

数字画像以外の作成は、Textのフィールドを使用します。

複数作成の場合、カンマでそれぞれ区切ります。曜日の場合だと「MON,TUE,WED,THU,FRI,SAT,SUN」や「月,火,水,木,金,土,日」など月曜始まりにして下さい。

下記はFirst image indexのフィールド「2000」、Textのフィールドで「MON,TUE,WED,THU,FRI,SAT,SUN」を指定してダウンロードした画像です。

Amazfit bip 自作でウォッチフェイス(パーツ画像作成編)

デザインを確認

画像編集ソフトで背景画像、数字画像、曜日画像を配置してデザインの確認をします。修正したい部分があれば都度工程をやり直します。

Amazfit bip 自作でウォッチフェイス(パーツ画像作成編)

あとがき

ヨシ

おつかれさまでした。手順は以上になります。
作った画像をウォッチフェイスとして反映させる手順は別記事です。
次の工程

Amazfit Bip S Liteのオリジナル文字盤(ウォッチフェイス)を自分で作る記事です。 プログラミングの知識は必要無く、WindowsとAndroid携帯があればOKです。 ウォッチフェイスの変更はご自身の責任の[…]

腕時計バンド

おすすめのAmazfit Bip S Liteに合う腕時計バンドです。
3本セットだし、ベルトの端が内側に隠せるし、純正より柔らかく付け心地が良いです。

過去のサイトの記事

👇の記事は2022年夏に閉鎖予定の私の別サイトの記事をリライトしたものです。
自分で考えたのに自分でも分かり辛いです💧(Googleの重複コンテンツ対策で仕方なく載せています)

🔗AMAZFIT Bip 自作 ウォッチフェイス⌚楽々画像作成できます。

🔗AMAZFIT Bip 自作 ウォッチフェイス カスタム文字盤 (その1)

🔗AMAZFIT Bip 自作 ウォッチフェイス⌚カスタム文字盤 (その2)

🔗AMAZFIT Bipをカスタマイズ!ウォッチフェイス⌚の変更

🔗AMAZFIT Bip 自作 ウォッチフェイス⌚カスタム文字盤を作る!小技集