連載  /  

Fireworks入門 第2回 パスパネルを活用して、複雑な形状を手軽に作ってみよう!

BY 公開

Fireworksには[パス]パネルがあり、そのパネル内にはパスを連結させる機能が並んでいます。自動シェイプと[パス]パネルを組み合わせれば、複雑に思われる図形も簡単に描くことができます。本記事では、家を描いてみましょう。

なお、自動シェイプの作成方法については、「自動シェイプを使いこなして時間短縮! 様々な形状を手軽に作ってみよう!」をご覧ください。

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

家を描いてみよう

矢印ツールと角丸長方形ツールを使って、家の形をしたパスオブジェクトを描いてみましょう。まず、[ツール]パネルから矢印ツールを選択し、ドラッグして矢印を描きます。

 図1 矢印ツールで矢印の自動シェイプを描画します

オブジェクトを選択した状態で、拡大縮小ツールに切り替えます。ショートカットのcommand(ctrl)+Tを押すと、[ツール]パネルから選ばずとも切り替わります。

 図2 [ツール]パネル、もしくはキーボードショートカットで拡大縮小ツールに切り替えます

オブジェクトの周囲にカーソルを持っていくと、回転マークになるので、shiftキーを押しながら左に90度回転させます。回転させた矢印は家の土台となるよう形状を調整します。

 図3 家の土台となるように形状を調整します

次にドアを描画します。角丸長方形ツールを使って縦に長い長方形を描きます。そして、自動シェイプのプロパティインスペクタ、もしくは黄色いハンドルを操作して角を丸めます。

 図4 角を丸めた長方形を作成します

図5のように2つのオブジェクトを重ねます。2つのオブジェクトを選択した状態で、[パス]パネルの[型抜き]をクリックします。

 図5 2つのオブジェクトを重ね、[型抜き]を実行します

前面のオブジェクトで背面のオブジェクトがくり抜かれ、ドア付きの家の形状になりました。

 図6 ドアのある家の形となりました

自動シェイプの組み合わせで描いたアイコン

このように自動シェイプと[パス]パネルを活用すれば、アイデア次第で様々な形状を作ることができます。この方法ならパスツールの使用も最小限ですむので、パスを描くのが苦手な方もぜひトライしてみてくださいね。

 図7 各種自動シェイプの組み合わせで描画したアイコン類

長方形ツール同様、数値で角の丸みを設定できます。角の丸みを調整するには[自動シェイプのプロパティ]パネルを使用します。オブジェクトを選択した状態で[自動シェイプのプロパティ]パネルを見ると、変更可能な各種値を数値で指定できます。

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

  TAGS

  AUTHOR

山口 有由希

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