Fireworks入門 第1回 自動シェイプを使いこなして時間短縮！様々な形状を手軽に作ってみよう！
Fireworks入門
Fireworksの場合、オブジェクトを描画する方法として、自分で自由に形を描けるパスツールのほかに、星や矢印といった特定の形 状を描ける「自動シェイプ」というツールがあります。また、［自動シェイプのプロパティ］パネルを活用すれば、オブジェクトの形状やサイズを自在に操るこ とができます。
本記事では、Fireworksならではの豊富な自動シェイプを使ったオブジェクトの描き方を紹介します。
Fireworks CS6の体験版をダウンロード サンプルファイルをダウンロード
自動シェイプの使い方
描画の方法
まずは、Fireworksの自動シェイプを使ってオブジェクトを描いてみましょう。自動シェイプは、［ツール］パネル内のベクトルエリアにある長方形マークを長押しすることで切り替えることができます。
図1 自動シェイプは、［ツール］パネルから選択します
好みの形状を選択したら、カンバス上でドラッグします。L字ツール以下の形状の場合、描画すると黄色いポイントが表示され、ポイントを動かせば描画後も自由に形状を変更できます。
図2 様々な自動シェイプで描画したオブジェクト。ドラッグするだけで、このような形状を手軽に描けます
プロパティパネルで形状を正確に変更する
［自動シェイプのプロパティ］パネルを使えば、各種ポイントの値を数値で変更できます。［自動シェイプのプロパティ］パネルを表示するには、メニューから［ウィンドウ］→［自動シェイプのプロパティ］を選択します。
図3 ［自動シェイプのプロパティ］パネル
［自動シェイプのプロパティ］パネルは、自動シェイプを使いこなす上でなくてはならないものです。表示させたらプロパティインスペクタにドッキングさせておき、常にすぐ使えるようにしておくとよいでしょう。
図4 ［自動シェイプのプロパティ］パネルはプロパティパネル横に常にドッキングさせておくと、スムーズに作業できます
角丸長方形の描き方
Fireworksで正確に角丸長方形を作ってみましょう。Fireworksでの角丸長方形の作り方には2種類あります。それぞれ特徴があるので、状況に合わせて使い分けてください。
長方形ツールを使って描く方法
［ツール］パネルから長方形ツールを選択し、カンバス上に長方形を描画します。描画したオブジェクトを選択した状態で、プロパティインスペクタから［角丸の半径］を設定します。［角丸の半径］の単位として、pxと%から選べます。
図5 長方形ツールの角の丸みはプロパティインスペクタから変更します 図6 ここでは［角丸の半径］を4pxと設定したので、角が4pxで丸まった角丸長方形が描けました
角丸長方形ツールを使って描く方法
［ツール］パネルから角丸長方形ツールを選択し（長方形ツールを長押ししてプルダウンから切り替えます）、カンバス上に長方形を描きます。描画したオブジェクトの周囲に黄色いポイントが表示されるので、そのポイントを操作すると角の丸みを調整できます。
図7 赤丸で囲まれた黄色のポイントをクリックすると角の形状の変更、ドラッグすると角の丸みの変更となります。右下の赤丸で囲まれていない黄色のポイントをドラッグするとオブジェクトのサイズを変更できます
長方形ツール同様、数値で角の丸みを設定できます。角の丸みを調整するには［自動シェイプのプロパティ］パネルを使用します。オブジェクトを選択した状態で［自動シェイプのプロパティ］パネルを見ると、変更可能な各種値を数値で指定できます。
図8 角丸長方形ツールの各値は［自動シェイプのプロパティ］パネルから変更します
便利に使える角丸長方形ツール
角丸長方形ツールは、角の形状を角丸以外の形にすることができ、またそれぞれの角ごとに形状と値を設定できるので、長方形以外にも様々な形状を描画することができます。
図9 角丸長方形ツールで描いた長方形の角は、図のように様々な形状に変更できます
［自動シェイプのプロパティ］パネルからの形状の変更方法を解説します。
図10 各種値の設定方法
鍵を外すと、図11のように項目ごとにバラバラの値を設定できます。
図11 鍵を外した状態。各値や形状をそれぞれ設定できます
図9の長方形の角の形状は、［自動シェイプのプロパティ］パネルを使って以下のように設定したものです。
図12 各形状のプロパティ一覧
パネルメニューからも使用できる！ まだまだある自動シェイプ
自動シェイプは、［ツール］パネルの他に、パネルメニューからも使用できます。右側のパネルから、もしくはメニューから［ウインドウ］→［自動シェイプ］を選び［自動シェイプ］パネルを表示します。
図13 ［自動シェイプ］パネル
［自動シェイプ］パネル内にある自動シェイプを使用する際は、パネルからカンバスへドラッグ＆ドロップします。なお、［自動シェイプ］パネルから配置した オブジェクトの場合、［自動シェイプのプロパティ］パネルでの数値による変更はできませんが、黄色のポイントを使って形状などを自由に変更できます。ま た、塗りの色なども通常のオブジェクトと同様に変更できます。
図14 ［自動シェイプ］パネルから配置したハート。黄色のハンドルを調整すれば、形状を自由に変更できます
さらに便利な自動シェイプを追加しよう！
［自動シェイプ］パネルには新たに自動シェイプを追加することができ、インターネット上には様々な形状の自動シェイプが拡張機能として配布されています。拡張機能をダウンロードしてインストールすることで、その自動シェイプを使用できるようになります。
例として、「Sunburst」という自動シェイプを追加してみましょう。Sunburstは、バナーなどでインパクトを出したい時に手軽に使える自動シェイプです。
Sunburstをインストールすると、［自動シェイプ］パネルに登録されます。後は、カンバス上にドラッグ＆ドロップして使用します。
図15 拡張機能は［自動シェイプ］パネル内に追加されます 図16 Sunburstを使えば、このような放射状の形を簡単に作ることができます。他の自動シェイプと同様、黄色いポインタを操作することで放射の本数や幅などを自由に変更できます