Fireworksで点線をつくる

| コメント(1)

私がWebページのデザインラフ(デザインカンプ)をつくるときは、Fireworksを使っています。業界的にはPhotoshopでデザインしている方が多いと思うのですが、私は残念なくらいPhotoshopを使うことができません。ホントFireworksがなくなると死活問題です。。。

今回はFireworksでの点線の作り方をご紹介します。私はラインツールで実線を引いて、その実践にテクスチャを当てることで点線にしています。

ツールパレットの中にある「ラインツール」でキャンバス内に実線を引きます。今回は水平線を引きました。

先ほど引いた実線を選択します。プロパティパレットで、線の色や太さ(ピクセル数)など選択する部分に「テクスチャ」と書かれているプルダウンを選択してください。

あらかじめ様々なテクスチャが用意されていますが、先ほど引いた水平線に対し、Line-Vert(Winでは「垂直線」と表記)のテクスチャを当てます。
なお、垂直線に対してはLine-Horiz(Winでは「水平線」と表記)のテクスチャを当てます。

すると、さきほど引いた実線の水平線が点線になります。テクスチャの適用度(%)や色、太さを変えることで、点線のバリエーションも増えます。

  1. 色:#000000(黒)、太さ:1ピクセル、テクスチャ:Line-Vert2、適用度:100%
  2. 色:#000000(黒)、太さ:1ピクセル、テクスチャ:Line-Vert3、適用度:100%
  3. 色:#000000(黒)、太さ:2ピクセル、テクスチャ:Line-Vert2、適用度:100%
  4. 色:#000000(黒)、太さ:2ピクセル、テクスチャ:Line-Vert3、適用度:100%
  5. 色:#CC0000(赤)、太さ:2ピクセル、テクスチャ:Line-Vert2、適用度:100%
  6. 色:#CC0000(赤)、太さ:2ピクセル、テクスチャ:Line-Vert3、適用度:100%
  7. 色:#CC0000(赤)、太さ:2ピクセル、テクスチャ:Line-Vert2、適用度:70%
  8. 色:#CC0000(赤)、太さ:2ピクセル、テクスチャ:Line-Vert3、適用度:70%

「テクスチャの適用度」は100%にすると、選択した色と透明のキレイな点線になります。0%にするとまったくテクスチャが適応されていない状態になります。
また、テクスチャはあらかじめ用意されたものであけではなく、自分でつくることも可能です。「Fireworksの垂直線・水平線テクスチャ」のなかで、点線に使えるテクスチャをダウンロードできるようにしましたので、よろしければご覧ください。

コメント(1)

テキスチャをダウンロードさせてもらい、非常にありがたく
使わせてもらってます。

所でなのですが、オリジナルのテキスチャ数が多くなると
それを選択するとき、
「▼」を押して(スピードが遅い)選択するときに時間が
かかって仕方ないのですが、テキスチャを簡単に素早く
選択できる方法とかないでしょうか?

・Fireworks8
・テキスチャは、FireworksのTexturesフォルダに
 入れて使ってます(100個くらい)

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー