Fireworksの開発が終了というニュースを聞きつけて、朝からびっくりしているところです。このまま使い続けるか、機能を代替できるものに移行するか、ブラウザベースで作っていくのかよく考えて進めていきたいですね。

さて、以前Fireworksで点線の囲みを作るまとめを載せてみましたが、Illustratorとの連携部分を加えて点線を作る方法を改めて紹介します。

1.テクスチャから点線を作る

Fireworksで点線を作る場合は線にストライプ系のテクスチャを入れることで、点線を作ることができます。

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

今度は縦の点線。[テクスチャ]の部分を[垂直線4]として、[テクスチャ]の比率を100%にします。

もっと違う点線を書く場合にはFireworks Texture Galleryがオススメ

点線の間隔を広くするときは、「Fireworks texture gallery」からテクスチャをダウンロードして使うと、色々な種類の点線を描くことができます。

Fireworksのテクスチャ用のファイルは黒い部分が色が塗られない部分で、白い部分を着色します。ダウンロードする際には、ここに気を付けると希望のテクスチャを探すのが早くなります。

2.ストロークオプションから点線を作る

ストロークオプションからも点線を作ることもできます。

他にも方法があります。ストロークオプションから点線を作ることもできます。
ストロークの種類から、[破線]→[点線]とクリックします。

3. 複雑な点線を作る

下のように着色部分と間隔をカスタマイズした長方形を作る場合は、次のようにします。

1. 矩形を選択します。

2. ストロークの種類をクリックして、[ストロークオプション]を選択します。

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

4. [オプション]のタブで破線の項目で[破線(シングル)]を選択。破線の項目の下にあるオン・オフで色が付くピクセル、付かないピクセルの値を変更します。

数値を変更してカーソルを他の場所に持って行くと、画面にプレビューが反映されます。

5.[OK]ボタンをクリック。

6. これで完成です。

上で示した例はこのようなストロークオプションで作っています。

他にもこのように曲線も点線にしたり、フォントをアウトライン化して点線でかたどることもできるようになります。

4. 角をキレイにするときは、Illustratorからペースト

ストロークオプションで点線を作ると、角が揃わないことがあります。
しかし、Illustratorから点線を作ってFireworksに貼り付けると、角がキレイなままペーストすることもできます。

通常だと角が揃っていなくて、もう一押し><

Fireworksで[編集]→[ベクトルとしてコピー]し、Illustratorに貼り付けて、間隔を整えます。

Fireworksにペーストすると、角がキレイに折り返して表示ができます。