連載  /  

Fireworks入門 第4回 パスのブレンド機能を使ってデザインの幅を広げよう!

BY 公開

Illustrator同様に、Fireworksにも「パスのブレンド」機能があります。「パスのブレンド」機能を使えば、2つのパスの中間パスを描く ことができます。また、ブレンドする際に中間パスの個数を設定することが可能です。今回は、「パスのブレンド」機能を使ったデザインテクニックを紹介します。

Fireworks CS6の体験版をダウンロード    サンプルファイルをダウンロード

虹を描く

[ツール]パネルから楕円ツールを選択し、大小2つの円を描きます。[整列]パネルを表示して、2つの円を選択した状態で[水平方向中央揃え]と[垂直方向中央揃え]をクリックして、中央を揃えます。

 図1 2つの円を描いて、中央揃えにします

次に[パス]パネルを表示して、[パスのブレンド]をクリックします。中間パスの数を設定するダイアログボックスが開くので、数を入力して、[OK]ボタンを押します。ここでは6と入力しました。

  図2 [パスのブレンド]をクリックして、中間パスの数を入力します

すると、ブレンド部分の結合を尋ねるダイアログボックスが表示されます。[はい]を選ぶと、補間した中間パスも含めて、全てのパスが結合した1つのパスオ ブジェクトになります。[いいえ]を選択すると、補間した中間パスは個々のパスオブジェクトとして描画され、編集が可能になります。ここでは、各円を彩色 して虹を表現するので、[いいえ]ボタンをクリックします。

 図3 [いいえ]ボタンをクリックして、中間パスを個々のパスオブジェクトとして描画します

円が8個重なりました(一番内側の円を背景と同色にして使うため、8個必要となります)。全てのパスオブジェクトがグループ化された状態になっているの で、グループを解除します。すると、最初から描いていた円と補完した中間パスに分かれます。中間パスは、まだグループ化されているので、再度グループを解 除します。

  図4 オブジェクト上で右クリックして、コンテキストメニューから[グループ解除]を選びます。さらに、中間パス部分のグループを解除します

下図のようにバラバラのパスオブジェクトになりました。各円に色をつけます。

  図5 各円に虹の色をつけます

上半分のみにマスクをかけます。さらに、楕円ツールで円をたくさん描き、それらのパスを結合して、雲を描きました。これで等間隔の虹の完成です。

 図6 完成した虹の空

絡み合った線を描く

「パスのブレンド」機能は、線に対しても適用できます。手作業では作成するのが難しい、滑らかな曲線による線表現も、「パスのブレンド」機能を使えば簡単に作成できます。

ペンツールを使い、2本の滑らかな線を描きます。2本の線を選択した状態で、[パス]パネル[パスのブレンド]をクリックし、中間パスの数を20に設定します。そして、ブレンド部分の統合に対して、[いいえ]を選びます。すると、重なった曲線ができあがりました。

   図7 滑らかな曲線が重なった表現となりました

グループ解除を2回実行することで、別々のパスオブジェクトとして編集できます。通常のオブジェクト同様、フィルター効果を適用することもできます。[ぼかし(ガウス)]を適用して、モアレを解消してみましょう。

   図8 プロパティインスペクターから[フィルター]→[ぼかし]→[ぼかし(ガウス)]を選びます。各曲線にぼかしフィルターが適用され、モアレがある程度解消されました  図9 他のオブジェクトと組み合わせると表現の幅が広がります

なお、「パスのブレンド」機能はパスオブジェクトの塗りにも適用されます。

 図8 長方形ツールと角丸長方形ツールのみで描画した建物

このように、Fireworksの「パスのブレンド」機能を使えば、簡単に中間パスを作成できます。活用してデザイン作業に役立てましょう。

  TAGS

  AUTHOR

山口 有由希

株式会社Fablic / Webデザイン、アプリデザインなど幅広く手掛ける。効率の良さと見た目の美しさを両立させたデザインをすべく、日々研究中。運営サイトにFireworksマニア、著書に「速習デザインFireworks CS3/4/5」(技術評論社)。