こんにちは。和田です。


今回は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」で作成したものより小さい矩形を作成してマスクをかけます。
　　小さくすることでエンボスがかかったように見せる事が出来ます。
　　・サイズ
　　　幅：502px
　　　高さ：502px
　　　丸み：90px




こんな感じになります。
大分それらしくなってきました。



3.イラストの作成
3-1.アイコンの背景が出来ましたので、上に載せるイラストを矩形で作成します。
　・塗り：#78787D




3-2.ここで、雲のイラストで色が塗られている部分に
　　下地のヘアライン効果を反映させ、黒光りしたイメージにしたいので、描画モードを「焼き込み（カラー反転）」に変換します。




3-3.そして、イラスト部分を凹んだイメージにする為、下記のフィルターを設定します。

　(1)ベベルとエンボス（Photoshopライブエフェクト）

　　　構造--------------------------------------
　　　　スタイル：ベベル（外側）深さ=200
　　　　テクニック：スムーズ：サイズ=4
　　　　方向：ダウン：ソフト=0

　　　陰影--------------------------------------
　　　　角度：90度
　　　　ハイライト：スクリーン（#FFFFFF）：100
　　　　シャドウ：乗算（#000000）：60


　(2)シャドウ内側
　　　距離：5
　　　不透明度：100%
　　　ぼかし：2
　　　角度：315度




これで出来上がりです。
いかがでしょうか？
ちなみにいくつかバリエーションを作ってみました。




今回も簡単なので
皆様も是非作ってみて下さい。