2011年12月7日

iCloud風のアイコンを作成する（Fireworks）

こんにちは。和田です。

今回はiCloud風のアイコンをFireworksで作成したいと思います。
オブジェクトは３つだけで作成できるのでとても簡単です。

それでは作成したいと思います。
まず始めに700×700pxの新規ファイルを作成します。

そして、

1.土台?となる部分の矩形を作成します。
　・サイズ：512×512px
　・丸み：94px
　・塗り：線形グラデーション
　　→グラデーションの値（番号は下記の画像に記載している番号を表しています。）
　　　(1) #DDDDDD
　　　(2) #89898B
　　　(3) #545456

2.次にステンレスのようなヘアライン効果のオブジェクトを作成します。

2-1.円の矩形を作成します。大きさは、「1」で作成したものより大きく作成します。
　　大きく作成するのは、この後で設定するフィルタ（ぼかし（放射状））の効果を奇麗に反映させる為です。

　・サイズ：646×646px
　・塗り：円錐グラデーション
　　→グラデーションの値
　　　(1) #E7E7E7
　　　(2) #B3B3B6
　　　(3) #9C9A9E
　　　(4) #F2F2F2
　　　(5) #F2F2F2
　　　(6) #9C9A9E
　　　(7) #F2F2F2
　　　(8) #F2F2F2
　　　(9) #9C9A9E
　　　(10) #9C9A9E
　　　(11) #F2F2F2
　　　(12) #F2F2F2
　　　(13) #9C9A9E
　　　(14) #9C9A9E
　　　(15) #C1C1C4
　　　(16) #C1C1C4

2-2.ヘアラインの効果を作成する為にノイズとぼかしを設定します。

　・ノイズを追加：適用料：10
　・ぼかし（放射状）：
　　　適用量：30
　　　画質：100

ノイズがかかったイメージ

ぼかし（放射状）がかかったイメージ

2-3.「1」で作成したものより小さい矩形を作成してマスクをかけます。
　　小さくすることでエンボスがかかったように見せる事が出来ます。
　　但し、1点注意点があります。
　　それは「2-1〜2」で作成したステンレスの矩形データはフィルターがかかっており、このままマスクをかけても上手くいきません。そこで矩形データを画像に変換してからマスクをかけます。
　　画像に変換するには、
　　　ステンレスの矩形データを選択→その場で右クリック→メニューから「選択範囲を統合」を選ぶと画像に変換出来ます。

　　・サイズ
　　　幅：502px
　　　高さ：502px
　　　丸み：90px