フェンリル

Developer's Blog

リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。

こんにちは、イメージ担当の長谷川です。
今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。
アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。

ぜひ Web や UI デザインの参考にしていただければと思います。

1. ベースのテクスチャを設定する

まずグラデーションの設定をします。
長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。
以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。
ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。

グラデーションの設定

次にノイズを適用量:10で追加します。これが同心円状のヘアラインの元になります。

ノイズの追加

そしてぼかし(放射状)を以下のように設定します。

ぼかしの設定

ベースが完成しました。角丸や円形など作成したいオブジェクトの形でマスクをします。

マスキング

2. ボタン風に加工する

ここで以下のようにハイライトとドロップシャドウの設定をします。
外側のラインはオブジェクトをクッキリと際立たせる為に入れています。

ハイライト、ドロップシャドウ設定

ここまで来たらほぼ完成ですね!
ボタンの上に任意のマークやロゴ等を配置します。ここでは、フェンリルのロゴマークが刻印されて黒く着色されたようになる設定にしています。

マークの設定

3. アレンジする

最初のステップで作ったベースになるテクスチャの設定を変更することで様々な金属表現ができます。

テクスチャのアレンジ

アレンジ次第で Web や UI デザインに幅広く応用できそうです。

アレンジサンプル


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

Facebook コメント

コメント

効率あがった!フリー素材と「すごい」Illustratorテクニック総まとめ | コムテブログ2013年10月21日 8:36

[…] 金属/Appleのデザインのように金属調の質感 (フェンリル | デベロッパーズブログ) […]

名前(必須)

メールアドレス(必須)

URL

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

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