フェンリル

Developer's Blog

リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。

リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。

こんにちは、イメージ担当の長谷川です。

今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。

ところで『MAX 塗り』ってご存知ですか?ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。

『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」「グラデーション塗り」の技法です。

この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。

Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。

作ったボタンや背景などのグラフィックにぼかしを入れるだけです。
実際には Fireworks でボタンと同じサイズのオブジェクトを重ねてシャドウ(内側)を適用しています。

MAX 塗りサンプル

左が普通に作ったサンプルイメージで右が『MAX 塗り』を取り入れたイメージです。
コツはできるだけ薄く入れることです。


上の画像は Fireworks CS4 で作成しています。右上の白いボタン風イメージの設定はこんな感じです。

ぼかし(シャドウ)の設定


濃く入れすぎると立体感がおかしく、でこぼこしたような感じになってしまいます。

失敗例

黒っぽい画像には白いぼかしを入れるとバックライトの効果っぽくなったりもしますね。

すべてのデザインにマッチするわけではありませんが、ちょっと差を付けたい、画面がのっぺりとしてなんか物足りない時に試してみてはいかがでしょうか?
実は Sleipnir Start のボタンなどにもこの技法を使っていたりします。

Sleipnir Start



フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Facebook コメント

コメント

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。