FireworksマニアTOP > Fireworksデザインレシピ > Fireworksならではの「波動」のグラデーションを使って描く、シャボン玉のレシピ

Fireworksならではの「波動」のグラデーションを使って描く、シャボン玉のレシピ

カテゴリー: Fireworksデザインレシピ

Fireworksはいろいろとおもしろい形状のグラデーションが選べます。
…というのを紹介したくてチュートリアルを考えてみました。

今回は、その中のひとつ「波動」のグラデーションを使った
シャボン玉デザインのチュートリアルです。

なんとなく…シャボン玉に見えませんか?

1113-finish

完成ファイルは、このチュートリアルの最後からダウンロードできますので
Fireworksでさわってみてくださいね。

それでは作り方です!

 

新規カンバスを開く

1113-01

新規カンバスを開きます。今回は600px × 400pxとしました。

 

背景にする写真を読み込む

1113-02

背景に使用する写真を読み込みます。ファイル→読み込みから好みの画像を選択します。
今回は葉っぱの画像を使用しました。

PHOTO STOCKERからダウンロードできます♪
http://photo.v-colors.com/2427.html

 

1113-03

このように配置しました。

 

楕円ツールで正円を描く

1113-04

ツールから楕円ツールを選択します。

 

1113-05

Shiftキーを押しながらドラッグして正円を描きます。

 

グラデーションを指定する

1113-06

描画したオブジェクトを選択した状態で、グラデーションの「波動」を選択します。

 

1113-07

グラデーションの色はこんな感じでパステルっぽい色を組み合わせています。

上の画像真ん中のプルダウンから【パステル】のセットを選んだ後、
スライダーを調整するとこんな感じの色がセットされるので簡単です。

 

1113-09

このような感じになります。グラデーションのかかり具合はあとから調整しますのでこの時点では画像のようになっていなくても大丈夫です。

 

ストロークを設定する

1113-08

ストロークの設定をします。カラーは【#ffffff】で太さを2としました。

 

描画モードを変更する

1113-10

オブジェクトの描画モードを変更します。プロパティインスペクタから描画モードを【ピンライト】に設定します。

 

1113-11

このようにシャボン玉らしくなってきました!

 

フィルタ効果をかける

ぼかし(ガウス)をかける

1113-12

よりリアルな質感になるよう、フィルタ効果を掛けていきます。

【プロパティインスペクタ】から【フィルタ】横の【+】をクリックして【ぼかし】→【ぼかし(ガウス)】の順で選択します。

 

1113-13

今回は0.9ほどかけました。プレビューを見ながらお好みで調整してください。

 

Photoshopライブエフェクトをかける

1113-14

次に【プロパティインスペクタ】から【フィルタ】横の【+】をクリックして【Photoshopライブエフェクト】を選択します。
ベベルとエンボスにチェックを入れ、図のように設定します。

 

グラデーションの掛け具合を調整する

1113-16
 

オブジェクトを選択するとハンドルが表示されます。これを動かしたり伸ばしたりするとグラデーションの具合を変更することができます。オブジェクトの場所や背景画像とのなじみを考えて調整します。

 

クローンで量産する

オブジェクトを選択した状態で、メニューの【編集】から【クローン】を選択します。

コピーをたくさん作り、拡大縮小ツールで大きさを調整して配置します。

 

描画モードを変更してみる

1113-15

場所によっては【描画モード】を【反射】にするとよりそれらしい質感に見えます。

 

完成!

1113-finish

以上、Fireworksのおもしろいグラデーション、【波動】を使ったデザインレシピでした。

アイデア次第でいろいろと使えるグラデーションだと思いますので、ぜひ一度使ってみてくださいね☆

 

完成ファイルダウンロード

完成ファイルのダウンロードはこちらからどうぞ♪

 

最後までお読み頂き、本当にありがとうございました。お気に召しましたらぜひ共有orクリップして頂けますと幸いです。またお会いできますように♪

Check このエントリーをはてなブックマークに追加 この記事をクリップ! コメントを見る Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

関連エントリー

このサイトを運営している人

YUKIと申します。福岡で働く会社員WEBデザイナーです。
フロッグマンオフィス所属。ショッピングカートのCS-Cartとかもやってます。

仕事以外でも趣味でいろいろサイトを作っています。
こういったTipsサイトや無料の素材屋さんにたくさんたくさんお世話になりながら勉強して、今ではWebデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい!とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでもお役に立てればとてもうれしいです^^

まわりの人にもご紹介いただけるとうれしいです。

たくさんの方に見ていただき、たくさんのご意見を頂くことは、記事の正確さや有益性を高めるだけでなく、新しい記事を書くモチベーションになります!
お気に召しましたらぜひまわりの方にもご紹介いただけるとうれしいです。リンクはご自由にどうぞ!

Fireworksマニア

バナーが必要な方はこちらをどうぞ♪
サイト名:Fireworksマニア URL:http://fw.v-colors.com/