Photoshopで点線をすぐに描く方法

015

こんにちは、ながのです。
インターンシップ15日目です。今日を除くと残りあと1日半となりました。今日は引き続きサイトのバーツデザインと、別案件のバナー制作をしていました。

バナー制作では文字を目立たせることに四苦八苦してしまうのですが、自分が好む色のコントラストがだいたい同じことが原因かなと考えながら作業していました。微妙にくすんだ色が好きなので、ビビットな色を使う大胆さを身につけなければと思います。

今日はPhotoshopで作業していて見つけた、ちょっと地味なテクニックをご紹介します。

目次
・点線はお好きですか?
・Illustratorで点線を作る
・Photoshopで1pxの点線を作る
・点線の長方形を作る

 

点線はお好きですか?

突然ですが、点線はお好きですか?私は大好きです。実線よりも点線が好きで、気づいたら区切り線に点線を使っています。次にドット線も好きです。

Illustratorだけで作業する場合は好きなだけ点線を使っていましたが、Photoshopで作業すると点線を使う機会がぐんと減りました。Photoshopで点線を作るのってすごく面倒ですよね?私は1pxの鉛筆ツールで地道に描いたレイヤーを複製して、移動させて、レイヤーを統合させて、必要な長さの一つの画像にしていました。説明だけでも面倒なくらい地味に面倒な作業です。

1px幅限定ですが、簡単な方法を見つけました。一度準備しておけば、いつでも気軽に点線が描けます。点線の長方形も描けますよ。

 

Illustratorで点線を作る

基本的なことですが、まずIllustratorで点線を描く方法です。ペンツールで線を描いたあと、「ウィンドウ>線」で線オプションを表示します。この「破線」にチェックを入れると点線になります。

1222_01

線と間隔の数値も細かく指定できます。左上の点線だと端の間隔が不揃いなっていますが、これはココを選べばその下のように等間隔な点線になります。

Illustratorは、点(座標)とそれを結ぶ線で構成されるベクターデータなので、線の描写がとても簡単にできます。逆にPhotoshopはドットで画像を構成するビットマップデータなので、基本的に線というものがありません。塗りつぶされた点の集合なので、Illustratorのように線を描くことができないんですね。でも今回紹介する方法であれば1pxの点線ならすぐに描くことができます。

 

Photoshopで1pxの点線を作る

まずストライプのパターンを準備する必要があります。パターンの作成方法は以前ご紹介しているのでそちらをご覧ください。ストライプのサイズは点線にしたいサイズで作成してください。

1222_02

このストライプのパターンを使用します。

ラインツールで1pxの幅の線を作成します。線に見えますが、実際はすごく細長い塗りつぶされた長方形なんです。ここに、「レイヤースタイル>パターンオーバーレイ」でさきほどのストライプパターンを適応させます。長方形の塗りを消さないといけないので、レイヤーで「塗り」を0%にすればパターンだけが表示されるので、点線になります。

1222_00

点線になりました!
上がラインツールで描いた線で、下がパターンを適応したものになります。

 

点線の長方形を作る

この方法を応用して、塗りがなく点線の枠線だけの長方形を作ります。

「レイヤースタイル>境界線」で、塗り潰しタイプを「パターン」にして、さきほどと同じストライプのパターンを選びます。

1221_05

境界線のサイズは1pxです。
レイヤーで塗りを0%にすれば、点線の長方形ができます。

 

1222_04

できました!
線の幅が2px以上になると、ストライプの枠線になるので、ちゃんとした点線になるのは1pxだけの場合です。

 

使い道があるのかな?というくらい地味なワザですが、気づいたときはうれしかったのでご紹介しました。

では本日もありがとうございました!