Asial Blog

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

Fireworksでちょっとリアルな雲を描く方法

カテゴリ :
デザイン・UI
タグ :
Fireworks
リアル
こんにちは。和田です。
最近、だいぶ秋らしくなってきました。
上空は秋晴れの奇麗な空が広がっています。
そんな空を眺めていて、
ふっと、
簡単にFireWorksでリアルな雲は描けないかな…と思いチャレンジしてみました。
むちゃくちゃリアルではないですが、まぁそれなりに、それっぽくなった(多分)のでブログに書いてみようと思います。
↓出来上がりはこんな感じになります。


◆始める前に


それでは始める前にベースとなる画像(建物と空)を用意しておきます。
画像はあらかじめ空と建物にレイヤー分けしています。



そして今回は、
ブラシの「特殊ペン/広範囲のはね」を使って作ろうと思います。
「線幅:30px、線色:#FFFFFF」ブラシの「特殊ペン/広範囲のはね」を使うと以下のようなイメージになります。
このランダム?な円をたくさん重ね、ぼかし効果などを掛けて雲っぽくしようと思います。



それでは、

◆ステップ-1


大体の雲の形をイメージして、複数のオブジェクトを作成します(以下の画像のように)。
オブジェクトは「広範囲のはね」で出来る隙間をなくすように作って下さい。形はどんな形でもいいと思います。
ちなみに、今回は線幅:30px(画面上)と線幅:52px(画面下)の2種類を作ってみました。


・画面上:線幅:30px、線色:#FFFFFF、ブラシの:特殊ペン/広範囲のはね
・画面下:線幅:52px、線色:#FFFFFF、ブラシの:特殊ペン/広範囲のはね


◆ステップ-2


次に「ステップ-1」で作成したオブジェクトにフィルタの「ぼかし(ガウス)」を掛けます。
画面下の雲は遠いところにあるのをイメージしているので「ぼかし(移動)」も掛けてみました。


・画面上:ぼかし(ガウス):15px、
・画面下:ぼかし(ガウス):15px、ぼかし(移動): 角度353度、距離80

※ 雰囲気を出す為に雲にドロップシャドウを掛けてもいいと思います。
  今回は掛けていません。

ステップ-3


物足りなかったので、画面右上に雲を追加してみました。
この雲は楕円で作成していますが、作り方はステップ1,2と同じようにしています。


では、建物の画像を上から被せて出来上がりです。




雲の形がイマイチ…ですが(汗)
まぁそれなりにそれっぽくなったかと…思います。
(大目に見てやって下さい)

今回の作成方法は簡単なのですが「広範囲のはね」のはね方が、毎回均一に出てしまうので、そこをわからなくするのがポイントかと思います。
他に良い方法があると思うのですが、今回はこれしか思いつきませんでした。
もっと良い方法が見つかりましたらブログに書きたいと思います。

それでは、また次回です。