OREFOLDER

艦これのアイコンっぽいGlaejaスキンの作り方

艦これ、なぜか始めてます。
あまりにみんながやっているので、あーこりゃ艦これホーム来ちゃうな、というのもあって。
130827-1
なのです。

というか画面サイズが800×400なので、スマホにいろいろ移植するには小さいですね。
艦これホームっぽくするにはどうしたらいいのか?というと特徴がいくつかあります。

まずは「艦娘」これの単体画像データって取り出せないですかねー?
電だけでもいいのですが。

で、あとは太明朝体フォント。これですね。そしてこれを使った母港画面のアイコン。これが気に入りました。

これです。

このアイコン画像をGlaejaで作ってみましょう。

  • 本記事は広告およびアフィリエイトプログラムによる収益を得ています。

下準備

とりあえずGlaejaの1×1サイズを置いて、ホームアプリで行列を調節したりして、だいたい正方形に近い形にしておくと、あとで画像保存→アイコン化に役立つと思います。

で、とりあえず「オプション設定」から「キャンパスのサイズ」を「フレームに合わせる」にしました。これは私の基本設定です。

歯車

アイコンの下地になっている歯車っぽい部分です。
これはサークルと多角形(破線)を組み合わせれば作れないことも無さそうですが、面倒です。
というわけでフォント化してしまいました。

ちょっとズルいですかね?

で、中部分の塗りつぶし円は「多角形」で描いています。フォントで作った歯車よりも下のレイヤーに置いています。

これで下地は完了…ではありません。
本物は下半分がちょっと暗い色になっています。これを実現します。

まずは下半分を覆うように「バー」を配置します。わかりやすいように赤くしていますが、実際はけっこう透過した黒です。
それを「転送モード」で「対象部分にだけ合成」の設定を挟むと、歯車部分にのみ、薄い黒がかかります。

これで歯車部分の完成です。

文字入れ

歯車のようなアイコンはGlaicon2を使っています。適当に手元にあったフォントを使っただけなので、他のアイコンフォントを使えば、もっといろいろできると思います。


「設定」の部分はリッチテキストを使っています。字間の調整を行ったり、「定」の文字を「高さオフセット」で下げたりしています。

また、今回のフォントには小塚明朝のHeavyを使っています。が、微妙に違うっぽいです。他のフォントも幾つか試してみましたが、コレというものが見つかりませんでした。まぁ似たフォントならどれでもいいと思います。
小塚明朝はAdobe Readerを入れると手に入るというようなことがウェブのどっかに書かれていたので、入手しやすいかもしれません。

ただ、どうもそのまま使用するのではなく、微妙に横幅が狭くなっているようです。
そこでリッチテキストで描かれたレイヤーを「変形と移動」を使って横幅を狭めます。「マトリクス」「左上」を0.9にすると、ちょっとだけ狭まります。

完成

そんなわけで完成です。

大きい方も、歯車が違うだけでやっていることは同じです。
あとはこれをGlaejaのアプリ起動からのメニュー「ウィジェットリスト」→長押し→「キャプチャーの保存」で画像化し、それをホームアプリなどでアイコンとして使うこともできます。
そのままGlaejaでまた使ってもいいですね。(どうせ動かない部分なので、そのままよりは画像化して使ったほうがいろいろ便利です。)

ダウンロード

一応、今回のスキンは以下からダウンロードできます。Glaicon2フォントも同梱しています。小塚明朝は入ってません。適当に自分で入れるか、似たフォントを入れてください。

knclスキン (18.1KB)

まとめ

でー…実際に私が艦これホームを作るかというと、ちょっと望み薄です…。

追記

普通に画像でアイコン作ってみたのでちょっと置いときますね。なんかイマイチだったけど。

モバイルバージョンを終了