未分類チュートリアル

ちょっとだけ質感を上げるテクニック

GlaejaとかZooperとかでバーや図形を描くことができますが、ちょっとだけ弄ってその質感をあげるテクニックです。
別にウィジェットなどに限らず、グラフィックソフトで同じことをやってもいいようなことですが。

とりあえずGlaejaでやりますが、考え方の問題なので、Zooperとかでも同じようなことはできると思います。

●の質感を上げる

131110-1
まずは適当に多角形レイヤーで●を描きます。
これがデフォルトの状態、ということですね。

131110-2
この●にグラデーションをかけてみます。
真上を#FFFFFF、真下を#000000とすると白から黒へのグラデーションとなります。
なんとなく立体感はありますが、野暮ったいというか、ダサいです。

131110-3

131110-4
#F0F0F0から#D8D8D8という、微妙な変化にしてみます。
これだとパッと見は白っぽいのですが、単色ベタ塗りに比べると、ほんのちょっと質感が上がります。

並べて比べるとどうでしょうか?ほんの僅かな差ですが、違いがわかると思います。

131110-5
これに更にシャドウを付けてみます。
シャドウはその濃さや広がり具合によって効果が変わります。
右上のように、影の色が濃いと壁紙からの浮き上がりも高く感じ、●のエッジが鋭く感じられます。

一方右下のように色を薄く(透明度を上げる)するとふんわりと、柔らかい印象になります。

応用でリングを作る

131110-6
ちょっとした応用です。
今度はもう1つ●を描きます。こちらは一回り小さくします。

131110-7
そして、グラデーションの方向を大きな●とは逆にします。
こうすると、●の中で中央部分が凹んで見えるようになります。

131110-8
グラデーション方向は垂直じゃなくても、少し斜めに傾けてもOKです。
光源がどこにあるのかを考えて、ホーム画面全体の影の方向を合わせるといいでしょう。

更に応用

131110-9
更にもう1つ小さな●を書き、それを転送モードで抜くとリングのようになります。
…とは言っても、これなら多角形で●を描かなくてもサークル2つにしたほうがいいと思いますが…。
サークル2つにしても、同じようにグラデーションをかければ、同じようにできます。

中にハンドなどを置いて、時計にしてもいいですね。

131110-10
僅かなグラデーションとシャドウを使って質感を上げる方法はテキストなどでも使えます。
縮小されたものをパッと見ただけでは違いは気にならないかもしれませんが、こうしてちょっとだけ手を入れると完成度も満足度も上がると思いますよ。

特に、壁紙がちゃんと質感のあるものを使う場合は、こういった手間をかけずにベタのままだと浮いてしまいます。そういうときは今回のようなテクニックで「少しだけ」グラデーションをかけたりするといいですよ。あんまり派手にやると、野暮ったくなってまた浮いてしまいますから注意です。

Random Posts

Google日本語入力はGboardに統合されるので乗り換えを、という通知が出ている模様
Rakuten Miniは製造番号によって対応周波数帯が違う3種類が存在!最新版はBand 1に非対応なので注意!
ドコモが自社サービスのアフィリエイトを開始!ドコモのサービスを紹介して報酬を獲得
文字拡大メモ:スライダーで文字の大きさをビヨンビヨン変えられるメモアプリ
まさかのKAZUNAから高性能ゲーミングスマホ「Black Shark 2」JAPANモデルが登場!
2018年に買った・手に入れたスマホや周辺機器:いろいろ買ったけどムダも多かった1年間
HUAWEI P30 / P30 liteの発売延期が広がる!楽天モバイル、goo Simsellerなども
音声検索で伏せ字になるのを解除する方法
モバイルSuicaの年会費がクレジットカードの種類に関わらず無料化
老舗Android用Twitterアプリ『twicca』がついに使用不可に
BCNランキング SIMフリースマホ実売台数TOP10 (7/8~14) トップは変わらずHUAWEI P30 lite
GoogleストアにてPixel 3 XLを買うとGoogle HomeとChromecastをプレゼント!
UQ mobile、月額1700円で国内通話かけ放題の通話オプション「かけ放題(24時間いつでも)」を12/18提供開始
Anker、最大10Wの急速充電できるスリムなワイヤレス充電器Anker PowerWave 7.5 Padを発売開始
Xperia Aceの価格比較:オプションとMNPを併用して3万円を切るgoo Simsellerが圧倒的に安い