Zooper Widgetでテクスチャを使い、その下に影を付ける

|

1年前に同じようなことをやっているのですが、Zooper Widgetでテキストにテクスチャを使ってみたくなりました。つまり、時計などの文字に画像を貼り付けたいのです。

Zooper Widgetでテキストにグラデーションやテクスチャをかける | orefolder.net

完成体

150625-1

いきなりですが、これが完成した状態です。文字部分にグラデーションっぽい画像が貼り付けられています。グラデーションに見える部分は水玉っぽくなっています。
そして、その文字の影が下についています。これをやりたかったんです。

元となるテキストを作る

150625-2150625-3

テキスト部分は何のことはなく、普通に入力しているだけです。なんでもいいのですが、日付を表示してみました。

テクスチャを貼り付ける

150625-4

テキストの上にかぶせるように、模様として貼り付けたい画像を置きます。ちゃんと文字が隠れるようにしましょう。

150625-5

その画像の「Drawing Mode」を「XOR」にします。これでこの画像から、それまで描画してきたものの形が繰り抜かれます。

150625-6

そして、その画像モジュールをそのまま複製します。これでクリヌキが逆になります。どういうことなのかはわからなくてもいいです。XORを2回重ねると、こうなる。これを覚えればいいんです。

影を付けたい

150625-7

元のテキストにシャドウを付けたり、テキストの下に少し位置をずらしたテキストを置いても影は付いてくれません。影の部分にまでテクスチャが貼り付いてしまいます。

150625-8

そこで、テキストを上に乗せます。影なので色は黒です。若干角度も変化付けているので、右に行くほど本体と影が離れていきます。オシャレです。

150625-9

この影のほうのテキストで「Drawing Mode」を「Lighten」にします。こうすると重なった部分のうち明るいほうが上にきます。つまり最も暗い黒は重なった部分が表示されません。うまいこと影が下についたように見えます。

完成

150625-10

というわけで、4つのモジュールで「テクスチャ+その下の影」ができました。
今回は影が黒でやりました。逆に白い影にしたいときはDrawing ModeをDarkenにすればOKです。

テクスチャはうまく使えば面白いことができると思います。

150625-11

ほら、ミクさんが覗いているようにも見えますよね。自分が覗いているようなホーム画面にすることだってできる?

Random Posts

UMIDIGI A5 Proの詳細スペックがプレゼントキャンペーンとともに公開!5/21発売予定
私がXperia 1を購入して設定した項目や、使い始めるために入れたアプリ
Pixel 3の画面保護フィルムを実際の写真付きで紹介レビューしている記事まとめ
目指すはシンプル。【ホーム画面コンテスト2017】
5000円とお安いけど玄人向け?4K撮影可能なアクションカメラ「MUSON M10」レビュー
Tronsmart T6 レビュー:コンパクトながら360°全方位に広がる重低音が身体に響いてGood
日本初のAndroid搭載スマートフォンHT-03A発売から10周年
KLWP/KWGTでYahoo!天気の6時間ごとの降水確率を表示してみる
左右独立型イヤホン「Zoea」レビュー:接続安定性など基本性能を抑えBluetoothスピーカーとしても使える
AQUOS R2 Compact SH-M09 開封の儀:持ちやすいサイズ感とダブルノッチなコンパクトスマホ
Notification Animations:通知が来たときにポップアップ表示で教えてくれるアプリ
似てるけど違う!GoogleアプリとChromeの検索ウィジェットの違い
Caffeine:ディスプレイの自動消灯の時間を30分に切り替えるトグルスイッチ
少し詳しくなった気になれるスマートフォンのスペックの見かた
格安SIMの通信速度比較【2019年5月その1】初登場のLINEモバイルau回線は(まだ)UQモバイル並に速い