CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成!

18

05月2010年

【Fireworks】Fireworks で描かれたリアルなイラストをしっかり見てみる

toyama 17:53 PM

イメージ

忍び寄る夏の気配にガクブルな toyama です。
5 月ってさわやかさを装いつつ「初夏の」とか「真夏並の」とか言い出すから油断がならねえぜ。

もうすぐ CS5 発売ですね。そわそわしている人も多いのではないでしょうか。
シーブレインはどっしり構えること山の如しでそわそわしていません。いやそんなことないか?どうなんですか?
現在も CS3 でがんばっている我々ですが(一部 8 も)、古いバージョンだってできることたくさんあるぞ!というのを見せ付けてくれるのが 「Fireworks Developer Center」です。
Fireworks を使った作品が多く掲載されている上、png ファイルもダウンロードさせてもらえます。太っ腹です。
上達するには達人の技を盗むのが手っ取り早いので、ダウンロードして詳しく見せてもらうことにします。

Ryan Hicks - XD Brownbag Poster

100518_toyama_01.jpg

Ryan Hicks さんによる、XD Brownbag Poster のイラストです。XD Brownbag Posterから png ファイルをダウンロードできます。
まな板の上にチーズとプチトマト、ナイフ、パンとアイスティが配置されたイラストです。こういうイラスト大好きです。

100518_toyama_02.jpg

パスデータはこん按配です。さすがに多いですね。

パン

100518_toyama_03.jpg

パンの本体はグラデーションの塗りで、フカフカした感じはテクスチャ「シフォン」をごくほんのり載せているようです。ひび割れた影はパスでかかれていました。全体的に「エッジをぼかし」た陰のパーツを重ねて立体感を出しています。

まな板

100518_toyama_04.jpg

木のテクスチャでも使っているのかと思ったら、グラデーションのカラースウォッチをたくさん登録することで実現しています。こういう使い方はしたことないなあ!

アイスティ

100518_toyama_05.jpg

ガラスのコップに氷と水泡、透明度の高いアイスティという、ハードルの高いオブジェクトをどう描いているのか注目です。
ガラスのコップにある光の反射はすべてパスで描かれたものです。グラデーションを使って反射を表現していますが、「線形」ではなく「楕円」で処理しているのが興味深いですね。水泡もすべてパスで描かれていました。細かい!レイヤーエフェクトとかでどうにかならないかと思ってしまいたくなるような細かさです。

オブジェクトの影

100518_toyama_06.jpg

すべてのアイテムに影をつけてよりリッチな表現になっています。
影はグラデーションの「放射」で処理されていて、「エッジをぼかす」しています。影に「エッジをぼかす」を使うと微妙な表現ができて楽チンです。

精度の高いイラストは Illustrator じゃないとねー、なんて言えないようなできばえで、このレベルのものを Fireworks CS3 で描いているのだからすごい。やっぱり必要なのはセンスと腕なのだなあとしみじみさせられます。イラスト描けるようになりたいわあ。

関連リンク

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/2247
###はmt-tb.cgiに変更してください。

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

特集

  • ステップアップ!CakePHP
  • 作って学ぶjQuery