こんにちは、イメージ担当の長谷川です。
今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。
ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。
『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。
この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。
Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。
作ったボタンや背景などのグラフィックにぼかしを入れるだけです。
実際には Fireworks でボタンと同じサイズのオブジェクトを重ねてシャドウ（内側）を適用しています。
左が普通に作ったサンプルイメージで右が『MAX 塗り』を取り入れたイメージです。
コツはできるだけ薄く入れることです。
上の画像は Fireworks CS4 で作成しています。右上の白いボタン風イメージの設定はこんな感じです。
濃く入れすぎると立体感がおかしく、でこぼこしたような感じになってしまいます。
黒っぽい画像には白いぼかしを入れるとバックライトの効果っぽくなったりもしますね。
すべてのデザインにマッチするわけではありませんが、ちょっと差を付けたい、画面がのっぺりとしてなんか物足りない時に試してみてはいかがでしょうか？
実は Sleipnir Start のボタンなどにもこの技法を使っていたりします。
—
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
