Asial Blog

Recruit! Asialで一緒に働きませんか?

iCloud風のアイコンを作成する(Fireworks)

カテゴリ :
デザイン・UI
タグ :
Tech
Fireworks
アイコン
iCloud
こんにちは。和田です。


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

それでは作成したいと思います。
まず始めに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




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



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




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




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

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

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

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


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




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




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

コメント

  • 学生

    2-3でマスクとしてグループ化をするとぼかし(放射状)が悪さをして
    ttp://uploda.cc/img/img520a1ab5a1d1f.png
    このようになってしまいます。(直リンは回避しているので先頭にtをつけてください。)

    どのようにしてこれを防げるか教えていただけないでしょうか?

    よろしくお願いします。

  • 和田

    学生様

    コメントありがとうございます。

    >2-3でマスクとしてグループ化をするとぼかし(放射状)が悪さをして

    こちらは、矩形を画像に変換してマスクをかけると回避できます。
    矩形のままだとどうしてもフィルターが影響して上手くいかないんですよね。
    単純な回避方法ですが、自分はそうしております。
    この事をブログに書くのを忘れておりました。お手数おかけしました。
    (加筆しておきました)

    ◆画像への変換方法
    ステンレスの矩形データを選択→その場で右クリック→メニューから「選択範囲を統合」
    を選んでください。そうすれば画像になります。

    大した回避方法ではありませんが試してみてくください。

    それでは、今後ともアシアルブログをよろしくお願いいたします。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事