気づけば1ヶ月近くのご無沙汰です。こんにちは。久しぶりのFireworksネタです。以前Fireworksで点線を作る方法を載せてみましたが、今回はもうちょっと複雑な点線を作る方法を紹介したいと思います。

かんたんな点線を作る

前にも書いたけど、まとめ用に書き直し。Fireworksで点線を作る場合は線にストライプのテクスチャを入れることで、点線を作ることがができます。

横に線を引く場合は線か塗りの[テクスチャ]の部分を[水平線2]として、テクスチャの比率を[100%]にします。これで簡単に点線が引けるようになります。今度は縦の場合。縦に線を引く場合は[テクスチャ]の部分を[垂直線4]として、[テクスチャ]の比率を100%にします。

ちなみに、点線の幅を広くしたいという時は、「» Fireworks texture gallery」からテクスチャをダウンロードして、同じようにやると色々な種類の点線がかけるようになります。

複雑な点線を作る(バージョン8以降)

ここからが新しいお話です。今まではテクスチャを使う方法を紹介してきましたが、バージョン8以降のFireworksでは点線を作ることもできたりします。

長方形を選択後、ストロークの種類(デフォルトは「基本」になっています)を選び、[破線]→[点線]と選ぶと簡単に点線を描くことができます。しかし、これだけでは点線の間隔が狭いものが作れなかったり、線の種類を増やすにはちょっと厳しそうですね。点線・破線の間隔や長さを変更する場合は次のようにやります。

たとえば、下のような点線で囲まれた長方形。

このような長方形を作る場合は次のようにします。

1)矩形を選択

2)ストロークの種類を選択して、[ストロークオプション]を選択

3)線の位置が[中心のストローク]になっていること確認して、[詳細設定]のボタンを押す
※内側、外側にストロークになっていると、点線が適用されないようです。

4)[オプション]タブで[破線(シングル)]を選択。(ダブルでもトリプルでもお好みでどうぞ)。破線の項目のの下にあるオン・オフでそれぞれの数値を変更します。数値の単位はピクセルです。数値を変更してカーソルを他の場所に持って行くと、画面にプレビューされます。

5)[OK]ボタンをクリック
6)色や太さを修正してできあがり

ただし、長方形の場合は線の太さが2ピクセル以上じゃないと点線が描かれません。こういうときは、塗りを背景色と同じにして、ストロークオプションから、「塗りを線に重ねる」というオプションをチェックすると1ピクセルの直線でも描けるようになります。

曲線の場合は線の太さが1ピクセルでも描けるようです。下は1ピクセルの点線の例です。

他にもこのようにフォントを点線でかたどることもできるようになります。

以上、点線のまとめです。Illustratorに比べてしまうと、線が四角の線の場合に対応しきれていないという弱点はあるものの、Fireworksだけで済ませられるとまたスピードが上がりますね。

■ちなみに線を線として使わず、どうして高さ1pxの長方形を線として使うかというと、線の長さを変えると見た目が崩れやすいからです。だいたい変更するときはパス選択ツールで長方形のうちの2つの角を指定して、キーボードで移動しています(マウスだと吸着しないで平気で小数点以下のピクセル指定ができてしまうので。