〈FES WATCH U〉自作デザインの作り方

先日、FES WATCH Uを購入しました。世界のデザイナーが公開しているオシャレなデザインだけでなく、自分で腕時計のデザインを自作できることもウリの製品なのですが、使い始めてすぐにある課題に直面。

 

デザインを自作しようと思っても、公式アプリが使いにくい・・

 

本記事では同じ悩みを抱えた人のために、デザインの自作方法をお伝えします。

 

 

なぜ公式アプリは使いにくいのか?

下は公式アプリのデザイン自作画面です。

 

f:id:otsdarva28:20181012000200p:plain

 

背景に表示された自分の画像をピンチイン/アウトで操作し、時計の枠に合うようにうまく収めていくのですが、一番使いづらいと感じたのは

「あらかじめ枠に合う1枚の画像を用意しておく必要がある」点でした。

文字盤の部分とベルトの部分で別のものを表示したい、等々あると思うのですが、公式アプリはこの「1枚の画像」を作るにあたっての助けをいっさい提供していません。

そこで本記事では、私なりの「良さげな画像を用意する」方法をシェアしてみます。

 

事前準備

ここからは、基本的にデスクトップPCでの作業を想定しての記事となります。

しかし、スマートフォン上でもほぼ同じ作業で良さげな画像を用意できるアプリがありますので、そちらもご紹介しますね。

まず、レイヤーを扱える画像編集アプリをインストールしておきます。

おすすめはこちら。

・デスクトップPCを使っている人:GIMP

www.gimp.org

スマートフォンを使っている人:Photo Layers

play.google.com

合成写真 PhotoLayers

合成写真 PhotoLayers

  • handyCloset Inc.
  • 写真/ビデオ
  • 無料

 

また、切り抜きアプリも入れておくとデザインを作る際に便利です。

・デスクトップPCを使っている人:手軽に透明

https://www.officedaytime.com/toumei/

GIMPの切り抜き機能は使いにくいと感じたので、、)

スマートフォンを使っている人:上のアプリにこの機能も入っていますが、単体で使いたい場合はこちら

play.google.com

 

次に、下の画像をダウンロードしておいてください。

f:id:otsdarva28:20181012001810p:plain

これで事前準備は完了です。

自作したいデザインの素材を用意する

ここが本番という感じですが、最終的に作りたいデザインを思い浮かべながら素材を用意していきます。

背景

主にベルト部分に表示されるものです。自分の好みとセンスに合わせて良さげな背景素材をダウンロードします。

おすすめは以下のような背景素材配布サイトから適当に拝借してくることです。

 

背景デザインに使える継ぎ目のないオシャレなストライプ柄パターン、400個あつめました。 - PhotoshopVIP

テクスチャ、パターンがなんでも揃う無料オールインワン素材集60個まとめ - PhotoshopVIP

本職のデザイナーさんが作った良さげなパターンが数多く置いてあります。

Photoshopと書いてありますが別にフォトショを持っていなくても使えます。

 

【無料素材】シームレスパターン|ダウンロードサイト|イラストレーター フォトショップデータ配布

シンプルなものですが、大体のパターンが網羅されています。

 

注意点として、素材によっては用途が制限されているものもありますので、特に自分の作ったデザインをネットで公開したい!といった場合は注意しましょう。

前景

主に文字盤部分に表示されるものです。好きに用意しましょう笑。

イラストレーターさんがネットに公開しているイラスト等を落としてくるのがおすすめです。

勝手に使っていいの?という部分が気になるかもしれませんが、自分のためだけに使うくらいであれば著作権法上の私的使用にあたりますので特に問題はありません。

落としてきたイラストを元に作成したデザインを「みんな使っていいよ!」という感じで公開するのはアウト、「こんなデザイン作ってみた!」という感じで腕時計の写真をアップするのはグレーまたはアウトということになっています。

詳しく押さえておきたいかたはこちら。

私的使用の範囲について - 弁護士ドットコム

著作権の私的利用はどこまでですか? - インターネットなどで公... - Yahoo!知恵袋

文字盤(文字)

デジタル表示の場合は必要ありませんが、アナログ表示の場合はあったほうがよいかもしれません。

FES WATCH Uの場合は、自作で使えるアナログ表示はデフォルトで文字盤がなく短針・長針しか付いていないシンプルなものなので、「時間を知る」という用途で使う場合は超使いづらいです。

が、ここに関してはそれっぽい素材集はあまりありませんでした。

手軽に手に入れたい場合は、「文字盤 素材」等で検索して良さげな素材を引っ張ってくるのがよいでしょう。

素材の透過処理

用意した素材を合成して1枚の画像にするのですが、その前に落としてきた素材に多少手を加えて合成しやすくしておきます(必要な場合)。

上で紹介した切り抜きアプリを使って前景や文字盤の透過処理を行っておきましょう。

透過処理とは、落としてきたイラストの「使いたい部分」だけを残し、他は切り抜いて透明にしてしまうという作業のことです。

(直感的に使えるアプリなので使い方は特に説明しません)

これで、

・背景

・前景・文字盤(透過処理されたもの)

が揃ったと思います。これらを合成して1枚の画像にすれば、デザインはほぼ完成です。

素材の合成→1枚の画像に

揃った素材を重ねていく作業です。

GIMPを使っている場合はGIMPのウィンドウに素材をドラッグ&ドロップしていけば勝手に重なっていきます。

ここで、「事前準備」でダウンロードした時計の枠の画像が非常に便利です。

この枠を参考にして、いい感じで素材を重ねてください。

うまくいっていれば、以下のような感じになっていると思います。

f:id:otsdarva28:20181012011906p:plain

 

できたと思ったら、時計の枠の画像を消して(時計の枠のレイヤーに付いている目のボタンを押すと消えます)、「名前を付けてエクスポート」で画像は完成です。

あとはこれをスマホに移して使いましょう。

 

 

編集ソフトの使い方関連をはしょった説明になってしまったのですが、以上です!

良さげなデザインを作って楽しみましょう。