細かい破線の作り方

質問

ここのページのように、細かい破線をイラストレーターCSで作りたいと思いいろいろ試してみましたがどうしてもできませんでした。。。↓（会社概要、お客様の信頼に応えるために、などの項目の下にある2行ほどの説明の下についている破線です。）

http://www.tokiomarine-nichido.co.jp/company/index.html

自分でイラレでつくってウェブ用に保存してブラウザでみると影のようなものがついていたり、まばらに表示されたり、、、。作り方を教えて頂けると大変ありがたいです。

回答No.1

kaiwarepon · ベストアンサー

イラストレーター10を使用していますので若干ツール名が違うかも知れませんが。

環境設定----単位・取り消しで単位－一般をピクセルにします。
長方形ツールで幅3px高さ1pxの長方形を描き塗り・線ともに無しにします。
長方形ツールで1px四方の正方形を描き塗りを「WEBセーフRGB」でR→66・B→66・G→66ぐらいのグレーにします。
2つの図形を整列→オブジェクトの整列で縦・横センターで整列します。
WEB用に保存 GIF・透明部分にチェックを確認します
ちゃんと3×1pxの画像の中央部分に1pxのグレー部分が表示されている、
また、カラーテーブルがグレーと透明の2つだけならOK。
グレーの部分が2px分になっていたり、カラーテーブルに薄いグレーが追加されている場合はやり直し。
2つのオブジェクトをまとめて0.25pxほど左右どちらかに移動させて調整します。
うまくいかなければ移動量を調節してください。
WEB用に保存の「画像サイズ」タブでアンチエイリアスを切るとうまくいく場合があります。
目的通りになったら保存します。（とりあえずdot.gifとします）

<div style="background:url(dot.gif) center repeat-x;width:200px;height:10px;"></div>
等の指定で表示させます。
色の濃さやドットの間隔は適宜調整してください。

お礼

どうもありがとうございます！！無事出来ました！
御礼が遅くなってすみません、しばらくログインできなくて・・・。
大変助かりました。