スキン・テーマ

Glaejaスキン : SHIELD ENERGY

IS 〈インフィニット・ストラトス〉というハーレム系アニメがあります。すいません、まだ見たことないです。それに出てくるというシールドエナジーゲージというものに似せたGlaejaスキンを作ってみました。

本日のネタ元

これを見て、作ってみようと思いました。

とりあえずこんなのが出てくるらしい。
140609-1
おーカッコイイ…。

完成図

というわけで、これ…そのままはできなかったので、っぽいものを作ってみました。

140609-2

なんかいろいろ違うのはわかっているんですが、なんとなくやりたかった方向はわかってもらえるでしょうか?

とりあえず、何か近未来風の何かを作りたかったのと、円を歪めたかったのです。

バッテリー残量で色が変化

140609-7
バッテリー残量によってサークルの色が変わっていきます。

スキンができるまで

スキンを作っていく過程について説明しようと思います。

140609-3

まず主に「サークル」を使って多重円とバッテリーサークルを作ります。バッテリーサークルは立体感ぽいものを作りたかったので、下に少しずらして薄くしたものと、2つのサークルがあります。
内側の模様は「テクスチャ」です。

140609-4

次に「色と透明度」を使って、これらのサークルなどがバッテリー残量の減りとともに色が変化していくようにします。これは「色と透明度」のRGBそれぞれに二次関数的なものを入れればできます。

140609-5

さらに、「トリガー」を使って、普段は隠れているけど一定の条件(バッテリー10%以下)で表示されるEMPTYボードを作ります。

140609-6

最後に「変形と移動」そして「台形変数」を使って円やテキストを歪めていきます。ここの歪め方が上手ければ、もっと立体的に見えるようにもできると思います。

何はともあれ、これで完成です。こうして考えると簡単ですね。

ダウンロード

このスキンは以下からダウンロードできます。良かったら中身を覗いてみてください。フォントは入ってませんので、好きなフォントに変えて使ってください。

DOWNLOAD
http://ux.getuploader.com/orefolder/download/167/shield-energy.zip

※今回は細いサークルなどをそのままレイヤーで残していますが、最終的にはこのあたりの変化のないものは画像化してしまったほうが軽くなりますし、レイヤーも少なくなって見やすいと思います。

Random Posts

Rakuten Mini、正しい技適番号はアップデートで対応、それまでは画像をダウンロードして使用
有線 & Bluetooth接続両対応なサウンドバー「TaoTronics TT-SK028」 レビュー、PCのオーディオ環境を改善
gooSimseller、平成最後の年末感謝セールを開催!最大20100円オフの大特価セール!
LINEモバイル、2019年上半期よりau回線開始を予告!新キャンペーン「らき★ふぇす」も開始
2019年買ってよかった!印象的なガジェット(スマホ以外)
トーンモバイル、AIが不適切画像を規制し子供の自画撮り被害を防ぐスマホ「TONE e20」を2/20発売
Galaxy A7が4週連続の1位!週間SIMフリースマホ実売TOP10【BCNランキング 7/6~7/12】
セブンイレブンにてAnker製品の販売決定!ほか、2020年10月19日の気になるスマホ関係ニュース
Cubot Note 20 Pro (6GB + 128GB ) が8月24日発売!クーポン使って99.99ドルから!【PR】
ラクマ公式で中古スマホ買って楽天モバイル契約で5000ポイントもらえる!ラクマと楽天モバイルがコラボ!
One Mix 2Sにスペック向上した新しいPlatinumバージョンが登場!クーポンあり
OPPO R17Proを「OPPOお試し体験サービス」で2週間お借りします
au、LG isai V30+ LGV35にAndroid 9 PieへのOSアップデートを8/5より配信開始
GaN採用でコンパクト・ Type-C×2 & USB-A充電器「LilNob CIO-G65W2C1A」 レビュー、MacBook Proも充電可能
OPPO、10倍ハイブリットズーム搭載のハイエンドスマホReno 10x Zoomを発表!7/12発売、9万9880円