注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

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

使用する色について

#000000 #0000FF #00FF00 #FF0000 #00FFFF #FF00FF #FFFF00 #FFFFFF の色限定で作るとより綺麗です。

AMAZFIT Bip 自作 ウォッチフェイス

上記以外の色でも大丈夫。(画像を参考下さい)ただしライトがオンになった状態だと、多少ザラザラ感が出てきます。砂絵みたいな感じ。

スポンサーリンク

パーツ画像を簡単に作成出来ます

画像編集のソフト不要で、数字や、曜日画像がダウンロードできます。ウォッチフェイスだけじゃなく、色々な用途に使えそう。
Image creatorにアクセスします。

AMAZFIT Bip 自作 ウォッチフェイス

ラジオボタンをいじると、数字のプレビュー画面が変わるので好みの表示を見つけて下さい。

上の方では、Font size(フォントの大きさ)、Height(画像の高さ)、Width(画像の幅)などが設定できます。

カスタムフォントの利用

AMAZFIT Bip 自作 ウォッチフェイス

Font file下のフィールドをクリック フォントファイルを読み込みます。

AMAZFIT Bip 自作 ウォッチフェイス

FontCustom fontを選択。※反映しないフォントもありました。

Google fonts

Google fonts から、沢山のフォントがダウンロードできます。カスタムフォントにいかがですか?

AMAZFIT Bip 自作 ウォッチフェイス

Numeralsを選択して数字表示にする 好きなフォントをクリック vertical_align_bottomDownload familyをクリックしてダウンロード。

文字も出来るよ

AMAZFIT Bip 自作 ウォッチフェイス

Textに、文字を入力すれば、文字の画像も出来ます。複数の場合はカンマで区切っって下さい。

上記の場合は、と  が作成されます。

画像のダウンロード

をクリック。

First image indexを0001で設定しても、画像名は0001.png~0010.pngではなく、1.png~10.pngになります。

どの名前で保存するか分からない場合

AMAZFIT Bip 自作 ウォッチフェイス

時計と歩数と心拍数の画像が似ていて分からない時ってありますよね。
「時計」の画像だけ直したいのに、何番なの?みたいな。

そんな時は Watchface EditorからImageとJSONを読み込んで、EDITのコードを見て下さい。

AMAZFIT Bip 自作 ウォッチフェイス

ImageIndexの右側の数字が画像名です。
画像の場合だと、時間の十の位の画像は「1」から始まっています。
画像名は4桁の数字なので、0001.png~0010.pngの範囲の画像が使われています。

背景

背景は残念ながら自動では出来ないので、176px四方のPNG画像を作ってください。

商品のリンクです

2020年2月現在、Yahoo!ショッピングが安かった!(8,700円)

このページで説明している「Amazfit Bip」のリンクです。
0