連載  /  

Fireworks入門 第5回 ストロークを自由にアレンジしてカスタムストロークを作ってみよう!

BY 公開

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」を同梱しています。[スタイル]パネルのオプションメニューから[スタイルライブラリを読み込み…]を選ぶと、追加できます。

このように設定次第でより表現の幅が広がるストロークを活用して、表現の幅を広げてみてくださいね。

  TAGS

  AUTHOR

山口 有由希

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