Fireworks入門 第5回 ストロークを自由にアレンジしてカスタムストロークを作ってみよう！
Fireworks入門
Fireworksでは、オブジェクトに対して「塗り」と「ストローク（線）」を設定できます。標準でも様々なストロークが用意されていますが、これらをさらに工夫することで、カスタムストロークを作成できます。
ストロークを活用すれば、デザインの幅が広がるだけでなく、使い回しがきくので作業効率のアップも期待できます。本記事では、Fireworksのストロークとストロークのカスタマイズについて解説していきます。
Fireworks CS6の体験版をダウンロード サンプルファイルをダウンロード
図1 カスタムストロークで作成したデザイン例
ストロークの適用方法
破線を適用する
ストロークを使用するには、まずオブジェクトを描画し、描画したオブジェクトを選択した状態でプロパティインスペクターからストロークの色や種類を選択します。直線ツールで引いたオブジェクトに対して、破線のストロークを適用してみましょう。
まず、［ツール］パネルから直線ツールを選択し、直線を描画します。Shiftキーを押しながら描画すると、水平垂直な直線を描画できます。
図2 直線ツールで線を描画します
描画したオブジェクトを選択した状態で、プロパティインスペクターからストロークの種類を選び、［破線］→［破線（シングル）］を選択します。
図3 ストロークの種類が変更され、破線になりました
縫い目風の破線にする
ストロークのプロパティを変更して、縫い目風の破線にしてみましょう。先ほどと同様の手順で直線を描画し、プロパティインスペクターから［クレヨン］→［基本］を選択します。また、線の太さを「3」、色を「#402000」とします。
図4 ［クレヨン］→［基本］、線の太さを「3」、色を「#402000」に設定した状態
ストロークのプロパティを変更していきます。オブジェクトを選択した状態で、プロパティインスペクターの［ストロークを編集］ボタンをクリックします。［ストロークを編集］ダイアログボックスで、以下のようにオプションを設定します。
図5 ［破線］を［破線（シングル）］に設定します。次に［オン］（線の幅）と［オフ］（線と線の間の幅）の数値を変更します。ダイアログボックス下のプレビューを見ながら好みの幅になるように調整します。 図では、「オン：12」「オフ：6」としました 図6 ［破線］を［破線（ダブル）］ 、1つ目の破線ブロックを「オン：12」「オフ：6」、2つ目の破線ブロックを「オン：2」「オフ：6」に設定したところ 図7 ［破線］を［破線（トリプル）］ 、1つ目の破線ブロックを「オン：12」「オフ：6」、2つ目の破線ブロックを「オン：2」「オフ：6」、3つ目の破線ブロックを「オン：20」「オフ：10」に設定したところ
このようにオプションを使用すれば、より強弱のある手縫い風のラフさを表現することができます。
図8 上からシングル、ダブル、トリプルの設定例
シェイプや感度を調整してさらに一工夫
［ストロークを編集］ダイアログボックスの［シェイプ］タブや［感度］タブの数値を調整することで、よりバラエティに富んだストロークを作成できます。既存のストロークをもとに設定を変更して、全く新しいストロークを作ってみましょう。
まずは、直線ツールを使って直線を描画します。プロパティインスペクターから［カリグラフィペン］→［リボン］、線の太さを「5」、色を「#000000（黒）」に設定します。
図9 ［カリグラフィペン］→［リボン］、線の太さを「5」、色を「#000000（黒）」に設定した状態
※このとき選択するストロークの種類は、”［基本］以外”のものを選択するようにします。［基本］の中にあるストロークを選択すると、一部のプロパティがロックされ、変更ができません。全ての値を自由に変更できるよう、それ以外の種類を選んでおきましょう。
プロパティインスペクターの［ストロークを編集］ボタンをクリックして、以下のようにストロークを編集していきます。
図10 ［間隔］を「142％」にします。描画間隔が広がり、破線のような状態になります
［シェイプ］タブでは、ブラシの形状、傾きや縦横比などを編集できます。
図11 ［サイズ］［エッジ］［縦横比］［角度］を図のように変更しました 図12 また、形状を選ぶこともできます。［四角形］にチェックを入れると形状が四角形になります。
［感度］パネルでは、色味や間隔などを調整することができます。これらを調整する前に一度［OK］ボタンを押して編集内容を確定させ、ストロークの色を 「#000000（黒）、#FFFFFF（白）」以外に変更してください。白と黒以外にする理由は、このあとストロークの色相を変更するためです。白と黒 は明度と彩度が最低／最高値になっているので、色相の変更をしても色が変化しないからです。
図13 ここではストロークの色を「#FFD24D」に変更しました 図14 再度、［ストロークを編集］ダイアログボックスで［感度］タブを開き、［ストロークのプロパティ］で［サイズ］を選び、［ランダム］を「80」に変更しました。線のサイズがランダムに変化した状態になります 図15 ［ストロークのプロパティ］で［色相］を選び、［ランダム］を「23」に変更しました。このように色味がランダムに変化します。値が大きければ大きいほど様々な色に変化します。他にも［彩度］や［明度］なども変更できます。［ランダム］だけでなく、［筆圧］や［速度］なども利用して変化を付けることもできます 図16 作成したストロークは、直線だけでなく、他の自動シェイプにも適用できます
アレンジ次第でいろいろなストロークができるのでぜひ試してみてください。
作成したカスタムストロークを登録する
カスタムストロークを登録して、その後いつでも使用することができます。
ストロークの種類メニューに登録する
カスタムストロークを種類メニュー内に登録するには、プロパティインスペクターの［ストロークを編集］ボタン右側のアイコンをクリックし、名前を入力して登録することができます。
図17 ［カスタムストロークを保存］アイコンをクリックし、名前を入力して登録します 図18 ストロークの種類メニュー内に登録されます
ただし、この方法だと、カスタムする際に使用にしたストローク種類が所属するグループの中に登録されてしまい、もとのストローク種類から大幅に変更してしまった場合だと適切ではありません。そこでおすすめしたいのが、スタイルとしての登録です。
スタイルとして登録する
カスタムストロークのスタイルを［スタイル］パネルに登録できます。そうしておけば、手軽にカスタムストロークを適用できます。登録したいカスタム ストロークを適用したオブジェクトを選択した状態で、［スタイル］パネルのオプションメニューから［新規スタイル…］を選んで登録します。なお登録時 に、CS5までは［現在のドキュメント］しか選べませんでしたが、CS6からは既存のスタイルグループを選んで追加できるようになりました。
図19 ［新規スタイル］ダイアログボックスが開くので、名前を入力して［OK］ボタンをクリックします 図20 ［スタイル］パネルに登録されました
なお、Fireworks CS6の［スタイル］パネルには、拙作の線のスタイル［線のカラーと点のスタイル］がプリインストールされています（図20のスタイル）。ぜひ数値などを参考にしてみてください。
CS5以前のユーザ向けに、本記事のサンプルデータ内に［線のカラーと点のスタイル］のスタイルライブラリデータ「stroke.stl」を同梱しています。［スタイル］パネルのオプションメニューから［スタイルライブラリを読み込み…］を選ぶと、追加できます。
このように設定次第でより表現の幅が広がるストロークを活用して、表現の幅を広げてみてくださいね。