質感を意識したiconデザインにチャレンジ

ちょっと前に「リアル感を追求した、クリエイティブな素敵iOSデザインアイコン46個まとめ」がいいねって言ってる友達がいて、私もこういったお仕事をさせてもらったことがあるので、やってみたい方へ。

今回つくるのはこれです。
book_image.jpg
写真ではなく、すべて一からつくったものです。
写真にするとどうしてもリアルになりすぎてアイコンっぽく見えなくなりがち。
なので写真から起こす場合でも、あくまで下絵にして書き直すくらいの気持ちがいいと思います。

革の質感を出すには

今回は主にPhotoshopを使いましたが、どうしてもそれだけでは革の質感をたっぷり出すことができなかったので、CGソフトでマッピングしました。
まず原型をモデリングして、素材の革の写真などJPEG画像など貼付けて「それっぽく」してみます。
貼付けただけを見てみましょう。

img01.jpg
img02.jpg

左が簡単にモデリングしたもの、右がマッピングだけしたもの。
これだけだと質感があまり感じられません、なぜかというと、光と影の凹凸感がないからです。
こういった場合、ソフトのほうで「凹凸用のマッピング」の機能を使います。

b_tex_bump.jpg
img03.jpg

左がバンプマップと呼ばれる画像で、Photoshopで白黒にして加工します。
右を見れば分かりますが、マップで黒ければ黒いほど沈んだ感じに見せられ、立体感がでます。
しかし、これでもちょっと物足りないので今回は光沢を付けてみましょう。
質感を決めるマッピングは他にもあって、次は、「光沢マッピング(ソフトによって言い方がちがうけど意味は一緒)」これもマッピングを使ってみましょう。

b_tex_speculer.jpg
img04.jpg

左が光沢マップ、白い部分が反射しやすいようになる、と憶えておきましょう。
ちょっとだけ光沢がつきました、あとはPhotoshopで加工しましょう。

手帳の中身の紙を表現する

キレイに整っている手帳より、「バサバサ」と整っていない感じを出してみたいと思います。
これを適当に手書きするとなんだか不自然になりがちなので、「モデル」となるものが欲しいところ。
ここで、バサバサした書類の写真を大体似たアングルで撮ります。
それを先ほどつくった手帳にPhotoshopで合成してみましょう。
これを元に次は手で描いていきます。

photo.jpg
add_photo.jpg

Photoshop上で撮影した画像を自由変形させて手帳の形と合わせ、トレースして紙を描く

Photoshopのペンツールで紙を一枚一枚トレースするような感じで描いていきましょう。
あまり細かい所を気にしないで一気に描きあげるのがポイントです。
ちょっとはみ出した緑色の付箋を演出してみました、これはちょっとグラデーションがかかってますね。
これも単純にレイヤー効果のグラデーションオーバーレイを使っているだけです。
封筒の質感もあまりリアルにしないほうがいいでしょう。
写真のものをコントラストをあげて使おうと思ったんですが、全体がアイコン風なのでテイスト的に違和感があります、よって封筒も手で(ペンツールで)描き起こしましょう。
fuutou01.jpg
fuutou02.jpg
写真の封筒を使うより、右の手書きのほうが自然ですよね。
表示カバーを見ると、まっすぐ平面な感じですが、ちょっと膨らんでいる感じを出しましょう。
ブラシツールで黒をフチに塗って適当にぼかします。
同じく白のブラシも別のレイヤーに塗って光沢と陰影を出すとこんな感じになります。
rittai01.jpg
rittai02.jpg
右が白と黒のブラシを表示のフチにつけたものです。
ちょっと膨らんだ感じになりましたね。
ただし、フチが革のままってのもちょっと変なので、ベージュ色のフチを入れてあげましょう。
選択範囲をフチの部分だけとって、ベージュ色でベタぬりしたあとに、以下のようなレイヤー効果をかけました。
fuchi.jpg

まとめ

complete.jpg
アイコンなので、もうちょっと色が映えた方がいい場合もあるので、この場合カバー部分にレベル補正をして明るくしました。
さて、本来のアイコンはもうちょっと小さいですね、なので、小さくしてもその形がわかるようにしておきましょう。
あと、今回は手帳をモチーフとしたアイコンなのでこの手順ですが、臨機応変に制作方法はたくさんあるということを憶えておきましょう。
ツールに惑わされないようにしましょう、私達の仕事はクリエイティブなことなので、ツールありきで考えるとつまらないものしかできないことがあります。
私達のつくりたいものを先にツールがある、というイメージで楽しいデザインをこころがけましょう。