WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

みなさん、デザインで「点線」を使いたいときはどうしていますか？
実線ばかりのデザインの中に点線があると、少し柔らかさが出ますよね。
大変よく使うのですが、不便なことにphotoshopには「点線を描く」という機能がないのですよね…。
Illustratorにはあるのですが、点線を使うたびにわざわざIllustratorを開くのは面倒ですよね。
重くなるし(´A｀)

というわけで、photoshopで点線を描く方法をいくつかご紹介したいと思います！

パターンを利用する

レイヤー効果の一つに「パターンオーバーレイ」というのがありますよね。
模様をつけたい時に使うアレです。アレを利用します。

まず前準備として、斜め線のパターンを作っておきます。
斜め線パターンの作り方は、下のような図（白い■を斜めに配置したもの）を用意して画面を全選択（Ctrl＋A）、上のメニューから［編集］→［パターンを定義］といくと名前をつけられますので、それで登録したら作れます。

この時のキャンバス上の■の数が多いほど粗く、少ないほど細かい点線が作れます。

このパターンをそのまま普通にシェイプで使うと、斜め線の模様ができて便利なのですが、今回はこれを線に適用します。
幅と高さのどちらかが1pxの線を描いてみましょう。シェイプでOKです。
そしたら、その線シェイプに先ほど作ったパターンを使います。

私の手元には■の数がいろいろなパターンがあったので、いくつか作ってみました。

パターンの■の数が増えるほど、点線がざっくりしていきます。
同じ方法で、縦線も作れますよ。

もっと太い点線を作りたいときは、■を大きく作るとできます。
が、それだと果てしなくなってしまうので、斜め線ではなくボーダー（横縞）柄かストライプ（縦縞）柄のパターンを用意するといいですよ。
（先に斜め線をご紹介したのは、縦線・横線どちらも使えるからです）

シェイプを重ねて隠す

直線の点線なら上記のやり方でほぼいけますが、これが円になると上手くいきません。
そういう場合は少し無理矢理な方法を思いつきました（笑）

1. まず、円の線画を描きます。
   円の線画は、円をひとまわり小さい円で切り抜く方法で作りましょう。
2. 円が描けましたら、そこに細長い線シェイプを作り、円に対して中央寄せにします（縦でも横でもいいです）。
3. そして、この線をもとにフラッシュのような図を作ります。
   このとき、フラッシュは一つのシェイプレイヤーで作りましょう。
   シェイプの結合についてはこちらを参考にどうぞ。
4. フラッシュができたら、フラッシュのパスを全選択してコピー（Ctrl＋C）し、
5. 円シェイプに貼り付け（Ctrl+V）ましょう。
6. 最後にフラッシュのパスを「切り抜き」モードにします。

ちょっとずれてしまいましたが…点線の円のできあがりです。

ザラザラした点線を作る

もう1つ。規則的な点線ではなく、布に線を描いたようなザラザラした線の描き方もご紹介します。
ナチュラルテイストのデザインに合いますよ(*´∀｀)

これは簡単です。
四角でも丸でもいいのですが、基本的なシェイプを描いたらレイヤー効果→境界線を開き、描画モードを「ディザ合成」にします。
そうしたら不透明度を下げてみてください。

線がボロボロと途切れました。
点線というのか微妙ですが、これも結構使えるので試してみてくださいね。

アイデア次第で機能は補えます

WEBデザインは基本的にphotoshopを使うので、photoshopにない機能を使いたいときは他のツールを使うしかないときもあります。
が、photoshopで完結できたほうが効率が良いこともあるので、いろいろ試してみると楽になりますよ。
また何か思いついたらお伝えします～。